@sealcode/sealgen 0.15.35 → 0.15.36

package/lib/forms/controls/table.js

@@ -1,18 +1,20 @@
+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, render_fields) {
+  constructor(table_field, options) {
     super();
     this.table_field = table_field;
-    this.render_fields = render_fields;
+    this.options = options;
     this.role = "input";
   }
   async render(fctx) {
-    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 */
@@ -27,34 +29,134 @@ class Table extends FormControl {
         ...rows.length >= 20 ? ["form-input__wrapper--options-count--20-or-more"] : []
       ].join(" ")}"
 		>
+			<label>${this.options.label}</label>
 			<div class="table__wrapper">
 				<table>
 					<tbody>
-						<tr>
-							${rows?.map((row, row_index) => {
+						${rows?.map((row, row_index) => {
         return (
           /* HTML */
           `<tr>
-										${Object.entries(
-            this.table_field.columns
-          ).map(([key]) => {
-            return `<td>${this.render_fields[key](
+									${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("")}
-									</tr>`
+									${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("")}
-						</tr>
 					</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

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/table.js

@@ -2,7 +2,7 @@ import { is, predicates } from "@sealcode/ts-predicates";
 import { FormField } from "./field.js";
 class Table extends FormField {
   constructor(columns) {
-    super(true);
+    super(false);
     this.columns = columns;
   }
   getEmptyValue() {
@@ -21,6 +21,7 @@ class Table extends FormField {
       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) {
@@ -34,13 +35,17 @@ class Table extends FormField {
         }
         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) {
-          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/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

@@ -1,84 +1,19 @@
-import { toCamelCase, toKebabCase, toPascalCase } from "js-convert-case";
+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";
-function renderFieldForSealious({
-  name,
-  type,
-  is_required,
-  is_readonly
-}) {
-  if (type == "deep-reverse-single-reference" || type == "jdd" || is_readonly) {
-    return "";
-  }
-  let fallback_value = `""`;
-  let main_value = `data.${name}`;
-  if (type == "image" || type == "file") {
-    fallback_value = `null`;
-    if (is_required) {
-      main_value = toCamelCase("prepared-" + name);
-    }
-  }
-  if (type == "boolean") {
-    main_value = `!!data.${name}`;
-    fallback_value = "false";
-  }
-  if (type == "date") {
-    fallback_value == `undefined`;
-  }
-  if (is_required) {
-    return `${name}: ${main_value}`;
-  } else {
-    return `${name}: ${main_value} || ${fallback_value}`;
-  }
-}
-function renderFieldPreCreateAction({ name, type }) {
-  if (type == "image" || type == "file") {
-    const tempname = toCamelCase("prepared-" + name);
-    return `const ${tempname} = data.${name}.new || data.${name}.old;
-				if(!${tempname}){
-				    throw new Error("Missing field: ${name}")
-         		}`;
-  }
-  return "";
-}
-function renderFieldPostCreateAction({
-  name,
-  type,
-  referencing_collection,
-  referencing_field,
-  intermediary_field_that_points_there
-}) {
-  if (type == "deep-reverse-single-reference" && referencing_collection && referencing_field && intermediary_field_that_points_there) {
-    return ` await (async function(){
-            // We iterate over all selected values and insert appropriate entries for the ${name} relation
-			const ids = Object.entries(
-                           // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                           data.${name} as unknown as Record<string, string>
-                        )
-                        .filter(([, value]) => value === "on")
-                        .map(([key]) => key);
-
-			const promises = ids.map(async (id) => {
-				await ctx.$app.collections["${referencing_collection}"].create(
-					new ctx.$app.SuperContext(),
-					{
-						"${referencing_field}": created.id,
-						"${intermediary_field_that_points_there}": id,
-					}
-				);
-			});
-
-			await Promise.all(promises);
-        })()`;
-  }
-  return "";
-}
+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
@@ -105,6 +40,13 @@ async function createItemFormTemplate(create_action_name, newfilefullpath, colle
 			 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);
@@ -112,23 +54,22 @@ async function createItemFormTemplate(create_action_name, newfilefullpath, colle
 			throw new Error("Error when parsing the form values");
 		}
 
-	   ${collection_fields.map((field) => renderFieldPreCreateAction(field)).filter((e) => e !== "").join("\n")}
+	   ${field_handler_results.map(({ pre_create }) => pre_create).filter((e) => e !== "").join("\n")}
 
-		const created = await ctx.$app.collections["${toKebabCase(
-      collection_name
-    )}"].create(
+		${post_create_actions.length ? `const created = ` : ""} await ctx.$app.collections["${toKebabCase(collection_name)}"].create(
 			ctx.$context,
 			{
-				${collection_fields.map((field) => renderFieldForSealious(field)).filter((e) => e != "").join(",\n")}
-			}
+			      ${field_handler_results.filter((result) => !result.hide_sealious_value).map((result) => result.sealious_value(result)).filter((e) => e != "").join(",\n")}
+			} 
 		);
-        ${collection_fields.map((field) => renderFieldPostCreateAction(field)).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,
-			"AddBlogArticle",
+			"Create ${toKebabCase(collection_name)}",
 			tempstream/* HTML */ \` <div class="add-opinion-form">
 				<a class="" href="\${${list_action}URL}"
 					>\u2190 Back to ${collection_name} list</a
@@ -140,7 +81,6 @@ async function createItemFormTemplate(create_action_name, newfilefullpath, colle
   });
 }
 export {
-  createItemFormTemplate,
-  renderFieldForSealious
+  createItemFormTemplate
 };
 //# sourceMappingURL=collection-create-form.js.map