@sealcode/sealgen 0.8.48 → 0.8.49

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

@@ -0,0 +1,256 @@
+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 { FormFieldControl } from "./form-field-control";
+import { is, predicates } from "@sealcode/ts-predicates";
+import { renderAttributes } from "../../utils/render-attributes";
+import { FormControlContext } from "./form-control";
+
+export type MultipleFilesOptions = {
+	label?: string;
+	uploadLabel?: string;
+	getAdditionalFields: (
+		ctx: Context,
+		file: SealiousFile
+	) => Promise<Record<string, unknown>>;
+};
+
+export class MultipleFiles extends FormFieldControl {
+	public options: MultipleFilesOptions;
+	constructor(
+		public field: MultipleFilesField,
+		options?: Partial<MultipleFilesOptions>
+	) {
+		super([field]);
+		this.options = { getAdditionalFields: async () => ({}), ...options };
+	}
+
+	getClassModifiers(): string[] {
+		return [];
+	}
+
+	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) => {
+			let files = ctx.$body.files as SealiousFile | SealiousFile[];
+			if (!files || !is(files, predicates.object)) {
+				ctx.body = "Missing files";
+				return;
+			}
+			if (!Array.isArray(files)) {
+				files = [files];
+			}
+			await Promise.all(
+				files.map((file) =>
+					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 = {
+			...(await this.options.getAdditionalFields(ctx, file)),
+			[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(
+		fctx: FormControlContext
+	): FlatTemplatable | Promise<FlatTemplatable> {
+		return this.renderFrame(fctx.ctx, "");
+	}
+
+	getReferencingCollection() {
+		const result =
+			this.field.collection_field.app.collections[
+				this.field.collection_field.referencing_collection
+			];
+		return result;
+	}
+
+	getFileField(): SealiousField | null {
+		for (const [_, 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 renderFileItemPreview(
+		_fileItem: CollectionItem,
+		file: SealiousFile
+	): Promise<FlatTemplatable> {
+		return file.filename || "no filename";
+	}
+
+	async renderFileItem(
+		fileItem: CollectionItem,
+		file: SealiousFile
+	): Promise<FlatTemplatable> {
+		return tempstream/* HTML */ `<li class="file-list-item">
+			<a
+				class="file-list-item__preview"
+				href="${file.getURL()}"
+				data-turbo="false"
+			>
+				${this.renderFileItemPreview(fileItem, file)}
+			</a>
+			${this.renderFileRemoveButton(fileItem)}
+		</li>`;
+	}
+
+	renderFileRemoveButton(fileItem: CollectionItem): FlatTemplatable {
+		return /* HTML */ ` <form
+			data-turbo-frame="${this.getFrameID()}"
+			action="${this.getFrameRelativeURL()}/delete/${fileItem.id}"
+			method="POST"
+		>
+			<input
+				type="submit"
+				value="X"
+				class="file-list-action file-list-item__button file-list-item__button--delete"
+			/>
+		</form>`;
+	}
+
+	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);
+	}
+
+	getInputAttributes() {
+		return { type: "file", name: "files", multiple: true };
+	}
+
+	async renderFrameContent(ctx: Context): Promise<FlatTemplatable> {
+		const files = (
+			await Promise.all(
+				(
+					await this.getFileItems(ctx)
+				)
+					.filter((item) => item) // filter out undefineds
+					.map(async (item) => [
+						item,
+						await this.extractFileFromItem(item),
+					])
+			)
+		).filter(([_, f]) => f !== null) as [CollectionItem, SealiousFile][];
+
+		return inputWrapper(
+			["multiple-files", this.field.name, ...this.getClassModifiers()],
+			tempstream/* HTML */ `
+				<label>${this.options.label || this.field.name}</label>
+				<ul class="multiple-files__list">
+					${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 ${renderAttributes(this.getInputAttributes())} />
+					<input
+						type="submit"
+						value="${this.options.uploadLabel || "Upload"}"
+						class="file-list-action"
+					/>
+				</form>
+			`
+		);
+	}
+}

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

@@ -0,0 +1,44 @@
+import { File as SealiousFile, CollectionItem } from "sealious";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { MultipleFiles, MultipleFilesOptions } from "./multiple-files";
+import { MultipleFiles as MultipleFilesField } from "../fields/multiple-files";
+import KoaResponsiveImageRouter from "koa-responsive-image-router";
+
+export class MultiplePhotos extends MultipleFiles {
+	constructor(
+		public field: MultipleFilesField,
+		public imageRouter: KoaResponsiveImageRouter,
+		options?: Partial<MultipleFilesOptions>
+	) {
+		super(field, options);
+	}
+
+	getClassModifiers() {
+		return ["multiple-files--photos"];
+	}
+
+	getInputAttributes() {
+		return { ...super.getInputAttributes(), accept: "image/*" };
+	}
+
+	async renderFileItem(
+		fileItem: CollectionItem,
+		file: SealiousFile
+	): Promise<FlatTemplatable> {
+		const path = file.getDataPath();
+		if (!path) {
+			return "missing file";
+		}
+		return tempstream/* HTML */ `<li>
+			<a href="${file.getURL()}" data-turbo="false">
+				${this.imageRouter.image({
+					path,
+					resolutions: [150, 300],
+					sizes_attr: "150px",
+				})}
+			</a>
+			<span class="filename"> ${file.filename || "no filename"}</span>
+			${this.renderFileRemoveButton(fileItem)}
+		</li>`;
+	}
+}

package/src/forms/controls/number.ts

@@ -0,0 +1,38 @@
+import { Context } from "koa";
+import { FlatTemplatable } from "tempstream";
+import { FormField, NumberField } from "../fields/field";
+import { FormDataValue } from "../form";
+import { FormControlContext } from "./form-control";
+import { SimpleInput, SimpleInputOptions } from "./simple-input";
+
+export type NumberOptions = SimpleInputOptions & Partial<{ step: number }>;
+
+export class Number extends SimpleInput<number | null> {
+	field: NumberField;
+	options: NumberOptions;
+	constructor(field: NumberField, options: NumberOptions) {
+		super(field, options);
+	}
+
+	getType() {
+		return "number";
+	}
+
+	async getInputAttributes(
+		fctx: FormControlContext
+	): Promise<Record<string, string | boolean>> {
+		const original = await super.getInputAttributes(fctx);
+		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]] : []),
+			]),
+		};
+	}
+}

package/src/forms/controls/photo.ts

@@ -0,0 +1,74 @@
+import { Context } from "koa";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { File } from "./file";
+import { File as SealiousFile } from "sealious";
+import { FileContainer, FormField } from "../fields/field";
+import { SimpleInputOptions } from "./simple-input";
+import KoaResponsiveImageRouter from "koa-responsive-image-router";
+import { FormControlContext } from "./form-control";
+
+export class Photo extends File {
+	constructor(
+		public field: FormField<boolean, FileContainer>,
+		public imageRouter: KoaResponsiveImageRouter,
+		options?: SimpleInputOptions
+	) {
+		super(field, options);
+	}
+
+	async getImgStyle() {
+		return "width: 100px; height: 100px; object-fit: contain";
+	}
+
+	async renderFilePreview(
+		ctx: Context,
+		file_data: { id?: string; filename?: string } | null
+	): Promise<FlatTemplatable> {
+		const class_name = "file_preview";
+		const empty_container = `<div class="${class_name}"></div>`;
+		if (!file_data) {
+			return empty_container;
+		}
+		const { id } = file_data;
+		if (!id) {
+			return empty_container;
+		}
+		const file = await SealiousFile.fromID(ctx.$app, id);
+		return tempstream/* HTML */ `<div class="${class_name}">
+			${this.imageRouter.image({
+				resolutions: [100],
+				sizes_attr: "100px",
+				path: file.getDataPath(),
+				img_style: await this.getImgStyle(),
+			})}
+		</div>`;
+	}
+
+	async getInputAttributes(fctx: FormControlContext) {
+		const original = (await super.getInputAttributes(fctx)) as Record<
+			string,
+			string | boolean
+		>;
+		const { parsed } = await this.field.getValue(fctx.ctx, fctx.data);
+		return {
+			...original,
+			accept: "image/*",
+			onchange:
+				(original.onchange || "") +
+				";" +
+				`
+   const file = this.files[0];
+   const preview_container = this.parentElement.querySelector(".file_preview");
+   const target = this;
+   if (file) {
+	 const fileReader = new FileReader();
+	 fileReader.readAsDataURL(file);
+	 fileReader.addEventListener("load", function () {
+        preview_container.innerHTML = \`<img src="\${this.result}" style="${await this.getImgStyle()}" />\`;
+    });    
+}`
+					.replaceAll("\n", " ")
+					.replaceAll(`"`, "'"),
+		};
+	}
+}

package/src/forms/controls/radio.ts

@@ -0,0 +1,43 @@
+import { Context } from "koa";
+import { FormField } from "../fields/field";
+import { FormDataValue } from "../form";
+import { Tickable } from "./tickable";
+
+export class Radio extends Tickable<string> {
+	type = <const>"radio";
+
+	constructor(
+		public field: FormField<boolean, string>,
+		public value: string,
+		options: { label?: string }
+	) {
+		super(field, options);
+	}
+
+	makeInputID(): string {
+		return this.field.name + "-" + this.value.replaceAll(/\W/g, "-");
+	}
+
+	getValueAttribute(): string {
+		return this.value;
+	}
+
+	getWrapperClasses(
+		ctx: Context,
+		data: Record<string, FormDataValue>,
+		value: string
+	): string[] {
+		return [
+			...super.getWrapperClasses(ctx, data, value),
+			this.value.replaceAll(/\W/g, "-"),
+		];
+	}
+
+	isChecked(
+		_ctx: Context,
+		_data: Record<string, FormDataValue>,
+		value: string
+	): boolean {
+		return this.value === value;
+	}
+}

package/src/forms/controls/reverse-single-reference.ts

@@ -0,0 +1,50 @@
+// import { FormControl } from "./form-control";
+// import { FormFieldControl } from "./form-field-control";
+// import { ReverseSingleReference as ReverseSingleReferenceField } from "../fields/field";
+// import { Context } from "koa";
+// import { Fields } from "../..";
+// import { ArrayControl } from "./array";
+
+// export class ReverseSingleReference extends ArrayControl {
+// 	//
+// 	//
+// 	// this isn't finished yet
+// 	//
+// 	//
+
+// 	constructor(
+// 		public field: ReverseSingleReferenceField,
+// 		public item_controls: Array<FormControl | UnboundControlStorage>
+// 	) {
+// 		super(field, item_controls);
+// 	}
+
+// 	async getItems(ctx: Context) {
+// 		const target_id = await this.getTargetItemID(ctx);
+// 		const { items } = await this.field.sealious_field
+// 			.getReferencingCollection()
+// 			.list(ctx.$context)
+// 			.filter({
+// 				[this.field.sealious_field.referencing_field]: target_id,
+// 			})
+// 			.fetch();
+// 		return items;
+// 	}
+
+// 	makeSubfield(fieldname: string) {
+// 		const collection = this.field.sealious_field.getReferencingCollection();
+// 		if (!collection.fields[fieldname]) {
+// 			return null;
+// 		}
+// 		return new Fields.CollectionField(false, collection.fields[fieldname]);
+// 	}
+
+// 	async add(ctx: Context): Promise<void> {
+// 		const collection = this.field.sealious_field.getReferencingCollection();
+// 		await collection.create(ctx.$context, {
+// 			[this.field.sealious_field.referencing_field]:
+// 				await this.getTargetItemID(ctx),
+// 			...(await this.getDefaultItemBody()),
+// 		});
+// 	}
+// }

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

@@ -0,0 +1,148 @@
+import { Context } from "koa";
+import { FlatTemplatable, tempstream } from "tempstream";
+import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper";
+import { renderAttributes } from "../../utils/render-attributes";
+import { FormField } from "../fields/field";
+import { FormDataValue } from "../form";
+import { FormFieldControl } from "./controls";
+import { FormControlContext } from "./form-control";
+
+export type SimpleInputOptions = {
+	id?: string;
+	label?: string;
+	autocomplete?: boolean;
+	hide_errors?: boolean;
+	type?:
+		| "color"
+		| "date"
+		| "email"
+		| "file"
+		| "month"
+		| "number"
+		| "password"
+		| "search"
+		| "tel"
+		| "text"
+		| "time"
+		| "url"
+		| "week";
+	value?: string;
+	placeholder?: string;
+	readonly?: boolean;
+	step?: number;
+	suffix?: string;
+};
+
+export class SimpleInput<
+	ParsedValue,
+	Options extends SimpleInputOptions = SimpleInputOptions
+> extends FormFieldControl {
+	options: SimpleInputOptions;
+	constructor(
+		public field: FormField<boolean, ParsedValue>,
+		options?: Options
+	) {
+		super([field]);
+		this.options = options || {};
+	}
+
+	async preInput(
+		_ctx: Context,
+		_data: Record<string, FormDataValue>
+	): Promise<FlatTemplatable> {
+		return "";
+	}
+
+	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.options.placeholder || this.getType();
+	}
+
+	async getInputAttributes(
+		fctx: FormControlContext
+	): Promise<Record<string, string | boolean>> {
+		const readonly = this.options.readonly || false;
+		const required = this.field.required;
+		const { parsed, raw, valid } = await this.field.getValue(
+			fctx.ctx,
+			fctx.data
+		);
+		return Object.fromEntries([
+			<const>["id", this.getID()],
+			<const>["type", this.getType()],
+			<const>["name", `${fctx.field_name_prefix}${this.field.name}`],
+			<const>[
+				"value",
+				!valid && raw
+					? raw.toString()
+					: parsed !== undefined && parsed !== null
+					? ((parsed as any)?.toString() as string) || ""
+					: "",
+			],
+			...(fctx.form_id ? [["form", fctx.form_id]] : []),
+			<const>["placeholder", this.getPlaceholder()],
+			...(readonly ? [["readonly", true]] : []),
+			...(required ? [["required", true]] : []),
+			...(!this.options.autocomplete ? [["autocomplete", "off"]] : []),
+			...(this.options.step ? [["step", this.options.step]] : []),
+		]);
+	}
+
+	async postInput(_: Context): Promise<FlatTemplatable> {
+		return this.options.suffix
+			? /* HTML */ `<span class="suffix">${this.options.suffix}</span>`
+			: "";
+	}
+
+	async renderInput(
+		_ctx: Context,
+		attributes_str: string,
+		_data: Record<string, FormDataValue>
+	): Promise<FlatTemplatable> {
+		return `<input ${attributes_str} />`;
+	}
+
+	async render<Fields extends Record<string, FormField>>(
+		fctx: FormControlContext
+	): Promise<FlatTemplatable> {
+		const id = this.getID();
+		const label = this.getLabel();
+		const type = this.getType();
+
+		const { valid, message } = await this.field.getValue(
+			fctx.ctx,
+			fctx.data
+		);
+		return inputWrapper(
+			[id, type, getRequiredClass(this.field.required)],
+			tempstream/* HTML */ `
+				${label ? `<label for="${id}">${label}</label>` : ""}
+				${await this.preInput(fctx.ctx, fctx.data)}
+				${this.renderInput(
+					fctx.ctx,
+					renderAttributes(await this.getInputAttributes(fctx)),
+					fctx.data
+				)}
+				${this.postInput(fctx.ctx)}
+				${~valid && !this.options.hide_errors && fctx.validate
+					? `<div class="input__error">${message}</div>`
+					: ""}
+			`
+		);
+	}
+}