@sealcode/sealgen 0.14.10 → 0.14.11

package/@types/src/forms/controls/checkboxed-list-input.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="node" resolution-mode="require"/>
-import { ChekboxedListField } from "../fields/checkboxed-list.js";
+import { CheckboxedListField } from "../fields/checkboxed-list.js";
 import { FormControlContext } from "./form-control.js";
 import { FormFieldControl } from "./form-field-control.js";
 export declare class CheckboxedListInput extends FormFieldControl {
-    field: ChekboxedListField<boolean>;
+    field: CheckboxedListField<boolean>;
     options: {
         label: string;
     };
-    constructor(field: ChekboxedListField<boolean>, options?: {
+    constructor(field: CheckboxedListField<boolean>, options?: {
         label: string;
     });
     render(fctx: FormControlContext): Promise<import("stream").Readable>;

package/@types/src/forms/controls/checkboxed-list-input.test.d.ts

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

package/@types/src/forms/fields/checkboxed-list.d.ts

@@ -1,15 +1,17 @@
 import { Context } from "koa";
 import { FormDataValue } from "../form-types.js";
 import { FieldParseResult, FormField, FormFieldValidationResponse } from "./field.js";
-export declare class ChekboxedListField<Required extends boolean> extends FormField<Required, Record<string, "on">> {
+export declare class CheckboxedListField<Required extends boolean> extends FormField<Required, Record<string, "on">> {
     required: Required;
-    generateOptions: (ctx: Context) => Promise<Record<string, string> | {
-        [i: string]: string;
-    }>;
+    generateOptions: (ctx: Context) => Promise<{
+        value: string;
+        label?: string;
+    }[]>;
     isVisible: (ctx: Context) => Promise<boolean>;
-    constructor(required: Required, generateOptions: (ctx: Context) => Promise<Record<string, string> | {
-        [i: string]: string;
-    }>, isVisible?: (ctx: Context) => Promise<boolean>);
+    constructor(required: Required, generateOptions: (ctx: Context) => Promise<{
+        value: string;
+        label?: string;
+    }[]>, isVisible?: (ctx: Context) => Promise<boolean>);
     predicate: (v: unknown, w: unknown) => {
         readonly match: boolean;
         readonly wildcard: string[];

package/dist/forms/controls/checkboxed-list-input.js

@@ -1,4 +1,3 @@
-import { is, predicates } from "@sealcode/ts-predicates";
 import { tempstream } from "tempstream";
 import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper.js";
 import { FormFieldControl } from "./form-field-control.js";
@@ -9,20 +8,18 @@ class CheckboxedListInput extends FormFieldControl {
     this.options = options;
   }
   async render(fctx) {
-    const { parsed: pickedValues } = await this.field.getValue(
+    const { parsed: currentValue } = await this.field.getValue(
       fctx.ctx,
       fctx.data
     );
-    if (!is(pickedValues, predicates.array(predicates.string))) {
-      throw new Error("picked values is not an array of strings");
-    }
+    const pickedValues = Object.entries(currentValue).filter(([, is_on]) => is_on).map(([key]) => key);
     const [options, isVisible] = await Promise.all([
       this.field.generateOptions(fctx.ctx),
       this.field.isVisible(fctx.ctx)
     ]);
     const { name, required } = this.field;
-    return tempstream`${isVisible ? Object.entries(options).map(
-      ([value, text]) => inputWrapper(
+    return tempstream`${isVisible ? options.map(
+      ({ value, label }) => inputWrapper(
         [name, getRequiredClass(required)],
         /* HTML */
         `
@@ -31,8 +28,11 @@ class CheckboxedListInput extends FormFieldControl {
 								id="${name}.${value}"
 								name="${name}.${value}"
 								${pickedValues.includes(value) ? "checked" : ""}
+								form=${fctx.form_id}
 							/>
-							<label for="${name}.${value}">${text}</label>
+							<label for="${name}.${value}"
+								>${label || value}</label
+							>
 						`
       )
     ) : ""}`;

package/dist/forms/controls/checkboxed-list-input.test.js

@@ -0,0 +1,62 @@
+import Router from "@koa/router";
+import getPort from "get-port";
+import Koa from "koa";
+import { mount } from "../../mount.js";
+import { CheckboxedListField } from "../fields/checkboxed-list.js";
+import { Form } from "../form.js";
+import { CheckboxedListInput } from "./checkboxed-list-input.js";
+import { getBrowser } from "../../utils/browser-creator.js";
+describe.only("checkboxed-list", () => {
+  describe("basic tests", async () => {
+    let server;
+    let browser;
+    let page;
+    afterAll(() => {
+      server.close();
+    });
+    it("sends the values", async () => {
+      const port = await getPort();
+      console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+      const app = new Koa();
+      const router = new Router();
+      const fields = {
+        syllables: new CheckboxedListField(true, async () => {
+          return ["sa", "mple", "co", "de"].map((s) => ({
+            value: s,
+            label: s.toLocaleUpperCase()
+          }));
+        })
+      };
+      let received_values;
+      mount(
+        router,
+        "/",
+        new class extends Form {
+          constructor() {
+            super(...arguments);
+            this.fields = fields;
+            this.controls = [new CheckboxedListInput(fields.syllables)];
+          }
+          async onSubmit(ctx) {
+            received_values = await this.getParsedValues(ctx);
+          }
+          async canAccess(_) {
+            return { canAccess: true, message: "" };
+          }
+        }(),
+        true
+      );
+      app.use(router.routes()).use(router.allowedMethods());
+      server = app.listen(port);
+      browser = await getBrowser();
+      const context = await browser.newContext();
+      page = await context.newPage();
+      await page.goto(`http://localhost:${port}`);
+      await page.getByLabel("CO").check();
+      await page.getByLabel("DE").check();
+      await page.getByRole("button", { name: "Wy\u015Blij" }).click();
+      assert.deepStrictEqual(received_values, { syllables: { co: "on", de: "on" } });
+    });
+  });
+});
+//# sourceMappingURL=checkboxed-list-input.test.js.map

package/dist/forms/fields/checkboxed-list.js

@@ -2,7 +2,7 @@ import { is, predicates } from "@sealcode/ts-predicates";
 import {
   FormField
 } from "./field.js";
-class ChekboxedListField extends FormField {
+class CheckboxedListField extends FormField {
   constructor(required, generateOptions, isVisible = () => Promise.resolve(true)) {
     super(required);
     this.required = required;
@@ -44,6 +44,6 @@ class ChekboxedListField extends FormField {
   }
 }
 export {
-  ChekboxedListField
+  CheckboxedListField
 };
 //# sourceMappingURL=checkboxed-list.js.map

package/package.json

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

package/src/forms/controls/checkboxed-list-input.test.ts

@@ -0,0 +1,70 @@
+import Router from "@koa/router";
+import getPort from "get-port";
+import { Browser, Page } from "playwright";
+import type { Context } from "koa";
+import Koa from "koa";
+import { mount } from "../../mount.js";
+import { CheckboxedListField } from "../fields/checkboxed-list.js";
+import { Form } from "../form.js";
+import { CheckboxedListInput } from "./checkboxed-list-input.js";
+import { getBrowser } from "../../utils/browser-creator.js";
+import { sleep } from "../../utils/sleep.js";
+
+describe.only("checkboxed-list", () => {
+	describe("basic tests", async () => {
+		let server: ReturnType<Koa["listen"]>;
+		let browser: Browser;
+		let page: Page;
+
+		afterAll(() => {
+			server.close();
+		});
+
+		it("sends the values", async () => {
+			const port = await getPort();
+			console.log(`Using port ${port} form checkboxed-list-input.test.ts`);
+			const app = new Koa();
+			const router = new Router();
+
+			const fields = {
+				syllables: new CheckboxedListField(true, async () => {
+					return ["sa", "mple", "co", "de"].map((s) => ({
+						value: s,
+						label: s.toLocaleUpperCase(),
+					}));
+				}),
+			};
+
+			let received_values: unknown;
+
+			mount(
+				router,
+				"/",
+				new (class extends Form<typeof fields, unknown> {
+					fields = fields;
+					controls = [new CheckboxedListInput(fields.syllables)];
+
+					async onSubmit(ctx: Context) {
+						received_values = await this.getParsedValues(ctx);
+					}
+
+					async canAccess(_: Context) {
+						return { canAccess: true, message: "" };
+					}
+				})(),
+				true
+			);
+			app.use(router.routes()).use(router.allowedMethods());
+			server = app.listen(port);
+
+			browser = await getBrowser();
+			const context = await browser.newContext();
+			page = await context.newPage();
+			await page.goto(`http://localhost:${port}`);
+			await page.getByLabel("CO").check();
+			await page.getByLabel("DE").check();
+			await page.getByRole("button", { name: "Wyślij" }).click();
+			assert.deepStrictEqual(received_values, { syllables: { co: "on", de: "on" } });
+		});
+	});
+});

package/src/forms/controls/checkboxed-list-input.ts

@@ -1,35 +1,34 @@
 import { is, predicates } from "@sealcode/ts-predicates";
 import { tempstream } from "tempstream";
 import { getRequiredClass, inputWrapper } from "../../utils/input-wrapper.js";
-import { ChekboxedListField } from "../fields/checkboxed-list.js";
+import { CheckboxedListField } from "../fields/checkboxed-list.js";
 import { FormControlContext } from "./form-control.js";
 import { FormFieldControl } from "./form-field-control.js";
 
 export class CheckboxedListInput extends FormFieldControl {
 	constructor(
-		public field: ChekboxedListField<boolean>,
+		public field: CheckboxedListField<boolean>,
 		public options: { label: string } = { label: field.name }
 	) {
 		super([field]);
 	}
 
 	async render(fctx: FormControlContext) {
-		const { parsed: pickedValues } = await this.field.getValue(
+		const { parsed: currentValue } = await this.field.getValue(
 			fctx.ctx,
 			fctx.data
 		);
-		if (!is(pickedValues, predicates.array(predicates.string))) {
-			throw new Error("picked values is not an array of strings");
-		}
+		const pickedValues = Object.entries(currentValue)
+			.filter(([, is_on]) => is_on)
+			.map(([key]) => key);
 		const [options, isVisible] = await Promise.all([
 			this.field.generateOptions(fctx.ctx),
 			this.field.isVisible(fctx.ctx),
 		]);
 
 		const { name, required } = this.field;
-
 		return tempstream/* HTML */ `${isVisible
-			? Object.entries(options).map(([value, text]) =>
+			? options.map(({ value, label }) =>
 					inputWrapper(
 						[name, getRequiredClass(required)],
 						/* HTML */ `
@@ -38,8 +37,11 @@ export class CheckboxedListInput extends FormFieldControl {
 								id="${name}.${value}"
 								name="${name}.${value}"
 								${pickedValues.includes(value) ? "checked" : ""}
+								form=${fctx.form_id}
 							/>
-							<label for="${name}.${value}">${text}</label>
+							<label for="${name}.${value}"
+								>${label || value}</label
+							>
 						`
 					)
 			  )

package/src/forms/fields/checkboxed-list.ts

@@ -7,7 +7,7 @@ import {
 	FormFieldValidationResponse,
 } from "./field.js";
 
-export class ChekboxedListField<Required extends boolean> extends FormField<
+export class CheckboxedListField<Required extends boolean> extends FormField<
 	Required,
 	Record<string, "on">
 > {
@@ -15,7 +15,7 @@ export class ChekboxedListField<Required extends boolean> extends FormField<
 		public required: Required,
 		public generateOptions: (
 			ctx: Context
-		) => Promise<Record<string, string> | { [i: string]: string }>,
+		) => Promise<{ value: string; label?: string }[]>,
 		public isVisible: (ctx: Context) => Promise<boolean> = () =>
 			Promise.resolve(true)
 	) {