@sealcode/sealgen 0.18.10 → 0.19.0

package/src/forms/fields/simple-form-field.ts

@@ -2,11 +2,37 @@ import { FormDataValue } from "../form-types.js";
 import { Context } from "koa";
 import { predicates } from "@sealcode/ts-predicates";
 import { FieldParseResult, FormField } from "./field.js";
+import { SimpleInput } from "../controls/simple-input.js";
+import { FormControl } from "../controls/controls.js";
+import { CollectionItem } from "sealious";
+import { FormControlContext } from "../controls/form-control.js";
 
-export class SimpleFormField<Required extends boolean> extends FormField<
-	Required,
-	string | null
-> {
+export abstract class SimpleFormField<
+	Required extends boolean,
+	DefaultControl extends FormControl = SimpleInput,
+	Parsed = string
+> extends FormField<Required, Parsed, DefaultControl> {
+	predicate = predicates.string;
+
+	constructor(required: Required, public type: string = "text") {
+		super(required);
+	}
+
+	async sealiousValueToForm(
+		ctx: Context,
+		value: unknown
+	): Promise<FormDataValue> {
+		if (value === null) {
+			return "";
+		}
+		return String(value) as FormDataValue;
+	}
+}
+
+export class TextBasedSimpleField<
+	Required extends boolean,
+	DefaultControl extends FormControl = SimpleInput
+> extends SimpleFormField<Required, DefaultControl, string | null> {
 	async parse(
 		_: Context,
 		raw_value: FormDataValue
@@ -18,13 +44,75 @@ export class SimpleFormField<Required extends boolean> extends FormField<
 		};
 	}
 
-	predicate = predicates.string;
+	async getSealiousCreateValue(
+		fctx: FormControlContext
+	): Promise<string | null> {
+		const { parsed } = await this.getParsedValue(
+			fctx.ctx,
+			fctx.data.raw_values
+		);
+		return parsed || "";
+	}
+
+	async postSealiousCreate(
+		ctx: Context,
+		created_item: CollectionItem<any>
+	): Promise<void> {}
+
+	async postSealiousEdit(
+		ctx: Context,
+		edited_item: CollectionItem<any>
+	): Promise<void> {}
+
+	getControl(): DefaultControl {
+		return new SimpleInput(this, {
+			label: this.name,
+			type: this.type,
+		}) as unknown as DefaultControl;
+	}
 
 	public getEmptyValue(): string {
 		return "";
 	}
+}
 
-	constructor(required: Required) {
-		super(required);
+export class NumberBasedSimpleField<
+	Required extends boolean,
+	DefaultControl extends FormControl = SimpleInput
+> extends SimpleFormField<Required, DefaultControl, number> {
+	async parse(
+		_: Context,
+		raw_value: FormDataValue
+	): Promise<FieldParseResult<number>> {
+		return {
+			parsed_value: parseFloat(raw_value as string) || 0,
+			parsable: true,
+			error: null,
+		};
+	}
+
+	async getSealiousCreateValue(
+		fctx: FormControlContext
+	): Promise<number | undefined> {
+		const { parsed } = await this.getParsedValue(
+			fctx.ctx,
+			fctx.data.raw_values
+		);
+		return parsed || 0;
+	}
+
+	async postSealiousCreate(): Promise<void> {}
+
+	async postSealiousEdit(): Promise<void> {}
+
+	getControl(): DefaultControl {
+		return new SimpleInput(this, {
+			label: this.name,
+			type: this.type,
+		}) as unknown as DefaultControl;
+	}
+
+	public getEmptyValue(): number {
+		return 0;
 	}
 }

package/src/forms/fields/single-reference.ts

@@ -0,0 +1,62 @@
+import { Collection, FieldTypes as SealiousFieldTypes } from "sealious";
+import { CollectionField } from "./collection-field.js";
+import { SingleReferenceDropdown } from "../controls/single-reference.js";
+import { FormControlContext } from "../controls/form-control.js";
+import { Context } from "koa";
+import { ExtractedFieldInfo } from "../../utils/extract-fields-from-collection.js";
+import { toPascalCase } from "js-convert-case";
+
+export class SingleReference<
+	TargetCollection extends Collection,
+	Required extends boolean,
+	F extends SealiousFieldTypes.SingleReference
+> extends CollectionField<F, Required> {
+	getControl(): SingleReferenceDropdown<TargetCollection, F, Required> {
+		return new SingleReferenceDropdown(this, {
+			label: this.name,
+			getLabel: (item) => item.id,
+		});
+	}
+
+	async getSealiousCreateValue(
+		fctx: FormControlContext
+	): Promise<string | undefined> {
+		const { parsed } = await this.getParsedValue(
+			fctx.ctx,
+			fctx.data.raw_values
+		);
+		return parsed || undefined;
+	}
+
+	async sealiousValueToForm(ctx: Context, value: string | null) {
+		return value || undefined;
+	}
+
+	generateImportsForFieldList(field_info: ExtractedFieldInfo) {
+		if (!field_info.target) {
+			throw new Error("Expected 'target' attribute in field info");
+		}
+		return [
+			{
+				what: toPascalCase(field_info.target),
+				from: "src/back/collections/collections.js",
+			},
+		];
+	}
+
+	generateFieldDeclaration(
+		field_info: ExtractedFieldInfo,
+		vars: { form_field_types: string; sealious_field: string }
+	): string {
+		if (!field_info.target) {
+			throw new Error("Expected 'target' attribute in field info");
+		}
+		return `new ${vars.form_field_types}.${
+			this.constructor.name
+		}<typeof ${toPascalCase(field_info.target)}, ${String(
+			field_info.is_required
+		)}, typeof ${vars.sealious_field}>(${String(field_info.is_required)}, ${
+			vars.sealious_field
+		})`;
+	}
+}

package/src/forms/fields/structured-array.ts

@@ -1,27 +1,124 @@
+/* eslint-disable  @typescript-eslint/no-explicit-any */
+/* eslint-disable  @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { Context } from "koa";
-import { Field, FieldsetOutput, FieldTypes } from "sealious";
+import {
+	Field as SealiousField,
+	FieldTypes as SealiousFieldTypes,
+	FieldsetInput,
+} from "sealious";
 import { FormDataValue } from "../form-types.js";
-import { FormField } from "./field.js";
+import { Table as TableControl } from "../controls/table.js";
+import {
+	sealiousToFormField,
+	SealiousToFormField,
+} from "./get-field-for-sealious.js";
+import { FormControl, FormControlContext } from "../controls/form-control.js";
+import { ExtractedFieldInfo } from "../../utils/extract-fields-from-collection.js";
+import { Table } from "./table.js";
 
-export class StructuredArrayField<
-	Fields extends Record<string, Field<unknown>>
-> extends FormField<
-	true,
-	FieldTypes.ArrayStorageInput<FieldsetOutput<Fields>>
-> {
-	constructor(public sealious_field: FieldTypes.StructuredArray<Fields>) {
-		super(true);
-	}
+export class StructuredArray<
+	SealiousFields extends Record<string, SealiousField<unknown>>
+> extends Table<{
+	[name in keyof SealiousFields]: SealiousToFormField<SealiousFields[name]>;
+}> {
+	public sealious_field: SealiousFieldTypes.StructuredArray<SealiousFields>;
 
-	async parse(_context: Context, value: FormDataValue) {
-		return {
-			parsable: <const>true,
-			error: null,
-			parsed_value: (value as FieldsetOutput<Fields>) || [],
+	constructor(
+		sealious_field: SealiousFieldTypes.StructuredArray<SealiousFields>
+	) {
+		const columns = Object.fromEntries(
+			Object.entries(sealious_field.subfields).map(
+				([key, sealious_field]) => [
+					key,
+					sealiousToFormField(sealious_field),
+				]
+			)
+		) as {
+			[name in keyof SealiousFields]: SealiousToFormField<
+				SealiousFields[name]
+			>;
 		};
+		super(columns);
+		this.sealious_field = sealious_field;
+	}
+
+	getControl(): TableControl<{
+		[name in keyof SealiousFields]: SealiousToFormField<
+			SealiousFields[name]
+		>;
+	}> {
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+		return new TableControl<{
+			[name in keyof SealiousFields]: SealiousToFormField<
+				SealiousFields[name]
+			>;
+		}>(this as any, {
+			label: this.name,
+			subfield_controls: Object.fromEntries(
+				Object.entries(this.columns).map(([column_name, subfield]) => [
+					column_name as keyof SealiousFields,
+					subfield.getControl(),
+				])
+			) as unknown as Record<keyof SealiousFields, FormControl>,
+			allow_adding: true,
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+			make_new_row: () => ({} as any),
+		});
+	}
+
+	generateFieldDeclaration(
+		_field_info: ExtractedFieldInfo,
+		vars: { form_field_types: string; sealious_field: string }
+	): string {
+		return `new ${vars.form_field_types}.${this.constructor.name}(${vars.sealious_field})`;
+	}
+
+	async getSealiousCreateValue(
+		fctx: FormControlContext
+	): Promise<
+		SealiousFieldTypes.ArrayStorageInput<FieldsetInput<SealiousFields>>
+	> {
+		const { parsed } = await this.getParsedValue(
+			fctx.ctx,
+			fctx.data.raw_values
+		);
+		return (
+			(parsed as SealiousFieldTypes.ArrayStorageInput<
+				FieldsetInput<SealiousFields>
+			>) || this.getEmptyValue()
+		);
 	}
 
-	getEmptyValue() {
-		return [] as FieldTypes.ArrayStorageInput<FieldsetOutput<Fields>>;
+	async sealiousValueToForm(
+		ctx: Context,
+		sealiousValue: Record<string, FormDataValue | null>[] | null
+	): Promise<FormDataValue> {
+		return Promise.all(
+			(sealiousValue || []).map(async (element) =>
+				Object.fromEntries(
+					await Promise.all(
+						Object.entries(element).map(async ([key, value]) => {
+							const form_subfield = this.columns[key];
+							if (!form_subfield) {
+								return [key, ""];
+							}
+							return [
+								key,
+								await form_subfield.sealiousValueToForm(
+									ctx,
+									value,
+									{} as any
+								),
+							];
+						})
+					)
+				)
+			)
+		);
 	}
 }

package/src/forms/fields/table.ts

@@ -2,6 +2,11 @@ import { is, predicates } from "@sealcode/ts-predicates";
 import { Context } from "koa";
 import { FormDataValue } from "../form-types.js";
 import { FieldParseResult, FormField } from "./field.js";
+import {
+	Table as TableControl,
+	TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER,
+} from "../controls/table.js";
+import { FormControl } from "../controls/form-control.js";
 
 export type ExtractFormFieldParsed<Field extends FormField> =
 	Field extends FormField<
@@ -34,6 +39,16 @@ export class Table<F extends Record<string, FormField>> extends FormField<
 		return [];
 	}
 
+	setName(name: string) {
+		super.setName(name);
+		for (const [column_name, field] of Object.entries(this.columns)) {
+			field.setName(
+				`${this.name}[${TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER}][${column_name}]`
+			);
+		}
+		return this;
+	}
+
 	async parse(
 		ctx: Context,
 		raw_value: FormDataValue
@@ -51,7 +66,6 @@ export class Table<F extends Record<string, FormField>> extends FormField<
 			const row_data = raw_value[row_number];
 			const parsed_row: Record<string, unknown> = {};
 			if (!is(row_data, predicates.object)) {
-				console.log("table.ts<fields>:55", this.name);
 				throw new Error(`Expected object, got ${String(row_data)}`);
 			}
 			for (const key in row_data) {
@@ -89,4 +103,21 @@ export class Table<F extends Record<string, FormField>> extends FormField<
 		const ret = { parsed_value: result, parsable: true, error: null };
 		return ret as FieldParseResult<TableFieldParsed<F>>;
 	}
+
+	getControl(): TableControl<F> {
+		return new TableControl<F>(this, {
+			label: this.name,
+			subfield_controls: Object.fromEntries(
+				Object.entries(this.columns).map(([column_name, field]) => [
+					column_name as keyof F,
+					field.getControl(),
+				])
+			) as Record<keyof F, FormControl>,
+			allow_adding: true,
+			make_new_row: async () =>
+				Object.fromEntries(
+					Object.keys(this.columns).map((key) => [key, ""])
+				) as Record<keyof F, string>,
+		});
+	}
 }

package/src/forms/fields/text.ts

@@ -0,0 +1,18 @@
+import { FormControlContext } from "../controls/form-control.js";
+import { TextBasedSimpleField } from "./simple-form-field.js";
+
+export class Text<
+	Required extends boolean
+> extends TextBasedSimpleField<Required> {
+	constructor(required: Required) {
+		super(required, "text");
+	}
+
+	async getSealiousCreateValue(fctx: FormControlContext): Promise<string> {
+		const { parsed } = await this.getParsedValue(
+			fctx.ctx,
+			fctx.data.raw_values
+		);
+		return parsed || this.getEmptyValue();
+	}
+}

package/src/forms/fields/url.ts

@@ -0,0 +1,20 @@
+import { FormControlContext } from "../controls/form-control.js";
+import { TextBasedSimpleField } from "./simple-form-field.js";
+
+export class URLField<
+	Required extends boolean
+> extends TextBasedSimpleField<Required> {
+	constructor(required: Required) {
+		super(required, "text");
+	}
+
+	async getSealiousCreateValue(
+		fctx: FormControlContext
+	): Promise<string | null> {
+		const { parsed } = await this.getParsedValue(
+			fctx.ctx,
+			fctx.data.raw_values
+		);
+		return parsed || null;
+	}
+}

package/src/forms/form-types.ts

@@ -1,6 +1,7 @@
 import { FilePointer } from "@sealcode/file-manager";
 import type { FlatTemplatable } from "tempstream";
 import type { FormField } from "./fields/field.js";
+import { FieldMessages } from "./controls/form-control.js";
 
 export type FormDataPrimitive =
 	| string
@@ -28,6 +29,7 @@ export type FormMessage = { type: "info" | "success" | "error"; text: string };
 export type FormData<Fieldnames extends string = string> = {
 	raw_values: Record<Fieldnames, FormDataValue>;
 	messages: FormMessage[];
+	field_messages: FieldMessages<Fieldnames>;
 };
 
 export type FormReaction =

package/src/forms/form.test.ts

@@ -9,11 +9,11 @@ import { getBrowser } from "../utils/browser-creator.js";
 import { assertThrowsAsync } from "../utils/utils.js";
 import { FormDataValue } from "./form-types.js";
 import getPort from "get-port";
-import { SimpleFormField } from "./fields/simple-form-field.js";
+import { TextBasedSimpleField } from "./fields/simple-form-field.js";
 import { expect as PlaywritghtExpect } from "@playwright/test";
 
 const fields = {
-	text: new Fields.SimpleFormField(true),
+	text: new Fields.TextBasedSimpleField(true),
 };
 
 export function form_factory(canAccessFun?: Mountable["canAccess"]): Form<typeof fields, void> {
@@ -139,7 +139,6 @@ describe("form test", () => {
 						async (
 							ctx: Koa.Context
 						): Promise<{ canAccess: boolean; message: string }> => {
-							console.log("CAN ACCESS? FALSE");
 							return { canAccess: false, message: "" };
 						}
 					),
@@ -370,7 +369,7 @@ describe("form test", () => {
 			const router = new Router();
 
 			const fields = {
-				title: new SimpleFormField(true),
+				title: new TextBasedSimpleField(true),
 			};
 
 			mount(

package/src/forms/form.ts

@@ -2,7 +2,7 @@ import { Context } from "koa";
 import { randomUUID } from "crypto";
 
 import Router from "@koa/router";
-import { FlatTemplatable, tempstream } from "tempstream";
+import { tempstream } from "tempstream";
 import {
 	hasFieldOfType,
 	hasShape,
@@ -22,6 +22,10 @@ import {
 	MountableWithFields,
 	PageErrorMessage,
 } from "../page/mountable-with-fields.js";
+import { Readable } from "stream";
+import { FormField } from "../index.js";
+import { FieldMessages } from "./controls/form-control.js";
+import { Errors as SealiousErrors } from "sealious";
 
 export abstract class Form<
 	F extends Fields,
@@ -43,11 +47,11 @@ export abstract class Form<
 	async renderError(
 		_: Context,
 		error: PageErrorMessage
-	): Promise<FlatTemplatable> {
+	): Promise<JSX.Element | Readable> {
 		return tempstream/* HTML */ `<div>${error.message}</div>`;
 	}
 
-	makeSubmitButton(): FlatTemplatable {
+	makeSubmitButton(): JSX.Element {
 		return /* HTML */ `<input
 			type="submit"
 			value="${this.submitButtonText}"
@@ -60,7 +64,7 @@ export abstract class Form<
 		ctx: Context,
 		data: FormData,
 		show_field_errors: boolean
-	): Promise<FlatTemplatable> {
+	): Promise<JSX.Element | Readable> {
 		return tempstream/* HTML */ `<div class="form-container">
 			${this.makeOpenFormTag(ctx)}
 			${!this.controls.some((control) => control.role == "messages")
@@ -81,7 +85,7 @@ export abstract class Form<
 		return [];
 	}
 
-	public makeOpenFormTag(ctx: Context): FlatTemplatable {
+	public makeOpenFormTag(ctx: Context): JSX.Element {
 		return tempstream`<form enctype="multipart/form-data" method="POST" id="${
 			this.form_id
 		}" action="${this.action}" class="${this.makeFormClasses(ctx).then(
@@ -91,14 +95,14 @@ export abstract class Form<
 		}></form><div class="form">`;
 	}
 
-	public makeCloseFormTag(): FlatTemplatable {
+	public makeCloseFormTag(): JSX.Element {
 		return `</div>`;
 	}
 
 	public async onValuesInvalid(
 		ctx: Context,
 		form_messages: FormMessage[],
-		_field_errors: Partial<Record<keyof Fields, string>>
+		field_errors: FieldMessages<keyof Fields>
 	): Promise<FormReaction> {
 		const messages = form_messages.length
 			? form_messages
@@ -110,8 +114,9 @@ export abstract class Form<
 				{
 					raw_values: await this.extractRawValues(ctx),
 					messages,
+					field_messages: field_errors,
 				},
-				"show_field_errors" && true
+				true
 			),
 			messages,
 		};
@@ -123,12 +128,21 @@ export abstract class Form<
 		error: unknown
 	): Promise<FormReaction> {
 		let error_message = "Unknown error has occured";
+		let field_messages: FieldMessages = {};
 		if (
 			is(error, predicates.object) &&
 			hasShape({ message: predicates.string }, error)
 		) {
 			error_message = error.message;
 		}
+		if (error instanceof SealiousErrors.FieldsError) {
+			field_messages = Object.fromEntries(
+				Object.entries(error.field_messages).map(([key, value]) => {
+					const message = value?.message || "";
+					return [key, { type: "error", message }];
+				})
+			);
+		}
 		const messages = [<const>{ type: "error", text: error_message }];
 		return {
 			action: "stay",
@@ -137,8 +151,9 @@ export abstract class Form<
 				{
 					raw_values: data.raw_values,
 					messages,
+					field_messages,
 				},
-				"show_field_errors" && true
+				true
 			),
 		};
 	}
@@ -163,8 +178,9 @@ export abstract class Form<
 				{
 					raw_values: await this.getInitialValues(ctx),
 					messages,
+					field_messages: {},
 				},
-				"show_field_errors" && false
+				false
 			),
 			messages,
 		};
@@ -181,10 +197,6 @@ export abstract class Form<
 			raw_values
 		);
 		if (!valid) {
-			console.debug("Form values invalid: ", {
-				form_messages,
-				field_errors,
-			});
 			return this.onValuesInvalid(ctx, form_messages, field_errors);
 		}
 		try {
@@ -192,12 +204,14 @@ export abstract class Form<
 			const result = await this.onSubmit(ctx, {
 				raw_values,
 				messages: [],
+				field_messages: {},
 			});
 			return this.onSuccess(
 				ctx,
 				{
 					raw_values: await this.getRawValuesOnSuccess(ctx),
 					messages: [],
+					field_messages: {},
 				},
 				result
 			);
@@ -222,6 +236,7 @@ export abstract class Form<
 							text: message,
 						},
 					],
+					field_messages: {},
 				},
 				e
 			);
@@ -257,12 +272,12 @@ export abstract class Form<
 				{
 					raw_values: await this.extractRawValues(ctx),
 					messages: [],
+					field_messages: {},
 				},
-				"show_field_errors" && false
+				false
 			);
 		});
 		router.post(path, async (ctx) => {
-			console.log("REGULAR FORM HANDLE");
 			const reaction =
 				(ctx.override_reaction as FormReaction | undefined) ||
 				(await this.handlePost(ctx));
@@ -283,4 +298,10 @@ export abstract class Form<
 			? ctx.$body
 			: this.getInitialValues(ctx);
 	}
+
+	static initFieldNames(fields: Record<string, FormField>): void {
+		for (const [field_name, field] of Object.entries(fields)) {
+			field.setName(field_name);
+		}
+	}
 }