feat [front]: ensure full card prettiness with uncomplete data

front/components/movieCard/full.vue

@@ -31,17 +31,17 @@
           class="poster-container"
           :style="{ '--poster-url': `url(${film.posterLink})` }"
         >
-          <figure class="image my-auto">
+          <figure class="image m-auto">
             <img :src="film.posterLink" alt="Affiche du film" />
           </figure>
         </div>
         <div class="card-content">
           <div class="content">
-            <p class="block">
+            <p v-if="film.actors && film.actors.length" class="block">
               <span class="has-text-weight-bold">Acteurs :</span>
               {{ film.actors.join(", ") }}
             </p>
-            <p class="block">
+            <p v-if="film.synopsis" class="block">
               <span class="has-text-weight-bold">Synopsis :</span>
               {{ film.synopsis }}
             </p>
@@ -60,11 +60,13 @@
           </template>
           <template v-else>
             <ButtonIcon
+              v-if="film.facebookEventLink"
               label="Événement Facebook"
               icon="ri-facebook-box-fill"
               class="is-outlined is-primary"
             />
             <ButtonIcon
+              v-if="film.icsDownload"
               label="Ajouter au calendrier"
               icon="ri-calendar-event-fill"
               class="is-outlined is-primary"
@@ -93,19 +95,31 @@ const props = defineProps({
   film: { type: Object as PropType<Film>, required: true },
 })
 const isPast = ref<boolean>(false)
+const showTrailerModal = ref<boolean>(false)
 
-const headerTags = ref<{ label?: string; value: string }[]>([
-  {
-    value: film.value.isInColor ? "Couleur" : "Noir et blanc",
-  },
-  { label: "Langue", value: film.value.languageSubtitles },
-  {
-    label: "Durée",
-    value: film.value.duration,
-  },
-  { label: "Sortie", value: film.value.releaseYear.toString() },
-  { label: "Pays", value: film.value.originCountry },
-])
+function generateTags(film: Film) {
+  const res = []
+  if ("isInColor" in film && film.isInColor != null)
+    res.push({
+      value: film.isInColor ? "Couleur" : "Noir et blanc",
+    })
+  if (film?.languageSubtitle)
+    res.push({ label: "Langue", value: film.languageSubtitles })
+  if (film?.duration)
+    res.push({
+      label: "Durée",
+      value: film.duration,
+    })
+  if (film?.releaseYear)
+    res.push({ label: "Sortie", value: film.releaseYear.toString() })
+  if (film?.originCountry)
+    res.push({ label: "Pays", value: film.originCountry })
+  return res
+}
+
+const headerTags = computed<{ label?: string; value: string }[]>(() =>
+  generateTags(props.film)
+)
 </script>
 
 <style scoped lang="sass">