feat [front]: full movieCard

front/components/MainMovie.vue

@@ -1,65 +0,0 @@
-<template>
-  <div class="main-movie rounded border bg-white overflow-hidden shadow">
-    <img
-      class="main-movie__poster"
-      src="https://m.media-amazon.com/images/I/71bmNSxkw-L._AC_SY550_.jpg"
-    />
-    <div
-      class="main-movie__description flex flex-col justify-between p-8 space-y-5"
-    >
-      <div class="text-4xl">{{ title }}</div>
-      <div>
-        Durée :125 minutes<br />
-        Noir et blanc<br />
-        Pays :USA<br />
-        35mm . VOSTFR<br />
-        Année :1960<br />
-        Avec :Jack Lemmon, Shirley MacLaine, Fred MacMurray, Ray Walston<br />
-      </div>
-      <div class="text-3xl">
-        {{ formattedDate }}
-      </div>
-    </div>
-    <MovieDetailsModal />
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      title: "Harry Potter à l'école des sorciers",
-      date: new Date(2021, 7, 26, 20, 30),
-    }
-  },
-  computed: {
-    formattedDate() {
-      const date = this.date.toLocaleDateString("fr-FR", {
-        weekday: "long",
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-      })
-      const hour = this.date
-        .getHours()
-        .toLocaleString("fr-FR", { minimumIntegerDigits: 2 })
-      const minute = this.date
-        .getMinutes()
-        .toLocaleString("fr-FR", { minimumIntegerDigits: 2 })
-      const time = `${hour}h${minute}`
-
-      return `${date} à ${time}`
-    },
-  },
-}
-</script>
-
-<style>
-.main-movie {
-  @apply flex justify-between;
-}
-
-.main-movie__poster {
-  @apply w-72;
-}
-</style>

front/components/movieCard/full.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="card">
+    <header class="card-content is-flex">
+      <div>
+        <h3 class="title is-4 is-inline mr-4">{{ film.title }}</h3>
+        <div class="subtitle is-5 is-inline">{{ film.director }}</div>
+        <div class="field is-grouped is-grouped-multiline mt-4">
+          <div v-for="(tag, index) of headerTags" :key="index" class="control">
+            <div class="tags has-addons">
+              <span v-if="tag.label" class="tag">{{ tag.label }}</span>
+              <span class="tag is-primary">{{ tag.value }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <ButtonIcon
+        label="Bande-annonce"
+        icon="ri-play-circle-fill"
+        class="is-primary is-outlined ml-auto"
+      />
+    </header>
+    <div class="is-flex">
+      <div
+        class="poster-container"
+        :style="{ '--poster-url': `url(${film.posterLink})` }"
+      >
+        <figure class="image my-auto">
+          <img :src="film.posterLink" alt="Affiche du film" />
+        </figure>
+      </div>
+      <div class="card-content">
+        <div class="content">
+          <p class="block">
+            <span class="has-text-weight-bold">Acteurs :</span>
+            {{ film.actors.join(", ") }}
+          </p>
+          <p class="block">
+            <span class="has-text-weight-bold">Synopsis :</span>
+            {{ film.synopsis }}
+          </p>
+          <!-- TODO additional info about partnership etc -->
+        </div>
+      </div>
+    </div>
+    <footer class="card-content is-flex">
+      <div class="buttons">
+        <template v-if="isPast">
+          <ButtonIcon
+            label="Lire notre analyse"
+            icon="ri-double-quotes-l"
+            class="is-outlined is-primary"
+          />
+        </template>
+        <template v-else>
+          <ButtonIcon
+            label="Événement Facebook"
+            icon="ri-facebook-box-fill"
+            class="is-outlined is-primary"
+          />
+          <ButtonIcon
+            label="Ajouter au calendrier"
+            icon="ri-calendar-event-fill"
+            class="is-outlined is-primary"
+          />
+        </template>
+      </div>
+      <div class="ml-auto title is-4">
+        {{ film.projectionDate }}
+      </div>
+    </footer>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Film } from "~/composables/types"
+import { PropType } from "@vue/runtime-core"
+
+const props = defineProps({
+  film: { type: Object as PropType<Film>, required: true },
+})
+const isPast = 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 },
+])
+</script>
+
+<style scoped lang="sass">
+header
+  border-bottom: $grey-lightest 1px solid
+footer
+  border-top: $grey-lightest 1px solid
+  .buttons
+    margin-bottom: 0
+    .button
+      margin-bottom: 0
+
+.poster-container
+  display: flex
+  flex-shrink: 0
+  position: relative
+  width: 200px
+  overflow: hidden
+  &::before
+    content: ''
+    position: absolute
+    top: 0
+    right: 0
+    bottom: 0
+    left: 0
+    filter: blur(15px)
+    background-image: var(--poster-url)
+    background-size: cover
+    background-position: center
+    margin: -10px
+  .image img
+    object-fit: contain
+</style>

front/css/app.sass

@@ -10,6 +10,7 @@
 @import "bulma/sass/elements/button"
 @import "bulma/sass/elements/container"
 @import "bulma/sass/elements/image"
+@import "bulma/sass/elements/other"
 @import "bulma/sass/elements/tag"
 @import "bulma/sass/elements/title"
 @import "bulma/sass/form/_all"

front/pages/index.vue

@@ -1,11 +1,16 @@
 <template>
   <section class="section">
     <h2 class="title">La semaine prochaine</h2>
-    <MainMovie />
+    <MovieCardFull :film="nextFilm" />
   </section>
   <section class="section">
     <h2 class="title">Et après</h2>
   </section>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { Film } from "~/composables/types"
+
+const nextFilm = ref<Film>()
+nextFilm.value = (await apiGet(`films/1/`)).data.value
+</script>

front/plugins/ohVueIcons.ts

@@ -1,12 +1,23 @@
 import { OhVueIcon, addIcons } from "oh-vue-icons"
 import {
+  RiCalendarEventFill,
+  RiDoubleQuotesL,
   RiFacebookBoxFill,
   RiInstagramFill,
   RiMailFill,
   RiMapPin2Fill,
+  RiPlayCircleFill,
 } from "oh-vue-icons/icons"
 
-addIcons(RiFacebookBoxFill, RiInstagramFill, RiMailFill, RiMapPin2Fill)
+addIcons(
+  RiCalendarEventFill,
+  RiDoubleQuotesL,
+  RiFacebookBoxFill,
+  RiInstagramFill,
+  RiMailFill,
+  RiMapPin2Fill,
+  RiPlayCircleFill
+)
 
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.component("v-icon", OhVueIcon)