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 { parsed: currentValue } = await this.field.getValue(
	fctx.ctx,
	fctx.data
	);
	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 tempstream/* HTML */ `${isVisible
	? options.map(({ value, label }) =>
	inputWrapper(
	[name, getRequiredClass(required)],
	/* 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
	>
	`
	)
	)
	: ""}`;
	}
	}