feat [front]: extract form in a component to use in edit
This commit is contained in:
parent
ccc9ccc70b
commit
131b5a6944
|
@ -48,7 +48,12 @@
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label class="label">Année de sortie du film</label>
|
<label class="label">Année de sortie du film</label>
|
||||||
<div class="control">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -116,8 +121,11 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="buttons">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -153,24 +161,25 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { Film, Format, LanguageSubtitles } from "~/composables/types"
|
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 foundFilms = ref()
|
||||||
const film = reactive<Film>({})
|
|
||||||
const { $api } = useNuxtApp()
|
|
||||||
|
|
||||||
// https://developers.themoviedb.org/3/getting-started/images
|
// https://developers.themoviedb.org/3/getting-started/images
|
||||||
const image = computed(() => (index: number) => {
|
const image = computed(() => (index: number) => {
|
||||||
return `https://image.tmdb.org/t/p/w500${foundFilms.value?.results[index].poster_path}`
|
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() {
|
async function findFilm() {
|
||||||
foundFilms.value = await $fetch("https://api.themoviedb.org/3/search/movie", {
|
foundFilms.value = await $fetch("https://api.themoviedb.org/3/search/movie", {
|
||||||
params: {
|
params: {
|
||||||
|
|
37
front/pages/admin/[id]/edition.vue
Normal file
37
front/pages/admin/[id]/edition.vue
Normal file
|
@ -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>
|
26
front/pages/admin/nouveau.vue
Normal file
26
front/pages/admin/nouveau.vue
Normal file
|
@ -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>
|
Loading…
Reference in a new issue