cineclub-site/front/pages/admin/[id]/index.vue

<template>
  <main class="section">
    <div class="title is-2">
      <div class="tag is-large">
        {{ film.isConfirmed ? "Publié" : "Brouillon" }}
      </div>
      <h1 class="mx-5">
        <time v-if="film.projectionDate" :datetime="film.projectionDate"
          >{{ new Date(film.projectionDate).toLocaleString() }}
        </time>
        <template v-else>À planifier</template>
        -
        {{ film.title }}
        <span class="has-text-grey-lighter">#{{ film.id }}</span>
      </h1>
      <nuxt-link :to="`/admin/${id}/edition`" class="button">
        <span>Éditer</span>
      </nuxt-link>
    </div>
    <div class="field is-grouped is-grouped-multiline">
      <div v-for="(tag, index) of tags" :key="index" class="control">
        <div class="tags has-addons are-medium">
          <span v-if="tag.label" class="tag">{{ tag.label }}</span>
          <span class="tag is-info">{{ tag.value }}</span>
        </div>
      </div>
    </div>
    <div class="columns">
      <div class="column">
        <h2 class="title is-3">Synopsis</h2>
        {{ film.synopsis }}
      </div>
      <div class="column">
        <h2 class="title is-3">Acteurs</h2>
        <ul>
          <li v-for="(actor, index) of film.actors" :key="index">
            {{ actor }}
          </li>
        </ul>
      </div>
    </div>
    <div class="columns">
      <div class="column">
        <iframe
          v-if="film.trailerLink"
          :src="film.trailerLink"
          width="560"
          height="315"
          frameborder="0"
          allowfullscreen="allowfullscreen"
        />
        <template v-else>Bande annonce non renseignée</template>
      </div>
      <div class="column">
        <img
          class="alignnone wp-image-1873 size-medium"
          :src="film.posterLink"
          alt="affiche du film"
          width="300"
          height="300"
        />
      </div>
      <div class="column">
        <img
          class="alignnone wp-image-1873 size-medium"
          :src="film.bannerLink"
          alt="bannière du film"
          width="300"
          height="300"
        />
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">
import { Film } from "~/composables/types"

definePageMeta({ layout: "admin" })
const route = useRoute()
const id = route.params.id

const film = reactive<Film>({})

Object.assign(film, (await apiGet(`admin/films/${id}/`)).data.value)
useHead({ title: `Consultation de ${film.title}` })

const tags = computed(() => {
  const base = [
    { label: "Durée", value: film.duration },
    { label: "Pays d'origine", value: film.originCountry },
    { label: "Année de sortie", value: film.releaseYear },
    { value: film.isInColor ? "Couleur" : "Noir et blanc" },
    { label: "Format", value: film.movieFormat },
    { value: film.languageSubtitles },
  ]
  return base.filter((tag) => tag.value)
})
</script>

<style scoped lang="sass">
.title
  display: flex
  align-items: center
</style>