@sealcode/sealgen 0.19.16 → 0.19.18

package/@types/app-config/get-app-port.d.ts

@@ -0,0 +1 @@
+export declare function getAppPort(projectDir: string): Promise<number | null>;

package/@types/app-config/load-app-config.d.ts

@@ -0,0 +1,4 @@
+export type AppConfigModule = {
+    PORT?: number;
+};
+export declare function loadAppConfigModule(projectDir: string): Promise<AppConfigModule | null>;

package/@types/app-config/resolve-app-config-path.d.ts

@@ -0,0 +1 @@
+export declare function resolveAppConfigModulePath(projectDir: string): string;

package/@types/controllers/sealgen-table.stimulus.d.ts

@@ -0,0 +1,9 @@
+import { Controller } from "stimulus";
+export default class TableController extends Controller {
+    static targets: string[];
+    tableTarget: HTMLTableElement;
+    templateTarget: HTMLTemplateElement;
+    getTbody(): HTMLTableSectionElement;
+    addRow(): void;
+    swapRows(e: MouseEvent): void;
+}

package/@types/forms/controls/table.d.ts

@@ -10,6 +10,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;
@@ -36,4 +37,5 @@ export declare class Table<F extends Record<string, FormField>> extends FormCont
     setLabel(value: string): this;
     setRemoveLabel(value: string): this;
     setAddLabel(value: string): this;
+    setAllowReordering(value: boolean): this;
 }

package/@types/forms/fields/structured-array.d.ts

@@ -1,5 +1,5 @@
 import { Context } from "koa";
-import { Field as SealiousField, FieldTypes as SealiousFieldTypes, FieldsetInput } from "sealious";
+import { Field as SealiousField, FieldTypes as SealiousFieldTypes } from "sealious";
 import { FormDataValue } from "../form-types.js";
 import { Table as TableControl } from "../controls/table.js";
 import { SealiousToFormField } from "./get-field-for-sealious.js";
@@ -18,6 +18,6 @@ export declare class StructuredArray<SealiousFields extends Record<string, Seali
         form_field_types: string;
         sealious_field: string;
     }): string;
-    getSealiousCreateValue(fctx: FormControlContext): Promise<SealiousFieldTypes.ArrayStorageInput<FieldsetInput<SealiousFields>>>;
+    getSealiousCreateValue(fctx: FormControlContext): Promise<import("./table.js").TableFieldParsed<{ [name in keyof SealiousFields]: SealiousToFormField<SealiousFields[name]>; }>>;
     sealiousValueToForm(ctx: Context, sealiousValue: Record<string, FormDataValue | null>[] | null): Promise<FormDataValue>;
 }

package/@types/utils/translate.d.ts

@@ -1,3 +1,4 @@
 import { Context } from "koa";
 import { Translation } from "sealious";
-export declare function t(ctx: Context, key: string, props: unknown[], default_translation: Translation): string;
+/** deprecated */
+export declare function t(ctx: Context, key: string, _props: unknown[], _default_translation: Translation): string;

package/lib/controllers/sealgen-table.stimulus.js

@@ -0,0 +1,98 @@
+import { Controller } from "stimulus";
+class TableController extends Controller {
+  static {
+    this.targets = ["table", "template"];
+  }
+  getTbody() {
+    const tbody = this.element.closest("turbo-frame")?.querySelector("tbody");
+    if (!tbody) {
+      throw new Error("tbody not found");
+    }
+    return tbody;
+  }
+  getRowIndex(tr) {
+    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)
+    );
+    tbody.appendChild(this.templateTarget.cloneNode(true).content);
+    this.templateTarget.innerHTML = orig_template;
+    this.reindex();
+  }
+  swapRows(index_a, index_b) {
+    const tbody = this.getTbody();
+    const [a, b] = [index_a, index_b].sort().reverse();
+    tbody.insertBefore(tbody.children[a], tbody.children[b]);
+    this.reindex();
+  }
+  moveUp(e) {
+    const target = e.target;
+    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) {
+    const target = e.target;
+    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;
+    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++;
+    }
+    this.element.querySelectorAll(
+      `[data-action="sealgen-table#moveUp"], [data-action="sealgen-table#moveDown"]`
+    ).forEach((e) => e.disabled = false);
+    this.element.querySelectorAll(
+      'tr:first-child [data-action="sealgen-table#moveUp"], tr:last-child [data-action="sealgen-table#moveDown"]'
+    ).forEach((e) => e.disabled = true);
+  }
+}
+export {
+  TableController as default
+};
+//# sourceMappingURL=sealgen-table.stimulus.js.map

package/lib/forms/controls/table.js

@@ -49,19 +49,17 @@ class Table 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(
+								<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: {
@@ -69,9 +67,19 @@ class Table extends FormControl {
               }
             }
           )}"
-										/>
-									</noscript>
-								</td>`
+									/>
+								</noscript>
+							</td>`
+        ) : ""}${this.options.allow_reordering ? (
+          /* HTML */
+          `<td>
+								<button data-action="sealgen-table#moveUp">
+									\u2191
+								</button>
+								<button data-action="sealgen-table#moveDown">
+									\u2193
+								</button>
+							</td>`
         ) : ""}
 			 </tr>`
       );
@@ -89,13 +97,17 @@ class Table extends FormControl {
     ].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>
 
@@ -104,19 +116,17 @@ class Table extends FormControl {
     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(
+								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: {
@@ -125,8 +135,8 @@ class Table extends FormControl {
           }
         }
       )}"
-									/>
-								</noscript>`
+								/>
+							</noscript>`
     ) : ""}
 			</div>
 		</turbo-frame>`;
@@ -144,7 +154,7 @@ class Table extends FormControl {
     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)) {
+      if (!is(action, predicates.object) || !is(field_name, predicates.string) || field_name !== this.table_field.name) {
         await next();
         return;
       }
@@ -154,10 +164,6 @@ class Table 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] = {};
         }
@@ -169,10 +175,6 @@ class Table 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] = {};
         }
@@ -221,6 +223,10 @@ class Table extends FormControl {
     this.options.label_add = value;
     return this;
   }
+  setAllowReordering(value) {
+    this.options.allow_reordering = value;
+    return this;
+  }
 }
 export {
   TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER,

package/lib/forms/controls/tickable.js

@@ -21,7 +21,6 @@ class Tickable extends FormFieldControl {
     ];
   }
   async render(fctx) {
-    console.log("!! Rendering checkbox", this.field.name);
     const {
       parsed: _parsed,
       valid,
@@ -32,7 +31,6 @@ class Tickable extends FormFieldControl {
       true
     );
     const field_message = fctx.data.field_messages[this.field.name];
-    console.log(this.field.name, fctx.data.field_messages, field_message);
     const parsed = _parsed === null ? this.options.default_value : _parsed;
     const value = this.getValueAttribute(
       fctx.ctx,
@@ -75,7 +73,7 @@ class Tickable extends FormFieldControl {
 					})();
 				</script>
 
-				${(~valid || !!field_message) && !this.options.hide_errors && fctx.validate ? `<div class="input__error">${Array.from(new Set([message, field_message].filter((e) => !!e))).join(" \u2022 ")}</div>` : ""}
+				${(~valid || !!field_message) && !this.options.hide_errors && fctx.validate ? `<div class="input__error">${Array.from(new Set([message, field_message.message].filter((e) => !!e))).join(" \u2022 ")}</div>` : ""}
 			`
     );
   }

package/lib/forms/fields/collection-field.js

@@ -34,7 +34,8 @@ class CollectionField extends FormField {
       ctx.$context,
       value,
       void 0,
-      null
+      null,
+      void 0
     );
     return { valid, message: reason || (!valid ? "Wrong value" : "") };
   }

package/lib/generate-routes.js

@@ -70,8 +70,28 @@ async function generateRoutes() {
       ).replace(/\/\//g, "/")
     }))
   );
+  const url_tree = { children: {} };
+  sortRoutes(files).forEach(({ actionName, url }) => {
+    const elements = url.split("/").filter((e) => e != "");
+    let pointer = url_tree;
+    for (const [index, element] of elements.entries()) {
+      if (!pointer.children[element]) {
+        pointer.children[element] = { children: {} };
+      }
+      pointer = pointer.children[element];
+      if (index == elements.length - 1) {
+        pointer.actionName = actionName;
+      }
+    }
+  });
   const routes_content = `// DO NOT EDIT! This file is generated automaticaly with npm run generate-routes
 
+export type URLTree = {
+   actionName?: string;
+   children: { [key: string]: URLTree };
+};
+export const url_tree = ${JSON.stringify(url_tree)};
+
 import type Router from "@koa/router";
 import { mount } from "@sealcode/sealgen";
 import * as URLs from "./urls.js"
@@ -88,7 +108,9 @@ ${sortRoutes(files).map(
     ({ actionName }) => `	mount(router, URLs.${actionName}URL, ${actionName});`
   ).join("\n")}
 }`;
-  const urls_content = `${sortRoutes(files).map(({ actionName, url }) => generateURL(actionName, url)).join("\n")}
+  const urls_content = `/* DO NOT EDIT! This file is generated automaticall with npm run generate-routes. */
+
+${sortRoutes(files).map(({ actionName, url }) => generateURL(actionName, url)).join("\n")}
 `;
   await fs.writeFile(
     target_locreq.resolve("src/back/routes/routes.ts"),

package/lib/mount.js

@@ -10,19 +10,17 @@ async function handleHtmlPromise(ctx, next) {
 }
 function mount(router, url, mountable, use_dummy_app = false, file_manager = use_dummy_app ? new FileManager("/tmp", "/uploaded_files") : void 0) {
   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 ? [
     async (ctx, next) => {
       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/lib/utils/translate.js

@@ -1,9 +1,9 @@
-function t(ctx, key, props, default_translation) {
+function t(ctx, key, _props, _default_translation) {
   return (
     /* HTML */
-    `<span translation-key="${key.replace('"', '\\"')}"
-		>${ctx.$app.getString(key, props, default_translation)}</span
-	>`
+    `<span translation-key="${key.replace('"', '\\"')}">
+		${ctx.i18n`${key}`}
+	</span>`
   );
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.19.16",
+	"version": "0.19.18",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",
@@ -92,7 +92,7 @@
 	"peerDependencies": {
 		"koa": "^2.13.0",
 		"koa-responsive-image-router": "^0.2.24",
-		"sealious": "^0.21.29",
+		"sealious": "^0.21.36",
 		"stimulus": "^3.2.2"
 	}
 }

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));
+	}
+}