next/pages/story/[id]/edit.vue

<script lang="ts" setup>
	import { v4 } from "uuid";
	import storyForm from "~/components/story/create/storyForm.vue";
	import { FormChapter, FormStory } from "@client/types/form/story";
	import { IStory } from "@models/stories";
	import { IChapter } from "@models/stories/chapter";

	import { storyEditMiddleware } from "@client/middleware";
	import { IBand } from "@models/band";
	import { IUser } from "@models/user";

	const rtr = useRoute();
	const { data: originalStory } = await useApiFetch<({ chapters: (IChapter & { text: string })[] } & IStory) | null>(`/story/${rtr.params.id}/full`);
	if (originalStory.value === null) {
		console.log("IT DOESN'T EXIST DAWG");
		throw createError({
			statusCode: 404,
			message: "That story doesn't exist...",
		});
	}
	definePageMeta({
		middleware: ["auth", storyEditMiddleware],
	});
	const story: FormStory = ref<FormStory>({
		title: originalStory.value!.title,
		coAuthor: originalStory.value.coAuthor ? (originalStory.coAuthor as IUser)._id : null,
		completed: originalStory.value!.completed,
		chapters: originalStory.value!.chapters.map((a, i) => {
			// delete
			return {
				...a,
				chapterTitle: a.title,
				id: a.id,
				index: i + 1,
				bands: (a.bands as IBand[]).map((a) => a._id),
				content: a.text,
				uuidKey: v4(),
				pot: "pasteOrType",
			} as FormChapter;
		}),
	});
	useHead({
		title: `Editing story: ${originalStory?.title}`,
	});
</script>
<template>
	<a-typography-title style="text-align: center"> Editing "{{ originalStory?.title }}" </a-typography-title>
	<!--	<client-only>-->
	<story-form :can-draft="false" v-model:data="story" :endpoint="`/story/${rtr.params.id}`" endpoint-method="put" />
	<!--	</client-only>-->
</template>