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

<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" />
            {{ 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>