90 lines
3.4 KiB
Vue
90 lines
3.4 KiB
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>
|