cineclub-site/front/components/movieCard/full.vue

<template>
  <div v-if="film">
    <div class="card movie-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
          v-if="film.trailerLink"
          label="Bande-annonce"
          icon="ri-play-circle-fill"
          class="is-primary is-outlined ml-auto"
          @click="showTrailerModal = true"
        />
      </header>
      <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 class="card-content">
          <div class="content movie-content">
            <p v-if="film.actors && film.actors.length" class="block">
              <span class="has-text-weight-bold">Acteurs :</span>
              {{ film.actors.join(", ") }}
            </p>
            <p v-if="film.synopsis" class="block">
              <span class="has-text-weight-bold">Synopsis :</span>
              {{ film.synopsis }}
            </p>
            <div
              v-if="film.projectionComment"
              class="block has-text-centered has-text-weight-bold is-italic my-auto"
            >
              <p>{{ film.projectionComment }}</p>
            </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-outlined is-primary"
            />
          </template>
          <template v-else>
            <a
              v-if="film.facebookEventLink"
              :href="film.facebookEventLink"
              rel="noopener noreferrer"
              target="_blank"
              tabindex="-1"
            >
              <ButtonIcon
                label="Événement Facebook"
                icon="ri-facebook-box-fill"
                class="is-outlined is-primary"
              />
            </a>
            <ButtonIcon
              v-if="film.icsDownload"
              label="Ajouter au calendrier"
              icon="ri-calendar-event-fill"
              class="is-outlined is-primary"
            />
          </template>
        </div>
        <time class="ml-auto title is-4" :datetime="film.projectionDate">
          {{ prettyDate.full(film.projectionDate) }}
        </time>
      </footer>
    </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 .poster-container
  width: 200px

.card .card-content .content.movie-content
  height: 100%
  display: flex
  flex-direction: column
  white-space: pre-wrap
</style>