@sealcode/sealgen 0.15.29 → 0.15.31

package/src/templates/form.ts

@@ -2,10 +2,39 @@ import Prettier from "prettier";
 import { curryImportPath } from "../utils/import-path.js";
 import { getPrettierConfig } from "../utils/prettier.js";
 
+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: "" };
+		}
+	}`,
+};
+
 export async function formTemplate(
 	action_name: string,
-	newfilefullpath: string
+	newfilefullpath: string,
+	_params: Partial<typeof defaults> = defaults
 ): Promise<string> {
+	const params = { ...defaults, ..._params };
 	const rel = curryImportPath(newfilefullpath);
 	const content = `import type { Context } from "koa";
 import type { FormData, FormDataValue } from "@sealcode/sealgen";
@@ -13,11 +42,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);
@@ -27,27 +57,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/src/templates/list.ts

@@ -61,7 +61,7 @@ const filterFields = [
 ${collection_fields
 	.map(
 		(field) =>
-			`	{ field: "${field.name}", render: ${
+			`	{ field: "${field.name}", ...${
 				DefaultListFilters[field.type]
 					? `DefaultListFilters["${field.type}"]`
 					: `DefaultListFilters.fallback`
@@ -71,6 +71,7 @@ ${collection_fields
 ] 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 = [
@@ -101,6 +102,7 @@ ${collection_fields
 					format: async (value: FilePointer) => {
 						return imageRouter.image(await value.getPath(), {
 							container: { width: 45, height: 45 },
+							alt: "",
 						});
 					},
 				}`;
@@ -123,23 +125,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]) ||
 					""
@@ -147,6 +145,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}>) {
@@ -157,6 +170,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) {
@@ -165,10 +187,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/src/test_utils/test-on-real-app.ts

@@ -5,6 +5,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";
@@ -43,6 +45,7 @@ export class RealAppTest {
 		console.log(
 			"\tstarting 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;
 	}
@@ -83,6 +86,11 @@ export class RealAppTest {
 			output: "silent",
 			timeout: 6000,
 		});
+		console.log(
+			chalk.yellow(
+				`App is listening on http://localhost:${this.app_port}`
+			)
+		);
 	}
 
 	async close() {
@@ -105,6 +113,11 @@ export class RealAppTest {
 				this.app_path
 			} && ${callSealgenBin()} ${command} && ${callSealgenBin()} build`
 		);
+		await this.build();
+	}
+
+	async build() {
+		await execAsync(`cd ${this.app_path} && ${callSealgenBin()} build`);
 	}
 
 	async throwIfItKillsTheApp<T>(cb: () => Promise<T>): Promise<T> {
@@ -134,7 +147,7 @@ export class RealAppTest {
 		});
 	}
 
-	async httpGet(path: string): Promise<{ status: number; response: string }> {
+	async httpGET(path: string): Promise<{ status: number; response: string }> {
 		return this.throwIfItKillsTheApp(async () => {
 			const ret = await fetch(`http://localhost:${this.app_port}${path}`);
 			const status = ret.status;
@@ -147,6 +160,7 @@ export class RealAppTest {
 		path: string,
 		body: Record<string, unknown>
 	): Promise<{ status: number; response: string }> {
+		console.debug("POST", path, body);
 		return this.throwIfItKillsTheApp(async () => {
 			const ret = await fetch(
 				`http://localhost:${this.app_port}${path}`,
@@ -159,9 +173,27 @@ export 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: string, content: string) {
+		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(path: string): string {
+		return `http://localhost:${this.app_port}${
+			path.startsWith("/") ? "" : "/"
+		}${path}`;
+	}
 }