feat(search): implement search bar on sources filter

src/components/FiltersComponent.vue

@@ -6,19 +6,38 @@ import ChevronUpIcon from '@/components/icons/ChevronUp.vue';
 import SDGSelector from '@/components/dropdowns/SDGSelector.vue';
 import SourcesSelector from '@/components/dropdowns/SourcesSelector.vue';
 import { useFiltersStore } from '@/stores/filters';
+import { useSourcesStore } from '@/stores/sources';
 import { ref, watch, toRefs } from 'vue';
 
 const props = defineProps<{
   shouldClose?: boolean;
 }>();
 
+const sourcesStore = useSourcesStore();
+const availableSources = ref(sourcesStore.sourcesList);
 const { shouldClose } = toRefs(props);
+
+const handleSearchFilters = (event: Event) => {
+  if (!(event.target instanceof HTMLInputElement))
+    availableSources.value = sourcesStore.sourcesList;
+  const target = event.target as HTMLInputElement;
+  const value = target.value;
+  availableSources.value = sourcesStore.sourcesList.filter((source) =>
+    source.translated.toLowerCase().includes(value.toLowerCase())
+  );
+};
+
 const hideFilters = ref(false);
 watch(shouldClose, (close) => {
   if (close) {
     hideFilters.value = close;
   }
 });
+
+watch(sourcesStore, () => {
+  availableSources.value = sourcesStore.sourcesList;
+});
+
 const filters = useFiltersStore();
 const toggleFilters = () => (hideFilters.value = !hideFilters.value);
 
@@ -61,7 +80,7 @@ const clearFilters = () => {
           bgColor="primary"
           :key="filter"
           v-for="filter in filters.sdgFilters"
-          :content="filter"
+          :content="filter.toString()"
         >
           <template #actions>
             <span class="is-clickable" @click="filters.handleSdgFilterChange(filter)"> x </span>
@@ -75,12 +94,17 @@ const clearFilters = () => {
     <span class="has-text-grey">{{ $t('noFiltersSelected') }}</span>
   </p>
   <div :class="{ hide: hideFilters }" class="pr-5 filters">
-    <input class="input" type="text" :placeholder="$t('searchBarPlaceholder')" />
+    <input
+      class="input"
+      type="text"
+      :placeholder="$t('searchBarPlaceholder')"
+      @keyup="handleSearchFilters"
+    />
 
     <details class="filter-section" open>
       <summary>{{ $t('sources') }}</summary>
       <div class="filter-options">
-        <SourcesSelector />
+        <SourcesSelector :availableSources="availableSources" />
       </div>
     </details>
     <details class="filter-section" open>

src/components/dropdowns/SourcesSelector.vue

@@ -1,20 +1,18 @@
 <script setup lang="ts">
 import CheckboxCompnentVue from '@/components/CheckboxCompnent.vue';
-import { useSourcesStore } from '@/stores/sources';
 import { useFiltersStore } from '@/stores/filters';
 
-defineProps<{ isUp?: boolean; context?: string }>();
-const sources = useSourcesStore();
+defineProps<{ isUp?: boolean; context?: string; availableSources: Record<string, any>[] }>();
 const filters = useFiltersStore();
 </script>
 <template>
-  <div :key="source.name" class="my-2" v-for="source in sources.sourcesList">
+  <div :key="source.name" class="my-2" v-for="source in availableSources">
     <CheckboxCompnentVue
       :name="source.name"
       :id="source.name"
       v-model="filters.sourcesFilters"
       :value="source.name"
-      :label="`${$t(`corpus.${source.name}`, `${source.name.replace('-', ' ')}`)}`"
+      :label="source.translated"
       :checked="filters.sourcesFilters.includes(source.name)"
       isCapitalized
     >

src/localisation/i18n.ts

@@ -10,7 +10,8 @@ const i18n = createI18n({
   globalInjection: true,
   legacy: false,
   sync: true,
-  missingWarn: import.meta.env.NODE_ENV === 'dev' ? true : false
+  missingWarn: false,
+  fallbackWarn: false
 });
 
 export default i18n;

src/stores/sources.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import { getAxios } from '@/utils/fetch';
 import { type Ref, ref } from 'vue';
 import type { Corpus, ReducedCorpus } from '@/types';
+import i18n from '@/localisation/i18n';
 
 export const useSourcesStore = defineStore('sources', () => {
   const sourcesList = ref<ReducedCorpus[]>([]);
@@ -20,7 +21,11 @@ export const useSourcesStore = defineStore('sources', () => {
         if (existingCorpus >= 0) {
           return acc;
         }
-        return [...acc, curr];
+        const translated = {
+          ...curr,
+          translated: i18n.global.t(`corpus.${curr.name}`, `${curr.name.replace('-', ' ')}`)
+        };
+        return [...acc, translated];
       }, [] as ReducedCorpus[]);
 
       mergedCorpusByLang.sort((a, b) => a.name.localeCompare(b.name));

src/types/index.ts

@@ -37,6 +37,7 @@ export interface ReducedCorpus {
   name: string;
   model: string;
   corpus: string;
+  translated: string;
 }
 
 export interface ErrorDetails {