@sealcode/sealgen 0.15.34 → 0.15.36

package/lib/forms/controls/single-reference.test.js

@@ -31,7 +31,7 @@ describe("single-reference.test", () => {
     await test_app.addFile(
       form_file_path,
       await formTemplate("SomeForm", form_file_path, {
-        postimport: `import {Comments} from "../collections/collections.js";`,
+        postimport: `import {Comments} from "../collections/collections.js"; import {Fields} from "@sealcode/sealgen";`,
         fields: `article: new Fields.CollectionField(true, Comments.fields.article),`,
         controls: `new Controls.SingleReferenceDropdown(fields.article, {getLabel: item=>item.get("title")}),`,
         validate_method: ""

package/lib/forms/controls/table.js

@@ -0,0 +1,164 @@
+import { hasShape, is, predicates } from "@sealcode/ts-predicates";
+import qs from "qs";
+import { FormControl } from "./form-control.js";
+class Table extends FormControl {
+  constructor(table_field, options) {
+    super();
+    this.table_field = table_field;
+    this.options = options;
+    this.role = "input";
+  }
+  async render(fctx) {
+    let { parsed: rows } = await this.table_field.getValue(
+      fctx.ctx,
+      fctx.data
+    );
+    if (!rows) {
+      rows = [];
+    }
+    return (
+      /* HTML */
+      `<div
+			class="${[
+        "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"] : []
+      ].join(" ")}"
+		>
+			<label>${this.options.label}</label>
+			<div class="table__wrapper">
+				<table>
+					<tbody>
+						${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]
+            )}</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, action) {
+    return `./?${qs.stringify({
+      action,
+      field_name
+    })}`;
+  }
+  mount(router, form) {
+    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 (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][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] = Object.fromEntries(
+          Object.entries(
+            Object.values(
+              ctx.$body[this.table_field.name]
+            ).filter(
+              (_, index) => index != parseInt(action.remove.index)
+            )
+          )
+        );
+      }
+      ctx.override_reaction = {
+        action: "stay",
+        content: form.render(
+          ctx,
+          {
+            raw_values: await form.extractRawValues(ctx),
+            messages: []
+          },
+          false
+        )
+      };
+      await next();
+    });
+  }
+}
+export {
+  Table
+};
+//# sourceMappingURL=table.js.map

package/lib/forms/fields/boolean.js

@@ -29,7 +29,7 @@ class 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/lib/forms/fields/field.js

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

package/lib/forms/fields/fields.js

@@ -13,4 +13,5 @@ export * from "./file.js";
 export * from "./multiple-files.js";
 export * from "./reverse-single-reference.js";
 export * from "./structured-array.js";
+export * from "./table.js";
 //# sourceMappingURL=fields.js.map

package/lib/forms/fields/table.js

@@ -0,0 +1,63 @@
+import { is, predicates } from "@sealcode/ts-predicates";
+import { FormField } from "./field.js";
+class Table extends FormField {
+  constructor(columns) {
+    super(false);
+    this.columns = columns;
+  }
+  getEmptyValue() {
+    return [];
+  }
+  async parse(ctx, raw_value) {
+    if (!is(raw_value, predicates.object)) {
+      return {
+        parsable: false,
+        error: "Expected an object",
+        parsed_value: null
+      };
+    }
+    const result = [];
+    for (const row_number in raw_value) {
+      const row_data = raw_value[row_number];
+      const parsed_row = {};
+      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) {
+        const field = this.columns[key];
+        if (field == void 0) {
+          return {
+            parsable: false,
+            error: `Unknown column: ${key}`,
+            parsed_value: null
+          };
+        }
+        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[key]
+        );
+        if (!parse_result.parsable) {
+          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: message,
+            parsed_value: null
+          };
+        }
+        parsed_row[key] = parse_result.parsed_value;
+      }
+      result.push(parsed_row);
+    }
+    const ret = { parsed_value: result, parsable: true, error: null };
+    return ret;
+  }
+}
+export {
+  Table
+};
+//# sourceMappingURL=table.js.map

package/lib/forms/form.js

@@ -170,6 +170,11 @@ class Form extends MountableWithFields {
       }
       await next();
     });
+    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(
@@ -182,7 +187,8 @@ class Form extends MountableWithFields {
       );
     });
     router.post(path, async (ctx) => {
-      const reaction = await this.handlePost(ctx);
+      console.log("REGULAR FORM HANDLE");
+      const reaction = ctx.override_reaction || await this.handlePost(ctx);
       if (reaction.action == "stay") {
         ctx.status = 422;
         ctx.body = reaction.content;
@@ -191,11 +197,6 @@ class Form extends MountableWithFields {
         ctx.redirect(reaction.url);
       }
     });
-    const subrouter = new Router();
-    for (const control of this.controls) {
-      control.mount(subrouter);
-    }
-    router.use(path, subrouter.routes(), subrouter.allowedMethods());
   }
   async extractRawValues(ctx) {
     return Object.keys(ctx.$body).length ? ctx.$body : this.getInitialValues(ctx);

package/lib/page/default-list-filters.js

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

package/lib/templates/form.js

@@ -2,7 +2,9 @@ import Prettier from "prettier";
 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),`,
@@ -25,16 +27,28 @@ const defaults = {
 		} else {
 			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: ""
 };
 async function formTemplate(action_name, newfilefullpath, _params = defaults) {
   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}
 
@@ -54,20 +68,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/lib/templates/list.js

@@ -1,13 +1,7 @@
-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";
 const listTemplate = async (action_name, newfilefullpath) => {
   const response = await prompts({
     type: "autocomplete",
@@ -19,166 +13,11 @@ const listTemplate = async (action_name, newfilefullpath) => {
     }))
   });
   const collection_name = response.collection;
-  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);
 };
 export {

package/lib/templates/shared/collection-create-form.js

@@ -0,0 +1,86 @@
+import { toKebabCase, toPascalCase } from "js-convert-case";
+import { formTemplate } from "../form.js";
+import { curryImportPath } from "../../utils/import-path.js";
+import extract_fields_from_collection from "../../utils/extract-fields-from-collection.js";
+import { getFieldHandler } from "./shared-crud-form-fields.js";
+async function createItemFormTemplate(create_action_name, newfilefullpath, collection_name, list_action) {
+  const collection_fields = await extract_fields_from_collection(
+    collection_name
+  );
+  const importPath = curryImportPath(newfilefullpath);
+  const field_handler_results = await Promise.all(
+    collection_fields.map(
+      (field) => getFieldHandler(collection_name, field, importPath)
+    )
+  );
+  const post_create_actions = field_handler_results.map(({ post_create }) => post_create).filter((e) => e != "");
+  return formTemplate(create_action_name, newfilefullpath, {
+    postimport: `import {${toPascalCase(
+      collection_name
+    )}FormFields, ${toPascalCase(
+      collection_name
+    )}FormControls }from "./shared.js";
+
+        import { ${toPascalCase(collection_name)} } from "${importPath(
+      "src/back/collections/collections.js"
+    )}";
+
+		import { ${list_action}URL } from "${importPath("src/back/routes/urls.js")}";
+
+        import {tempstream} from "tempstream";
+`,
+    fields: `...${toPascalCase(collection_name)}FormFields`,
+    controls: `
+                new Controls.FormHeader("Create ${toPascalCase(
+      collection_name
+    )}"), 
+                ...${toPascalCase(collection_name)}FormControls`,
+    can_access: `canAccess = async (ctx: Context) => {
+			 const policy = ${toPascalCase(collection_name)}.getPolicy("create");
+			 const response = await policy.check(ctx.$context);
+			 return { canAccess: response?.allowed || false, message: response?.reason || "" };
+		 };`,
+    get_initial_values: field_handler_results.filter((r) => !r.hide_initial_value_create).map(({ initial_value_create }) => initial_value_create).filter((e) => e != "").length ? `getInitialValues(ctx: Context){
+                   return {
+                        ${field_handler_results.filter((r) => !r.hide_initial_value_create).map(
+      ({ initial_value_create }) => initial_value_create
+    ).join(",\n")}
+                   }
+}` : ``,
+    onsubmit: `
+	async onSubmit(ctx: Context) {
+		const data = await this.getParsedValues(ctx);
+		if (!data) {
+			throw new Error("Error when parsing the form values");
+		}
+
+	   ${field_handler_results.map(({ pre_create }) => pre_create).filter((e) => e !== "").join("\n")}
+
+		${post_create_actions.length ? `const created = ` : ""} await ctx.$app.collections["${toKebabCase(collection_name)}"].create(
+			ctx.$context,
+			{
+			      ${field_handler_results.filter((result) => !result.hide_sealious_value).map((result) => result.sealious_value(result)).filter((e) => e != "").join(",\n")}
+			} 
+		);
+        ${post_create_actions.length ? `/* ==== POST CREATE ACTIONS ==== */` : ""}
+        ${post_create_actions.join("\n")}
+	}
+`,
+    render: `	async render(ctx: Context, data: FormData, show_field_errors: boolean) {
+		return html(
+			ctx,
+			"Create ${toKebabCase(collection_name)}",
+			tempstream/* HTML */ \` <div class="add-opinion-form">
+				<a class="" href="\${${list_action}URL}"
+					>\u2190 Back to ${collection_name} list</a
+				>
+				\${await super.render(ctx, data, show_field_errors)}
+			</div>\`
+		);
+	}`
+  });
+}
+export {
+  createItemFormTemplate
+};
+//# sourceMappingURL=collection-create-form.js.map