@sealcode/sealgen 0.19.17 → 0.19.20

package/@types/add-crud.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,13 @@
+import { Controller } from "stimulus";
+export default class TableController extends Controller {
+    static targets: string[];
+    tableTarget: HTMLTableElement;
+    templateTarget: HTMLTemplateElement;
+    getTbody(): HTMLTableSectionElement;
+    getRowIndex(tr: HTMLTableRowElement): number;
+    addRow(): void;
+    swapRows(index_a: number, index_b: number): void;
+    moveUp(e: MouseEvent): void;
+    moveDown(e: MouseEvent): void;
+    reindex(): 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/index.d.ts

@@ -45,3 +45,4 @@ export interface HTMLArgs {
     hideNavigation?: boolean;
 }
 export type HTMLFunc = (args: HTMLArgs) => Readable | Promise<Readable>;
+export type BreadcrumbLabel = string | ((ctx: Context) => Promise<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/generate-routes.js

@@ -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());
 async function extractActionName(full_file_path) {
   const file_content = await fs.readFile(full_file_path, "utf-8");
@@ -49,6 +49,12 @@ function sortRoutes(urls) {
     return encoded1 < encoded2 ? -1 : 1;
   });
 }
+const getPathToBuiltFile = (filePath) => {
+  const rootPath = target_locreq.resolve("");
+  const relativePath = relative(rootPath, filePath);
+  const distPath = relativePath.replace(/^src[\\/]/, "dist/");
+  return distPath.replace(/\.(ts|tsx)$/, ".js");
+};
 async function generateRoutes() {
   const files = await Promise.all(
     (await walkDir(target_locreq.resolve("src/back/routes"))).filter(
@@ -58,6 +64,7 @@ async function generateRoutes() {
     ).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(
         "/" + relative(
@@ -71,7 +78,7 @@ async function generateRoutes() {
     }))
   );
   const url_tree = { children: {} };
-  sortRoutes(files).forEach(({ actionName, url }) => {
+  sortRoutes(files).forEach(({ actionName, url, module_path }) => {
     const elements = url.split("/").filter((e) => e != "");
     let pointer = url_tree;
     for (const [index, element] of elements.entries()) {
@@ -81,6 +88,7 @@ async function generateRoutes() {
       pointer = pointer.children[element];
       if (index == elements.length - 1) {
         pointer.actionName = actionName;
+        pointer.module_path = module_path;
       }
     }
   });
@@ -88,6 +96,7 @@ async function generateRoutes() {
 
 export type URLTree = {
    actionName?: string;
+   module_path?: string;
    children: { [key: string]: URLTree };
 };
 export const url_tree = ${JSON.stringify(url_tree)};

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/templates/form.js

@@ -41,13 +41,13 @@ const defaults = {
 async function formTemplate(action_name, _params = defaults) {
   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/lib/templates/jdd-editor.js

@@ -48,12 +48,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/lib/templates/long-running-process.js

@@ -5,10 +5,12 @@ async function LongRunningProcessTemplate(action_name, newfilefullpath) {
   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/lib/templates/multiform.js

@@ -4,9 +4,11 @@ async function multiformTemplate(action_name, newfilefullpath) {
   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/lib/templates/page.js

@@ -2,9 +2,11 @@ async function pageTemplate(action_name) {
   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/lib/templates/post.js

@@ -1,9 +1,11 @@
 async function postTemplate(action_name) {
   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/lib/templates/redirect.js

@@ -1,9 +1,11 @@
 async function redirectTemplate(action_name) {
   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/lib/templates/shared/collection-list.js

@@ -91,7 +91,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,
@@ -103,6 +103,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/lib/templates/shared/item-delete.js

@@ -4,6 +4,7 @@ function itemDeleteTemplate(delete_action_name, collection_name, list_action_nam
   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"
@@ -14,6 +15,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/lib/templates/stateful-page.js

@@ -5,9 +5,11 @@ async function statefulPageTemplate(action_name, newfilefullpath) {
   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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.19.17",
+	"version": "0.19.20",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",

package/src/add-crud.test.ts

@@ -0,0 +1,44 @@
+import { Locator, Page } from "playwright";
+import { RealAppTest } from "./test_utils/test-on-real-app.js";
+import { getBrowser } from "./utils/browser-creator.js";
+
+describe("add crud test", () => {
+	let page: Page;
+	before(async () => {
+		const browser = await getBrowser();
+		const context = await browser.newContext();
+		page = await context.newPage();
+	});
+
+	after(async () => {
+		await page.close();
+	});
+
+	it("Generate simple sealious crud", async function () {
+		const test_app = await RealAppTest.init();
+
+		const path = "/sample";
+		await test_app.runSealgenCommand(`add-collection --collection_name=sealcode-test`);
+		await test_app.runSealgenCommand(`add-crud --url=${path} --collection=sealcode-test`);
+		await test_app.start();
+
+		await page.goto(test_app.fullURL(`sample/create/`));
+
+		const contentInput: Locator = page.getByLabel("Content");
+
+		await contentInput.focus();
+		await contentInput.fill("Hello");
+
+		await page.locator("[type=submit]").click();
+		await page.locator('[href="/sample/"]').click();
+
+		const dataFieldNameAttr: string | null = await page
+			.getByText("Hello")
+			.getAttribute("data-field-name");
+
+		if (dataFieldNameAttr !== "content") {
+			throw new Error("Generated td element does not have correct data-field-name attribute");
+		}
+		await test_app.close();
+	}).timeout(100 * 1000);
+});

package/src/add-crud.ts

@@ -71,7 +71,7 @@ export async function addCRUD(
 						   {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>;
+							   return <td data-field-name={field}>{format ? format(value, item) : value}</td>;
 						   })}
                            <td><div class="sealious-list__actions">
                                <a href={${edit_action_name}URL(item.id)}>Edit</a>