Page MenuHomeSealhub
Files F3010422

editable-collection-subset.ts
No OneTemporary
Actions

editable-collection-subset.ts
View Options

import { FlatTemplatable, tempstream } from "tempstream";
import { attribute } from "../../sanitize.js";
import { PickFromListField } from "../fields/pick-from-list.js";
import { FormControlContext } from "./form-control.js";
import { FormFieldControl } from "./form-field-control.js";
/**
* This control has own forms in it so if you want to use it you
* probably shouldn't use `await super.render(ctx, data, path)` in
* render method of you from implementation and you should write
* your own implementation of this method. See forms that uses
* this control for reference.
*/
export class EditableCollectionSubset extends FormFieldControl {
constructor(
public field: PickFromListField<false>,
public actionname: string,
public listLabel?: string,
public selectLabel?: string
) {
super([field]);
}
async render(fctx: FormControlContext): Promise<FlatTemplatable> {
const { parsed: values } = await this.field.getValue(
fctx.ctx,
fctx.data
);
return tempstream/* HTML */ `<div>
<ul>
${Promise.resolve(this.field.generateOptions(fctx.ctx)).then(
(options) =>
Object.entries(options)
.filter(([value]) =>
(values || ([] as string[])).includes(value)
)
.map(
([value, text]) => /* HTML */ `
<li>
<form
method="POST"
action="${fctx.ctx.path}"
>
<span
>${
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
text
}</span
>
<input
type="hidden"
name="${this.field.name}"
value="${attribute(value)}"
/>
<input
type="hidden"
name="${this.actionname}"
value="list"
/>
<input
type="submit"
${this.listLabel
? `value="${this.listLabel}"`
: ""}
/>
</form>
</li>
`
)
)}
</ul>
<form method="POST" action="${fctx.ctx.path}">
<select name="${this.field.name}">
${Promise.resolve(
this.field.generateOptions(fctx.ctx)
).then((options) =>
Object.entries(options)
.filter(
([value]) =>
!(values || ([] as string[])).includes(
value
)
)
.map(
([value, text]) =>
`<option value="${attribute(value)}">${
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
text
}</option>`
)
)}
</select>
<input type="hidden" name="${this.actionname}" value="select" />
<input
type="submit"
${this.selectLabel ? `value="${this.selectLabel}"` : ""}
/>
</form>
</div>`;
}
role = <const>"input";
}

File Metadata

Mime Type
text/x-java
Expires
Wed, May 7, 19:42 (1 d, 9 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
625938
Default Alt Text
editable-collection-subset.ts (2 KB)

Event Timeline