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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user