More human readable fao ok name

src/components/FiltersComponent.vue

@@ -24,7 +24,7 @@ const handleSearchFilters = (event: Event) => {
   const target = event.target as HTMLInputElement;
   const value = target.value;
   availableSources.value = sourcesStore.sourcesList.filter((source) =>
-    source.translated.toLowerCase().includes(value.toLowerCase())
+    source.name.toLowerCase().includes(value.toLowerCase())
   );
 };
 
@@ -79,7 +79,7 @@ const clearFilters = () => {
       <div class="is-flex flex-wrap selection mb-1" v-if="filters.sourcesFilters.length">
         <p>{{ $t('sources') }}{{ $t(':') }}</p>
         <GenericPillComponent
-          class="mx-1 is-capitalized"
+          class="mx-1 is-capitalized mt-1"
           bgColor="primary"
           :key="filter"
           v-for="filter in filters.sourcesFilters"
@@ -93,7 +93,7 @@ const clearFilters = () => {
       <div class="is-flex flex-wrap selection mb-1" v-if="filters.sdgFilters.length">
         <p>{{ $t('sdgsAcronym') }}{{ $t(':') }}</p>
         <GenericPillComponent
-          class="mx-1"
+          class="mx-1 mt-1"
           bgColor="primary"
           :key="filter"
           v-for="filter in filters.sdgFilters"

src/components/GenericPillComponent.vue

@@ -4,7 +4,7 @@ defineProps<{ content: string; bgColor: string }>();
 
 <template>
   <div class="pill" :style="{ 'background-color': `var(--${bgColor})` }">
-    {{ content }}
+    {{ content.length > 20 ? content.slice(0, 17) + '...' : content }}
     <slot name="actions"> </slot>
   </div>
 </template>

src/components/dropdowns/SourcesSelector.vue

@@ -12,7 +12,7 @@ const filters = useFiltersStore();
       :id="source.name"
       v-model="filters.sourcesFilters"
       :value="source.name"
-      :label="source.translated"
+      :label="$t(`corpus.${source.name}`, `${source.name.replace('-', ' ')}`)"
       :checked="filters.sourcesFilters.includes(source.name)"
       isCapitalized
     >

src/localisation/en.ts

@@ -35,6 +35,7 @@ export const en = {
     'press-books': 'Pressbooks',
     ted: 'TED',
     uved: 'UVED',
+    'fao-open-knowledge': 'Food and Agriculture Organization of the United Nations',
     wikipedia: 'Wikipedia'
   },
   download: 'Download',

src/localisation/fr.ts

@@ -35,6 +35,7 @@ export const fr = {
     'press-books': 'Pressbooks',
     ted: 'TED',
     uved: 'UVED',
+    'fao-open-knowledge': "Organisation des Nations unies pour l'alimentation et l'agriculture",
     wikipedia: 'Wikipedia'
   },
   download: 'Télécharger',

src/stores/sources.ts

@@ -2,7 +2,6 @@ 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[]>([]);
@@ -21,11 +20,8 @@ export const useSourcesStore = defineStore('sources', () => {
         if (existingCorpus >= 0) {
           return acc;
         }
-        const translated = {
-          ...curr,
-          translated: i18n.global.t(`corpus.${curr.name}`, `${curr.name.replace('-', ' ')}`)
-        };
-        return [...acc, translated];
+
+        return [...acc, curr];
       }, [] as ReducedCorpus[]);
 
       mergedCorpusByLang.sort((a, b) => a.name.localeCompare(b.name));

src/types/index.ts

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