next/components/story/atoms/bands.vue

<script setup lang="ts">
	import { DefaultOptionType } from "ant-design-vue/es/select";
	import { RuleExpression, useField } from "vee-validate";
	import { cs } from "~/lib/client/storyFormSchema";
	import { IBand } from "~/models/band";
	import { log } from "~/lib/server/logger";

	import iconEl from "../icon.vue";

	const bandlist = inject<IBand[]>("bandlist");
	const fname = inject<string>("curName");
	const { updateBands, sb } = inject<any>("selectedBands");

	const bl = ref(bandlist || []);
	const options: DefaultOptionType[] = bl.value
		.filter((a) => a.name != "")
		.map((a) => ({
			value: a._id,
			label: a.name,
			disabled: a.locked || false,
		}));
	let bandField = useField(
		fname + "bands",
		cs.fields.bands as unknown as MaybeRef<RuleExpression<number[]>>,
	);
	const { value, errorMessage, name, setValue } = bandField;
	// setValue(sb)
</script>

<template>
	<a-form-item
		:validate-status="!!errorMessage ? 'error' : undefined"
		:help="errorMessage"
		label="Bands"
	>
		<a-select
			:allow-clear="true"
			mode="multiple"
			option-filter-prop="label"
			@change="
				(val) => {
					// log.debug(val);
					updateBands(val);
					setValue(val as number[]);
				}
			"
			v-model:value="value"
			:options="options"
		>
			<template #removeIcon>
				<i class="far fa-circle-x" />
			</template>
		</a-select>
	</a-form-item>
</template>