feat [front]: extract form in a component to use in edit

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>
+        <!-- TODO change labels according to publishing status -->
-        <button class="button is-primary">Publier</button>
+        <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({
+defineProps({
-  layout: "admin",
+  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: {

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>

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>