<script setup lang="ts"> import draggable from "vuedraggable"; import { v4 } from "uuid"; import { autoSave } from "~/lib/client/utils"; import lmove from "lodash-move"; import { Field, Form as veeForm, FieldArray, FieldEntry, useForm, } from "vee-validate"; import { storySchema } from "~/lib/client/storyFormSchema"; import { FormChapter, FormStory, defaultChapter, } from "~/lib/client/types/form/story"; import singleChapter from "./singleChapter.vue"; import icon from "~/components/icon.vue"; const props = defineProps<{ data: FormStory; canDraft?: boolean; endpoint: string; }>(); let drag = false; let acData = ref(props.data); const expandos = ref<string[]>([]); function logSubmit(values, actions) { console.debug("VALUE"); console.debug(values); console.debug(actions); } function onSubmit(values, actions) { logSubmit(values, actions); } function inval({ values, errors, results }) { logSubmit(values, undefined); } const { values, setFieldValue, handleSubmit } = useForm({ keepValuesOnUnmount: true, validationSchema: storySchema, initialValues: props.data, }); const subCb = handleSubmit(onSubmit); </script> <template> <!-- <vee-form :keep-values="true" v-slot="{ values, setFieldValue }" :validation-schema="storySchema" :initial-values="data" @submit="onSubmit" @invalid-submit="inval" > --> <form @submit="subCb" @change="() => canDraft && autoSave(values)"> <!-- <a-form v-bind:model="acData"> --> <Field name="title" v-slot="{ value, field, errorMessage }"> <a-form-item label="Title" :help="errorMessage" :validate-status="!!errorMessage ? 'error' : undefined" > <a-input v-bind="field" :value="value" /> </a-form-item> </Field> <Field :unchecked-value="false" :value="true" type="checkbox" name="completed" v-slot="{ value, field, errorMessage }" > <a-checkbox v-bind="field"> Complete </a-checkbox> </Field> <a-divider /> <!-- <test1/> --> <field-array name="chapters" v-slot="{ fields, push, remove, move }"> <draggable :component-data="{ type: 'transtion-group' }" @start="drag = true" @end="drag = false" v-model="values.chapters" tag="div" item-key="uuidKey" @change=" (e) => { 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, ); // log.debug(toRaw(acData.chapters.map((a) => toRaw(a)))); } } " > <template #item="{ element, index }"> <a-collapse v-model:active-key="expandos" collapsible="icon"> <a-collapse-panel :key="`${element.uuidKey}`"> <template #header> {{ values.chapters[index]?.chapterTitle || "Untitled" }} <a-button @click=" (e) => { let localFields = toRaw(fields); // log.debug(`${index} | ${element.index}`); // log.debug('fields->', localFields); acData.chapters.splice(index, 1); remove(index); // todo renumber // renumber() } " > <icon istyle="regular" name="trash" /> </a-button> </template> <single-chapter :data="element" :name="`chapters[${index}]`" /> </a-collapse-panel> </a-collapse> </template> <template #footer> <a-button @click=" (e) => { if (!Array.isArray(values.chapters)) { setFieldValue('chapters', []); } const chaps = [...toRaw(values.chapters)]; let lastIndex = chaps.length - 1; if (lastIndex < 0) lastIndex = 0; let lastChapter = chaps[lastIndex]; // log.debug('chaptrs->', chaps); // log.debug('lastIndex->', lastIndex, lastChapter); let newChapter = Object.assign({}, defaultChapter, { summary: lastChapter?.summary || '', index: (lastChapter?.index || 0) + 1, bands: lastChapter?.bands || [], characters: lastChapter?.characters || [], relationships: lastChapter?.relationships || [], uuidKey: v4(), genre: lastChapter?.genre || [], }); // log.debug('nc->', newChapter); push(newChapter); acData.chapters.push(newChapter); } " > Add chapter </a-button> </template> </draggable> </field-array> <a-button type="primary" html-type="submit">go.</a-button> </form> <!-- </vee-form> --> </template>