From 131b5a69443b59a377180635c356dc7ef8f0bb62 Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Sat, 9 Apr 2022 02:56:05 +0200
Subject: [PATCH] feat [front]: extract form in a component to use in edit

---
 front/components/admin/form.vue    | 33 ++++++++++++++++----------
 front/pages/admin/[id]/edition.vue | 37 ++++++++++++++++++++++++++++++
 front/pages/admin/nouveau.vue      | 26 +++++++++++++++++++++
 3 files changed, 84 insertions(+), 12 deletions(-)
 create mode 100644 front/pages/admin/[id]/edition.vue
 create mode 100644 front/pages/admin/nouveau.vue

diff --git a/front/components/admin/form.vue b/front/components/admin/form.vue
index 213a197..974c8e6 100644
--- a/front/components/admin/form.vue
+++ b/front/components/admin/form.vue
@@ -48,7 +48,12 @@
       <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" />
+          <input
+            v-model="film.releaseYear"
+            class="input"
+            type="number"
+            min="1895"
+          />
         </div>
       </div>
 
@@ -116,8 +121,11 @@
       </div>
 
       <div class="buttons">
-        <button class="button" @click="post">Enregistrer</button>
-        <button class="button is-primary">Publier</button>
+        <!-- TODO change labels according to publishing status -->
+        <button class="button" @click="emits('save')">Enregistrer</button>
+        <button class="button is-primary" @click="emits('publish')">
+          Publier
+        </button>
       </div>
     </div>
 
@@ -153,24 +161,25 @@
 
 <script setup lang="ts">
 import { Film, Format, LanguageSubtitles } from "~/composables/types"
+import { PropType } from "@vue/runtime-core"
 
-definePageMeta({
-  layout: "admin",
+defineProps({
+  modelValue: {
+    type: Object as PropType<Film>,
+    default: () => {
+      return {}
+    },
+  },
 })
+const emits = defineEmits(["save", "publish"])
+const film = useModel<Film>("modelValue", { type: "object" })
 
 const foundFilms = ref()
-const film = reactive<Film>({})
-const { $api } = useNuxtApp()
-
 // 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 post() {
-  return await $api.post("films/", film)
-}
-
 async function findFilm() {
   foundFilms.value = await $fetch("https://api.themoviedb.org/3/search/movie", {
     params: {
diff --git a/front/pages/admin/[id]/edition.vue b/front/pages/admin/[id]/edition.vue
new file mode 100644
index 0000000..d64267d
--- /dev/null
+++ b/front/pages/admin/[id]/edition.vue
@@ -0,0 +1,37 @@
+<template>
+  <h1 class="title">Modifier la séance du {{ film.projectionDate }}</h1>
+  <AdminForm v-model="film" @save="saveDraft" @publish="publish" />
+</template>
+
+<script setup lang="ts">
+import { Film } from "~/composables/types"
+
+definePageMeta({
+  layout: "admin",
+})
+const route = useRoute()
+const id = route.params.id
+
+const film = reactive<Film>({})
+
+Object.assign(film, (await apiGet(`films/${id}/`)).data.value)
+// TODO manage errors
+
+async function save(publish: boolean) {
+  const { data } = await apiPatch(`films/${id}/`, {
+    ...film,
+    isConfirmed: publish,
+  })
+  Object.assign(film, data.value)
+  // TODO redirect to list ? to edit ?
+}
+
+async function saveDraft() {
+  return save(false)
+}
+
+async function publish() {
+  // TODO validate ? let API do the job ?
+  return save(true)
+}
+</script>
diff --git a/front/pages/admin/nouveau.vue b/front/pages/admin/nouveau.vue
new file mode 100644
index 0000000..e095654
--- /dev/null
+++ b/front/pages/admin/nouveau.vue
@@ -0,0 +1,26 @@
+<template>
+  <h1 class="title">Nouvelle séance</h1>
+  <AdminForm v-model="film" @save="post" @publish="publish" />
+</template>
+
+<script setup lang="ts">
+import { Film } from "~/composables/types"
+
+definePageMeta({
+  layout: "admin",
+})
+
+const film = reactive<Film>({})
+const { $api } = useNuxtApp()
+
+async function post() {
+  return await $api.post("films/", { ...film, isConfirmed: true })
+  // TODO redirect to list ? to edit ?
+}
+
+async function publish() {
+  // TODO validate ? let API do the job ?
+  return await $api.post("films/", { ...film, isConfirmed: false })
+  // TODO redirect to list ? to edit ?
+}
+</script>