cineclub-site/front/components/admin/form.vue
_aandres 47f315d0da feat [api]: include and display new fields
- originCountry
- actors
- imdb id
- tmdb id
- show comment
2023-01-29 01:13:14 +01:00

298 lines
8.3 KiB
Vue

<template>
<div class="columns">
<div class="column is-three-fifths">
<div class="field">
<label class="label">Date de projection</label>
<div class="control">
<Datepicker
v-model="projectionDateObject"
:locale="fr"
class="input"
minimum-view="time"
input-format="dd/MM/yyyy HH'h'mm"
/>
</div>
</div>
<div class="field">
<label class="label">Titre</label>
<div class="control">
<input
v-model="film.title"
class="input"
type="text"
@change="findFilm"
/>
</div>
</div>
<div class="field">
<label class="label">Réalisateur</label>
<div class="control">
<input v-model="film.director" class="input" type="text" />
</div>
</div>
<div class="field">
<label class="label">Pays d'origine</label>
<div class="control">
<input v-model="film.originCountry" class="input" type="text" />
</div>
</div>
<div class="field">
<label class="label">Acteurs</label>
<div class="control">
<AdminActorsInput v-model="film.actors" />
</div>
<p class="help">Un nom par ligne</p>
</div>
<div class="field">
<label class="label">Durée</label>
<div class="control">
<input v-model="durationNoSecond" class="input" type="time" />
</div>
</div>
<div class="field">
<label class="label">Synopsis</label>
<div class="control">
<textarea v-model="film.synopsis" class="textarea" rows="10" />
</div>
</div>
<div class="field">
<label class="label">Année de sortie du film</label>
<div class="control">
<input
v-model="film.releaseYear"
class="input"
type="number"
min="1895"
/>
</div>
</div>
<div class="field">
<label class="label">Lien de la bande-annonce</label>
<div class="control">
<input v-model="film.trailerLink" class="input" type="url" />
</div>
</div>
<div class="field">
<label class="label">id IMDB</label>
<div class="control">
<input v-model="film.imdbId" class="input" type="text" />
</div>
</div>
<div class="field">
<label class="label">id TMDB</label>
<div class="control">
<input v-model="film.tmdbId" class="input" type="number" />
</div>
</div>
<div class="field">
<label class="label">Couleur / Noir & Blanc</label>
<label class="checkbox">
<input v-model="film.isInColor" type="checkbox" />
Couleur
</label>
</div>
<div class="field">
<label class="label">Format</label>
<div class="control">
<label class="radio">
<input type="radio" name="format" />
{{ Format.ANALOG_35 }}
</label>
<label class="radio">
<input type="radio" name="format" />
{{ Format.DIGITAL }}
</label>
</div>
</div>
<div class="field">
<label class="label">Langue / Sous-titre</label>
<div class="control">
<label class="radio">
<input type="radio" name="language-subtitle" />
{{ LanguageSubtitles.FRENCH }}
</label>
<label class="radio">
<input type="radio" name="language-subtitle" />
{{ LanguageSubtitles.FOREIGN }}
</label>
<label class="radio">
<input type="radio" name="language-subtitle" />
{{ LanguageSubtitles.DUBBED }}
</label>
</div>
</div>
<div class="field">
<label class="label">Lien du poster</label>
<div class="control">
<input v-model="film.posterLink" class="input" type="url" />
</div>
</div>
<div class="field">
<label class="label">Lien de l'événement Facebook</label>
<div class="control">
<input v-model="film.facebookEventLink" class="input" type="url" />
</div>
</div>
<div class="field">
<label class="label">Lien de la bannière</label>
<div class="control">
<input v-model="film.bannerLink" class="input" type="url" />
</div>
</div>
<div class="field">
<label class="label">Commentaire de séance</label>
<div class="control">
<textarea
v-model="film.projectionComment"
class="textarea"
rows="2"
/>
</div>
</div>
<div class="buttons mt-6">
<button class="button" @click="emits('save')">
{{
film?.isConfirmed
? "Sauvegarder et mettre en brouillon"
: "Sauvegarder"
}}
</button>
<button class="button is-primary" @click="emits('publish')">
{{ film?.isConfirmed ? "Sauvegarder" : "Publier" }}
</button>
<nuxt-link :to="`/admin/${film.id}`">
<button class="button">Quitter l'édition</button>
</nuxt-link>
</div>
</div>
<div class="column is-two-fifths">
<!-- doc : https://bluefantail.github.io/bulma-list/ -->
<div class="list has-visible-pointer-controls">
<div
v-for="(foundFilm, index) of foundFilms"
:key="foundFilm.id"
class="list-item"
:class="{ 'is-active': isChosen(foundFilm) }"
>
<div class="list-item-image">
<figure class="image is-64x64">
<img :src="image(index)" />
</figure>
</div>
<div class="list-item-content">
<div class="list-item-title">{{ foundFilm.title }}</div>
<div class="list-item-description">
{{ foundFilm.releaseDate }}
</div>
</div>
<div class="list-item-controls">
<div class="buttons is-right">
<button
v-if="isChosen(foundFilm)"
class="button"
@click="fillAll"
>
<v-icon name="bi-arrow-bar-left" />
Remplir tout
</button>
<button v-else class="button" @click="choose(foundFilm.id)">
Choisir
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { Film, Format, LanguageSubtitles } from "~/composables/types"
import Datepicker from "vue3-datepicker"
import { fr } from "date-fns/locale"
import { PropType } from "@vue/runtime-core"
defineProps({
modelValue: {
type: Object as PropType<Film>,
default: () => {
return {}
},
},
})
const emits = defineEmits(["save", "publish", "update:modelValue"])
const film = useModel<Film>("modelValue", { type: "object" })
const foundFilms = ref()
const chosenFilm = ref<Film | undefined>()
// https://developers.themoviedb.org/3/getting-started/images
const image = computed(() => (index: number) => {
return `https://image.tmdb.org/t/p/w92${foundFilms.value[index]?.posterPath}`
})
const durationNoSecond = computed<string | undefined>({
get: () => film.value.duration,
set(value: string | undefined) {
film.value.duration = value?.replace(/:\d{2}$/, ":00")
},
})
const projectionDateObject = computed<Date | undefined>({
get: () =>
film.value.projectionDate ? new Date(film.value.projectionDate) : undefined,
set(value: Date | undefined) {
film.value.projectionDate = value?.toISOString()
},
})
async function findFilm() {
foundFilms.value = (
await apiGet("tmdb/search/", { query: film.value.title })
).data.value
}
async function choose(tmdbId: number) {
chosenFilm.value =
((await apiGet<Film>(`tmdb/${tmdbId}/fill/`)).data.value as Film) ||
undefined
}
function isChosen(filmToCheck: Film) {
return chosenFilm.value?.tmdbId === filmToCheck?.tmdbId
}
function fillAll() {
Object.assign(film.value, chosenFilm.value)
}
</script>
<style lang="sass" scoped>
.image img
height: 100%
object-fit: cover
textarea
resize: vertical
.list-item.is-active
background-color: $grey-lighter
</style>