@sealcode/sealgen 0.15.30 → 0.15.32

package/@types/src/add-crud.d.ts

@@ -0,0 +1,3 @@
+export declare function addCRUD(params: Partial<{
+    [key in "collection" | "url"]: string;
+}>, app_directory?: string): Promise<void>;

package/@types/src/add-list-route.test.d.ts

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

package/@types/src/page/default-list-filters.d.ts

@@ -1,6 +1,17 @@
 import { Field } from "sealious";
 import { FlatTemplatable } from "tempstream";
 export type ListFilterRender = (value: string, field: Field<any>) => FlatTemplatable;
-export declare const BooleanListFilter: (value: string, field: Field<any>) => string;
-export declare const SimpleTextFilter: (value: string, field: Field<any>) => string;
-export declare const DefaultListFilters: Record<string, ListFilterRender>;
+export type DefaultListFilter = {
+    render: ListFilterRender;
+    prepareValue?: (filter_value: unknown) => unknown;
+};
+export declare const BooleanListFilter: {
+    render: (value: string, field: Field<any>) => string;
+};
+export declare const SimpleTextFilter: {
+    render: (value: string, field: Field<any>) => string;
+    prepareValue: (value: string) => {
+        regex: string;
+    };
+};
+export declare const DefaultListFilters: Record<string, DefaultListFilter>;

package/@types/src/page/list.d.ts

@@ -32,7 +32,6 @@ export declare abstract class ListPage<ItemType, F extends typeof BaseListPageFi
         itemsPerPage: number | null;
     }>;
     renderItems(ctx: Context, values?: Record<string, FormDataValue>, items?: ItemType[]): Promise<FlatTemplatable>;
-    render(ctx: Context): Promise<FlatTemplatable>;
     renderPagination(ctx: Context, values: Record<string, FormDataValue>): Promise<FlatTemplatable>;
     private renderPageButton;
     getFilterValues(ctx: Context): Promise<Record<string, unknown>>;
@@ -45,4 +44,5 @@ export declare abstract class ListPage<ItemType, F extends typeof BaseListPageFi
         field: string;
         label?: string;
     }[]): FlatTemplatable;
+    render(ctx: Context): Promise<FlatTemplatable>;
 }

package/@types/src/page/mountable-with-fields.d.ts

@@ -10,6 +10,7 @@ export type PageErrorMessage = {
     message: string;
 };
 export type Fields = Record<string, FormField<boolean, any>>;
+type Resolved<T> = T extends Promise<infer X> ? X : never;
 export declare abstract class MountableWithFields<F extends Fields = Fields> extends Mountable {
     fields: F;
     field_names_prefix: string;
@@ -32,6 +33,9 @@ export declare abstract class MountableWithFields<F extends Fields = Fields> ext
     renderError(_: Context, error: PageErrorMessage): Promise<FlatTemplatable>;
     renderMessages(_: Context, data: FormData<keyof Fields>): FlatTemplatable;
     abstract extractRawValues(ctx: Context): Promise<Record<string, FormDataValue>>;
-    getParsedValues(ctx: Context): Promise<ShapeToType<FieldsToShape<F>>>;
+    getParsedValues(ctx: Context): Promise<{
+        [field in keyof F]: Resolved<ReturnType<F[field]["getValue"]>>["parsed"];
+    }>;
     getDatabaseValues(ctx: Context): Promise<ShapeToType<FieldsToShape<F>>>;
 }
+export {};

package/@types/src/page/mountable-with-fields.test.d.ts

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

package/@types/src/templates/shared/collection-create-form.d.ts

@@ -0,0 +1 @@
+export declare function createItemFormTemplate(create_action_name: string, newfilefullpath: string, collection_name: string, list_action: string): Promise<string>;

package/@types/src/templates/shared/collection-list.d.ts

@@ -0,0 +1,15 @@
+export declare function makeDefaultFilterFields(collection_fields: {
+    name: string;
+    type: string;
+}[]): string;
+export declare function makeDefaultDisplayFields(collection_fields: {
+    name: string;
+    type: string;
+}[]): string;
+declare const default_hooks: {
+    pre_header_html: string;
+    post_header_html: string;
+    post_import_js: string;
+};
+export declare function collectionListTemplate(collection_name: string, action_name: string, newfilefullpath: string, _hooks?: Partial<typeof default_hooks>): Promise<string>;
+export {};

package/@types/src/templates/shared/shared-crud-form-fields.d.ts

@@ -0,0 +1 @@
+export declare function sharedCrudFormFields(collection_name: string, newfilefullpath: string): Promise<string>;

package/@types/src/test_utils/test-on-real-app.d.ts

@@ -12,6 +12,7 @@ export declare class RealAppTest {
     start(): Promise<void>;
     close(): Promise<void>;
     runSealgenCommand(command: string): Promise<void>;
+    build(): Promise<void>;
     throwIfItKillsTheApp<T>(cb: () => Promise<T>): Promise<T>;
     httpGET(path: string): Promise<{
         status: number;
@@ -22,4 +23,5 @@ export declare class RealAppTest {
         response: string;
     }>;
     addFile(target_path: string, content: string): Promise<void>;
+    fullURL(path: string): string;
 }

package/@types/src/utils/write-file.d.ts

@@ -0,0 +1 @@
+export declare function writeFile(path: string, content: string): Promise<void>;

package/lib/add-list-route.test.js

@@ -0,0 +1,38 @@
+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;
+  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 * 1e3);
+});
+//# sourceMappingURL=add-list-route.test.js.map

package/lib/forms/controls/single-reference.test.js

@@ -37,8 +37,6 @@ describe("single-reference.test", () => {
         validate_method: ""
       })
     );
-    const path = "/sample";
-    await test_app.runSealgenCommand(`add-route --url=${path} --action=Sample --mode=page`);
     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" });

package/lib/page/default-list-filters.js

@@ -1,37 +1,44 @@
-const BooleanListFilter = (value, field) => {
-  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 == void 0 ? "selected" : ""}
-			>
-				-
-			</option>
-		</select>
-	</label>`
-  );
+const BooleanListFilter = {
+  render: (value, field) => {
+    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 == void 0 ? "selected" : ""}
+				>
+					-
+				</option>
+			</select>
+		</label>`
+    );
+  }
 };
-const SimpleTextFilter = (value, field) => {
-  return (
-    /* HTML */
-    `<label>
-		${field.name}
-		<input
-			type="text"
-			name="${field.name}"
-			${value ? `value="${value}"` : value}
-		/>
-	</label>`
-  );
+const SimpleTextFilter = {
+  render: (value, field) => {
+    return (
+      /* HTML */
+      `<label>
+			${field.name}
+			<input
+				type="text"
+				name="filter[${field.name}]"
+				${value ? `value="${value}"` : value}
+			/>
+		</label>`
+    );
+  },
+  prepareValue: (value) => {
+    return { regex: `.*${value}.*` };
+  }
 };
 const DefaultListFilters = {
   boolean: BooleanListFilter,

package/lib/page/list.js

@@ -66,12 +66,6 @@ class ListPage extends Page {
       (items2) => items2.map((item, index) => this.renderItem(ctx, item, index))
     )}`;
   }
-  async render(ctx) {
-    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, values) {
     const { itemsPerPage, page } = await this.getPaginationConfig(ctx);
     const totalIems = await this.getTotalPages(
@@ -198,6 +192,12 @@ ${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
 			</tr>
 		</thead>`;
   }
+  async render(ctx) {
+    const values = await this.extractRawValues(ctx);
+    return tempstream`${this.renderPagination(ctx, values)}
+			  ${this.renderFilters(ctx)}
+${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
+  }
 }
 export {
   BaseListPageFields,

package/lib/page/mountable-with-fields.test.js

@@ -0,0 +1,25 @@
+import { Form } from "../forms/form.js";
+import { FieldTypes } from "sealious";
+import { CollectionField } from "../forms/fields/collection-field.js";
+describe("mountable-with-fields", () => {
+  it("properly types the getParsedValues method", () => {
+    const fields = { name: new CollectionField(true, new FieldTypes.Text()) };
+    new class extends Form {
+      constructor() {
+        super(...arguments);
+        this.fields = fields;
+        this.controls = [];
+      }
+      async onSubmit(ctx, form_values) {
+        const data = await this.getParsedValues(ctx);
+        data.name?.trim();
+        const { parsed: data2 } = await this.fields.name.getValue(
+          ctx,
+          form_values.raw_values
+        );
+        data2?.trim();
+      }
+    }();
+  });
+});
+//# sourceMappingURL=mountable-with-fields.test.js.map

package/lib/page/sealious-list.js

@@ -53,6 +53,11 @@ class SealiousItemListPage extends ListPage {
       _filter_values,
       predicates.record(predicates.string, predicates.string)
     ) ? _filter_values : {};
+    for (const key in filter_values) {
+      if (filter_values[key] == "") {
+        delete filter_values[key];
+      }
+    }
     return filter_values;
   }
   renderListContainer(_, content) {

package/lib/templates/list.js

@@ -29,7 +29,7 @@ const listTemplate = async (action_name, newfilefullpath) => {
   ]);
   const importPath = curryImportPath(newfilefullpath);
   const result = `import type { Context } from "koa";
-import type { CollectionItem } from "sealious";
+import type { CollectionItem, ItemListResult } from "sealious";
 import type { FlatTemplatable } from "tempstream";
 import { TempstreamJSX } from "tempstream";
 import { ${uppercase_collection} } from "${importPath(
@@ -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: "",
 						});
 					},
 				}`;
@@ -96,7 +98,7 @@ ${collection_fields.map((field) => {
 ] as {
 	field: string;
 	label: string;
-	format?: (value: unknown) => FlatTemplatable;
+	format?: (value: unknown, item: CollectionItem<typeof Opinions>) => FlatTemplatable;
 }[];
 
 export default new (class ${action_name}Page extends SealiousItemListPage<
@@ -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}>) {
@@ -139,9 +152,18 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 			{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) : value}</td>;
+				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) {
@@ -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

@@ -32,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;
   }
@@ -95,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;
@@ -156,6 +161,10 @@ class RealAppTest {
       "\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 {

package/package.json

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

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/forms/controls/single-reference.test.ts

@@ -47,8 +47,6 @@ describe("single-reference.test", () => {
 			})
 		);
 
-		const path = "/sample";
-		await test_app.runSealgenCommand(`add-route --url=${path} --action=Sample --mode=page`);
 		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" });

package/src/forms/fields/collection-field.ts

@@ -36,7 +36,7 @@ export class CollectionField<
 			encoded_value,
 			null,
 			{}
-		)) as Depromisify<ReturnType<F["encode"]>>;
+		)) as ExtractFieldDecoded<F>;
 		return {
 			parsable: true,
 			error: null,

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/mountable-with-fields.test.ts

@@ -0,0 +1,25 @@
+import type { Context } from "koa";
+import { Form } from "../forms/form.js";
+import { FieldTypes } from "sealious";
+import { CollectionField } from "../forms/fields/collection-field.js";
+import { FormData } from "../forms/form-types.js";
+
+describe("mountable-with-fields", () => {
+	it("properly types the getParsedValues method", () => {
+		const fields = { name: new CollectionField(true, new FieldTypes.Text()) };
+		new (class extends Form<typeof fields, void> {
+			fields = fields;
+			controls = [];
+			async onSubmit(ctx: Context, form_values: FormData) {
+				const data = await this.getParsedValues(ctx);
+				// this should not throw a Typescript error
+				data.name?.trim();
+				const { parsed: data2 } = await this.fields.name.getValue(
+					ctx,
+					form_values.raw_values
+				);
+				data2?.trim();
+			}
+		})();
+	});
+});

package/src/page/mountable-with-fields.ts

@@ -18,6 +18,8 @@ export type PageErrorMessage = { type: "access" | "internal"; message: string };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Fields = Record<string, FormField<boolean, any>>;
 
+type Resolved<T> = T extends Promise<infer X> ? X : never;
+
 export abstract class MountableWithFields<
 	F extends Fields = Fields
 > extends Mountable {
@@ -134,9 +136,11 @@ export abstract class MountableWithFields<
 		ctx: Context
 	): Promise<Record<string, FormDataValue>>;
 
-	async getParsedValues(
-		ctx: Context
-	): Promise<ShapeToType<FieldsToShape<F>>> {
+	async getParsedValues(ctx: Context): Promise<{
+		[field in keyof F]: Resolved<
+			ReturnType<F[field]["getValue"]>
+		>["parsed"];
+	}> {
 		const raw_values = await this.extractRawValues(ctx);
 		const result: Record<string, unknown> = {};
 		const promises = Object.entries(this.fields).map(

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/list.ts

@@ -35,7 +35,7 @@ export const listTemplate = async (
 	]);
 	const importPath = curryImportPath(newfilefullpath);
 	const result = `import type { Context } from "koa";
-import type { CollectionItem } from "sealious";
+import type { CollectionItem, ItemListResult } from "sealious";
 import type { FlatTemplatable } from "tempstream";
 import { TempstreamJSX } from "tempstream";
 import { ${uppercase_collection} } from "${importPath(
@@ -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: "",
 						});
 					},
 				}`;
@@ -111,7 +113,7 @@ ${collection_fields
 ] as {
 	field: string;
 	label: string;
-	format?: (value: unknown) => FlatTemplatable;
+	format?: (value: unknown, item: CollectionItem<typeof Opinions>) => FlatTemplatable;
 }[];
 
 export default new (class ${action_name}Page extends SealiousItemListPage<
@@ -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}>) {
@@ -154,9 +167,18 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 			{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) : value}</td>;
+				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) {
@@ -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

@@ -45,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;
 	}
@@ -112,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> {
@@ -182,5 +188,12 @@ export class RealAppTest {
 			"\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}`;
 	}
 }