cineclub-site/front/pages/admin/[id]/edition.vue

<template>
  <main class="section">
    <h1 class="title">
      Modifier la séance du
      <time :datetime="film.projectionDate">{{
        new Date(film.projectionDate).toLocaleString()
      }}</time>
    </h1>
    <AdminForm v-model="film" @save="saveDraft" @publish="publish" />
  </main>
</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(`admin/films/${id}/`)).data.value)
// TODO manage errors
useHead({ title: `Édition de ${film.title}` })

async function save(publish: boolean) {
  const { data } = await apiPatch(`admin/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>