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

100 lines
2.5 KiB
Vue
Raw Normal View History

<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>
2022-04-09 02:52:50 +02:00
<script setup lang="ts">
import { Film } from "~/composables/types"
2022-04-09 02:52:50 +02:00
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>