@sealcode/sealgen 0.19.17 → 0.19.20

package/src/controllers/sealgen-table.stimulus.ts

@@ -0,0 +1,115 @@
+/// <reference lib="dom" />
+import { Controller } from "stimulus";
+
+export default class TableController extends Controller {
+	static targets = ["table", "template"];
+	declare tableTarget: HTMLTableElement;
+	declare templateTarget: HTMLTemplateElement;
+
+	getTbody() {
+		const tbody = this.element
+			.closest("turbo-frame")
+			?.querySelector("tbody");
+		if (!tbody) {
+			throw new Error("tbody not found");
+		}
+		return tbody;
+	}
+
+	getRowIndex(tr: HTMLTableRowElement) {
+		let result = 0;
+		for (const child of Array.from(this.getTbody().children)) {
+			if (child == tr) {
+				return result;
+			}
+			result++;
+		}
+		return -1;
+	}
+
+	addRow() {
+		const tbody = this.getTbody();
+		const orig_template = this.templateTarget.innerHTML;
+		const placeholder = this.element.getAttribute("data-table-placeholder");
+		if (!placeholder) {
+			throw new Error("Could not find placeholder attribute");
+		}
+		this.templateTarget.innerHTML = orig_template.replaceAll(
+			placeholder,
+			String(tbody.querySelectorAll("tr").length)
+		);
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-explicit-any
+		tbody.appendChild((this.templateTarget.cloneNode(true) as any).content);
+		this.templateTarget.innerHTML = orig_template;
+		this.reindex();
+	}
+
+	swapRows(index_a: number, index_b: number) {
+		const tbody = this.getTbody();
+		const [a, b] = [index_a, index_b].sort().reverse(); // we want them in descending order
+		tbody.insertBefore(tbody.children[a], tbody.children[b]);
+		this.reindex();
+	}
+
+	moveUp(e: MouseEvent) {
+		const target = e.target as HTMLButtonElement;
+		const tr = target.closest("tr");
+		if (!tr) {
+			console.error("Not within a tr");
+			return;
+		}
+		const index_a = this.getRowIndex(tr);
+		if (index_a < 0) {
+			return;
+		}
+		const index_b = index_a - 1;
+		this.swapRows(index_a, index_b);
+	}
+
+	moveDown(e: MouseEvent) {
+		const target = e.target as HTMLButtonElement;
+		const tr = target.closest("tr");
+		if (!tr) {
+			console.error("Not within a tr");
+			return;
+		}
+		const index_a = this.getRowIndex(tr);
+		if (index_a < 0) {
+			return;
+		}
+		const index_b = index_a + 1;
+		this.swapRows(index_a, index_b);
+	}
+
+	reindex() {
+		let result = 0;
+
+		// assign proper number to each input within a tr by changing input names
+		for (const tr of Array.from(this.getTbody().children)) {
+			tr.querySelectorAll("input").forEach((input) => {
+				input.setAttribute(
+					"name",
+					(input.getAttribute("name") || "").replace(
+						/[(\d+)](?!.*\d)/, // last number in a regex
+						result.toString()
+					)
+				);
+			});
+			result++;
+		}
+
+		// disable up/down buttons for first/last items
+		// first reset all states to enabled
+		this.element
+			.querySelectorAll(
+				`[data-action="sealgen-table#moveUp"], [data-action="sealgen-table#moveDown"]`
+			)
+			.forEach((e: HTMLButtonElement) => (e.disabled = false));
+		// then disable the ones at the top and bottom
+		this.element
+			.querySelectorAll(
+				'tr:first-child [data-action="sealgen-table#moveUp"], tr:last-child [data-action="sealgen-table#moveDown"]'
+			)
+			.forEach((e: HTMLButtonElement) => (e.disabled = true));
+	}
+}

package/src/forms/controls/table.ts

@@ -21,6 +21,7 @@ export type TableControlOptions<F extends Record<string, FormField>> = {
 		[field_name in keyof F]: FormControl;
 	};
 	allow_removing?: boolean;
+	allow_reordering?: boolean;
 	label_add?: string;
 	label: string;
 	label_remove?: string;
@@ -62,8 +63,8 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 				| null,
 			row_index: number | string
 		) => {
-			return typeof row_index == "number"
-				? {
+			return typeof row_index == "number" ?
+					{
 						data: {
 							raw_values:
 								(Object.fromEntries(
@@ -78,7 +79,7 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 							field_messages: {},
 						},
 					}
-				: {};
+				:	{};
 		};
 
 		const make_row = async (
@@ -89,7 +90,7 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 						>;
 				  }
 				| null,
-			row_index: number | string
+			row_index: number | string // when string, it's a placeholder, it will not parse as a number
 		) => {
 			return /* HTML */ tempstream`<tr>
 				 ${Promise.all(
@@ -108,33 +109,42 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 							)
 					)}
 				 ${
-						this.options.allow_removing
-							? /* HTML */ `<td>
-									<button
-										onclick="this.closest('tr').remove()"
-									>
-										remove
-									</button>
-									<noscript>
-										<input
-											type="submit"
-											data-turbo-frame="${this.getFrameID()}"
-											value="${this.options
-												.label_remove || "remove"}"
-											form="${fctx.form_id}"
-											formnovalidate
-											formaction="${this.getActionURL(
-												this.table_field.name,
-												{
-													remove: {
-														index: row_index,
-													},
-												}
-											)}"
-										/>
-									</noscript>
-								</td>`
-							: ""
+						this.options.allow_removing ?
+							/* HTML */ `<td>
+								<button onclick="this.closest('tr').remove()">
+									remove
+								</button>
+								<noscript>
+									<input
+										type="submit"
+										data-turbo-frame="${this.getFrameID()}"
+										value="${this.options.label_remove ||
+										"remove"}"
+										form="${fctx.form_id}"
+										formnovalidate
+										formaction="${this.getActionURL(
+											this.table_field.name,
+											{
+												remove: {
+													index: row_index,
+												},
+											}
+										)}"
+									/>
+								</noscript>
+							</td>`
+						:	""
+					}${
+						this.options.allow_reordering ?
+							/* HTML */ `<td>
+								<button data-action="sealgen-table#moveUp">
+									↑
+								</button>
+								<button data-action="sealgen-table#moveDown">
+									↓
+								</button>
+							</td>`
+						:	""
 					}
 			 </tr>`;
 		};
@@ -145,60 +155,62 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 				"form-input__wrapper",
 				"form-input__wrapper--type--table",
 				"form-input__wrapper--options-count--" + rows.length.toString(),
-				...(rows.length >= 5
-					? ["form-input__wrapper--options-count--5-or-more"]
-					: []),
-				...(rows.length >= 10
-					? ["form-input__wrapper--options-count--10-or-more"]
-					: []),
-				...(rows.length >= 15
-					? ["form-input__wrapper--options-count--15-or-more"]
-					: []),
-				...(rows.length >= 20
-					? ["form-input__wrapper--options-count--20-or-more"]
-					: []),
+				...(rows.length >= 5 ?
+					["form-input__wrapper--options-count--5-or-more"]
+				:	[]),
+				...(rows.length >= 10 ?
+					["form-input__wrapper--options-count--10-or-more"]
+				:	[]),
+				...(rows.length >= 15 ?
+					["form-input__wrapper--options-count--15-or-more"]
+				:	[]),
+				...(rows.length >= 20 ?
+					["form-input__wrapper--options-count--20-or-more"]
+				:	[]),
 			].join(" ")}"
 		>
 			<label>${this.options.label || this.table_field.label}</label>
-			<div class="table__wrapper">
-				<table>
+			<div
+				class="table__wrapper"
+				data-controller="sealgen-table"
+				data-table-placeholder="${TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER}"
+			>
+				<table data-sealgen-table-target="table">
 					<tbody>
 						${rows?.map((row, index) => make_row(row, index))}
 					</tbody>
 				</table>
-				<template>
+				<template data-sealgen-table-target="template">
 					${make_row(null, TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER)}
 				</template>
 
 				${
 					/* because of https://github.com/ljharb/qs/issues/252 we have to
 					put the indexes in the field names */
-					this.options.allow_adding
-						? /* HTML */ `<button
-									data-controller="table-add-button"
-									data-action="click->table-add-button#addRow"
-									data-table-placeholder="${TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER}"
-								>
-									${this.options.label_add || "add"}
-								</button>
-								<noscript>
-									<input
-										type="submit"
-										value="add"
-										form="${fctx.form_id}"
-										formnovalidate
-										formaction="${this.getActionURL(
-											this.table_field.name,
-											{
-												insert: {
-													index: rows.length,
-													value: {},
-												},
-											}
-										)}"
-									/>
-								</noscript>`
-						: ""
+					this.options.allow_adding ?
+						/* HTML */ `<button
+								data-action="click->sealgen-table#addRow"
+							>
+								${this.options.label_add || "add"}
+							</button>
+							<noscript>
+								<input
+									type="submit"
+									value="add"
+									form="${fctx.form_id}"
+									formnovalidate
+									formaction="${this.getActionURL(
+										this.table_field.name,
+										{
+											insert: {
+												index: rows.length,
+												value: {},
+											},
+										}
+									)}"
+								/>
+							</noscript>`
+					:	""
 				}
 			</div>
 		</turbo-frame>`;
@@ -221,11 +233,13 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 			const field_name = ctx.$body.field_name;
 			if (
 				!is(action, predicates.object) ||
-				!is(field_name, predicates.string)
+				!is(field_name, predicates.string) ||
+				field_name !== this.table_field.name
 			) {
 				await next();
 				return;
 			}
+
 			if (
 				this.options.allow_adding &&
 				hasShape(
@@ -235,16 +249,13 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 					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(
 					{
@@ -253,10 +264,6 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 					action
 				)
 			) {
-				if (field_name !== this.table_field.name) {
-					await next();
-					return;
-				}
 				if (!ctx.$body[this.table_field.name]) {
 					ctx.$body[this.table_field.name] = {};
 				}
@@ -270,6 +277,7 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 					)
 				);
 			}
+
 			ctx.override_reaction = {
 				action: "stay",
 				content: await form.render(
@@ -310,4 +318,9 @@ export class Table<F extends Record<string, FormField>> extends FormControl {
 		this.options.label_add = value;
 		return this;
 	}
+
+	setAllowReordering(value: boolean) {
+		this.options.allow_reordering = value;
+		return this;
+	}
 }

package/src/generate-routes.ts

@@ -5,8 +5,8 @@ import { walkDir } from "./utils/walk.js";
 import { importPath } from "./utils/import-path.js";
 import { assertType, predicates } from "@sealcode/ts-predicates";
 import { unescape_url_params } from "./utils/escape-url-params.js";
-import { formatWithPrettier } from "./utils/prettier.js";
 import { Templates } from "./templates/templates.js";
+import { formatWithPrettier } from "./utils/prettier.js";
 
 const target_locreq = _locreq(process.cwd());
 
@@ -67,6 +67,13 @@ export function sortRoutes<T extends { url: string }>(urls: T[]): T[] {
 	});
 }
 
+const getPathToBuiltFile = (filePath: string) => {
+	const rootPath = target_locreq.resolve("");
+	const relativePath = relative(rootPath, filePath);
+	const distPath = relativePath.replace(/^src[\\/]/, "dist/");
+	return distPath.replace(/\.(ts|tsx)$/, ".js");
+};
+
 export async function generateRoutes(): Promise<void> {
 	const files = await Promise.all(
 		(await walkDir(target_locreq.resolve("src/back/routes")))
@@ -79,6 +86,7 @@ export async function generateRoutes(): Promise<void> {
 			.map(async (fullpath) => ({
 				fullpath,
 				actionName: await extractActionName(fullpath),
+				module_path: getPathToBuiltFile(fullpath),
 				// trailing slash is important here, as it enables to use the entire path while building relative URLs. For example, while visiting /users/123, the path ./add-photo leads to /users/add-photo. While visiting /users/123/ (note the trailing slash), the path ./add-photo leads to /users/123/add-photo
 				url: unescape_url_params(
 					"/" +
@@ -98,11 +106,12 @@ export async function generateRoutes(): Promise<void> {
 
 	type URLTree = {
 		actionName?: string;
+		module_path?: string;
 		children: { [key: string]: URLTree };
 	};
 
 	const url_tree: URLTree = { children: {} };
-	sortRoutes(files).forEach(({ actionName, url }) => {
+	sortRoutes(files).forEach(({ actionName, url, module_path }) => {
 		const elements = url.split("/").filter((e) => e != "");
 		let pointer: URLTree = url_tree;
 		for (const [index, element] of elements.entries()) {
@@ -113,6 +122,7 @@ export async function generateRoutes(): Promise<void> {
 			if (index == elements.length - 1) {
 				(pointer as unknown as { actionName: string }).actionName =
 					actionName;
+				pointer.module_path = module_path;
 			}
 		}
 	});
@@ -121,6 +131,7 @@ export async function generateRoutes(): Promise<void> {
 
 export type URLTree = {
    actionName?: string;
+   module_path?: string;
    children: { [key: string]: URLTree };
 };
 export const url_tree = ${JSON.stringify(url_tree)};

package/src/index.ts

@@ -52,3 +52,5 @@ export interface HTMLArgs {
 }
 
 export type HTMLFunc = (args: HTMLArgs) => Readable | Promise<Readable>;
+
+export type BreadcrumbLabel = string | ((ctx: Context) => Promise<string>);

package/src/mount.ts

@@ -25,16 +25,6 @@ export function mount(
 ): void {
 	const raw_url = typeof url === "string" ? url : url.rawURL;
 
-	const imageRouter = new KoaResponsiveImageRouter({
-		staticPath: "/tmp",
-		thumbnailSize: 10,
-		cacheManagerResolutionThreshold: 10,
-		imageStoragePath: "/tmp",
-		smartCropStoragePath: "/tmp",
-	});
-
-	const fileManager = new FileManager("/tmp", "/uploaded_files");
-
 	const args =
 		use_dummy_app ?
 			[
@@ -44,8 +34,14 @@ export function mount(
 					// regard
 					// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 					ctx.$app = {
-						fileManager,
-						imageRouter,
+						fileManager: new FileManager("/tmp", "/uploaded_files"),
+						imageRouter: new KoaResponsiveImageRouter({
+							staticPath: "/tmp",
+							thumbnailSize: 10,
+							cacheManagerResolutionThreshold: 10,
+							imageStoragePath: "/tmp",
+							smartCropStoragePath: "/tmp",
+						}),
 						// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 						Logger: new Proxy(
 							{},

package/src/templates/form.ts

@@ -46,13 +46,13 @@ export async function formTemplate(
 ): Promise<string> {
 	const params = { ...defaults, ..._params };
 	const content = `import type { Context } from "koa";
-import type { FormData } from "@sealcode/sealgen";
+import type { FormData, BreadcrumbLabel } from "@sealcode/sealgen";
 import { Form,  Controls } from "@sealcode/sealgen";
 import html from "src/back/html.js";
-
 ${params.postimport}
 
 export const actionName = "${action_name}";
+export const breadcrumbLabel: BreadcrumbLabel = "${action_name}";
 
 const getFields = ${params.get_fields};
 

package/src/templates/jdd-editor.ts

@@ -58,12 +58,14 @@ import type { FieldNames } from "sealious";
 import { TempstreamJSX } from "tempstream";
 import type ${collectionClassName} from "src/back/collections/${collection_name}.js";
 import { EditJDDField } from "@sealcode/jdd-editor";
+import type { BreadcrumbLabel } from "@sealcode/sealgen";
 import html from "src/back/html.js";
 import { registry } from "src/back/jdd-components/registry.js";
 import { makeJDDContext } from "src/back/jdd-context.js";
 import { defaultHead } from "src/back/defaultHead.js";
 
 export const actionName = "${actionName}";
+export const breadcrumbLabel: BreadcrumbLabel = "${actionName}";
 
 export default new (class JDDCreatePreviewPage extends EditJDDField<${collectionClassName}> {
 	getCollection(ctx: Context) {

package/src/templates/long-running-process.ts

@@ -9,10 +9,12 @@ export async function LongRunningProcessTemplate(
 	return `import { Context } from "koa";
 import { TempstreamJSX } from "tempstream";
 import { Page } from "@sealcode/sealgen";
+import type { BreadcrumbLabel } from "@sealcode/sealgen";
 import html from "${rel("src/back/html.js")}";
 import { LongRunningProcess } from "sealious";
 
 export const actionName = "${action_name}";
+export const breadcrumbLabel: BreadcrumbLabel = "${action_name}";
 
 export default new (class PatroniteAutoImportStatusPage extends Page {
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/templates/multiform.ts

@@ -8,9 +8,11 @@ export async function multiformTemplate(
 	return `import { Context } from "koa";
 import html from "${rel("src/back/html.js")}";
 import { Controls, Fields, Form, FormMessage, Multiform } from "@sealcode/sealgen";
+import type { BreadcrumbLabel } from "@sealcode/sealgen";
 import { FlatTemplatable } from "tempstream";
 
 export const actionName = "${action_name}";
+export const breadcrumbLabel: BreadcrumbLabel = "${action_name}";
 
 const fields1 = {
 	email: new Fields.TextBasedSimpleField(true),

package/src/templates/page.ts

@@ -2,9 +2,11 @@ export async function pageTemplate(action_name: string): Promise<string> {
 	return `import type { Context } from "koa";
 import { TempstreamJSX } from "tempstream";
 import { Page } from "@sealcode/sealgen";
+import type { BreadcrumbLabel } from "@sealcode/sealgen";
 import html from "src/back/html.js";
 
 export const actionName = "${action_name}";
+export const breadcrumbLabel: BreadcrumbLabel = "${action_name}";
 
 export default new (class ${action_name}Page extends Page {
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/templates/post.ts

@@ -1,9 +1,11 @@
 export async function postTemplate(action_name: string): Promise<string> {
 	return `import type { Context } from "koa";
 import { Mountable } from "@sealcode/sealgen";
+import type { BreadcrumbLabel } from "@sealcode/sealgen";
 import type Router from "@koa/router";
 
 export const actionName = "${action_name}";
+export const breadcrumbLabel: BreadcrumbLabel = "${action_name}";
 
 export default new (class ${action_name}Redirect extends Mountable {
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/templates/redirect.ts

@@ -1,9 +1,11 @@
 export async function redirectTemplate(action_name: string): Promise<string> {
 	return `import type { Context } from "koa";
 import { Mountable } from "@sealcode/sealgen";
+import type { BreadcrumbLabel } from "@sealcode/sealgen";
 import type Router from "@koa/router";
 
 export const actionName = "${action_name}";
+export const breadcrumbLabel: BreadcrumbLabel = "${action_name}";
 
 export default new (class ${action_name}Redirect extends Mountable {
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars

package/src/templates/shared/collection-list.ts

@@ -118,7 +118,7 @@ import type { FlatTemplatable, Templatable } from "tempstream";
 import { TempstreamJSX, tempstream } from "tempstream";
 import { ${uppercase_collection} } from "src/back/collections/collections.js";
 import html from "src/back/html.js";
-import type { ListFilterRender, FormDisplayInfo } from "@sealcode/sealgen";
+import type { ListFilterRender, FormDisplayInfo, BreadcrumbLabel } from "@sealcode/sealgen";
 import {
 	SealiousItemListPage,
 	BaseListPageFields,
@@ -130,6 +130,7 @@ ${hooks.post_import_js}
 ${field_import_string}
 
 export const actionName = "${action_name}";
+export const breadcrumbLabel: BreadcrumbLabel = "${action_name}";
 
 const filterFields:{
     field: keyof (typeof ${uppercase_collection})["fields"];

package/src/templates/shared/item-delete.ts

@@ -10,6 +10,7 @@ export function itemDeleteTemplate(
 	const result = `import type { Context } from "koa";
 import { Mountable } from "@sealcode/sealgen";
 import type Router from "@koa/router";
+import type { BreadcrumbLabel } from "@sealcode/sealgen";
 
 import { ${toPascalCase(collection_name)} } from "${importPath(
 		"src/back/collections/collections.js"
@@ -20,6 +21,7 @@ import { ${list_action_name}URL } from "${importPath(
 	)}";
 
 export const actionName = "${delete_action_name}";
+export const breadcrumbLabel: BreadcrumbLabel = "${delete_action_name}";
 
 export default new (class ${delete_action_name}Redirect extends Mountable {
     canAccess = async (ctx: Context) => {

package/src/templates/stateful-page.ts

@@ -9,9 +9,11 @@ export async function statefulPageTemplate(
 	return formatWithPrettier(`import { TempstreamJSX, Templatable } from "tempstream";
 import { Context } from "koa";
 import { StatefulPage, StatefulPageActionArgument } from "@sealcode/sealgen";
+import type { BreadcrumbLabel } from "@sealcode/sealgen";
 import html from "${rel("src/back/html.js")}";
 
 export const actionName = "${action_name}";
+export const breadcrumbLabel: BreadcrumbLabel = "${action_name}";
 
 const actions = {
 	add: ({ state, inputs }: StatefulPageActionArgument<State>) => {

package/lib/controllers/table-add-button.stimulus.js

@@ -1,35 +0,0 @@
-import { Controller } from "stimulus";
-class table_add_button_stimulus_default extends Controller {
-  constructor() {
-    super(...arguments);
-    this.defaultRowsNumber = 20;
-  }
-  static {
-    this.targets = ["textarea"];
-  }
-  addRow() {
-    const template = this.element.closest("turbo-frame")?.querySelector("template");
-    if (!template) {
-      throw new Error("Couldn't find template");
-    }
-    const tbody = this.element.closest("turbo-frame")?.querySelector("tbody");
-    if (!tbody) {
-      throw new Error("tbody not found");
-    }
-    const orig_template = template.innerHTML;
-    const placeholder = this.element.getAttribute("data-table-placeholder");
-    if (!placeholder) {
-      throw new Error("Could find placeholder attribute");
-    }
-    template.innerHTML = orig_template.replaceAll(
-      placeholder,
-      String(tbody.querySelectorAll("tr").length)
-    );
-    tbody.appendChild(template.cloneNode(true).content);
-    template.innerHTML = orig_template;
-  }
-}
-export {
-  table_add_button_stimulus_default as default
-};
-//# sourceMappingURL=table-add-button.stimulus.js.map