@sealcode/sealgen 0.15.29 → 0.15.31

package/lib/templates/form.js

@@ -1,7 +1,34 @@
 import Prettier from "prettier";
 import { curryImportPath } from "../utils/import-path.js";
 import { getPrettierConfig } from "../utils/prettier.js";
-async function formTemplate(action_name, newfilefullpath) {
+const defaults = {
+  postimport: ``,
+  fields: `
+           email: new Fields.CollectionField(true, Users.fields.email),
+           password: new Fields.SimpleFormField(true),`,
+  controls: `
+        new Controls.SimpleInput(fields.email, { label: "Email:", type: "email" }),
+		new Controls.SimpleInput(fields.password, {
+			label: "Password:",
+			type: "password",
+}),`,
+  validate_method: `async validateValues(
+		ctx: Context,
+		data: Record<string, FormDataValue>
+	): Promise<{ valid: boolean; error: string }> {
+		// just a silly example, please remove this with better logic
+		const { parsed: email } = await this.fields.email.getValue(ctx, data);
+		const { parsed: password } = await this.fields.password.getValue(ctx, data);
+		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+		if ((password || "").length > ((email as string) || "").length) {
+			return { valid: false, error: "Password cannot be longer than email" };
+		} else {
+			return { valid: true, error: "" };
+		}
+	}`
+};
+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";
@@ -9,11 +36,12 @@ import { Form, Fields, Controls, fieldsToShape } from "@sealcode/sealgen";
 import html from "${rel("src/back/html.js")}";
 import { Users } from "${rel("src/back/collections/collections.js")}";
 
+${params.postimport}
+
 export const actionName = "${action_name}";
 
 const fields = {
-	email: new Fields.CollectionField(true, Users.fields.email),
-	password: new Fields.SimpleFormField(true),
+    ${params.fields}
 };
 
 export const ${action_name}Shape = fieldsToShape(fields);
@@ -23,27 +51,9 @@ export default new (class ${action_name}Form extends Form<typeof fields, void> {
 	fields = fields;
 
 	controls = [
-		new Controls.SimpleInput(fields.email, { label: "Email:", type: "email" }),
-		new Controls.SimpleInput(fields.password, {
-			label: "Password:",
-			type: "password",
-		}),
+		${params.controls}
 	];
 
-	async validateValues(
-		ctx: Context,
-		data: Record<string, FormDataValue>
-	): Promise<{ valid: boolean; error: string }> {
-		// just a silly example, please remove this with better logic
-		const { parsed: email } = await this.fields.email.getValue(ctx, data);
-		const { parsed: password } = await this.fields.password.getValue(ctx, data);
-		// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-		if ((password || "").length > ((email as string) || "").length) {
-			return { valid: false, error: "Password cannot be longer than email" };
-		} else {
-			return { valid: true, error: "" };
-		}
-	}
 
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	async canAccess(_: Context) {

package/lib/templates/list.js

@@ -53,11 +53,12 @@ export const actionName = "${action_name}";
 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
 const filterFields = [
 ${collection_fields.map(
-    (field) => `	{ field: "${field.name}", render: ${DefaultListFilters[field.type] ? `DefaultListFilters["${field.type}"]` : `DefaultListFilters.fallback`} }`
+    (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 = [
@@ -87,6 +88,7 @@ ${collection_fields.map((field) => {
 					format: async (value: FilePointer) => {
 						return imageRouter.image(await value.getPath(), {
 							container: { width: 45, height: 45 },
+							alt: "",
 						});
 					},
 				}`;
@@ -108,23 +110,19 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 	async renderFilters(ctx: Context): Promise<FlatTemplatable> {
 		const query_params = qs.parse(ctx.search.slice(1));
 		query_params.page = "1";
-		const filter_values = await this.getFilterValues(ctx);
+		const filter_values = await super.getFilterValues(ctx);
 		return <form>
 			{Object.entries(query_params).map(([key, value]) => {
 				if (key == "filter") {
 					return "";
 				}
-				return <input
-					type="hidden"
-					name={key}
-					value={value}
-				/>;
+                // 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]) ||
 					""
@@ -132,6 +130,21 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 			})}
 			<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}>) {
@@ -142,6 +155,15 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 				return <td>{format ? format(value) : 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) {
@@ -150,10 +172,7 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 			"${action_name}",
 			<div class="sealious-list-wrapper ${toKebabCase(action_name)}--wrapper">
 				<h2>${action_name} List</h2>
-				<table class="sealious-list">
-					{this.renderTableHead(ctx, displayFields)}
-					<tbody>{super.render(ctx)}</tbody>
-				</table>
+				{super.render(ctx)}
 			</div>
 		);
 	}

package/lib/test_utils/test-on-real-app.js

@@ -3,6 +3,8 @@ import { spawn } from "child_process";
 import getPort from "get-port";
 import waitPort from "wait-port";
 import { promises as fs } from "fs";
+import path from "node:path";
+import chalk from "chalk";
 import _locreq from "locreq";
 import { module_dirname } from "../utils/module-dirname.js";
 import EventEmitter from "events";
@@ -30,6 +32,7 @@ class RealAppTest {
     console.log(
       "	starting the database...(if timeouts here, run 'docker pull mongo:4.4-bionic' to solve)"
     );
+    await test_app.runSealgenCommand("build");
     test_app.app_port = await getPort();
     return test_app;
   }
@@ -69,6 +72,11 @@ class RealAppTest {
       output: "silent",
       timeout: 6e3
     });
+    console.log(
+      chalk.yellow(
+        `App is listening on http://localhost:${this.app_port}`
+      )
+    );
   }
   async close() {
     try {
@@ -88,6 +96,10 @@ class RealAppTest {
     await execAsync(
       `cd ${this.app_path} && ${callSealgenBin()} ${command} && ${callSealgenBin()} build`
     );
+    await this.build();
+  }
+  async build() {
+    await execAsync(`cd ${this.app_path} && ${callSealgenBin()} build`);
   }
   async throwIfItKillsTheApp(cb) {
     let finished = false;
@@ -114,18 +126,19 @@ class RealAppTest {
       this.emitter.removeListener("process_error", error_handler);
     });
   }
-  async httpGet(path) {
+  async httpGET(path2) {
     return this.throwIfItKillsTheApp(async () => {
-      const ret = await fetch(`http://localhost:${this.app_port}${path}`);
+      const ret = await fetch(`http://localhost:${this.app_port}${path2}`);
       const status = ret.status;
       const response = await ret.text();
       return { status, response };
     });
   }
-  async httpPOST(path, body) {
+  async httpPOST(path2, body) {
+    console.debug("POST", path2, body);
     return this.throwIfItKillsTheApp(async () => {
       const ret = await fetch(
-        `http://localhost:${this.app_port}${path}`,
+        `http://localhost:${this.app_port}${path2}`,
         {
           method: "POST",
           headers: { "Content-Type": "application/json" },
@@ -134,11 +147,25 @@ class RealAppTest {
       );
       const status = ret.status;
       const response = await ret.text();
-      console.log("request done!");
-      console.log({ response });
+      console.debug("request done!");
+      console.debug({ response });
       return { status, response };
     });
   }
+  async addFile(target_path, content) {
+    console.log(
+      chalk.yellow("Inserting file at path"),
+      chalk.green(target_path),
+      "with content\n",
+      content,
+      "\n\n\n\n=====\n"
+    );
+    await fs.writeFile(path.resolve(this.app_path, target_path), content);
+    await this.build();
+  }
+  fullURL(path2) {
+    return `http://localhost:${this.app_port}${path2.startsWith("/") ? "" : "/"}${path2}`;
+  }
 }
 export {
   RealAppTest,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.15.29",
+	"version": "0.15.31",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"type": "module",
@@ -40,6 +40,7 @@
 		"@typescript-eslint/eslint-plugin": "^5.58.0",
 		"@typescript-eslint/parser": "^5.58.0",
 		"axios": "^1.6.7",
+		"chalk": "^5.3.0",
 		"eslint": "^7.32.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-prettier": "^3.4.1",

package/src/add-collection.ts

@@ -6,6 +6,7 @@ import { generateCollections } from "./generate-collections.js";
 import { toKebabCase, toPascalCase } from "js-convert-case";
 const target_locreq = _locreq(process.cwd());
 import prompts from "prompts";
+import { formatWithPrettier } from "./utils/prettier.js";
 
 export async function addCollection(
 	params: Record<string, string | boolean> = {}
@@ -40,7 +41,10 @@ export async function addCollection(
 		return;
 	}
 	await fs.mkdir(resolve(file_path, "../"), { recursive: true });
-	await fs.writeFile(file_path, collectionTemplate(collection_name));
+	await fs.writeFile(
+		file_path,
+		await formatWithPrettier(collectionTemplate(collection_name))
+	);
 	// eslint-disable-next-line no-console
 	console.log(`${file_path} created`);
 	await generateCollections();

package/src/add-list-route.test.ts

@@ -0,0 +1,45 @@
+import { Page } from "playwright";
+import { getBrowser } from "./utils/browser-creator.js";
+import { RealAppTest } from "./test_utils/test-on-real-app.js";
+import { collectionTemplate } from "./templates/collection.js";
+import assert from "node:assert";
+
+describe("single-reference.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("creates an item list page with working partial string search for text fields", async function () {
+		const test_app = await RealAppTest.init();
+
+		await test_app.addFile(
+			"src/back/collections/articles.ts",
+			collectionTemplate("articles", `title: new FieldTypes.Text(),`)
+		);
+		await test_app.runSealgenCommand(
+			`add-route --action=ListArticles --mode=list --url=/list-articles --collection=articles`
+		);
+		await test_app.start();
+		await test_app.httpPOST(`/api/v1/collections/articles`, { title: "article ABC" });
+		await test_app.httpPOST(`/api/v1/collections/articles`, { title: "article DEF" });
+
+		await page.goto(test_app.fullURL(`list-articles/`));
+		await page.getByLabel("title").click();
+		await page.getByLabel("title").fill("ABC");
+		await page.getByLabel("title").press("Enter");
+		await page.getByRole("cell", { name: "article ABC" }).click();
+
+		const { response } = await test_app.httpGET(`/list-articles/?page=1&filter%5Btitle%5D=ABC`);
+		assert(response.includes("article ABC"));
+		assert(!response.includes("article DEF"));
+
+		await test_app.close();
+	}).timeout(100 * 1000);
+});

package/src/add-route.test.ts

@@ -7,7 +7,7 @@ describe("add route test", () => {
 		const path = "/sample";
 		await test_app.runSealgenCommand(`add-route --url=${path} --action=Sample --mode=page`);
 		await test_app.start();
-		const res = await test_app.httpGet(path);
+		const res = await test_app.httpGET(path);
 		if (res.status != 200) {
 			throw new Error("url generated by add-route exists but doesn't return 200");
 		}

package/src/forms/controls/controls.ts

@@ -4,6 +4,7 @@ export { EditableCollectionSubset } from "./editable-collection-subset.js";
 export { Frame } from "./frame.js";
 export { CheckboxedListInput } from "./checkboxed-list-input.js";
 export * from "./dropdown.js";
+export * from "./single-reference.js";
 export { SimpleInput } from "./simple-input.js";
 export { FormHeader } from "./form-header.js";
 export { FormParagraph } from "./form-paragraph.js";

package/src/forms/controls/single-reference.test.ts

@@ -0,0 +1,62 @@
+import { Page } from "playwright";
+import { collectionTemplate } from "../../templates/collection.js";
+import { formTemplate } from "../../templates/form.js";
+import { RealAppTest } from "../../test_utils/test-on-real-app.js";
+import { getBrowser } from "../../utils/browser-creator.js";
+import { expect as PlaywritghtExpect } from "@playwright/test";
+
+describe("single-reference.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("creates minimal sealious app and adds a simple route that works", async function () {
+		const test_app = await RealAppTest.init();
+
+		// add possiblity to modify templates (form and collection) and create test case
+
+		await test_app.addFile(
+			"src/back/collections/articles.ts",
+			collectionTemplate("articles", `title: new FieldTypes.Text(),`)
+		);
+
+		await test_app.addFile(
+			"src/back/collections/comments.ts",
+			collectionTemplate(
+				"comments",
+				`text: new FieldTypes.Text(),
+                 article: new FieldTypes.SingleReference("articles"),`
+			)
+		);
+
+		const form_file_path = "src/back/routes/some-form.form.ts";
+		await test_app.addFile(
+			form_file_path,
+			await formTemplate("SomeForm", form_file_path, {
+				postimport: `import {Comments} from "../collections/collections.js";`,
+				fields: `article: new Fields.CollectionField(true, Comments.fields.article),`,
+				controls: `new Controls.SingleReferenceDropdown(fields.article, {getLabel: item=>item.get("title")}),`,
+				validate_method: "",
+			})
+		);
+
+		await test_app.start();
+		await test_app.httpPOST(`/api/v1/collections/articles`, { title: "article 1" });
+		await test_app.httpPOST(`/api/v1/collections/articles`, { title: "article 2" });
+
+		await page.goto(`http://localhost:${test_app.app_port}/some-form/`);
+		await page.locator("html").click();
+		await PlaywritghtExpect(page.getByLabel("article")).toBeVisible();
+		await page.getByLabel("article").selectOption({ label: "article 2" });
+		await page.getByRole("button", { name: "Wyślij" }).click();
+
+		await test_app.close();
+	}).timeout(100 * 1000);
+});

package/src/forms/controls/single-reference.ts

@@ -0,0 +1,36 @@
+import SealiousSingleReference from "sealious/@types/src/app/base-chips/field-types/single-reference.js";
+import { CollectionField } from "../fields/collection-field.js";
+import { DropdownOptions, FreeformDropdown } from "./dropdown.js";
+import { Collection, CollectionItem } from "sealious";
+
+export class SingleReferenceDropdown<
+	F extends SealiousSingleReference,
+	Required extends boolean
+> extends FreeformDropdown {
+	constructor(
+		public field: CollectionField<F, Required>,
+		public options: DropdownOptions & {
+			getLabel?: (item: CollectionItem<Collection>) => string;
+		} = {
+			label: field.name,
+			autosubmit: false,
+			autocomplete: true,
+		}
+	) {
+		super(
+			field,
+			async (ctx) => {
+				const { items } = await ctx.$app.collections[
+					field.sealiousField.target_collection
+				]
+					.list(ctx.$context)
+					.fetch();
+				return items.map((item) => ({
+					value: item.id,
+					label: options.getLabel ? options.getLabel(item) : item.id,
+				}));
+			},
+			options
+		);
+	}
+}

package/src/page/default-list-filters.ts

@@ -6,44 +6,56 @@ export type ListFilterRender = (
 	field: Field<any>
 ) => FlatTemplatable;
 
-export const BooleanListFilter = (value: string, field: Field<any>) => {
-	return /* HTML */ `<label>
-		${field.name}
-		<select name="filter[${field.name}]" autocomplete="off">
-			<option value="true" ${value == "true" ? "selected" : ""}>
-				True
-			</option>
-			<option value="false" ${value == "false" ? "selected" : ""}>
-				False
-			</option>
-			<option
-				value=""
-				${value == "null" ||
-				value == "" ||
-				value == "undefined" ||
-				value == undefined
-					? "selected"
-					: ""}
-			>
-				-
-			</option>
-		</select>
-	</label>`;
+export type DefaultListFilter = {
+	render: ListFilterRender;
+	prepareValue?: (filter_value: unknown) => unknown;
 };
 
-export const SimpleTextFilter = (value: string, field: Field<any>) => {
-	return /* HTML */ `<label>
-		${field.name}
-		<input
-			type="text"
-			name="${field.name}"
-			${value ? `value="${value}"` : value}
-		/>
-	</label>`;
+export const BooleanListFilter = {
+	render: (value: string, field: Field<any>) => {
+		return /* HTML */ `<label>
+			${field.name}
+			<select name="filter[${field.name}]" autocomplete="off">
+				<option value="true" ${value == "true" ? "selected" : ""}>
+					True
+				</option>
+				<option value="false" ${value == "false" ? "selected" : ""}>
+					False
+				</option>
+				<option
+					value=""
+					${value == "null" ||
+					value == "" ||
+					value == "undefined" ||
+					value == undefined
+						? "selected"
+						: ""}
+				>
+					-
+				</option>
+			</select>
+		</label>`;
+	},
+};
+
+export const SimpleTextFilter = {
+	render: (value: string, field: Field<any>) => {
+		return /* HTML */ `<label>
+			${field.name}
+			<input
+				type="text"
+				name="filter[${field.name}]"
+				${value ? `value="${value}"` : value}
+			/>
+		</label>`;
+	},
+	prepareValue: (value: string) => {
+		return { regex: `.*${value}.*` };
+	},
 };
 
 export const DefaultListFilters = {
 	boolean: BooleanListFilter,
 	text: SimpleTextFilter,
 	fallback: SimpleTextFilter,
-} as Record<string, ListFilterRender>;
+} as Record<string, DefaultListFilter>;

package/src/page/list.ts

@@ -112,14 +112,6 @@ export abstract class ListPage<
 		)}`;
 	}
 
-	async render(ctx: Context): Promise<FlatTemplatable> {
-		const values = await this.extractRawValues(ctx);
-
-		return tempstream`${this.renderPagination(ctx, values)}
-			  ${this.renderFilters(ctx)}
-${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
-	}
-
 	async renderPagination(
 		ctx: Context,
 		values: Record<string, FormDataValue>
@@ -268,4 +260,12 @@ ${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
 			</tr>
 		</thead>`;
 	}
+
+	async render(ctx: Context): Promise<FlatTemplatable> {
+		const values = await this.extractRawValues(ctx);
+
+		return tempstream`${this.renderPagination(ctx, values)}
+			  ${this.renderFilters(ctx)}
+${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
+	}
 }

package/src/page/sealious-list.test.ts

@@ -15,7 +15,7 @@ describe("sealious-list test", () => {
 			content: "some-content",
 		});
 		assert(res_post.status == 201);
-		const res = await test_app.httpGet(url);
+		const res = await test_app.httpGET(url);
 		if (res.status != 200) {
 			throw new Error("url generated by add-route exists but doesn't return 200");
 		}

package/src/page/sealious-list.ts

@@ -80,6 +80,11 @@ export abstract class SealiousItemListPage<
 		)
 			? _filter_values
 			: {};
+		for (const key in filter_values) {
+			if (filter_values[key] == "") {
+				delete filter_values[key];
+			}
+		}
 		return filter_values;
 	}
 

package/src/templates/collection.ts

@@ -1,9 +1,14 @@
-export function collectionTemplate(collection_name: string) {
+import { toPascalCase } from "js-convert-case";
+
+export function collectionTemplate(
+	collection_name: string,
+	fields_string = `content: new FieldTypes.Text(),`
+) {
 	return `import { Collection, FieldTypes, Policies } from "sealious";
 
-export default class ${collection_name} extends Collection {
+export default class ${toPascalCase(collection_name)} extends Collection {
 	fields = {
-		content: new FieldTypes.Text(),
+${fields_string}
 	};
 	defaultPolicy = new Policies.Public();
 }