rockfic/next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): update storyForm

Browse Source 
use vue's new `defineModel` functionality to mutate data more cleanly
This commit is contained in:
✑ ☙◦❀ The Tablet ☯ GamerGirlandCo ❀◦❧ 2024-01-04 15:19:08 -05:00
parent 82fbda41bc
commit 205b241e3b
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/story/create/storyForm.vue
View File

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

3
pages/new-story.vue
View File

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