@sealcode/sealgen 0.18.10 → 0.19.2

package/lib/forms/fields/pick-from-list.js

@@ -1,6 +1,7 @@
 import { is, predicates } from "@sealcode/ts-predicates";
-import { SimpleFormField } from "./simple-form-field.js";
-class PickFromListField extends SimpleFormField {
+import { Dropdown } from "../controls/dropdown.js";
+import { TextBasedSimpleField } from "./simple-form-field.js";
+class PickFromListField extends TextBasedSimpleField {
   constructor(required, generateOptions, customValidation = (ctx, value, instance) => instance.valueInList(ctx, value)) {
     super(required);
     this.required = required;
@@ -27,6 +28,9 @@ class PickFromListField extends SimpleFormField {
   getEmptyValue() {
     return "";
   }
+  getControl() {
+    return new Dropdown(this);
+  }
 }
 export {
   PickFromListField

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

@@ -16,6 +16,9 @@ class ProxyFormField extends FormField {
       parsed_value: this.parsed_value
     };
   }
+  getControl() {
+    throw new Error("This field does not have a default control assigned");
+  }
 }
 export {
   ProxyFormField

package/lib/forms/fields/regexp.js

@@ -1,4 +1,5 @@
 import { is, predicates } from "@sealcode/ts-predicates";
+import { SimpleInput } from "../controls/simple-input.js";
 import { FormField } from "./field.js";
 class RegExpField extends FormField {
   constructor(required, regexp, error_message, default_value = "") {
@@ -35,6 +36,19 @@ class RegExpField extends FormField {
   getEmptyValue() {
     return this.default_value || "";
   }
+  getControl() {
+    return new SimpleInput(this, { label: this.name });
+  }
+  async getSealiousCreateValue(fctx) {
+    const { parsed } = await this.getParsedValue(
+      fctx.ctx,
+      fctx.data.raw_values
+    );
+    return parsed || "";
+  }
+  async sealiousValueToForm(ctx, sealious_value) {
+    return sealious_value || "";
+  }
 }
 export {
   RegExpField

package/lib/forms/fields/simple-form-field.js

@@ -1,22 +1,81 @@
 import { predicates } from "@sealcode/ts-predicates";
 import { FormField } from "./field.js";
+import { SimpleInput } from "../controls/simple-input.js";
 class SimpleFormField extends FormField {
-  constructor(required) {
+  constructor(required, type = "text") {
     super(required);
+    this.type = type;
     this.predicate = predicates.string;
   }
+  async sealiousValueToForm(_ctx, value) {
+    if (value === null) {
+      return "";
+    }
+    return String(value);
+  }
+}
+class TextBasedSimpleField extends SimpleFormField {
   async parse(_, raw_value) {
     return {
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string
       parsed_value: (raw_value || "").toString(),
       parsable: true,
       error: null
     };
   }
+  async getSealiousCreateValue(fctx) {
+    const { parsed } = await this.getParsedValue(
+      fctx.ctx,
+      fctx.data.raw_values
+    );
+    return parsed || "";
+  }
+  async postSealiousCreate(ctx, created_item) {
+  }
+  async postSealiousEdit(ctx, edited_item) {
+  }
+  getControl() {
+    return new SimpleInput(this, {
+      label: this.name,
+      type: this.type
+    });
+  }
   getEmptyValue() {
     return "";
   }
 }
+class NumberBasedSimpleField extends SimpleFormField {
+  async parse(_, raw_value) {
+    return {
+      parsed_value: parseFloat(raw_value) || 0,
+      parsable: true,
+      error: null
+    };
+  }
+  async getSealiousCreateValue(fctx) {
+    const { parsed } = await this.getParsedValue(
+      fctx.ctx,
+      fctx.data.raw_values
+    );
+    return parsed || 0;
+  }
+  async postSealiousCreate() {
+  }
+  async postSealiousEdit() {
+  }
+  getControl() {
+    return new SimpleInput(this, {
+      label: this.name,
+      type: this.type
+    });
+  }
+  getEmptyValue() {
+    return 0;
+  }
+}
 export {
-  SimpleFormField
+  NumberBasedSimpleField,
+  SimpleFormField,
+  TextBasedSimpleField
 };
 //# sourceMappingURL=simple-form-field.js.map

package/lib/forms/fields/single-reference.js

@@ -0,0 +1,44 @@
+import { CollectionField } from "./collection-field.js";
+import { SingleReferenceDropdown } from "../controls/single-reference.js";
+import { toPascalCase } from "js-convert-case";
+class SingleReference extends CollectionField {
+  getControl() {
+    return new SingleReferenceDropdown(this, {
+      label: this.name,
+      getLabel: (item) => item.id
+    });
+  }
+  async getSealiousCreateValue(fctx) {
+    const { parsed } = await this.getParsedValue(
+      fctx.ctx,
+      fctx.data.raw_values
+    );
+    return parsed || void 0;
+  }
+  async sealiousValueToForm(_ctx, value) {
+    return value || void 0;
+  }
+  generateImportsForFieldList(field_info) {
+    if (!field_info.target) {
+      throw new Error("Expected 'target' attribute in field info");
+    }
+    return [
+      {
+        what: toPascalCase(field_info.target),
+        from: "src/back/collections/collections.js"
+      }
+    ];
+  }
+  generateFieldDeclaration(field_info, vars) {
+    if (!field_info.target) {
+      throw new Error("Expected 'target' attribute in field info");
+    }
+    return `new ${vars.form_field_types}.${this.constructor.name}<typeof ${toPascalCase(field_info.target)}, ${String(
+      field_info.is_required
+    )}, typeof ${vars.sealious_field}>(${String(field_info.is_required)}, ${vars.sealious_field})`;
+  }
+}
+export {
+  SingleReference
+};
+//# sourceMappingURL=single-reference.js.map

package/lib/forms/fields/structured-array.js

@@ -1,21 +1,70 @@
-import { FormField } from "./field.js";
-class StructuredArrayField extends FormField {
+import { Table as TableControl } from "../controls/table.js";
+import {
+  sealiousToFormField
+} from "./get-field-for-sealious.js";
+import { Table } from "./table.js";
+class StructuredArray extends Table {
   constructor(sealious_field) {
-    super(true);
+    const columns = Object.fromEntries(
+      Object.entries(sealious_field.subfields).map(
+        ([key, sealious_field2]) => [
+          key,
+          sealiousToFormField(sealious_field2)
+        ]
+      )
+    );
+    super(columns);
     this.sealious_field = sealious_field;
   }
-  async parse(_context, value) {
-    return {
-      parsable: true,
-      error: null,
-      parsed_value: value || []
-    };
+  getControl() {
+    return new TableControl(this, {
+      label: this.name,
+      subfield_controls: Object.fromEntries(
+        Object.entries(this.columns).map(([column_name, subfield]) => [
+          column_name,
+          subfield.getControl()
+        ])
+      ),
+      allow_adding: true,
+      make_new_row: () => ({})
+    });
   }
-  getEmptyValue() {
-    return [];
+  generateFieldDeclaration(_field_info, vars) {
+    return `new ${vars.form_field_types}.${this.constructor.name}(${vars.sealious_field})`;
+  }
+  async getSealiousCreateValue(fctx) {
+    const { parsed } = await this.getParsedValue(
+      fctx.ctx,
+      fctx.data.raw_values
+    );
+    return parsed || this.getEmptyValue();
+  }
+  async sealiousValueToForm(ctx, sealiousValue) {
+    return Promise.all(
+      (sealiousValue || []).map(
+        async (element) => Object.fromEntries(
+          await Promise.all(
+            Object.entries(element).map(async ([key, value]) => {
+              const form_subfield = this.columns[key];
+              if (!form_subfield) {
+                return [key, ""];
+              }
+              return [
+                key,
+                await form_subfield.sealiousValueToForm(
+                  ctx,
+                  value,
+                  {}
+                )
+              ];
+            })
+          )
+        )
+      )
+    );
   }
 }
 export {
-  StructuredArrayField
+  StructuredArray
 };
 //# sourceMappingURL=structured-array.js.map

package/lib/forms/fields/table.js

@@ -1,5 +1,9 @@
 import { is, predicates } from "@sealcode/ts-predicates";
 import { FormField } from "./field.js";
+import {
+  Table as TableControl,
+  TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER
+} from "../controls/table.js";
 class Table extends FormField {
   constructor(columns) {
     super(false);
@@ -8,6 +12,15 @@ class Table extends FormField {
   getEmptyValue() {
     return [];
   }
+  setName(name) {
+    super.setName(name);
+    for (const [column_name, field] of Object.entries(this.columns)) {
+      field.setName(
+        `${this.name}[${TABLE_COLUMN_FIELD_INDEX_PLACEHOLDER}][${column_name}]`
+      );
+    }
+    return this;
+  }
   async parse(ctx, raw_value) {
     if (!is(raw_value, predicates.object)) {
       return {
@@ -21,10 +34,9 @@ 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) {
+      for (const key of Object.keys(row_data)) {
         const field = this.columns[key];
         if (field == void 0) {
           return {
@@ -56,6 +68,21 @@ class Table extends FormField {
     const ret = { parsed_value: result, parsable: true, error: null };
     return ret;
   }
+  getControl() {
+    return new TableControl(this, {
+      label: this.name,
+      subfield_controls: Object.fromEntries(
+        Object.entries(this.columns).map(([column_name, field]) => [
+          column_name,
+          field.getControl()
+        ])
+      ),
+      allow_adding: true,
+      make_new_row: async () => Object.fromEntries(
+        Object.keys(this.columns).map((key) => [key, ""])
+      )
+    });
+  }
 }
 export {
   Table

package/lib/forms/fields/text.js

@@ -0,0 +1,17 @@
+import { TextBasedSimpleField } from "./simple-form-field.js";
+class Text extends TextBasedSimpleField {
+  constructor(required) {
+    super(required, "text");
+  }
+  async getSealiousCreateValue(fctx) {
+    const { parsed } = await this.getParsedValue(
+      fctx.ctx,
+      fctx.data.raw_values
+    );
+    return parsed || this.getEmptyValue();
+  }
+}
+export {
+  Text
+};
+//# sourceMappingURL=text.js.map

package/lib/forms/fields/url.js

@@ -0,0 +1,17 @@
+import { TextBasedSimpleField } from "./simple-form-field.js";
+class URLField extends TextBasedSimpleField {
+  constructor(required) {
+    super(required, "text");
+  }
+  async getSealiousCreateValue(fctx) {
+    const { parsed } = await this.getParsedValue(
+      fctx.ctx,
+      fctx.data.raw_values
+    );
+    return parsed || null;
+  }
+}
+export {
+  URLField
+};
+//# sourceMappingURL=url.js.map

package/lib/forms/form.js

@@ -10,6 +10,7 @@ import {
 import {
   MountableWithFields
 } from "../page/mountable-with-fields.js";
+import { Errors as SealiousErrors } from "sealious";
 class Form extends MountableWithFields {
   constructor() {
     super(...arguments);
@@ -47,7 +48,6 @@ class Form extends MountableWithFields {
 			${this.makeCloseFormTag()}
 		</div>`;
   }
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   async makeFormClasses(_ctx) {
     return [];
   }
@@ -59,7 +59,7 @@ class Form extends MountableWithFields {
   makeCloseFormTag() {
     return `</div>`;
   }
-  async onValuesInvalid(ctx, form_messages, _field_errors) {
+  async onValuesInvalid(ctx, form_messages, field_errors) {
     const messages = form_messages.length ? form_messages : [{ type: "error", text: "Some fields are invalid" }];
     return {
       action: "stay",
@@ -67,7 +67,8 @@ class Form extends MountableWithFields {
         ctx,
         {
           raw_values: await this.extractRawValues(ctx),
-          messages
+          messages,
+          field_messages: field_errors
         },
         true
       ),
@@ -76,9 +77,18 @@ class Form extends MountableWithFields {
   }
   async onError(ctx, data, error) {
     let error_message = "Unknown error has occured";
+    let field_messages = {};
     if (is(error, predicates.object) && hasShape({ message: predicates.string }, error)) {
       error_message = error.message;
     }
+    if (error instanceof SealiousErrors.FieldsError) {
+      field_messages = Object.fromEntries(
+        Object.entries(error.field_messages).map(([key, value]) => {
+          const message = value?.message || "";
+          return [key, { type: "error", message }];
+        })
+      );
+    }
     const messages = [{ type: "error", text: error_message }];
     return {
       action: "stay",
@@ -86,7 +96,8 @@ class Form extends MountableWithFields {
         ctx,
         {
           raw_values: data.raw_values,
-          messages
+          messages,
+          field_messages
         },
         true
       )
@@ -102,7 +113,8 @@ class Form extends MountableWithFields {
         ctx,
         {
           raw_values: await this.getInitialValues(ctx),
-          messages
+          messages,
+          field_messages: {}
         },
         false
       ),
@@ -119,23 +131,21 @@ class Form extends MountableWithFields {
       raw_values
     );
     if (!valid) {
-      console.debug("Form values invalid: ", {
-        form_messages,
-        field_errors
-      });
       return this.onValuesInvalid(ctx, form_messages, field_errors);
     }
     try {
       ctx.status = 303;
       const result = await this.onSubmit(ctx, {
         raw_values,
-        messages: []
+        messages: [],
+        field_messages: {}
       });
       return this.onSuccess(
         ctx,
         {
           raw_values: await this.getRawValuesOnSuccess(ctx),
-          messages: []
+          messages: [],
+          field_messages: {}
         },
         result
       );
@@ -151,7 +161,8 @@ class Form extends MountableWithFields {
               type: "error",
               text: message
             }
-          ]
+          ],
+          field_messages: {}
         },
         e
       );
@@ -181,13 +192,13 @@ class Form extends MountableWithFields {
         ctx,
         {
           raw_values: await this.extractRawValues(ctx),
-          messages: []
+          messages: [],
+          field_messages: {}
         },
         false
       );
     });
     router.post(path, async (ctx) => {
-      console.log("REGULAR FORM HANDLE");
       const reaction = ctx.override_reaction || await this.handlePost(ctx);
       if (reaction.action == "stay") {
         ctx.status = 422;
@@ -201,6 +212,11 @@ class Form extends MountableWithFields {
   async extractRawValues(ctx) {
     return Object.keys(ctx.$body).length ? ctx.$body : this.getInitialValues(ctx);
   }
+  static initFieldNames(fields) {
+    for (const [field_name, field] of Object.entries(fields)) {
+      field.setName(field_name);
+    }
+  }
 }
 export {
   Form

package/lib/forms/form.test.js

@@ -7,10 +7,10 @@ import { locator_is_visible } from "../test_utils/locator_is_visible.js";
 import { getBrowser } from "../utils/browser-creator.js";
 import { assertThrowsAsync } from "../utils/utils.js";
 import getPort from "get-port";
-import { SimpleFormField } from "./fields/simple-form-field.js";
+import { TextBasedSimpleField } from "./fields/simple-form-field.js";
 import { expect as PlaywritghtExpect } from "@playwright/test";
 const fields = {
-  text: new Fields.SimpleFormField(true)
+  text: new Fields.TextBasedSimpleField(true)
 };
 function form_factory(canAccessFun) {
   const result = new class extends Form {
@@ -34,7 +34,7 @@ function form_factory(canAccessFun) {
   return result;
 }
 const port = await getPort();
-console.log("Using port " + port + " for form.test.ts");
+console.info("Using port " + port + " for form.test.ts");
 describe("form test", () => {
   let page;
   before(async () => {
@@ -81,7 +81,6 @@ describe("form test", () => {
           }
         }
       );
-      console.log(res_axios.data);
       if (!res_axios.data.includes("Some fields are invalid")) {
         throw new Error("when sending a empty request with axios, the error didnt appear");
       }
@@ -121,7 +120,6 @@ describe("form test", () => {
           "/",
           form_factory(
             async (ctx) => {
-              console.log("CAN ACCESS? FALSE");
               return { canAccess: false, message: "" };
             }
           ),
@@ -307,7 +305,7 @@ describe("form test", () => {
         await page.getByPlaceholder("text").click();
         await page.getByPlaceholder("text").fill("yes@an.email");
         await page.getByRole("button", { name: "Submit" }).click();
-        assertThrowsAsync(async () => {
+        await assertThrowsAsync(async () => {
           return page.getByText("Please enter a proper email address").click({ timeout: 500 });
         });
       });
@@ -322,7 +320,7 @@ describe("form test", () => {
       const app = new Koa();
       const router = new Router();
       const fields2 = {
-        title: new SimpleFormField(true)
+        title: new TextBasedSimpleField(true)
       };
       mount(
         router,

package/lib/forms/multiform.js

@@ -29,12 +29,12 @@ class Multiform extends MountableWithFields {
       form.makeSubmitButton = () => (
         /* HTML */
         `<input
-				type="submit"
-				value="${form.submitButtonText}"
-				formaction="${form.action}"
-				id="${submit_button_id}"
-				${form.form_id ? `form="${form.form_id}"` : ""}
-			/> `
+					type="submit"
+					value="${form.submitButtonText}"
+					formaction="${form.action}"
+					id="${submit_button_id}"
+					${form.form_id ? `form="${form.form_id}"` : ""}
+				/> `
       );
     }
     for (const form of Object.values(this.forms)) {
@@ -56,7 +56,6 @@ class Multiform extends MountableWithFields {
       message: "this view includes multiple forms and each of them have their unique access rules"
     };
   }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getSubformsToRender(ctx) {
     const requested_frame = ctx.headers["turbo-frame"];
     if (!is(
@@ -78,7 +77,8 @@ class Multiform extends MountableWithFields {
       ctx,
       {
         raw_values: await this.getSubformRawValues(ctx, sub_form_name),
-        messages: []
+        messages: [],
+        field_messages: {}
       },
       show_field_errors
     );
@@ -97,7 +97,8 @@ class Multiform extends MountableWithFields {
   async render(ctx, messages, prerenderedForms = {}, show_field_errors) {
     return tempstream`${this.renderMessages(ctx, {
       raw_values: {},
-      messages
+      messages,
+      field_messages: {}
     })}
 			<div class="forms">
 				<form

package/lib/forms/multiform.test.js

@@ -8,16 +8,16 @@ import { Multiform } from "./multiform.js";
 import { assertThrowsAsync } from "../utils/utils.js";
 import { form_factory } from "./form.test.js";
 import { getBrowser } from "../utils/browser-creator.js";
-import { SimpleFormField } from "./fields/simple-form-field.js";
+import { TextBasedSimpleField } from "./fields/simple-form-field.js";
 import { Form } from "./form.js";
 import { FormHeader } from "./controls/form-header.js";
 import { SimpleInput } from "./controls/simple-input.js";
 import { EmailField } from "./fields/email.js";
 import getPort from "get-port";
 const port = await getPort();
-console.log(`Using port ${port} form multiform.test.ts`);
+console.info(`Using port ${port} form multiform.test.ts`);
 const fields1 = {
-  email: new SimpleFormField(true)
+  email: new TextBasedSimpleField(true)
 };
 const form1 = new class extends Form {
   constructor() {
@@ -31,7 +31,7 @@ const form1 = new class extends Form {
   }
 }();
 const fields2 = {
-  name: new SimpleFormField(true)
+  name: new TextBasedSimpleField(true)
 };
 const form2 = new class extends Form {
   constructor() {
@@ -134,7 +134,7 @@ async function individual_field_validation_e2e_tests(javaScriptEnabled) {
     await page.getByPlaceholder("text").click();
     await page.getByPlaceholder("text").fill("yes@an.email");
     await page.locator("#multiform_test_form1_submit").click();
-    assertThrowsAsync(async () => {
+    await assertThrowsAsync(async () => {
       return page.getByText("Please enter a proper email address").click({ timeout: 500 });
     });
   });

package/lib/generate-collections.js

@@ -1,8 +1,7 @@
 import _locreq from "locreq";
-import * as prettier from "prettier";
 import { promises as fs } from "fs";
 import { assertType, predicates } from "@sealcode/ts-predicates";
-import { getPrettierConfig } from "./utils/prettier.js";
+import { formatWithPrettier } from "./utils/prettier.js";
 const target_locreq = _locreq(process.cwd());
 async function extractCollectionClassname(full_file_path) {
   const file_content = await fs.readFile(full_file_path, "utf-8");
@@ -52,7 +51,7 @@ ${file_data.map(({ class_name, urlname }) => `	"${urlname}": ${class_name},`).jo
 };`;
   await fs.writeFile(
     target_locreq.resolve("src/back/collections/collections.ts"),
-    prettier.format(content, await getPrettierConfig())
+    await formatWithPrettier(content)
   );
   console.log(
     "Successfuly generated new src/back/collections/collections.ts file"

package/lib/generate-components.js

@@ -1,7 +1,6 @@
 import _locreq from "locreq";
-import * as prettier from "prettier";
 import { promises as fs } from "fs";
-import { getPrettierConfig } from "./utils/prettier.js";
+import { formatWithPrettier } from "./utils/prettier.js";
 import recursive from "recursive-readdir";
 import path from "path";
 import { toKebabCase, toPascalCase } from "js-convert-case";
@@ -29,7 +28,7 @@ ${component_data.map(
   const target = "src/back/jdd-components/components.ts";
   await fs.writeFile(
     target_locreq.resolve(target),
-    prettier.format(content, await getPrettierConfig())
+    await formatWithPrettier(content)
   );
   console.log(`Successfuly generated new ${target} file`);
 }