make news page loading synchronous

components/Common/Meta.vue

@@ -6,17 +6,19 @@ Définit les balises meta de la page
 </template>
 
 <script setup lang="ts">
+import type { PropType } from 'vue'
+
 const props = defineProps({
   title: {
-    type: String,
+    type: String as PropType<string | (() => string)>,
     required: true,
   },
   description: {
-    type: String,
+    type: String as PropType<string | (() => string)>,
     required: true,
   },
   image: {
-    type: String,
+    type: String as PropType<string | (() => string) | null>,
     required: false,
     default: '/images/logos/opentalent/Logo_Opentalent-gris.png',
   },

components/News/Details.client.vue

@@ -15,22 +15,19 @@
       </v-row>
 
       <div>
-        <div v-if="pending">
-          <v-row class="justify-center progress">
-            <v-progress-circular indeterminate color="grey" />
-          </v-row>
-        </div>
-
-        <div v-else-if="newsItem !== null" class="news">
+        <div class="news">
           <CommonMeta
-            :title="() => newsItem.title"
-            :description="() => newsItem.leadText"
-            :image="() => newsItem.image"
+            :title="() => newsItem.title!"
+            :description="() => newsItem.leadText!"
+            :image="() => getImageUrl(newsItem.attachment)"
           />
 
           <v-row class="center-90 mb-12">
             <v-col cols="12" md="6">
-              <v-img :src="getImageUrl(newsItem.attachment)" cover />
+              <v-img
+                :src="getImageUrl(newsItem.attachment) ?? undefined"
+                cover
+              />
             </v-col>
 
             <v-col cols="12" md="6" class="d-flex flex-column justify-center">
@@ -58,7 +55,6 @@
               :href="newsItem.linkButton"
               target="_blank"
               class="btn-plus mb-12"
-              :text="true"
             >
               En savoir plus
             </v-btn>
@@ -98,13 +94,13 @@ import { useDisplay } from 'vuetify'
 import { parseISO, format } from 'date-fns'
 import { fr } from 'date-fns/locale'
 import type { ComputedRef } from 'vue'
-import { useEntityFetch } from '~/composables/data/useEntityFetch'
 import News from '~/models/Maestro/News'
+import { useEntityManager } from '~/composables/data/useEntityManager'
 
 const { mdAndUp, smAndDown } = useDisplay()
 
 const route = useRoute()
-const { fetch } = useEntityFetch()
+const { em } = useEntityManager()
 const config = useRuntimeConfig()
 
 const newsId: number = parseInt(route.params.id as string)
@@ -112,9 +108,10 @@ if (!newsId || isNaN(newsId)) {
   throw new Error('Missing or invalid id')
 }
 
-const { data: newsItem, pending } = fetch(News, newsId)
+// @ts-expect-error Until we can fix the typing of fetch
+const newsItem: Ref<News> = ref(await em.fetch(News, newsId))
 
-const getImageUrl = (attachment: string): string | null => {
+const getImageUrl = (attachment: string | null): string | null => {
   if (!attachment) {
     return null
   }
@@ -122,7 +119,7 @@ const getImageUrl = (attachment: string): string | null => {
 }
 
 const formattedPublicationDate: ComputedRef<string> = computed(() => {
-  if (pending.value || !newsItem.value) {
+  if (!newsItem.value || !newsItem.value.startPublication) {
     return ''
   }
 

models/Maestro/News.ts

@@ -1,5 +1,6 @@
 import { Uid, Str, Bool, Attr } from 'pinia-orm/dist/decorators'
 import ApiModel from '~/models/ApiModel'
+import type Tag from '~/models/Maestro/Tag'
 
 /**
  * Maestro Model : News
@@ -7,7 +8,7 @@ import ApiModel from '~/models/ApiModel'
  * @see https://gitlab.2iopenservice.com/opentalent/maestro/-/blob/master/src/Entity/News/News.php?ref_type=heads
  */
 export default class News extends ApiModel {
-  static entity = 'public/news'
+  static override entity = 'public/news'
 
   @Uid()
   declare id: number | string
@@ -67,7 +68,7 @@ export default class News extends ApiModel {
   declare subOptionsType: string | null
 
   @Attr([])
-  declare tags: string[]
+  declare tags: Tag[]
 
   @Str(null)
   declare linkButton: string