cineclub-site/front/components/admin/form.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">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 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()
// 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")
  },
})

const projectionDateObject = computed<Date>({
  get: () => new Date(film.value.projectionDate),
  set(value: Date) {
    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>