From fc0cc211eb88c847a847107413807b6dc45f5edb Mon Sep 17 00:00:00 2001
From: Stephane MEAUDRE <smeaudre@kaliop.com>
Date: Fri, 22 Mar 2024 08:46:48 +0100
Subject: [PATCH] Pages + fix footer + header

---
 front/components/Layout/FooterBar.vue         | 30 ++++---
 front/components/Layout/HeaderBar.vue         | 12 +--
 front/composables/menu/useFooterpagesitems.ts |  5 +-
 .../constellation/[[id]]/[[urlName]].vue      |  6 ++
 front/pages/pages/[uid].vue                   | 90 ++++++++++++++++++-
 front/types/index.d.ts                        | 11 ++-
 6 files changed, 121 insertions(+), 33 deletions(-)

diff --git a/front/components/Layout/FooterBar.vue b/front/components/Layout/FooterBar.vue
index 093fcc0..ff415df 100644
--- a/front/components/Layout/FooterBar.vue
+++ b/front/components/Layout/FooterBar.vue
@@ -43,18 +43,18 @@
                 v-for="(nav, index) in footerPageitems"
                 :key="index"
                 class="text-primary mx-3 mb-3 font-weight-bold"
-                :to="nav.path"
+                :to="{name: nav.path }"
               >
-                <span class="text-grey">{{ nav.text }}</span>
+                <span class="text-grey">{{ $t(nav.text) }}</span>
               </NuxtLink>
 
               <NuxtLink
-                v-for="nav in posts"
+                v-for="nav in document"
                 :key="nav.id"
                 class="text-primary mx-3 mb-3 font-weight-bold"
-                :to="`pages/${nav.uid}`"
+                :to="`/pages/${nav.uid}`"
               >
-                <span class="text-grey">{{ asText(nav.data.title) }}</span>
+                <span class="text-grey">{{ asText(nav?.data?.title) }}</span>
               </NuxtLink>
             </div>
           </v-col>
@@ -69,7 +69,7 @@
 </template>
 
 <script setup lang="ts">
-import { type UnwrapRef, watch } from "vue";
+import { type UnwrapRef } from "vue";
 
 const { locale } = useI18n();
 const { client, asText } = usePrismic();
@@ -78,10 +78,15 @@ const { socialNetworks } = useSocialNetworks();
 const { footerPageitems } = useFooterpagesitems();
 const prismicLocale: Ref<UnwrapRef<string>> = ref(useLanguagesCode().languagesCodes.filter((item) => locale.value === item.locale)[0].prismic);
 
-// TODO : reload prismic data when locale is changed
-const { data: posts, refresh } = await useAsyncData(
-  'posts',
-  () => client.getAllByType('editorial_page',{ lang: prismicLocale.value } ),
+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,
@@ -89,10 +94,7 @@ const { data: posts, refresh } = await useAsyncData(
     ]
   }
 );
-watch(locale, async (newLocale) => {
-  prismicLocale.value = newLocale;
-  await refresh();
-});
+
 
 const openSocialNetwork = (link: string): void => {
   window.open(link, '_blank')
diff --git a/front/components/Layout/HeaderBar.vue b/front/components/Layout/HeaderBar.vue
index f9a08be..a3a23cb 100644
--- a/front/components/Layout/HeaderBar.vue
+++ b/front/components/Layout/HeaderBar.vue
@@ -6,7 +6,7 @@
   >
     <v-toolbar color="secondary">
       <NuxtLink
-        :to="{ name: 'index'}"
+        to="/"
         :title="t('layout.homeAccess')"
       >
         <v-avatar class="mx-2">
@@ -28,9 +28,9 @@
           :key="index"
           class="text-none"
         >
-          <router-link :to="menuItem.path">
+          <NuxtLink :to="{name: menuItem.path}">
             <span class="text-grey">{{ $t(menuItem.text) }}</span>
-          </router-link>
+          </NuxtLink>
         </v-btn>
       </div>
 
@@ -153,12 +153,6 @@ const toggleInputSearch = () => {
 /**
  * Run WS and set data
  */
-watch(inputSearchItems, (newSearch: string) => {
-  setTimeout(async () => {
-    /*results.value =*/ await useSearchRequest(newSearch);
-  }, 200);
-});
-
 </script>
 
 
diff --git a/front/composables/menu/useFooterpagesitems.ts b/front/composables/menu/useFooterpagesitems.ts
index 58d1d0d..92ee7ec 100644
--- a/front/composables/menu/useFooterpagesitems.ts
+++ b/front/composables/menu/useFooterpagesitems.ts
@@ -1,14 +1,13 @@
 export const useFooterpagesitems = () => {
-  const { t } = useI18n();
   return {
     footerPageitems: [
       {
         path: 'index',
-        text: t('home.title')
+        text: 'home.title'
       },
       {
         path: 'contact',
-        text: t('contact.title')
+        text: 'contact.title'
       }
     ]
   }
diff --git a/front/pages/constellation/[[id]]/[[urlName]].vue b/front/pages/constellation/[[id]]/[[urlName]].vue
index 706cd5a..0c1d62e 100644
--- a/front/pages/constellation/[[id]]/[[urlName]].vue
+++ b/front/pages/constellation/[[id]]/[[urlName]].vue
@@ -1,6 +1,12 @@
 <script setup lang="ts">
+import {definePageMeta} from "#imports";
+
 const route = useRoute()
 const { id, urlName } = route.params;
+
+definePageMeta({
+  layout: 'page'
+})
 </script>
 
 <template>
diff --git a/front/pages/pages/[uid].vue b/front/pages/pages/[uid].vue
index 85b2eb9..4e223ac 100644
--- a/front/pages/pages/[uid].vue
+++ b/front/pages/pages/[uid].vue
@@ -1,12 +1,100 @@
 <script setup lang="ts">
+import type {UnwrapRef} from "vue";
+import type {RouteParamValue} from "vue-router";
 
 definePageMeta({
   layout: 'page'
 });
+
+const Message = defineAsyncComponent(() => import('@/components/Layout/Message.vue'));
+const TitlePage = defineAsyncComponent(() => import('@/components/Content/TitlePage.vue'));
+
+const { locale } = useI18n();
+const route = useRoute()
+const uid: ComputedRef<string | RouteParamValue[]> = computed(() => route.params.uid);
+
+const { client, asText, asDate } = usePrismic();
+const prismicLocale: Ref<UnwrapRef<string>> = ref(useLanguagesCode().languagesCodes.filter((item) => locale.value === item.locale)[0].prismic);
+
+const store = useMessageStore();
+const { type, message } = storeToRefs(store);
+type.value = 'warning';
+message.value = `Please wait while loading data...`;
+
+const {
+  data: document,
+  pending,
+  error
+} = await useLazyAsyncData( 'page', async () => {
+    const document = client.getByUID('editorial_page', (uid.value as string), {lang: prismicLocale.value});
+    if (document) {
+      return document;
+    } else {
+      throw createError({ statusCode: 404, message: "Page not found" });
+    }
+}, {
+  watch: [
+    uid,
+    locale,
+    prismicLocale
+  ]
+});
+
+if (null !== error.value) {
+  pending.value = true;
+  type.value = 'error';
+  message.value = `Error while loading page: ${error.value?.message}`;
+}
+applySeo({
+  title: asText(document?.value?.data.seo_title),
+  description: asText(document?.value?.data.seo_description),
+  image: "@/assets/images/logos/astro_otter_200-200.png",
+  fullUrl: 'https://change-it.com'
+})
+
+watch(locale, () => refreshNuxtData());
+
 </script>
 
 <template>
-  <div>Prismic page</div>
+  <transition v-if="pending">
+    <Message />
+  </transition>
+  <transition
+    v-else-if="document"
+    name="fade"
+  >
+    <v-sheet
+      elevation="0"
+      class="landing-warpper"
+      color="transparent"
+    >
+      <TitlePage :title="asText(document.data.title)" />
+      <v-container class="text-justify">
+        <v-sheet
+          elevation="0"
+          class="mx-auto landing-warpper"
+          rounded
+          color="background"
+        >
+          <v-sheet
+            class="pa-3"
+            elevation="0"
+            color="transparent"
+          >
+            <v-container>
+              <prismic-rich-text
+                class="richtext"
+                :field="document.data.content"
+              />
+              <v-divider />
+              <p>{{ asDate(document.data?.last_update) }}</p>
+            </v-container>
+          </v-sheet>
+        </v-sheet>
+      </v-container>
+    </v-sheet>
+  </transition>
 </template>
 
 <style scoped>
diff --git a/front/types/index.d.ts b/front/types/index.d.ts
index f740000..d2ed92e 100644
--- a/front/types/index.d.ts
+++ b/front/types/index.d.ts
@@ -81,24 +81,23 @@ declare global {
     context: string
   }
 
-  interface SearchConstellationItem {
+  interface SearchItem {
     id: string,
     urlName?: string,
+    context: string
+  }
+  interface SearchConstellationItem extends SearchItem {
     alt: string,
     generic?: string,
     cover?: string,
-    context: string
   }
 
-  interface SearchDsoItem {
-    id: string,
-    urlName: string,
+  interface SearchDsoItem extends SearchItem {
     fullNameAlt: string,
     desigs: string[],
     otherDesigs: string[],
     typeLabel: string,
     constellation?: SearchConstellationItem,
-    context: string
   }
 }