From 1704933a14201bd74fc7490ce617128cab22d868 Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Fri, 22 Jul 2022 00:48:54 +0200
Subject: [PATCH] feat [front]: small movie card

---
 front/components/buttonIcon.vue      |  17 +++-
 front/components/movieCard/short.vue | 138 +++++++++++++++++++++++++++
 2 files changed, 150 insertions(+), 5 deletions(-)
 create mode 100644 front/components/movieCard/short.vue

diff --git a/front/components/buttonIcon.vue b/front/components/buttonIcon.vue
index c40ec80..5de80ea 100644
--- a/front/components/buttonIcon.vue
+++ b/front/components/buttonIcon.vue
@@ -1,7 +1,11 @@
 <template>
-  <button class="button" :aria-label="label">
-    <v-icon :name="icon" class="mr-2" scale="0.83" />
-    <template v-if="!isShort">{{ label }}</template>
+  <button class="button" :class="{ short }" :aria-label="label">
+    <v-icon
+      :name="icon"
+      :class="short ? '' : 'mr-2'"
+      :scale="short ? 1 : 0.83"
+    />
+    <template v-if="!short">{{ label }}</template>
   </button>
 </template>
 
@@ -9,8 +13,11 @@
 defineProps({
   label: { type: String, required: true },
   icon: { type: String, default: null },
-  isShort: { type: Boolean, default: false },
+  short: { type: Boolean, default: false },
 })
 </script>
 
-<style scoped lang="sass"></style>
+<style scoped lang="sass">
+.button.short
+  margin: calc(1px - 0.5em) -1em
+</style>
diff --git a/front/components/movieCard/short.vue b/front/components/movieCard/short.vue
new file mode 100644
index 0000000..c9eebd5
--- /dev/null
+++ b/front/components/movieCard/short.vue
@@ -0,0 +1,138 @@
+<template>
+  <div v-if="film">
+    <div class="card movie-card">
+      <div class="is-flex">
+        <div
+          class="poster-container"
+          :style="{ '--poster-url': `url(${film.posterLink})` }"
+        >
+          <figure class="image m-auto">
+            <img :src="film.posterLink" alt="Affiche du film" />
+          </figure>
+        </div>
+        <div>
+          <div class="card-content">
+            <div>
+              <div class="is-flex movie-card-header">
+                <div>
+                  <h3 class="title is-5 mr-4">{{ film.title }}</h3>
+                  <div class="subtitle is-6">{{ film.director }}</div>
+                </div>
+                <ButtonIcon
+                  v-if="film.trailerLink"
+                  label="Bande-annonce"
+                  icon="ri-play-circle-fill"
+                  class="is-primary is-inverted is-small ml-auto"
+                  short
+                  @click="showTrailerModal = true"
+                />
+              </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>
+          </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-inverted is-small is-primary"
+                  short
+                />
+              </template>
+              <template v-else>
+                <a
+                  v-if="film.facebookEventLink"
+                  :href="film.facebookEventLink"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  <ButtonIcon
+                    label="Événement Facebook"
+                    icon="ri-facebook-box-fill"
+                    class="is-inverted is-small is-primary"
+                    short
+                  />
+                </a>
+                <ButtonIcon
+                  v-if="film.icsDownload"
+                  label="Ajouter au calendrier"
+                  icon="ri-calendar-event-fill"
+                  class="is-inverted is-small is-primary"
+                  short
+                />
+              </template>
+            </div>
+            <div class="ml-auto title is-5">
+              {{ prettyDate.short(film.projectionDate) }}
+            </div>
+          </footer>
+        </div>
+      </div>
+    </div>
+    <MovieCardTrailerModal
+      v-if="showTrailerModal"
+      :url="film.trailerLink"
+      :iframe-id="`film-card-${film.id}`"
+      @close="showTrailerModal = false"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Film } from "~/composables/types"
+import { PropType } from "@vue/runtime-core"
+import { prettyDate } from "~/composables/strUtils"
+
+const props = defineProps({
+  film: { type: Object as PropType<Film>, required: true },
+})
+const isPast = ref<boolean>(false)
+const showTrailerModal = ref<boolean>(false)
+
+function generateTags(film: Film) {
+  const res = []
+  if ("isInColor" in film && film.isInColor != null)
+    res.push({
+      value: film.isInColor ? "Couleur" : "Noir et blanc",
+    })
+  if (film?.languageSubtitles)
+    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">
+.movie-card
+  .movie-card-header.button
+    height: fit-content
+  width: 468px
+  .poster-container
+    width: 152px
+  footer.card-content
+    padding: 0.5rem 1.5rem
+</style>