Fix changing locale for prismic data

front/components/Content/TitlePage.vue

@@ -1,11 +1,12 @@
-<script setup>
-defineProps({
-  title: {
-    type: String,
-    default: ''
-  }
-});
+<script setup lang="ts">
+export interface Props {
+  title?: string
+}
 
+const props = withDefaults(defineProps<Props>(), {
+  title: ''
+})
+const { title } = toRefs(props)
 const { isMobile } = useDevice();
 </script>
 <template>

front/components/Home/SearchAutocomplete.vue

@@ -1,19 +1,27 @@
 <script setup lang="ts">
-import {defineAsyncComponent, ref, watch} from "vue";
+import {defineAsyncComponent, ref} from "vue";
+import type { Ref } from 'vue'
 
-const inputSearchItems = ref<string>('');
+const inputSearchItems: Ref<string> = ref('');
+const dsoList: SearchDsoItem[] = reactive([]);
+const constellationsList: SearchConstellationItem[] = reactive([]);
 
-const dsoList = ref<SearchDsoItem[]>([]);
-const constellationsList = ref<SearchConstellationItem[]>([]);
+const { data, pending } = await useSearchRequest(inputSearchItems);
+const isDso = (item: SearchDsoItem | SearchConstellationItem ): boolean => {
+  switch(item.context) {
+    case 'App\\Model\\Dso': return true;
+    case 'App\\Model\\Constellation': return false;
+    default: return false;
+  }
+}
 
-const REGEX: RegExp = new RegExp('/^[a-zA-Z0-9&\\-_;: ]+$/gm');
-
-watch(inputSearchItems, (newSearch: string) => {
-  setTimeout(async () => {
-    if (2 <= newSearch.length && !REGEX.test(newSearch)) {
-      await useSearchRequest(newSearch);
-    }
-  }, 200);
+watchEffect(async () => {
+  dsoList.length = 0;
+  constellationsList.length = 0;
+  data.value?.forEach((item: SearchDsoItem | SearchConstellationItem) => {
+    if (isDso(item)) dsoList.push(item as SearchDsoItem);
+    else constellationsList.push(item as SearchConstellationItem);
+  });
 });
 
 const SearchListCard = defineAsyncComponent(() => import("@/components/Items/SearchListCard.vue"));
@@ -61,7 +69,9 @@ const SearchListCard = defineAsyncComponent(() => import("@/components/Items/Sea
               append-inner-icon="mdi-magnify"
               clearable
             />
+            <div v-if="true === pending">Load results...</div>
             <SearchListCard
+              v-else
               :dsos="dsoList"
               :constellations="constellationsList"
             />

front/components/Layout/FooterBar.vue

@@ -81,20 +81,21 @@ const prismicLocale: Ref<UnwrapRef<string>> = ref(useLanguagesCode().languagesCo
 const { data: document } = await useLazyAsyncData(
   'document',
   async () => {
-    console.log(`Lang query prismic: ${prismicLocale.value}`)
     const document = client.getAllByType('editorial_page', {lang: prismicLocale.value})
     if (document) {
       return document;
     }
   },
   {
     watch: [
-      locale,
       prismicLocale
     ]
   }
 );
 
+watch(locale, (newLocale) => {
+  prismicLocale.value = useLanguagesCode().languagesCodes.filter((item) => newLocale === item.locale)[0].prismic
+})
 
 const openSocialNetwork = (link: string): void => {
   window.open(link, '_blank')

front/composables/api/search/useSearchRequest.ts

@@ -1,19 +1,11 @@
-export const useSearchRequest = async (searchTerms: string): Promise<any> => {
+export const useSearchRequest = async (searchTerms: Ref<string>): Promise<any> => {
   const endpoint: string = '/search';
-
-  const {data, pending, error, status} = useAsyncData(
-
-    () => useCustomFetch<[SearchDsoItem|SearchConstellationItem]>(endpoint, {
-        method: 'POST',
-        body: {
-          terms: searchTerms
-        }
-      }
-    )
+  return useCustomFetch<[SearchDsoItem | SearchConstellationItem]>(endpoint, {
+      method: 'POST',
+      body: {
+        terms: searchTerms
+      },
+      watch: [searchTerms]
+    }
   );
-
-  console.log(status.value);
-  console.log(data.value);
-
-  return {data, pending, error, status};
 }

front/composables/api/useCustomFetch.ts

@@ -4,7 +4,7 @@ export function useCustomFetch<T>(
   url: string | (() => string),
   options: UseFetchOptions<T> = {}
 ) {
-  const { locale  } = useI18n();
+  const { locale } = useI18n();
   return useFetch(url, {
     ...options,
     $fetch: useNuxtApp().$customFetch(locale.value),

front/i18n/locales/en.json

@@ -16,7 +16,8 @@
     "languageSwitcher": "Change lang",
     "btnConstellationTo": "Access to to constellation {constellation} page",
     "notifications": "Notifications",
-    "delete_notifications": "Delete all"
+    "delete_notifications": "Delete all",
+    "load": "Please wait while loading data…"
   },
   "languages": {
     "en": "English",

front/i18n/locales/fr.json

@@ -16,7 +16,8 @@
     "languageSwitcher": "Changer de langue",
     "btnConstellationTo": "Accès à la page de la constellation {constellation}",
     "notifications": "Notifications",
-    "delete_notifications": "Tout supprimer"
+    "delete_notifications": "Tout supprimer",
+    "load": "Veuillez patienter durant le chargement des données…"
   },
   "languages": {
     "en": "Anglais",

front/middleware/auth.global.ts

@@ -15,8 +15,7 @@ export default defineNuxtRouteMiddleware(async (): Promise<void> => {
     if (expireTokenDate && expireTokenDate > timestamp) {
       await authStore.fetchRefreshToken(authStore.accessToken);
     }
-
   } else {
-    await authStore.fetchLogin(process.env.NUXT_API_LOGIN, process.env.NUXT_API_PWD);
+    await authStore.fetchLogin(config.apiLogin, config.apiPwd);
   }
 });

front/pages/pages/[uid].vue

@@ -9,7 +9,7 @@ definePageMeta({
 const Message = defineAsyncComponent(() => import('@/components/Layout/Message.vue'));
 const TitlePage = defineAsyncComponent(() => import('@/components/Content/TitlePage.vue'));
 
-const { locale } = useI18n();
+const { t, locale } = useI18n();
 const route = useRoute()
 const uid: ComputedRef<string | RouteParamValue[]> = computed(() => route.params.uid);
 
@@ -19,13 +19,15 @@ const prismicLocale: Ref<UnwrapRef<string>> = ref(useLanguagesCode().languagesCo
 const store = useMessageStore();
 const { type, message } = storeToRefs(store);
 type.value = 'warning';
-message.value = `Please wait while loading data...`;
+message.value = t('layout.load');
 
 const {
   data: document,
   pending,
-  error
+  error,
+  refresh
 } = await useLazyAsyncData( 'page', async () => {
+  console.log(`Prismic lang: ${prismicLocale.value}`)
     const document = client.getByUID('editorial_page', (uid.value as string), {lang: prismicLocale.value});
     if (document) {
       return document;
@@ -35,7 +37,6 @@ const {
 }, {
   watch: [
     uid,
-    locale,
     prismicLocale
   ]
 });
@@ -52,7 +53,10 @@ applySeo({
   fullUrl: 'https://change-it.com'
 })
 
-watch(locale, () => refreshNuxtData());
+watch(locale, (newLocale) => {
+  prismicLocale.value = useLanguagesCode().languagesCodes.filter((item) => newLocale === item.locale)[0].prismic
+})
+
 
 </script>
 
@@ -88,7 +92,7 @@ watch(locale, () => refreshNuxtData());
                 :field="document.data.content"
               />
               <v-divider />
-              <p>{{ asDate(document.data?.last_update) }}</p>
+              <p>{{ document.data?.last_update }}</p>
             </v-container>
           </v-sheet>
         </v-sheet>