@sealcode/sealgen 0.15.35 → 0.15.37

package/src/forms/controls/table.ts

@@ -1,30 +1,55 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import Router from "@koa/router";
+import { hasShape, is, predicates } from "@sealcode/ts-predicates";
+import { Context } from "koa";
+import qs from "qs";
 import { FlatTemplatable } from "tempstream";
 import { FormField } from "../fields/field.js";
 import { Table as TableField } from "../fields/table.js";
+import { FormReaction } from "../form-types.js";
+import { Form } from "../form.js";
 import { FormControl, FormControlContext } from "./form-control.js";
 
+export type TableControlOptions<F extends Record<string, FormField>> = {
+	render_fields: {
+		[field_name in keyof F]: (
+			fctx: FormControlContext,
+			name: string,
+			value: string
+		) => string;
+	};
+	allow_removing?: boolean;
+	label_add?: string;
+	label: string;
+	label_remove?: string;
+} & (
+	| { allow_adding: false }
+	| {
+			allow_adding: true;
+			make_new_row: (
+				ctx: Context
+			) => Promise<{ [field_name in keyof F]: unknown }>;
+	  }
+);
+
 export class Table<F extends Record<string, FormField>> extends FormControl {
 	role = <const>"input";
 	constructor(
 		public table_field: TableField<F>,
-		public render_fields: {
-			[field_name in keyof F]: (
-				fctx: FormControlContext,
-				name: string,
-				value: string
-			) => string;
-		}
+		public options: TableControlOptions<F>
 	) {
 		super();
 	}
 
 	async render(fctx: FormControlContext): Promise<FlatTemplatable> {
-		const { parsed: rows } = await this.table_field.getValue(
+		let { parsed: rows } = await this.table_field.getValue(
 			fctx.ctx,
 			fctx.data
 		);
 		if (!rows) {
-			return "";
+			rows = [];
 		}
 		return /* HTML */ `<div
 			class="${[
@@ -45,34 +70,146 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 					: []),
 			].join(" ")}"
 		>
+			<label>${this.options.label}</label>
 			<div class="table__wrapper">
 				<table>
 					<tbody>
-						<tr>
-							${rows
-								?.map((row, row_index) => {
-									return /* HTML */ `<tr>
-										${Object.entries(
-											this.table_field.columns
-										)
-											.map(([key]) => {
-												return `<td>${this.render_fields[
-													key
-												](
-													fctx,
-													`${this.table_field.name}[${row_index}][${key}]`,
-													// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-													row[key] as string
-												)}</td>`;
-											})
-											.join("")}
-									</tr>`;
-								})
-								.join("")}
-						</tr>
+						${rows
+							?.map((row, row_index) => {
+								return /* HTML */ `<tr>
+									${Object.entries(this.table_field.columns)
+										.map(([key]) => {
+											return `<td>${this.options.render_fields[
+												key
+											](
+												fctx,
+												`${this.table_field.name}[${row_index}][${key}]`,
+												// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+												row[key] as string
+											)}</td>`;
+										})
+										.join("")}
+									${this.options.allow_removing
+										? /* HTML */ `<td>
+												<input
+													type="submit"
+													value="${this.options
+														.label_remove ||
+													"remove"}"
+													form="${fctx.form_id}"
+													formnovalidate
+													formaction="${this.getActionURL(
+														this.table_field.name,
+														{
+															remove: {
+																index: row_index,
+															},
+														}
+													)}"
+												/>
+										  </td>`
+										: ""}
+								</tr>`;
+							})
+							.join("")}
 					</tbody>
 				</table>
+				${this.options.allow_adding
+					? /* HTML */ `<input
+							type="submit"
+							value="${this.options.label_add || "add"}"
+							form="${fctx.form_id}"
+							formnovalidate
+							formaction="${this.getActionURL(
+								this.table_field.name,
+								{
+									insert: { index: rows.length, value: {} },
+								}
+							)}"
+					  />`
+					: ""}
 			</div>
 		</div>`;
 	}
+
+	getFrameID() {
+		return `array-frame-${this.table_field.name}`;
+	}
+
+	getActionURL(field_name: string, action: Record<string, unknown>) {
+		return `./?${qs.stringify({
+			action,
+			field_name,
+		})}`;
+	}
+
+	mount(router: Router, form: Form<any, any>) {
+		router.post("/", async (ctx, next) => {
+			const action = ctx.$body.action;
+			const field_name = ctx.$body.field_name;
+			if (
+				!is(action, predicates.object) ||
+				!is(field_name, predicates.string)
+			) {
+				await next();
+				return;
+			}
+			if (
+				this.options.allow_adding &&
+				hasShape(
+					{
+						insert: predicates.shape({ index: predicates.string }),
+					},
+					action
+				)
+			) {
+				if (field_name !== this.table_field.name) {
+					await next();
+					return;
+				}
+				if (!ctx.$body[this.table_field.name]) {
+					ctx.$body[this.table_field.name] = {};
+				}
+				(ctx.$body[this.table_field.name] as any)[action.insert.index] =
+					await this.options.make_new_row(ctx);
+			}
+			if (
+				hasShape(
+					{
+						remove: predicates.shape({ index: predicates.string }),
+					},
+					action
+				)
+			) {
+				if (field_name !== this.table_field.name) {
+					await next();
+					return;
+				}
+				if (!ctx.$body[this.table_field.name]) {
+					ctx.$body[this.table_field.name] = {};
+				}
+				(ctx.$body[this.table_field.name] as any) = Object.fromEntries(
+					Object.entries(
+						Object.values(
+							ctx.$body[this.table_field.name] as any
+						).filter(
+							(_, index) => index != parseInt(action.remove.index)
+						)
+					)
+				);
+			}
+			ctx.override_reaction = {
+				action: "stay",
+				content: form.render(
+					ctx,
+					{
+						raw_values: await form.extractRawValues(ctx),
+						messages: [],
+					},
+					false
+				),
+			} as FormReaction;
+			await next();
+		});
+	}
 }

package/src/forms/fields/boolean.ts

@@ -46,7 +46,7 @@ export class Boolean<Required extends boolean> extends FormField<
 				parsed_value: false,
 				error: null,
 			};
-		} else if (value === null) {
+		} else if (value === null || value === "") {
 			return { parsable: true, parsed_value: false, error: null };
 		} else {
 			return {

package/src/forms/fields/field.ts

@@ -77,7 +77,10 @@ export abstract class FormField<
 					),
 				};
 			} else {
-				return { valid: true, message: "Empty, but not required" };
+				return {
+					valid: true,
+					message: "",
+				};
 			}
 		}
 		return this.isValueValid(ctx, value);

package/src/forms/fields/table.ts

@@ -3,16 +3,30 @@ import { Context } from "koa";
 import { FormDataValue } from "../form-types.js";
 import { FieldParseResult, FormField } from "./field.js";
 
+type ExtractFormFieldParsed<Field extends FormField> = Field extends FormField<
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	true,
+	infer T
+>
+	? NonNullable<T>
+	: Field extends FormField<
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			true,
+			infer T
+	  >
+	? T
+	: never;
+
 export type TableFieldParsed<F extends Record<string, FormField>> = {
-	[field_name in keyof F]: unknown;
+	[field_name in keyof F]: ExtractFormFieldParsed<F[field_name]>;
 }[];
 
 export class Table<F extends Record<string, FormField>> extends FormField<
-	true,
+	false,
 	TableFieldParsed<F>
 > {
 	constructor(public columns: F) {
-		super(true);
+		super(false);
 	}
 
 	getEmptyValue() {
@@ -36,6 +50,7 @@ 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) {
@@ -47,16 +62,20 @@ export class Table<F extends Record<string, FormField>> extends FormField<
 						parsed_value: null,
 					};
 				}
-				// eslint-disable-next-line no-await-in-loop, @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+				// eslint-disable-next-line no-await-in-loop
 				const parse_result = await field.parse(
 					ctx,
+					// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
 					(row_data as any)[key]
 				);
 				if (!parse_result.parsable) {
-					console.debug("table.ts:51");
+					const message = `Invalid value for row ${row_number}.${key}: ${parse_result.error}`;
+					console.warn(
+						`Invalid value for row ${row_number}.${key}: ${parse_result.error}`
+					);
 					return {
 						parsable: false,
-						error: `Invalid value for row ${row_number}.${key}: ${parse_result.error}`,
+						error: message,
 						parsed_value: null,
 					};
 				}

package/src/forms/form.ts

@@ -241,6 +241,15 @@ export abstract class Form<
 			}
 			await next();
 		});
+
+		// for use with other subroutes or middlewares that individual controls
+		// might register
+		const subrouter = new Router();
+		for (const control of this.controls) {
+			control.mount(subrouter, this);
+		}
+		router.use(path, subrouter.routes(), subrouter.allowedMethods());
+
 		router.get(path, async (ctx) => {
 			ctx.type = "html";
 			ctx.body = await this.render(
@@ -253,7 +262,10 @@ export abstract class Form<
 			);
 		});
 		router.post(path, async (ctx) => {
-			const reaction = await this.handlePost(ctx);
+			console.log("REGULAR FORM HANDLE");
+			const reaction =
+				(ctx.override_reaction as FormReaction | undefined) ||
+				(await this.handlePost(ctx));
 			if (reaction.action == "stay") {
 				ctx.status = 422;
 				ctx.body = reaction.content;
@@ -262,12 +274,6 @@ export abstract class Form<
 				ctx.redirect(reaction.url);
 			}
 		});
-		const subrouter = new Router(); // for use with other subroutes that individual controls might register
-		for (const control of this.controls) {
-			control.mount(subrouter);
-		}
-
-		router.use(path, subrouter.routes(), subrouter.allowedMethods());
 	}
 
 	async extractRawValues(

package/src/page/default-list-filters.ts

@@ -45,6 +45,7 @@ export const SimpleTextFilter = {
 			<input
 				type="text"
 				name="filter[${field.name}]"
+				autocomplete="off"
 				${value ? `value="${value}"` : value}
 			/>
 		</label>`;

package/src/templates/form.ts

@@ -3,7 +3,9 @@ import { curryImportPath } from "../utils/import-path.js";
 import { getPrettierConfig } from "../utils/prettier.js";
 
 const defaults = {
-	postimport: ``,
+	postimport: `
+         import { Fields } from "@sealcode/sealgen";
+         import type {FormDataValue} from "@sealcode/sealgen";`,
 	fields: `
            email: new Fields.CollectionField(true, Users.fields.email),
            password: new Fields.SimpleFormField(true),`,
@@ -27,6 +29,19 @@ const defaults = {
 			return { valid: true, error: "" };
 		}
 	}`,
+	onsubmit: `	async onSubmit() {
+		//noop
+		return;
+	}`,
+	can_access: `	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+        async canAccess(_: Context) {
+	    	return { canAccess: true, message: "" };
+	    }`,
+	render: `async render(ctx: Context, data: FormData, show_field_errors: boolean) {
+		return html(ctx, "Form", await super.render(ctx, data, show_field_errors));
+	}`,
+	get_initial_values: "",
+	other_methods: "",
 };
 
 export async function formTemplate(
@@ -37,10 +52,9 @@ export async function formTemplate(
 	const params = { ...defaults, ..._params };
 	const rel = curryImportPath(newfilefullpath);
 	const content = `import type { Context } from "koa";
-import type { FormData, FormDataValue } from "@sealcode/sealgen";
-import { Form, Fields, Controls, fieldsToShape } from "@sealcode/sealgen";
+import type { FormData } from "@sealcode/sealgen";
+import { Form,  Controls, fieldsToShape } from "@sealcode/sealgen";
 import html from "${rel("src/back/html.js")}";
-import { Users } from "${rel("src/back/collections/collections.js")}";
 
 ${params.postimport}
 
@@ -60,20 +74,15 @@ export default new (class ${action_name}Form extends Form<typeof fields, void> {
 		${params.controls}
 	];
 
+   ${params.other_methods}
 
-	// eslint-disable-next-line @typescript-eslint/no-unused-vars
-	async canAccess(_: Context) {
-		return { canAccess: true, message: "" };
-	}
+   ${params.get_initial_values}
 
-	async onSubmit() {
-		//noop
-		return;
-	}
+   ${params.onsubmit}
+
+   ${params.can_access}
 
-	async render(ctx: Context, data: FormData, show_field_errors: boolean) {
-		return html(ctx, "${action_name}", await super.render(ctx, data, show_field_errors));
-	}
+   ${params.render}
 })();
 `;
 	return Prettier.format(content, await getPrettierConfig());

package/src/templates/list.ts

@@ -1,13 +1,8 @@
 import _locreq from "locreq";
-import { curryImportPath } from "../utils/import-path.js";
 import prompts from "prompts";
 import { listCollections } from "../utils/list-collections.js";
-import { extractCollectionClassname } from "../generate-collections.js";
-import extract_fields_from_collection from "../utils/extract-fields-from-collection.js";
-import { DefaultListFilters } from "../page/default-list-filters.js";
 import { formatWithPrettier } from "../utils/prettier.js";
-import { toKebabCase } from "js-convert-case";
-const target_locreq = _locreq(process.cwd());
+import { collectionListTemplate } from "./shared/collection-list.js";
 
 export const listTemplate = async (
 	action_name: string,
@@ -25,174 +20,11 @@ export const listTemplate = async (
 		})),
 	});
 	const collection_name = response.collection as string;
-	const [uppercase_collection, collection_fields] = await Promise.all([
-		extractCollectionClassname(
-			target_locreq.resolve(
-				"src/back/collections/" + collection_name + ".ts"
-			)
-		),
-		extract_fields_from_collection(collection_name),
-	]);
-	const importPath = curryImportPath(newfilefullpath);
-	const result = `import type { Context } from "koa";
-import type { CollectionItem, ItemListResult } from "sealious";
-import type { FlatTemplatable } from "tempstream";
-import { TempstreamJSX } from "tempstream";
-import { ${uppercase_collection} } from "${importPath(
-		target_locreq.resolve("src/back/collections/collections.ts")
-	)}";
-import html from "${importPath(target_locreq.resolve("src/back/html.ts"))}";
-import type { ListFilterRender } from "@sealcode/sealgen";
-import {
-	SealiousItemListPage,
-	BaseListPageFields,
-	DefaultListFilters,
-} from "@sealcode/sealgen";
-import qs from "qs";
-import type { FilePointer } from "@sealcode/file-manager";
-import { imageRouter } from "${importPath(
-		target_locreq.resolve("src/back/image-router.ts")
-	)}";
 
-export const actionName = "${action_name}";
-
-// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-const filterFields = [
-${collection_fields
-	.map(
-		(field) =>
-			`	{ field: "${field.name}", ...${
-				DefaultListFilters[field.type]
-					? `DefaultListFilters["${field.type}"]`
-					: `DefaultListFilters.fallback`
-			} }`
-	)
-	.join(",\n")}
-] as {
-	field: keyof (typeof ${uppercase_collection})["fields"];
-	render?: ListFilterRender;
-	prepareValue?: (filter_value: unknown)=>unknown; // set this function to change what filter value is passed to Sealious
-}[];
-
-const displayFields = [
-${collection_fields
-	.map((field) => {
-		if (field.type == "boolean") {
-			return `	{
-		field: "${field.name}",
-		label: "${field.name}",
-		format: (v: boolean) => (v ? "YES" : "NO"),
-	}`;
-		}
-		if (field.type == "datetime") {
-			return `	{
-		field: "${field.name}",
-		label: "${field.name}",
-		format: (v: number) => {
-			const d = new Date();
-			d.setTime(v);
-			return d.toString().split(" ").slice(1, 5).join(" ");
-		},
-	}`;
-		}
-		if (field.type == "image") {
-			return `{
-					field: "${field.name}",
-					label: "${field.name}",
-					format: async (value: FilePointer) => {
-						return imageRouter.image(await value.getPath(), {
-							container: { width: 45, height: 45 },
-							alt: "",
-						});
-					},
-				}`;
-		}
-		return `	{ field: "${field.name}", label: "${field.name}" }`;
-	})
-	.join(",\n")}
-] as {
-	field: string;
-	label: string;
-	format?: (value: unknown, item: CollectionItem<typeof Opinions>) => FlatTemplatable;
-}[];
-
-export default new (class ${action_name}Page extends SealiousItemListPage<
-	typeof ${uppercase_collection},
-	typeof BaseListPageFields
-> {
-	fields = BaseListPageFields;
-
-	async renderFilters(ctx: Context): Promise<FlatTemplatable> {
-		const query_params = qs.parse(ctx.search.slice(1));
-		query_params.page = "1";
-		const filter_values = await super.getFilterValues(ctx);
-		return <form>
-			{Object.entries(query_params).map(([key, value]) => {
-				if (key == "filter") {
-					return "";
-				}
-                // this is necessary to not lose any query params when the user changes the filter values
-				return <input type="hidden" name={key} value={value}/>;
-			})}
-			{filterFields.map(({ field, render }) => {
-				if (!render) {
-					render = DefaultListFilters.fallback;
-				}
-				return (
-					render(filter_values[field] || "", this.collection.fields[field]) ||
-					""
-				);
-			})}
-			<input type="submit" />
-		</form>;
-}
-
-async getFilterValues(ctx: Context) {
-        // adding opportunity to adjust the values for a given field filter before it's sent to Sealious
-		const values = await super.getFilterValues(ctx);
-		for (const filterField of filterFields) {
-			const key = filterField.field as keyof typeof values;
-			if (key in values) {
-				const prepare_fn = filterField.prepareValue;
-				if (prepare_fn) {
-					values[key] = prepare_fn(values[key]) as any;
-				}
-			}
-		}
-		return values;
-	}
-
-	async renderItem(ctx: Context, item: CollectionItem<typeof ${uppercase_collection}>) {
-		return <tr>
-			{displayFields.map(({ field, format }) => {
-				// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
-				const value = item.get(field as any);
-				return <td>{format ? format(value, item) : value}</td>;
-			})}
-		</tr>;
-}
-
-	renderListContainer(ctx: Context, content: Templatable): FlatTemplatable {
-		return (
-			<table class="sealious-list ${toKebabCase(action_name)}-table">
-				{this.renderTableHead(ctx, displayFields)}
-				<tbody>{content}</tbody>
-			</table>
-		);
-	}
-
-	async render(ctx: Context) {
-		return html(
-			ctx,
-			"${action_name}",
-			<div class="sealious-list-wrapper ${toKebabCase(action_name)}--wrapper">
-				<h2>${action_name} List</h2>
-				{super.render(ctx)}
-			</div>
-		);
-	}
-
-})(${uppercase_collection});
-`;
+	const result = await collectionListTemplate(
+		collection_name,
+		action_name,
+		newfilefullpath
+	);
 	return formatWithPrettier(result);
 };