Add filter function

client/src/components/instruments/FilterBar.vue

@@ -4,9 +4,9 @@
       <input
         class="filter-bar__search-input"
         type="text"
-        :value="searchText"
-        @input="debouncedUpdate"
         placeholder="Suchbegriff eingeben..."
+        v-model="searchQuery"
+        @input="updateSearch"
       />
       <SearchMagnifyingGlass class="filter-bar__search-icon"></SearchMagnifyingGlass>
       <!-- Font Awesome search icon as an example -->
@@ -21,43 +21,24 @@
 </template>
 
 <script setup lang="ts">
-import debounce from 'lodash/debounce';
-import { ref, watchEffect } from 'vue';
-import NoteIcon from '@/components/icons/NoteIcon.vue';
+import { ref } from 'vue';
 import PillRadioButtons from '@/components/ui/PillRadioButtons.vue';
-import SearchMagnifyingGlass from "@/components/icons/SearchMagnifyingGlass.vue";
+import SearchMagnifyingGlass from '@/components/icons/SearchMagnifyingGlass.vue';
 
-const props = defineProps({
-  searchText: {
-    type: String,
-    default: '',
-  },
-});
+const searchQuery = ref('');
+const emit = defineEmits(['update:filter']);
 
-const emit = defineEmits(['filter']);
+const updateSearch = () => {
+  emit('update:filter', searchQuery.value);
+};
 
 const languageOptions: Array<{ id: number; label: string }> = ref([
   { id: 1, label: 'De' },
   { id: 2, label: 'Fr' },
   { id: 3, label: 'En' },
 ]);
+
 const initialLanguage = languageOptions.value[0];
-
-const searchText = ref(props.searchText);
-
-watchEffect(() => {
-  searchText.value = props.searchText;
-});
-
-const updateSearchText = (searchText: string) => {
-  console.log('filter', searchText);
-  emit('filter', searchText);
-};
-
-const debouncedUpdate = debounce((event: Event) => {
-  const inputElement = event.target as HTMLInputElement;
-  updateSearchText(inputElement.value);
-}, 200);
 </script>
 
 <style scoped lang="scss">

client/src/components/instruments/FilterGroup.vue

@@ -49,11 +49,12 @@ export default defineComponent({
     FilterEntry,
   },
 
-  apollo: {
-    instrumentFilter: {
-      query: INSTRUMENT_FILTER_QUERY,
-    },
-  },
+  // TODO: Ramon: I think this code is not needed anymore
+  // apollo: {
+  //   instrumentFilter: {
+  //     query: INSTRUMENT_FILTER_QUERY,
+  //   },
+  // },
 
   data() {
     return {

client/src/pages/instrumentOverview.vue

@@ -10,8 +10,7 @@
       v-else
     />
     <div class="instrument-overview__list">
-      <FilterBar>
-      </FilterBar>
+      <FilterBar v-model:filter="searchText"></FilterBar>
       <router-link
         :to="{ name: 'instrument', params: { slug: instrument.slug } }"
         data-cy="instrument"
@@ -29,7 +28,7 @@ import InstrumentFilter from '@/components/instruments/InstrumentFilter.vue';
 import InstrumentEntry from '@/components/instruments/InstrumentEntry.vue';
 import INSTRUMENTS_QUERY from '@/graphql/gql/queries/instrumentsQuery.gql';
 import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';
-import FilterBar from "@/components/instruments/FilterBar.vue";
+import FilterBar from '@/components/instruments/FilterBar.vue';
 
 export default {
   components: {
@@ -71,12 +70,14 @@ export default {
       instrumentFilter: {
         currentFilter: '',
       },
+      searchText: '',
     };
   },
 
   computed: {
     filteredInstruments() {
-      return this.instruments.filter((i) => this.filter(i));
+      let instruments = this.instruments.filter((i) => this.filter(i));
+      return instruments.filter((i) => i.title.toLowerCase().includes(this.searchText.toLowerCase()));
     },
   },