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="durationNoSecond" class="input" type="time" />
        </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 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="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>
        <nuxt-link :to="`/admin/${film.id}`">
          <button class="button">Quitter l'édition</button>
        </nuxt-link>
      </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"
          :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.releaseDate }}
            </div>
          </div>
          <div class="list-item-controls">
            <div class="buttons is-right">
              <button class="button" @click="fill(foundFilm.id)">
                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[index]?.posterPath}`
})

const durationNoSecond = computed<string>({
  get: () => film.value.duration,
  set(value: string) {
    film.value.duration = value.replace(/:\d{2}$/, ":00")
  },
})

async function findFilm() {
  foundFilms.value = (
    await apiGet("tmdb/search/", { query: film.value.title })
  ).data.value
}

async function fill(tmdbId: number) {
  film.value = (await apiGet(`tmdb/${tmdbId}/fill/`)).data.value
  // TODO fix form reactivity
}
</script>

<style lang="sass" scoped>
.image img
  height: 100%
  object-fit: cover
</style>