Page MenuHomeSealhub
Files F8922311

checkboxed-list-input.ts
No OneTemporary
Actions

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),
"options-count--" + options.length.toString(),
...(options.length >= 5 ? ["options-count--5-or-more"] : []),
...(options.length >= 10 ? ["options-count--10-or-more"] : []),
...(options.length >= 15 ? ["options-count--15-or-more"] : []),
...(options.length >= 20 ? ["options-count--20-or-more"] : []),
],
tempstream/* HTML */ `<label
>${this.options.label || this.field.name}</label
>
${~valid && fctx.validate
? `<div class="input__error">${message}</div>`
: ""}
<ul>
${isVisible
? options.map(
({ value, label }) => tempstream/* HTML */ `<li>
${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
>
`
)}
</li>`
)
: ""}
</ul>`
);
}
}

File Metadata

Mime Type
text/x-java
Expires
Sat, Sep 20, 14:28 (1 d, 11 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
929166
Default Alt Text
checkboxed-list-input.ts (2 KB)

Event Timeline