299 lines
8.3 KiB
Vue
299 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>
|