From 7cbf25a643e8c76b7dff9c96e7cb5191f05f1b3a Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Wed, 6 Apr 2022 01:12:35 +0200
Subject: [PATCH] feat [front]: complete film creation admin form

---
 front/composables/types.ts |  28 +++++++++
 front/pages/admin/form.vue | 114 ++++++++++++++++++++++++++++++++++---
 2 files changed, 133 insertions(+), 9 deletions(-)
 create mode 100644 front/composables/types.ts

diff --git a/front/composables/types.ts b/front/composables/types.ts
new file mode 100644
index 0000000..bf511ea
--- /dev/null
+++ b/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
+}
diff --git a/front/pages/admin/form.vue b/front/pages/admin/form.vue
index d244cca..cdb5c72 100644
--- a/front/pages/admin/form.vue
+++ b/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) => {