refactor(components): update storyForm
use vue's new `defineModel` functionality to mutate data more cleanly
This commit is contained in:
parent
82fbda41bc
commit
205b241e3b
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user