@sealcode/sealgen 0.8.1 → 0.8.2

package/src/forms/controls/collapsible-checkbox-group.ts

@@ -0,0 +1,31 @@
+import { Context } from "koa";
+import { FlatTemplatable } from "tempstream";
+import { FormDataValue, FormMessage } from "../form";
+import { CheckboxWithValue } from "./checkbox";
+import { FieldGroup, FormFieldControl } from "./controls";
+import { CheckboxGroup, DefaultCheckboxOptions } from "./checkbox-group";
+import { CollapsibleFieldGroup } from "./collapsible-field-group";
+
+export class CollapsibleCheckboxGroup extends CheckboxGroup<
+	DefaultCheckboxOptions & {
+		textWhenOpen?: string;
+		textWhenClosed?: string;
+		groupID?: string;
+	}
+> {
+	wrapGroup(
+		ctx: Context,
+		data: Record<string, FormDataValue>,
+		messages: FormMessage[],
+		field_prefix: string,
+		form_id: string,
+		checkboxes: CheckboxWithValue[]
+	): Promise<FlatTemplatable> {
+		return new CollapsibleFieldGroup(checkboxes, {
+			label: this.options.label,
+			textWhenOpen: this.options.textWhenOpen,
+			textWhenClosed: this.options.textWhenClosed,
+			groupID: this.options.groupID,
+		}).render(ctx, data, messages, field_prefix, form_id);
+	}
+}

package/src/forms/controls/collapsible-field-group.ts

@@ -0,0 +1,96 @@
+import { Context } from "koa";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { FormDataValue, FormMessage } from "../form";
+import { FieldGroup } from "./field-group";
+import { randomUUID } from "crypto";
+import { FormControl } from "./form-control";
+
+type CollapsibleFieldGroupOptions = {
+	label?: string;
+	classes?: string;
+	openOnStart?: boolean;
+	textWhenOpen?: string;
+	textWhenClosed?: string;
+	groupID?: string;
+};
+
+export class CollapsibleFieldGroup extends FieldGroup {
+	public collapseID: string;
+	constructor(
+		public controls: FormControl[],
+		public options: CollapsibleFieldGroupOptions = {}
+	) {
+		super([]);
+		if (this.options.groupID == undefined) {
+			this.options.groupID = "A" + randomUUID(); // "A" is needed as ids always have to start with a letter
+		}
+		this.collapseID = this.options.groupID + "collapse";
+	}
+
+	getGroupLabelProps() {
+		return super.getGroupLabelProps() + ` for="${this.collapseID}"`;
+	}
+
+	preLabelContainer(): FlatTemplatable {
+		return /* HTML */ `<style>
+				input#${this.collapseID} {
+					display: none;
+				}
+
+				input#${this.collapseID} ~ .field-group__fields {
+					display: none;
+				}
+
+				input#${this.collapseID}:checked ~ .field-group__fields {
+					display: block;
+				}
+
+				input#${this.collapseID}
+					~ .field-group__label-container
+					.field-group__collapse-label-text--open {
+					display: none;
+				}
+
+				input#${this.collapseID}:checked
+					~ .field-group__label-container
+					.field-group__collapse-label-text--open {
+					display: inline-block;
+				}
+
+				input#${this.collapseID}
+					~ .field-group__label-container
+					.field-group__collapse-label-text--closed {
+					display: inline-block;
+				}
+
+				input#${this.collapseID}:checked
+					~ .field-group__label-container
+					.field-group__collapse-label-text--closed {
+					display: none;
+				}
+			</style>
+			<input
+				type="checkbox"
+				id="${this.collapseID}"
+				${this.options.openOnStart ? "checked" : ""}
+			/>`;
+	}
+
+	postLabel(): FlatTemplatable {
+		return /* HTML */ `<label
+			class="field-group__collapse-label"
+			for="${this.collapseID}"
+		>
+			<span
+				class="field-group__collapse-label-text field-group__collapse-label-text--open"
+			>
+				${this.options.textWhenOpen || "close"}
+			</span>
+			<span
+				class="field-group__collapse-label-text field-group__collapse-label-text--closed"
+			>
+				${this.options.textWhenClosed || "open"}
+			</span>
+		</label>`;
+	}
+}

package/src/forms/controls/controls.ts

@@ -16,3 +16,7 @@ export * from "./tickable";
 export * from "./checkbox";
 export * from "./radio";
 export * from "./big-radio-group";
+export * from "./checkbox-group";
+export * from "./collapsible-field-group";
+export * from "./collapsible-checkbox-group";
+export * from "./autocomplete";

package/src/forms/controls/field-group.ts

@@ -1,32 +1,83 @@
 import { Context } from "koa";
 import { FlatTemplatable, tempstream } from "tempstream";
-import { FormDataValue } from "../form";
+import { FormDataValue, FormMessage } from "../form";
 import { FormControl } from "./form-control";
+import { FormFieldControl } from "./form-field-control";
 
-export class FieldGroup extends FormControl {
+export class FieldGroup extends FormFieldControl {
 	constructor(
 		public controls: FormControl[],
-		public options: { label?: string; classes?: string } = {}
+		public options: {
+			label?: string;
+			classes?: string;
+			containerID?: string;
+		} = {}
 	) {
-		super();
+		super([]);
+	}
+
+	preLabel(): FlatTemplatable {
+		return "";
+	}
+
+	preLabelContainer(): FlatTemplatable {
+		return "";
+	}
+
+	postLabel(): FlatTemplatable {
+		return "";
+	}
+
+	preFields(): FlatTemplatable {
+		return "";
+	}
+
+	postFields(): FlatTemplatable {
+		return "";
+	}
+
+	getGroupLabelProps(): FlatTemplatable {
+		return `class="field-group__label"`;
 	}
 
 	async render(
 		ctx: Context,
-		data: Record<string, FormDataValue>
+		data: Record<string, FormDataValue>,
+		messages: FormMessage[],
+		field_prefix: string,
+		form_id: string
 	): Promise<FlatTemplatable> {
 		const { label, classes } = this.options;
 
 		return tempstream/* HTML */ `
-			<div class="field-group ${classes || ""}">
-				${label ? `<label>${label}</label>` : ""}
+			<div
+				class="field-group ${classes || ""}"
+				${this.options.containerID
+					? `id="${this.options.containerID}"`
+					: ""}
+			>
+				${this.preLabelContainer()}
+				<div class="field-group__label-container">
+					${this.preLabel()}
+					${label
+						? `<label ${this.getGroupLabelProps()}>${label}</label>`
+						: ""}
+					${this.postLabel()}
+				</div>
+				${this.preFields()}
 				<div class="field-group__fields">
 					${this.controls.map((control) =>
-						control.render(ctx, data, [], "", "")
+						control.render(
+							ctx,
+							data,
+							messages,
+							field_prefix,
+							form_id
+						)
 					)}
 				</div>
+				${this.postFields()}
 			</div>
 		`;
 	}
-	role = <const>"decoration";
 }

package/src/forms/controls/simple-input.ts

@@ -1,9 +1,9 @@
 import { Context } from "koa";
-import { FlatTemplatable } from "tempstream";
+import { FlatTemplatable, tempstream } from "tempstream";
 import { attribute } from "../../sanitize";
 import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
 import { FormField } from "../fields/field";
-import { FormDataValue } from "../form";
+import { FormDataValue, FormMessage } from "../form";
 import { FormFieldControl } from "./controls";
 
 export class SimpleInput extends FormFieldControl {
@@ -37,58 +37,106 @@ export class SimpleInput extends FormFieldControl {
 		super([field]);
 	}
 
+	getType(): string {
+		return this.options.type || "text";
+	}
+
+	getLabel(): string {
+		return this.options.label != undefined
+			? this.options.label
+			: this.field.name;
+	}
+
+	getID(): string {
+		return this.options.id || this.field.name;
+	}
+
+	getPlaceholder(): string {
+		return this.options.placeholder || this.getType();
+	}
+
+	async getInputAttributes(
+		ctx: Context,
+		data: Record<string, FormDataValue>,
+		field_prefix: string,
+		form_id: string
+	): Promise<Record<string, string | true>> {
+		const readonly = this.options.readonly || false;
+		const required = this.field.required;
+		const { parsed, raw, valid } = await this.field.getValue(ctx, data);
+		return Object.fromEntries([
+			<const>["id", this.getID()],
+			<const>["type", this.getType()],
+			<const>["name", `${field_prefix}${this.field.name}`],
+			<const>[
+				"value",
+				!valid && raw
+					? raw.toString()
+					: parsed !== undefined && parsed !== null
+					? ((parsed as any)?.toString() as string) || ""
+					: "",
+			],
+			...(form_id ? [["form", form_id]] : []),
+			<const>["placeholder", this.getPlaceholder()],
+			...(readonly ? [["readonly", true]] : []),
+			...(required ? [["required", true]] : []),
+			...(!this.options.autocomplete ? [["autocomplete", "off"]] : []),
+			...(this.options.step ? [["step", this.options.step]] : []),
+		]);
+	}
+
+	renderAttributes(attrs: Record<string, string | true>) {
+		return Object.entries(attrs)
+			.map(([key, value]) => {
+				if (value === true) {
+					return key;
+				} else {
+					return `${key}="${attribute(value)}"`;
+				}
+			})
+			.join(" ");
+	}
+
+	async postInput(ctx: Context): Promise<FlatTemplatable> {
+		return "";
+	}
+
 	async render<Fields extends Record<string, FormField>>(
 		ctx: Context,
 		data: Record<string, FormDataValue>,
-		_: unknown[],
+		_messages: FormMessage[],
 		field_prefix: string,
 		form_id: string
 	): Promise<FlatTemplatable> {
-		const id = this.options.id || this.field.name;
-		const label =
-			this.options.label != undefined
-				? this.options.label
-				: this.field.name;
-		const type = this.options.type || "text";
-		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		const id = this.getID();
+		const label = this.getLabel();
+		const type = this.getType();
+
 		const { parsed, raw, valid, message } = await this.field.getValue(
 			ctx,
 			data
 		);
-		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-		const placeholder = this.options.placeholder || type;
-		const readonly = this.options.readonly || false;
-		const required = this.field.required;
+		const placeholder = this.getPlaceholder();
 
-		return /* HTML */ inputWrapper(
-			[id, type, getRequiredClass(required)],
-			`
-			<label for="${id}">${label}</label>
-			<input
-				id="${id}"
-				type="${type}"
-				name="${field_prefix}${this.field.name}"
-				value="${attribute(
-					!valid && raw
-						? raw.toString()
-						: parsed !== undefined && parsed !== null
-						? // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-call,  @typescript-eslint/no-unsafe-member-access
-						  ((parsed as any)?.toString() as string) || ""
-						: ""
-				)}"
-				${form_id ? `form="${form_id}"` : ""}
-				placeholder="${placeholder}"
-				${readonly ? "readonly" : ""}
-				${required ? "required" : ""}
-				${!this.options.autocomplete ? `autocomplete="off"` : ""}
-				${this.options.step ? `step="${this.options.step}"` : ""}
-			/>
-			${
-				~valid && !this.options.hide_errors
+		return inputWrapper(
+			[id, type, getRequiredClass(this.field.required)],
+			tempstream/* HTML */ `
+				<label for="${id}">${label}</label>
+				<input
+					${this.renderAttributes(
+						await this.getInputAttributes(
+							ctx,
+							data,
+							field_prefix,
+							form_id
+						)
+					)}
+				/>
+				${this.postInput(ctx)}
+				${~valid && !this.options.hide_errors
 					? `<div class="input__error">${message}</div>`
-					: ""
-			}
-`
+					: ""}
+			`
 		);
 	}
 }

package/src/forms/controls/tickable.ts

@@ -6,15 +6,18 @@ import { FormField } from "../fields/field";
 import { FormDataValue } from "../form";
 import { FormFieldControl } from "./controls";
 
+export type TickableOptions = {
+	id?: string;
+	name?: string;
+	label?: string;
+	hide_errors?: boolean;
+	readonly?: boolean;
+};
+
 export abstract class Tickable<T extends unknown> extends FormFieldControl {
 	constructor(
 		public field: FormField<boolean, T>,
-		public options: {
-			id?: string;
-			label?: string;
-			hide_errors?: boolean;
-			readonly?: boolean;
-		} = {}
+		public options: TickableOptions = {}
 	) {
 		super([field]);
 	}
@@ -69,6 +72,8 @@ export abstract class Tickable<T extends unknown> extends FormFieldControl {
 		const readonly = this.options.readonly || false;
 		const required = this.field.required;
 
+		const value = this.getValueAttribute(ctx, data, parsed);
+
 		return inputWrapper(
 			this.getWrapperClasses(ctx, data, parsed),
 
@@ -76,10 +81,9 @@ export abstract class Tickable<T extends unknown> extends FormFieldControl {
 				<input
 					id="${id}"
 					type="${this.type}"
-					name="${field_prefix}${this.field.name}"
-					value="${attribute(
-						this.getValueAttribute(ctx, data, parsed)
-					)}"
+					name="${field_prefix}${this.options.name ||
+					this.field.name}"
+					${value ? `value="${attribute(value)}"` : ""}
 					${form_id ? `form="${form_id}"` : ""}
 					${this.isChecked(ctx, data, parsed) ? "checked" : ""}
 					${readonly ? "readonly" : ""}

package/src/forms/fields/boolean.ts

@@ -40,6 +40,12 @@ export class Boolean<Required extends boolean> extends FormField<
 				parsed_value: truthy.includes(value),
 				error: null,
 			};
+		} else if (is(value, predicates.undefined)) {
+			return {
+				parsable: true,
+				parsed_value: false,
+				error: null,
+			};
 		} else {
 			return {
 				parsable: false,

package/src/forms/fields/enum-multiple.ts

@@ -0,0 +1,58 @@
+import { is, predicates } from "@sealcode/ts-predicates";
+import { Context } from "koa";
+import { FormDataValue } from "../form";
+import { FieldParseResult, FormField } from "./field";
+
+export class EnumMultipleField<
+	Options extends readonly string[],
+	Required extends boolean
+> extends FormField<Required, string[]> {
+	constructor(
+		required: Required,
+		public options: Options,
+		public error_message: (options: Options) => string = (options) =>
+			options.join(", ")
+	) {
+		super(required);
+	}
+
+	predicate = predicates.enum<Options>(this.options);
+
+	public async isValueValid(
+		_: Context,
+		values: string[]
+	): Promise<{ valid: boolean; message: string }> {
+		for (const value of values) {
+			if (!is(value, predicates.string)) {
+				return { valid: false, message: "expected a string" };
+			}
+			if (!this.options.includes(value)) {
+				return { valid: false, message: "invalid value" };
+			}
+		}
+		return { valid: true, message: "" };
+	}
+
+	async parse(
+		_: Context,
+		value: FormDataValue
+	): Promise<FieldParseResult<string[]>> {
+		if (is(value, predicates.array(predicates.string))) {
+			return {
+				parsable: true,
+				parsed_value: value,
+				error: null,
+			};
+		} else {
+			return {
+				parsable: false,
+				parsed_value: null,
+				error: "Please enter a string",
+			};
+		}
+	}
+
+	public getEmptyValue(): string[] {
+		return [];
+	}
+}

package/src/forms/fields/existing-sealious-value.ts

@@ -0,0 +1,22 @@
+import { Field } from "sealious";
+import { PickFromListField } from "./pick-from-list";
+
+export class ExistingSealiousValue<
+	Required extends boolean
+> extends PickFromListField<Required> {
+	constructor(required: Required, field: Field) {
+		super(required, async (ctx) => {
+			const { items } = await field.collection.list(ctx.$context).fetch();
+			return Object.fromEntries(
+				items.map((item) => {
+					const value = item.get(field.name);
+					return [value, value];
+				})
+			);
+		});
+	}
+
+	getEmptyValue() {
+		return "";
+	}
+}

package/src/forms/fields/field.ts

@@ -37,12 +37,16 @@ export function fieldsToShape<Fields extends Record<string, FormField>>(
 }
 
 export type FieldParseResult<T> =
+	| {
+			parsable: true;
+			error: null;
+			parsed_value: T;
+	  }
 	| {
 			parsable: false;
 			error: string;
 			parsed_value: null;
-	  }
-	| { parsable: true; error: null; parsed_value: T };
+	  };
 
 export abstract class FormField<
 	Required extends boolean = boolean,
@@ -51,6 +55,7 @@ export abstract class FormField<
 	name: string;
 	constructor(public readonly required: Required) {}
 	predicate: Predicate = predicates.unknown;
+	mapToFilter: (parsed: ParsedValue) => unknown = (value) => value;
 
 	init(fieldname: string): void {
 		this.name = fieldname;
@@ -135,6 +140,11 @@ export abstract class FormField<
 			raw: all_form_values[this.name],
 		};
 	}
+
+	setMapToFilter(fn: (parsed: ParsedValue) => unknown) {
+		this.mapToFilter = fn;
+		return this;
+	}
 }
 
 export * from "./simple-form-field";
@@ -146,3 +156,5 @@ export * from "./regexp";
 export * from "./email";
 export * from "./enum";
 export * from "./boolean";
+export * from "./enum-multiple";
+export * from "./existing-sealious-value";

package/src/forms/fields/pick-from-list.ts

@@ -38,7 +38,7 @@ export class PickFromListField<
 		if (!is(value, predicates.string)) {
 			return { valid: false, message: "not a string" };
 		}
-		if (!Object.keys(options).includes(value)) {
+		if (this.required && !Object.keys(options).includes(value)) {
 			return {
 				valid: false,
 				message: `"${value}" is not one of the options`,

package/src/forms/fields/proxy-field.ts

@@ -0,0 +1,24 @@
+import { FormField } from "./field";
+
+export class ProxyFormField<T> extends FormField<boolean, T> {
+	constructor(
+		required: boolean,
+		public name: string,
+		public empty_value: T,
+		public parsed_value: T
+	) {
+		super(required);
+	}
+
+	getEmptyValue() {
+		return this.empty_value;
+	}
+
+	async parse() {
+		return <const>{
+			parsable: true,
+			error: null,
+			parsed_value: this.parsed_value,
+		};
+	}
+}

package/src/forms/forms.scss

@@ -16,3 +16,14 @@
 .form__error {
 	color: #ff4136;
 }
+
+.form-input__wrapper--checkbox {
+	display: flex;
+	flex-flow: row nowrap;
+	align-items: center;
+	& > input[type="checkbox"] {
+		margin-right: 10px;
+		width: 15px;
+		height: 15px;
+	}
+}

package/src/page/list.ts

@@ -5,7 +5,7 @@ import { Templatable, tempstream, FlatTemplatable } from "tempstream";
 import { peopleWhoCan } from "./access-control";
 import { Page } from "./page";
 import { ShapeToType } from "@sealcode/ts-predicates";
-import { FormFieldControl } from "../forms/controls/controls";
+import { FormControl, FormFieldControl } from "../forms/controls/controls";
 import { FormField, NumberField } from "../forms/fields/field";
 import { naturalNumbers, UrlWithNewParams } from "../utils/utils";
 import { FormDataValue } from "..";
@@ -39,7 +39,7 @@ export abstract class ListPage<
 	abstract renderItem(ctx: Context, item: ItemType): Promise<FlatTemplatable>;
 
 	filterFields: Record<string, FormField> = {};
-	filterControls: FormFieldControl[] = [];
+	filterControls: FormControl[] = [];
 
 	init(): void {
 		super.init();
@@ -54,15 +54,17 @@ export abstract class ListPage<
 
 	async renderItems(
 		ctx: Context,
-		values: Record<string, FormDataValue> = this.extractRawValues(ctx)
+		values: Record<string, FormDataValue> = this.extractRawValues(ctx),
+		items?: ItemType[]
 	): Promise<FlatTemplatable> {
 		const { parsed: page } = await this.fields.page.getValue(ctx, values);
 		const { parsed: itemsPerPage } =
 			await this.fields.itemsPerPage.getValue(ctx, values);
 		const items_promise = this.getItems(ctx, page, itemsPerPage, values);
-		return tempstream`${items_promise.then((items) =>
-			items.map((item) => this.renderItem(ctx, item))
-		)}`;
+		return tempstream`${(items
+			? Promise.resolve(items)
+			: items_promise
+		).then((items) => items.map((item) => this.renderItem(ctx, item)))}`;
 	}
 
 	async render(ctx: Context): Promise<FlatTemplatable> {
@@ -132,7 +134,7 @@ ${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
 		for (const [fieldname, field] of Object.entries(this.filterFields)) {
 			// eslint-disable-next-line no-await-in-loop
 			const { parsed } = await field.getValue(ctx, raw_values);
-			filter[fieldname] = parsed;
+			filter[fieldname] = field.mapToFilter(parsed);
 		}
 		return filter;
 	}
@@ -144,10 +146,10 @@ ${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
 				"page",
 				...Object.values(this.filterFields).map((f) => f.name),
 			])}
-			${this.filterControls.map((control) =>
+			${this.filterControls.map((control) => {
 				// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-				control.render(ctx, values, [], "", "")
-			)}
+				return control.render(ctx, values, [], "", "");
+			})}
 		</form>`;
 	}
 }