cineclub-site/front/components/admin/form.vue

192 lines
5.3 KiB
Vue
Raw Normal View History

<template>
<div class="columns">
<div class="column">
<div class="field">
<label class="label">Date de projection</label>
<div class="control">
<input
v-model="film.projectionDate"
class="input"
type="datetime-local"
/>
</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">Durée</label>
<div class="control">
<input v-model="film.duration" class="input" type="number" />
</div>
</div>
<div class="field">
<label class="label">Synopsis</label>
<div class="control">
<textarea v-model="film.synopsis" class="input" />
</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="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" />
2022-04-09 02:48:03 +02:00
{{ 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>
</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 la bannière</label>
<div class="control">
<input v-model="film.bannerLink" class="input" type="url" />
</div>
</div>
<div class="buttons">
<!-- TODO change labels according to publishing status -->
<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>
</div>
</div>
<div class="column">
<!-- doc : https://bluefantail.github.io/bulma-list/ -->
<div class="list has-visible-pointer-controls">
<div
v-for="(foundFilm, index) of foundFilms?.results"
:key="foundFilm.id"
class="list-item"
>
<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.release_date }}
</div>
</div>
<div class="list-item-controls">
<div class="buttons is-right">
<button class="button">Préremplir</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { Film, Format, LanguageSubtitles } from "~/composables/types"
import { PropType } from "@vue/runtime-core"
defineProps({
modelValue: {
type: Object as PropType<Film>,
default: () => {
return {}
},
},
})
const emits = defineEmits(["save", "publish"])
const film = useModel<Film>("modelValue", { type: "object" })
const foundFilms = ref()
// https://developers.themoviedb.org/3/getting-started/images
const image = computed(() => (index: number) => {
return `https://image.tmdb.org/t/p/w500${foundFilms.value?.results[index].poster_path}`
})
async function findFilm() {
foundFilms.value = await $fetch("https://api.themoviedb.org/3/search/movie", {
params: {
api_key: "INSERT API KEY HERE",
language: "fr-FR",
query: title.value,
},
})
}
</script>