refactor(components): update storyForm

use vue's new `defineModel` functionality to mutate data more cleanly
This commit is contained in:
parent 82fbda41bc
commit 205b241e3b
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
2 changed files with 13 additions and 9 deletions

@ -13,14 +13,17 @@
import icon from "~/components/icon.vue";
const props = defineProps<{
data: FormStory;
canDraft?: boolean;
endpoint: string;
endpointMethod: "put" | "post";
submitText?: string;
}>();
const dc = defaultChapter;
// data: FormStory;
const data = defineModel<FormStory>("data", {
required: true,
});
let drag = false;
let acData = ref(props.data);
const expandos = ref<string[]>([]);
function logSubmit(values, actions) {
@ -36,7 +39,7 @@
otherBtnInvoked.value = false;
await autoSave(values);
} else {
await useApiFetch(`/story/new`, {
const { data: dat } = await useApiFetch(`/story/new`, {
method: "post",
body: values,
});
@ -48,10 +51,10 @@
function inval({ values, errors, results }) {
logSubmit(values, undefined);
}
const { values, setFieldValue, handleSubmit } = useForm({
const { values, setFieldValue, handleSubmit } = useForm<FormStory>({
keepValuesOnUnmount: true,
validationSchema: storySchema,
initialValues: props.data,
initialValues: data.value,
});
const subCb = handleSubmit(onSubmit);
</script>
@ -92,7 +95,7 @@
if (e.moved) {
// log.debug(e.moved);
move(e.moved.oldIndex, e.moved.newIndex);
acData.chapters = lmove(acData.chapters, e.moved.oldIndex, e.moved.newIndex);
data.chapters = lmove(data.chapters, e.moved.oldIndex, e.moved.newIndex);
// log.debug(toRaw(acData.chapters.map((a) => toRaw(a))));
}
}
@ -109,7 +112,7 @@
let localFields = toRaw(fields);
// log.debug(`${index} | ${element.index}`);
// log.debug('fields->', localFields);
acData.chapters.splice(index, 1);
data.chapters.splice(index, 1);
remove(index);
// todo renumber
// renumber()
@ -148,7 +151,7 @@
});
// log.debug('nc->', newChapter);
push(newChapter);
acData.chapters.push(newChapter);
data.chapters.push(newChapter);
}
"
>

@ -1,6 +1,7 @@
<script setup lang="ts">
import storyForm from "~/components/story/create/storyForm.vue";
import { defaultStory } from "@client/types/form/story";
const ds = ref(defaultStory);
definePageMeta({
middleware: ["auth"],
});
@ -10,5 +11,5 @@
</script>
<template>
<a-typography-title> Post a new Story </a-typography-title>
<story-form endpoint-method="post" :can-draft="true" :data="defaultStory" endpoint="/story/new" />
<story-form endpoint-method="post" :can-draft="true" v-model:data="ds" endpoint="/story/new" />
</template>