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

<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 class="is-flex is-flex-direction-column">
          <div class="card-content is-flex-grow-1">
            <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 is-flex-grow-0">
            <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"
                  tabindex="-1"
                >
                  <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>
            <time class="ml-auto title is-5" :datetime="film.projectionDate">
              {{ prettyDate.short(film.projectionDate) }}
            </time>
          </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
  height: 100%
  > *
    height: 100%
  .movie-card-header.button
    height: fit-content
  .poster-container
    width: 152px
  footer.card-content
    padding: 0.5rem 1.5rem
</style>