feat [front]: complete film creation admin form

front/composables/types.ts

@@ -0,0 +1,28 @@
+export enum Format {
+  ANALOG_35 = "35mm",
+  DVD = "DVD",
+  BLU_RAY = "Blu ray",
+}
+export enum LanguageSubtitles {
+  FRENCH = "VOF",
+  FOREIGN = "VOSTFR",
+}
+
+export type Film = {
+  id: number
+  projectionDate: Date
+  title: string
+  actors: string[]
+  director: string
+  duration: number
+  synopsis: string
+  originCountry: string
+  releaseYear: number
+  trailerLink: string
+  isInColor: boolean
+  movieFormat: Format
+  languageSubtitles: LanguageSubtitles
+  posterLink: string
+  bannerLink: string
+  isConfirmed: boolean
+}

front/pages/admin/form.vue

@@ -4,27 +4,125 @@
       <div class="field">
         <label class="label">Date de projection</label>
         <div class="control">
-          <input class="input" type="datetime-local" />
+          <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="title" class="input" type="text" @change="findFilm" />
+          <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="director" class="input" type="text" />
+          <input v-model="film.director" class="input" type="text" />
         </div>
       </div>
+
       <div class="field">
         <label class="label">Durée</label>
         <div class="control">
-          <input class="input" type="number" />
+          <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" />
+        </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.BLU_RAY }}
+          </label>
+          <label class="radio">
+            <input type="radio" name="format" />
+            {{ Format.DVD }}
+          </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="field">
+        <label class="checkbox">
+          <input v-model="film.isConfirmed" type="checkbox" />
+          Validé
+        </label>
+      </div>
+
+      <div class="buttons">
+        <button class="button" @click="post">Enregistrer</button>
+        <button class="button is-primary">Publier</button>
+      </div>
     </div>
 
     <div class="column">
@@ -58,16 +156,14 @@
 </template>
 
 <script setup lang="ts">
+import { Film, Format, LanguageSubtitles } from "~/composables/types"
+
 definePageMeta({
   layout: "admin",
 })
 
 const foundFilms = ref()
-const title = ref<string>()
-
-const { data: films } = await useFetch("http://localhost:8000/api/films/", {
-  params: { test: 2 },
-})
+const film = reactive<Film>({})
 
 // https://developers.themoviedb.org/3/getting-started/images
 const image = computed(() => (index: number) => {