@sealcode/sealgen 0.8.3 → 0.8.6

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

@@ -13,6 +13,7 @@ export type DefaultCheckboxOptions = {
 	readonly?: boolean;
 	name?: string;
 	checkboxNameToLabel?: (name: string) => string;
+	classes?: string[];
 };
 
 export class CheckboxGroup<
@@ -31,14 +32,22 @@ export class CheckboxGroup<
 		messages: FormMessage[],
 		field_prefix: string,
 		form_id: string,
-		checkboxes: CheckboxWithValue[]
+		checkboxes: CheckboxWithValue[],
+		show_field_errors: boolean
 	): Promise<FlatTemplatable> {
-		return new FieldGroup(checkboxes, { label: this.options.label }).render(
+		return new FieldGroup(checkboxes, {
+			label: this.options.label,
+			classes: [
+				...(this.options.classes || []),
+				"field-group--checkboxes",
+			],
+		}).render(
 			ctx,
 			data,
 			messages,
 			field_prefix,
-			form_id
+			form_id,
+			show_field_errors
 		);
 	}
 
@@ -47,7 +56,8 @@ export class CheckboxGroup<
 		data: Record<string, FormDataValue>,
 		messages: FormMessage[],
 		field_prefix: string,
-		form_id: string
+		form_id: string,
+		show_field_errors: boolean
 	): Promise<FlatTemplatable> {
 		const { parsed: values } = await this.field.getValue(ctx, data);
 		const checkboxes = this.field.options.map(
@@ -55,7 +65,7 @@ export class CheckboxGroup<
 				new CheckboxWithValue(
 					new ProxyFormField(
 						false,
-						this.field.name + "[]",
+						this.field.name,
 						false,
 						values.includes(option)
 					),
@@ -75,7 +85,8 @@ export class CheckboxGroup<
 			messages,
 			field_prefix,
 			form_id,
-			checkboxes
+			checkboxes,
+			show_field_errors
 		);
 	}
 }

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

@@ -19,13 +19,21 @@ export class CollapsibleCheckboxGroup extends CheckboxGroup<
 		messages: FormMessage[],
 		field_prefix: string,
 		form_id: string,
-		checkboxes: CheckboxWithValue[]
+		checkboxes: CheckboxWithValue[],
+		show_field_errors: boolean
 	): 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);
+		}).render(
+			ctx,
+			data,
+			messages,
+			field_prefix,
+			form_id,
+			show_field_errors
+		);
 	}
 }

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

@@ -1,13 +1,11 @@
-import { Context } from "koa";
-import { FlatTemplatable, tempstream } from "tempstream";
-import { FormDataValue, FormMessage } from "../form";
+import { FlatTemplatable } from "tempstream";
 import { FieldGroup } from "./field-group";
 import { randomUUID } from "crypto";
 import { FormControl } from "./form-control";
 
 type CollapsibleFieldGroupOptions = {
 	label?: string;
-	classes?: string;
+	classes?: string[];
 	openOnStart?: boolean;
 	textWhenOpen?: string;
 	textWhenClosed?: string;

package/src/forms/controls/controls.ts

@@ -20,3 +20,6 @@ export * from "./checkbox-group";
 export * from "./collapsible-field-group";
 export * from "./collapsible-checkbox-group";
 export * from "./autocomplete";
+export * from "./file";
+export * from "./multiple-files";
+export * from "./number";

package/src/forms/controls/derived.ts

@@ -35,18 +35,19 @@ export class Derived<
 							})
 							.join(",")},
 					};
-					const form = document.currentScript.closest("form");
+					const form_container =
+						document.currentScript.closest(".form-container");
 					const render = ${this._render.toString()};
 					function getValues() {
 						return Object.fromEntries(
 							${JSON.stringify(
 								this.fields.map((field) => field.name)
 							)}.map((field_name) => {
-								let input = form.querySelector(
+								let input = form_container.querySelector(
 									\`input[name="\${field_name}"]\`
 								);
 								if (input.type === "radio") {
-									input = form.querySelector(
+									input = form_container.querySelector(
 										\`input[name="\${field_name}"]:checked\`
 									);
 								}
@@ -55,14 +56,14 @@ export class Derived<
 						);
 					}
 					function setupWatcher(field_name) {
-						form.querySelectorAll(
-							\`input[name="\${field_name}"]\`
-						).forEach((input) => {
-							input.onchange = () => {
-								document.querySelector("#${id}").innerHTML =
-									render(getValues(), consts);
-							};
-						});
+						form_container
+							.querySelectorAll(\`input[name="\${field_name}"]\`)
+							.forEach((input) => {
+								input.onchange = () => {
+									document.querySelector("#${id}").innerHTML =
+										render(getValues(), consts);
+								};
+							});
 					}
 					${JSON.stringify(
 						this.fields.map((field) => field.name)

package/src/forms/controls/dropdown.ts

@@ -1,11 +1,11 @@
 import { Context } from "koa";
+import { FlatTemplatable, tempstream } from "tempstream";
 import { attribute } from "../../sanitize";
-import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
-import { FormField, PickFromListField } from "../fields/field";
+import { PickFromListField } from "../fields/field";
 import { FormDataValue } from "../form";
-import { FormFieldControl } from "./controls";
+import { SimpleInput } from "./simple-input";
 
-export class Dropdown extends FormFieldControl {
+export class Dropdown extends SimpleInput<string | null> {
 	constructor(
 		public field: PickFromListField<boolean>,
 		public options: {
@@ -18,41 +18,58 @@ export class Dropdown extends FormFieldControl {
 			autocomplete: true,
 		}
 	) {
-		super([field]);
+		super(field);
 	}
 
-	async render<Fields extends Record<string, FormField>>(
+	async getInputAttributes(
 		ctx: Context,
+		data: Record<string, FormDataValue>,
+		field_prefix: string,
+		form_id: string
+	): Promise<Record<string, string | boolean>> {
+		const original = await super.getInputAttributes(
+			ctx,
+			data,
+			field_prefix,
+			form_id
+		);
+		return {
+			...original,
+			...Object.fromEntries([
+				...(this.options.autosubmit
+					? [
+							[
+								"onchange",
+								(original.onchange || "") +
+									";this.form.submit();",
+							],
+					  ]
+					: []),
+			]),
+		};
+	}
+
+	async renderInput(
+		ctx: Context,
+		attributes_str: string,
 		data: Record<string, FormDataValue>
-	) {
+	): Promise<FlatTemplatable> {
 		const { parsed: picked_value } = await this.field.getValue(ctx, data);
-		const name = this.field.name;
-		return inputWrapper(
-			[name, getRequiredClass(this.field.required)],
-			/* HTML */ `<label for="${name}">${this.options.label}</label
-				><select
-					name="${this.field.name}"
-					id="${name}"
-					${this.options.autosubmit
-						? `onchange='this.form.submit()'`
-						: ""}
-					${!this.options.autocomplete ? `autocomplete="off"` : ""}
-				>
-					${
-						// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-						Promise.resolve(this.field.generateOptions(ctx)).then(
-							(options) =>
-								Object.entries(options).map(
-									([value, text]) =>
-										`<option value="${attribute(value)}" ${
-											(value || "") == picked_value
-												? "selected"
-												: ""
-										}>${text}</option>`
-								)
+		return /* HTML */ tempstream`<select ${attributes_str}>
+			${
+				// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+				Promise.resolve(this.field.generateOptions(ctx)).then(
+					(options) =>
+						Object.entries(options).map(
+							([value, text]) =>
+								`<option value="${attribute(value)}" ${
+									(value || "") == picked_value
+										? "selected"
+										: ""
+								}>${text}</option>`
 						)
-					}
-				</select>`
-		);
+				)
+			}
+		</select>`;
 	}
 }

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

@@ -9,7 +9,7 @@ export class FieldGroup extends FormFieldControl {
 		public controls: FormControl[],
 		public options: {
 			label?: string;
-			classes?: string;
+			classes?: string[];
 			containerID?: string;
 		} = {}
 	) {
@@ -45,13 +45,14 @@ export class FieldGroup extends FormFieldControl {
 		data: Record<string, FormDataValue>,
 		messages: FormMessage[],
 		field_prefix: string,
-		form_id: string
+		form_id: string,
+		show_field_errors: boolean
 	): Promise<FlatTemplatable> {
 		const { label, classes } = this.options;
 
 		return tempstream/* HTML */ `
 			<div
-				class="field-group ${classes || ""}"
+				class="field-group ${(classes || []).join(" ")}"
 				${this.options.containerID
 					? `id="${this.options.containerID}"`
 					: ""}
@@ -72,7 +73,8 @@ export class FieldGroup extends FormFieldControl {
 							data,
 							messages,
 							field_prefix,
-							form_id
+							form_id,
+							show_field_errors
 						)
 					)}
 				</div>

package/src/forms/controls/file.ts

@@ -0,0 +1,50 @@
+import { Context } from "koa";
+import { FileContainer } from "../fields/file";
+import { FormDataValue } from "../form";
+import { SimpleInput } from "./simple-input";
+
+export class File extends SimpleInput<FileContainer> {
+	getType() {
+		return "file";
+	}
+
+	async preInput(ctx: Context, data: Record<string, FormDataValue>) {
+		const { parsed } = await this.field.getValue(ctx, data);
+		return /* HTML */ ` ${parsed.old?.filename || ""}
+			<input
+				type="hidden"
+				name="${this.field.name}[old][id]"
+				value="${parsed.old?.id || ""}"
+			/>
+			<input
+				type="hidden"
+				name="${this.field.name}[old][filename]"
+				value="${parsed.old?.filename || ""}"
+			/>`;
+	}
+
+	async getInputAttributes(
+		ctx: Context,
+		data: Record<string, FormDataValue>,
+		field_prefix: string,
+		form_id: string
+	) {
+		const original = await super.getInputAttributes(
+			ctx,
+			data,
+			field_prefix,
+			form_id
+		);
+		const { parsed } = await this.field.getValue(ctx, data);
+		return {
+			...original,
+			name: this.field.name + "[new]",
+			required: original.required && !parsed.old,
+			value: false,
+			onchange:
+				(original.onchange || "") +
+				";" +
+				"filename = this.value.split('\\\\').slice(-1)[0]; this.parentElement.style.setProperty('--filename', '\\'Wybrany plik: ' + filename + '\\'')",
+		};
+	}
+}

package/src/forms/controls/form-control.ts

@@ -1,3 +1,4 @@
+import Router from "@koa/router";
 import { Context } from "koa";
 import { FlatTemplatable } from "tempstream";
 import { FormDataValue, FormMessage } from "../form";
@@ -8,7 +9,10 @@ export abstract class FormControl {
 		data: Record<string, FormDataValue>,
 		messages: FormMessage[],
 		field_name_prefix: string,
-		form_id: string
+		form_id: string,
+		validate: boolean
 	): FlatTemplatable | Promise<FlatTemplatable>;
 	abstract role: "input" | "decoration" | "messages" | "submit";
+
+	mount(router: Router) {}
 }

package/src/forms/controls/form-field-control.ts

@@ -21,6 +21,7 @@ export abstract class FormFieldControl extends FormControl {
 		data: Record<string, FormDataValue>,
 		messages: [],
 		field_name_prefix: string,
-		form_id: string
+		form_id: string,
+		validate: boolean
 	): FlatTemplatable | Promise<FlatTemplatable>;
 }

package/src/forms/controls/multiple-files.ts

@@ -0,0 +1,213 @@
+import Router from "@koa/router";
+import {
+	Collection,
+	CollectionItem,
+	File as SealiousFile,
+	Field as SealiousField,
+} from "sealious";
+import { Context } from "koa";
+import { inputWrapper } from "../../utils/input-wrapper";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files";
+import { FormDataValue } from "../form";
+import { FormFieldControl } from "./form-field-control";
+import { is, predicates } from "@sealcode/ts-predicates";
+
+export type MultipleFilesOptions = { label?: string; uploadLabel?: string };
+
+export class MultipleFiles extends FormFieldControl {
+	public options: MultipleFilesOptions;
+	constructor(
+		public field: MultipleFilesField,
+		options?: MultipleFilesOptions
+	) {
+		super([field]);
+		this.options = options || {};
+	}
+
+	mount(router: Router) {
+		router.get(this.getFrameRelativeURL(), async (ctx) => {
+			ctx.body = this.renderFrame(
+				ctx,
+				await this.renderFrameContent(ctx)
+			);
+		});
+
+		router.post(
+			this.getFrameRelativeURL() + "/delete/:file_item_id",
+			async (ctx) => {
+				await this.deleteFileAssociation(ctx, ctx.params.file_item_id);
+				ctx.body = this.renderFrame(
+					ctx,
+					await this.renderFrameContent(ctx)
+				);
+			}
+		);
+
+		router.post(this.getFrameRelativeURL() + "/add", async (ctx) => {
+			const file = ctx.$body.file;
+			if (!file || !is(file, predicates.object)) {
+				ctx.body = "Missing file";
+				return;
+			}
+			await this.addFileAssociation(ctx, file as unknown as SealiousFile);
+			ctx.body = this.renderFrame(
+				ctx,
+				await this.renderFrameContent(ctx)
+			);
+		});
+	}
+
+	async deleteFileAssociation(ctx: Context, file_item_id: string) {
+		await ctx.$app.collections[
+			this.field.collection_field.referencing_collection
+		].removeByID(ctx.$context, file_item_id);
+	}
+
+	async addFileAssociation(ctx: Context, file: SealiousFile) {
+		const file_field = this.getFileField();
+		if (!file_field) {
+			throw new Error("No file field in referencing collection");
+		}
+		const body = {
+			[this.field.collection_field.referencing_field]:
+				await this.field.getItemId(ctx),
+			[file_field.name]: file,
+		};
+		await ctx.$app.collections[
+			this.field.collection_field.referencing_collection
+		].create(ctx.$context, body);
+	}
+
+	getFrameRelativeURL() {
+		return `${this.field.name}_files`;
+	}
+
+	getFrameID(): string {
+		// the "A" is necessary here
+		return `A${this.field.name}__multiple-fields-control`;
+	}
+
+	renderFrame(ctx: Context, content?: FlatTemplatable) {
+		return tempstream/* HTML */ `<turbo-frame
+			${content ? "" : `src="./${this.getFrameRelativeURL()}"`}
+			id="${this.getFrameID()}"
+			target="_top"
+		>
+			${content || ""}
+		</turbo-frame>`;
+	}
+
+	render(
+		ctx: Context,
+		_data: Record<string, FormDataValue>,
+		_messages: [],
+		field_name_prefix: string,
+		form_id: string,
+		validate: boolean
+	): FlatTemplatable | Promise<FlatTemplatable> {
+		return this.renderFrame(ctx, "");
+	}
+
+	getReferencingCollection() {
+		const result =
+			this.field.collection_field.app.collections[
+				this.field.collection_field.referencing_collection
+			];
+		return result;
+	}
+
+	getFileField(): SealiousField | null {
+		for (const [field_name, field] of Object.entries(
+			this.getReferencingCollection().fields
+		)) {
+			if (field.handles_large_data) {
+				return field;
+			}
+		}
+		return null;
+	}
+
+	async extractFileFromItem(
+		item: CollectionItem
+	): Promise<SealiousFile | null> {
+		const sealious_field = this.getFileField();
+		if (!sealious_field) {
+			return null;
+		}
+		return await SealiousFile.fromID(
+			(item.collection as Collection).app,
+			item.get(sealious_field.name).id
+		);
+	}
+
+	async renderFileItem(
+		fileItem: CollectionItem,
+		file: SealiousFile
+	): Promise<FlatTemplatable> {
+		return /* HTML */ `<li>
+			<a href="${file.getURL()}" data-turbo="false">
+				${file.filename || "no filename"}
+			</a>
+			<form
+				data-turbo-frame="${this.getFrameID()}"
+				action="${this.getFrameRelativeURL()}/delete/${fileItem.id}"
+				method="POST"
+			>
+				<input type="submit" value="X" class="file-list-action" />
+			</form>
+		</li>`;
+	}
+
+	async getFileItems(ctx: Context) {
+		const item_id = await this.field.getItemId(ctx);
+		const {
+			items: [item],
+		} = await this.field.collection_field.collection
+			.list(ctx.$context)
+			.ids([item_id])
+			.attach({ [this.field.collection_field.name]: true })
+			.fetch();
+		return item
+			.getAttachments(this.field.collection_field.name)
+			.filter((f) => f);
+	}
+
+	async renderFrameContent(ctx: Context): Promise<FlatTemplatable> {
+		const files = (
+			await Promise.all(
+				(
+					await this.getFileItems(ctx)
+				).map(async (item) => [
+					item,
+					await this.extractFileFromItem(item),
+				])
+			)
+		).filter(([_, f]) => f !== null) as [CollectionItem, SealiousFile][];
+
+		return inputWrapper(
+			["multiple-files", this.field.name],
+			tempstream/* HTML */ `
+				<label>${this.options.label || this.field.name}</label>
+				<ul>
+					${files.map(([item, file]) =>
+						this.renderFileItem(item, file)
+					)}
+				</ul>
+				<form
+					action="${this.getFrameRelativeURL()}/add"
+					method="POST"
+					enctype="multipart/form-data"
+					data-turbo-frame="${this.getFrameID()}"
+				>
+					<input type="file" name="file" />
+					<input
+						type="submit"
+						value="${this.options.uploadLabel || "Upload"}"
+						class="file-list-action"
+					/>
+				</form>
+			`
+		);
+	}
+}

package/src/forms/controls/number.ts

@@ -0,0 +1,52 @@
+import { Context } from "koa";
+import { FlatTemplatable } from "tempstream";
+import { FormField, NumberField } from "../fields/field";
+import { FormDataValue } from "../form";
+import { SimpleInput, SimpleInputOptions } from "./simple-input";
+
+export type NumberOptions = SimpleInputOptions &
+	Partial<{ step: number; suffix: string }>;
+
+export class Number extends SimpleInput<number | null> {
+	field: NumberField;
+	options: NumberOptions;
+	constructor(field: NumberField, options: NumberOptions) {
+		super(field, options);
+	}
+
+	getType() {
+		return "number";
+	}
+
+	async postInput(_: Context): Promise<FlatTemplatable> {
+		return this.options.suffix
+			? /* HTML */ `<span class="suffix">${this.options.suffix}</span>`
+			: "";
+	}
+
+	async getInputAttributes(
+		ctx: Context,
+		data: Record<string, FormDataValue>,
+		field_prefix: string,
+		form_id: string
+	): Promise<Record<string, string | boolean>> {
+		const original = await super.getInputAttributes(
+			ctx,
+			data,
+			field_prefix,
+			form_id
+		);
+		return {
+			...original,
+			...Object.fromEntries([
+				...(this.field.options.min
+					? [["min", this.field.options.min]]
+					: []),
+				...(this.field.options.max
+					? [["max", this.field.options.max]]
+					: []),
+				...(this.options.step ? [["step", this.options.step]] : []),
+			]),
+		};
+	}
+}