checkboxed-list-input.ts
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

checkboxed-list-input.ts
View Options

	import { tempstream } from "tempstream";
	import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper.js";
	import { CheckboxedListField } from "../fields/checkboxed-list.js";
	import { FormControlContext } from "./form-control.js";
	import { FormFieldControl } from "./form-field-control.js";

	export class CheckboxedListInput extends FormFieldControl {
	constructor(
	public field: CheckboxedListField<boolean>,
	public options: { label: string } = { label: field.name }
	) {
	super([field]);
	}

	async render(fctx: FormControlContext) {
	const {
	valid,
	message,
	parsed: currentValue,
	} = await this.field.getValue(fctx.ctx, fctx.data, true);
	const pickedValues = Object.entries(currentValue \|\| {})
	.filter(([, is_on]) => is_on)
	.map(([key]) => key);
	const [options, isVisible] = await Promise.all([
	this.field.generateOptions(fctx.ctx),
	this.field.isVisible(fctx.ctx),
	]);

	const { name, required } = this.field;
	return inputWrapper(
	"checkboxed-list",
	[name, getRequiredClass(required)],
	tempstream/* HTML */ `<label
	>${this.options.label \|\| this.field.name}</label
	>${isVisible
	? options.map(({ value, label }) =>
	inputWrapper(
	"checkbox",
	[name],
	/* HTML */ `
	<input
	type="checkbox"
	id="${name}.${value}"
	name="${name}.${value}"
	${pickedValues.includes(value)
	? "checked"
	: ""}
	form=${fctx.form_id}
	/>
	<label for="${name}.${value}"
	>${label \|\| value}</label
	>
	`
	)
	)
	: ""}
	${~valid && fctx.validate
	? `<div class="input__error">${message}</div>`
	: ""}`
	);
	}
	}