next/components/story/create/singleChapter.vue

<script setup lang="ts">
	import { Field, ErrorMessage } from "vee-validate";
	import { NamePath } from "ant-design-vue/es/form/interface";
	import { FormChapter } from "@client/types/form/story";

	import { bare } from "@client/editorConfig";
	import elBands from "../atoms/bands.vue";
	import genre from "../atoms/genre.vue";
	import elCharacters from "../atoms/characters.vue";
	import elPairings from "../atoms/pairings.vue";
	import uploadOrPaste from "./uploadOrPaste.vue";
	import { IBand } from "@models/band";
	// import test1 from

	let { name, data } = defineProps<{
		name: NamePath;
		data: FormChapter;
	}>();
	let acData = toRef(data);
	let { data: _bands } = await useApiFetch<IBand[]>("/band/all");
	let bands = ref(_bands);
	provide("curName", name + ".");
	provide("bandlist", bands);
	const selectedBands = ref(data.bands || []);
	const updateBands = (val) => {
		selectedBands.value = val;
		// data.value.bands = val;
	};
	provide("selectedBands", {
		sb: selectedBands,
		updateBands,
	});
	const wrapc = { span: 12 };
	const tbase = `storyform.${name}.form`;
</script>
<template>
	<div :data-testid="tbase">
		<a-row :gutter="[10, 0]">
			<a-col :span="12">
				<Field :name="name + '.chapterTitle'" v-slot="{ value, field, errorMessage }">
					<a-form-item :name="[field.name as string]" label="Chapter title" :help="errorMessage" :status="!!errorMessage ? 'error' : undefined">
						<a-input :data-testid="`${tbase}.title`" v-bind="field" />
					</a-form-item>
				</Field>
			</a-col>
			<a-col :span="12">
				<el-bands :data-testid="`${tbase}.bands`" />
			</a-col>
		</a-row>
		<a-row :gutter="[10, 0]">
			<a-col :span="12">
				<base-editor :data-testid="`${tbase}.summary`" v-model:val="acData.summary" :name="name + '.summary'" :wrap-col="wrapc" label="Summary" :init="bare" />
			</a-col>
			<a-col :span="12">
				<base-editor :data-testid="`${tbase}.notes`" v-model:val="acData.notes" :name="name + '.notes'" :wrap-col="wrapc" label="Author's notes" :init="bare" />
			</a-col>
		</a-row>
		<a-row :gutter="[10, 0]">
			<a-col :span="12">
				<el-characters :data-testid="`${tbase}.characters`" />
			</a-col>
			<a-col :span="12">
				<el-pairings :data-testid="`${tbase}.relationships`" />
			</a-col>
		</a-row>
		<Field :name="name + '.nsfw'" type="checkbox" :unchecked-value="false" :value="true" v-slot="{ value, field, errorMessage }">
			<a-checkbox :data-testid="`${tbase}.nsfw`" v-bind="field" v-model="field.value"> Has NSFW content </a-checkbox>
			<error-message :name="field.name" />
		</Field>
		<Field :name="name + '.loggedInOnly'" type="checkbox" :unchecked-value="false" :value="true" v-slot="{ value, field, errorMessage }">
			<a-checkbox :data-testid="`${tbase}.loggedInOnly`" v-bind="field"> Visible only to registered users </a-checkbox>
			<error-message :name="field.name" />
		</Field>
		<Field :name="name + '.hidden'" type="checkbox" :unchecked-value="false" :value="true" v-slot="{ value, field, errorMessage }">
			<a-tooltip>
				<template #title> Hides your story from everyone except you and site admins. </template>
				<a-checkbox v-bind="field" :data-testid="`${tbase}.hidden`"> Hidden </a-checkbox>
			</a-tooltip>
		</Field>
		<a-row>
			<a-col :span="24">
				<genre :data-testid="`${tbase}.genre`" />
			</a-col>
		</a-row>
		<a-divider> Contents </a-divider>
		<upload-or-paste :data-testid="`${tbase}.uploadOrPaste`" />
		<Field :hidden="true" :name="name + '.id'" v-if="!!data.id" :model-value="data.id" />
	</div>
</template>