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

<template>
  <div class="title is-2">
    <div class="tag is-large">
      {{ film.isConfirmed ? "Publié" : "Brouillon" }}
    </div>
    <h1 class="mx-5">
      {{ film.projectionDate || "À planifier" }} - {{ film.title }}
      <span class="has-text-grey-lighter">#{{ film.id }}</span>
    </h1>
    <nuxt-link :to="`${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>
</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(`films/${id}/`)).data.value)

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>