@sealcode/sealgen 0.10.3 → 0.10.4

package/@types/generate-collections.d.ts

@@ -1 +1,2 @@
+export declare function extractCollectionClassname(full_file_path: string): Promise<string>;
 export declare function generateCollections(): Promise<void>;

package/@types/index.d.ts

@@ -22,3 +22,4 @@ export * as sanitize from "./sanitize";
 export * from "./forms/multiform";
 export * as Components from "./components/components";
 export * from "./mount";
+export * from "./page/default-list-filters";

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

@@ -0,0 +1,6 @@
+import { Field } from "sealious";
+import { FlatTemplatable } from "tempstream";
+export type ListFilterRender = (value: string, field: Field) => FlatTemplatable;
+export declare const BooleanListFilter: (value: string, field: Field) => string;
+export declare const SimpleTextFilter: (value: string, field: Field) => string;
+export declare const DefaultListFilters: Record<string, ListFilterRender>;

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

@@ -35,7 +35,7 @@ export declare abstract class ListPage<ItemType, F extends typeof BaseListPageFi
     } | null>;
     makeSortLink(ctx: Context, field: string, order: "asc" | "desc"): string;
     renderFilters(ctx: Context): Promise<FlatTemplatable>;
-    renderHeading(ctx: Context, field: string, label?: string): FlatTemplatable;
+    renderHeading(ctx: Context, field: string, label?: string): Promise<FlatTemplatable>;
     renderTableHead(ctx: Context, fields: {
         field: string;
         label?: string;

package/@types/utils/extract-fields-from-collection.d.ts

@@ -0,0 +1,4 @@
+export default function extract_fields_from_collection(collection_name: string): Promise<{
+    name: string;
+    type: string;
+}[]>;

package/lib/add-route.test.js

@@ -15,8 +15,13 @@ describe("add route test", () => {
     const app_path = "/tmp/sealious-minimal";
     const container_name = "sealgen-test-mongo";
     afterEach(async function () {
-        if (node_pid != 0)
-            await execAsync(`kill -9 ${node_pid}`);
+        try {
+            if (node_pid != 0)
+                await execAsync(`kill -9 ${node_pid}`);
+        }
+        catch (error) {
+            throw new Error("node process exited unexpectedly, please inspect the output");
+        }
         await Promise.all([
             fs_1.promises.rm(app_path, { recursive: true, force: true }),
             execAsync(`docker rm -f ${container_name}`),
@@ -25,7 +30,7 @@ describe("add route test", () => {
     it("creates minimal sealious app", async function () {
         this.timeout(250000);
         console.log("\tcloning sealious-minimal...");
-        await execAsync(`git clone https://hub.sealcode.org/source/sealious-minimal.git ${app_path} && cd ${app_path} && git checkout f48991a0a8b426e0d2f4a4b448fdd41d643b0dae`);
+        await execAsync(`git clone https://hub.sealcode.org/source/sealious-minimal.git ${app_path} && cd ${app_path} && git checkout ce4f33309294`);
         console.log("\tinstalling dependencies and sealgen...");
         await execAsync(`cd ${app_path} && npm ci && rm -rf node_modules/@sealcode/sealgen && ln -s $OLDPWD node_modules/@sealcode/sealgen`);
         console.log("\trunning add-route and building app...");
@@ -38,6 +43,8 @@ describe("add route test", () => {
         let app_start = (0, child_process_1.spawn)(`node`, [`${app_path}/dist/back/index.js`], {
             env,
         });
+        app_start.stdout.on("data", (data) => console.log(data.toString()));
+        app_start.stderr.on("data", (data) => console.log(data.toString()));
         if (app_start.pid == undefined)
             throw new Error("node failed to start");
         node_pid = app_start.pid;
@@ -48,8 +55,9 @@ describe("add route test", () => {
             timeout: 6000,
         });
         const res = await axios_1.default.get("http://localhost:8080/sample");
-        if (res.status != 200)
+        if (res.status != 200) {
             throw new Error("url generated by add-route exists but doesnt return 200");
+        }
     });
 });
 //# sourceMappingURL=add-route.test.js.map

package/lib/build.js

@@ -71,7 +71,6 @@ async function build_ts() {
                                     all_named
                                         .match(/[a-zA-Z_$][^,}]+/g)
                                         .map((importname) => {
-                                        console.log(importname, `importname.startsWith("default as")`, importname.startsWith("default as"));
                                         if (importname.startsWith("default as")) {
                                             return `const ${importname.replace("default as ", "")} = ${new_name}?.default || ${new_name};`;
                                         }
@@ -83,7 +82,6 @@ async function build_ts() {
                                         return `const ${importname} = ${new_name}?.default?.${importname} || ${new_name}?.${importname};`;
                                     })
                                         .join(" ");
-                                console.log({ path, result });
                                 return result;
                             });
                             return { contents, loader: "ts" };

package/lib/generate-collections.js

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.generateCollections = void 0;
+exports.generateCollections = exports.extractCollectionClassname = void 0;
 const locreq_1 = __importDefault(require("locreq"));
 const prettier = __importStar(require("prettier"));
 const fs_1 = require("fs");
@@ -41,6 +41,7 @@ async function extractCollectionClassname(full_file_path) {
     }
     return (0, ts_predicates_1.assertType)(result[1], ts_predicates_1.predicates.string, `Missing export default class in '${full_file_path}'?`);
 }
+exports.extractCollectionClassname = extractCollectionClassname;
 async function generateCollections() {
     const collections_dir = target_locreq.resolve("src/back/collections");
     const files = (await fs_1.promises.readdir(collections_dir)).filter((f) => !/\.(sub)?test\./.exec(f) &&

package/lib/index.js

@@ -42,4 +42,5 @@ exports.sanitize = __importStar(require("./sanitize"));
 __exportStar(require("./forms/multiform"), exports);
 exports.Components = __importStar(require("./components/components"));
 __exportStar(require("./mount"), exports);
+__exportStar(require("./page/default-list-filters"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultListFilters = exports.SimpleTextFilter = exports.BooleanListFilter = void 0;
+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 == undefined
+        ? "selected"
+        : ""}
+			>
+				-
+			</option>
+		</select>
+	</label>`;
+};
+exports.BooleanListFilter = BooleanListFilter;
+const SimpleTextFilter = (value, field) => {
+    return /* HTML */ `<label>
+		${field.name}
+		<input
+			type="text"
+			name="${field.name}"
+			${value ? `value="${value}"` : value}
+		/>
+	</label>`;
+};
+exports.SimpleTextFilter = SimpleTextFilter;
+exports.DefaultListFilters = {
+    boolean: exports.BooleanListFilter,
+    text: exports.SimpleTextFilter,
+    fallback: exports.SimpleTextFilter,
+};
+//# sourceMappingURL=default-list-filters.js.map

package/lib/page/list.js

@@ -157,8 +157,8 @@ ${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
         })}
 		</form>`;
     }
-    renderHeading(ctx, field, label = field) {
-        const current_sort = decodeSort(qs_1.default.parse(new URL(ctx.url, "https://www.example.com").search.slice(1))["sort"]);
+    async renderHeading(ctx, field, label = field) {
+        const current_sort = await this.getSort(ctx);
         const current_order = current_sort?.field == field ? current_sort.order : null;
         const order = current_order == "desc" ? "asc" : "desc";
         return /* HTML */ `<th>

package/lib/templates/list.js

@@ -1,9 +1,17 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.listTemplate = void 0;
+const locreq_1 = __importDefault(require("locreq"));
 const import_path_1 = require("../utils/import-path");
 const prompts = require("prompts");
 const list_collections_1 = require("../utils/list-collections");
+const generate_collections_1 = require("../generate-collections");
+const extract_fields_from_collection_1 = __importDefault(require("../utils/extract-fields-from-collection"));
+const default_list_filters_1 = require("../page/default-list-filters");
+const target_locreq = (0, locreq_1.default)(process.cwd());
 const listTemplate = async (action_name, newfilefullpath) => {
     const response = await prompts({
         type: "autocomplete",
@@ -14,19 +22,55 @@ const listTemplate = async (action_name, newfilefullpath) => {
             value: collection,
         })),
     });
-    const collection = response.collection;
-    const uppercase_collection = collection[0].toLocaleUpperCase() + collection.slice(1);
+    const collection_name = response.collection;
+    const [uppercase_collection, collection_fields] = await Promise.all([
+        (0, generate_collections_1.extractCollectionClassname)(target_locreq.resolve("src/back/collections/" + collection_name + ".ts")),
+        (0, extract_fields_from_collection_1.default)(collection_name),
+    ]);
     const rel = (0, import_path_1.curryImportPath)(newfilefullpath);
     return `import { Context } from "koa";
-import { CollectionItem } from "sealious";
-import { tempstream } from "tempstream";
+import { CollectionItem, Field } from "sealious";
+import { FlatTemplatable, tempstream } from "tempstream";
 import { ${uppercase_collection} } from "${rel("src/back/collections/collections.js")}";
 import html from "${rel("src/back/html.js")}";
-import { SealiousItemListPage, BaseListPageFields } from "@sealcode/sealgen";
+import { SealiousItemListPage, BaseListPageFields, DefaultListFilters } from "@sealcode/sealgen";
+import qs from "qs";
+import { is, predicates } from "@sealcode/ts-predicates";
 
 export const actionName = "${action_name}";
 
-const filterFields = {};
+const filterFields = [
+${collection_fields
+        .map((field) => `	{ field: "${field.name}", render: ${default_list_filters_1.DefaultListFilters[field.type]
+        ? `DefaultListFilters["${field.type}"]`
+        : `DefaultListFilters.fallback`} }`)
+        .join(",\n")}
+] as {
+	field: keyof (typeof PatronEvents)["fields"];
+	render?: (value: string, field: Field) => string;
+}[];
+
+const displayFields = [
+${collection_fields
+        .map((field) => {
+        if (field.type == "boolean") {
+            return `	{
+		field: "${field.name}",
+		label: "${field.name}",
+		format: (v: boolean) => (v ? "YES" : "NO"),
+	}`;
+        }
+        if (field.type == "datetime") {
+            return `	{
+		field: "${field.name}",
+		label: "${field.name}",
+		format: (v: number) => {const d = new Date(); d.setTime(v); return d.toString();},
+	}`;
+        }
+        return `	{ field: "${field.name}", label: "${field.name}" }`;
+    })
+        .join(",\n")}
+];
 
 export default new (class ${action_name}Page extends SealiousItemListPage<
 	typeof ${uppercase_collection},
@@ -34,23 +78,14 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 > {
 	fields = BaseListPageFields;
 
-	filterFields = filterFields;
-	filterControls = [];
-
 	async render(ctx: Context) {
 		return html(
 			ctx,
-			"${uppercase_collection}",
+			"${action_name}",
 			tempstream/* HTML */ \`<div>
-				<h2>${uppercase_collection} List</h2>
+				<h2>${action_name}</h2>
 				<table class="sealious-list">
-					\${this.renderTableHead(ctx, [
-						{ field: "id" },
-						...Object.keys(Patrons.fields).map((field) => ({
-							field,
-							label: field,
-						})),
-					])}
+					\${this.renderTableHead(ctx, displayFields)}
 					<tbody>
 						\${super.render(ctx)}
 					</tbody>
@@ -59,11 +94,56 @@ 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);
+		return tempstream/* HTML */ \`<form>
+			\${Object.entries(query_params).map(([key, value]) => {
+				if (key == "filter") {
+					return "";
+				}
+				return /* HTML */ \`<input
+					type="hidden"
+					name="\${key}"
+					value="\${value}"
+				/>\`;
+			})}
+			\${filterFields.map((field_name) => {
+				const filter =
+					FieldToFilter[this.collection.fields[field_name].typeName] ||
+					FieldToFilter.boolean;
+
+				return (
+					filter?.render(
+						filter_values[field_name] || "",
+						this.collection.fields[field_name]
+					) || ""
+				);
+			})}
+			<input type="submit" />
+		</form>\`;
+	}
+
+	async getFilterValues(ctx: Context) {
+		const query_params = qs.parse(ctx.search.slice(1));
+		const _filter_values = query_params?.filter || {};
+		let filter_values: Record<string, string | undefined> = is(
+			_filter_values,
+			predicates.record(predicates.string, predicates.string)
+		)
+			? _filter_values
+			: {};
+		return filter_values;
+	}
+
 	async renderItem(_: Context, item: CollectionItem<typeof ${uppercase_collection}>) {
-		return tempstream\`<tr><td>\${item.id}</td>\${Object.keys(${uppercase_collection}.fields).map(
-			(fieldname: keyof typeof ${uppercase_collection}["fields"]) =>
-				tempstream\`<td>\${item.get(fieldname)}</td>\`
-		)}</tr>\`;
+		return tempstream/* HTML */ \`<tr>
+			\${displayFields.map(({ field, format }) => {
+				const value = item.get(field as any);
+				return tempstream\`<td>\${format ? format(value) : value}</td>\`;
+			})}
+		</tr>\`;
 	}
 })(${uppercase_collection});
 `;

package/lib/utils/extract-fields-from-collection.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const locreq_1 = __importDefault(require("locreq"));
+const utils_1 = require("./utils");
+const target_locreq = (0, locreq_1.default)(process.cwd());
+const fs_1 = require("fs");
+async function extract_fields_from_collection(collection_name) {
+    const rel = (0, utils_1.curryImportPath)(target_locreq.resolve("dist/back"));
+    const extractor_code = `import {default as Collection} from "${rel(`./back/collections/${collection_name}.js`)}";
+const c = new Collection();
+const fields = [];
+for (const field_name in c.fields){
+    const field = c.fields[field_name];
+    let type = field.typeName;
+    if(["derived-value", "cached-value"].includes(type)){
+	type = field.virtual_field.typeName
+    }
+    fields.push({name: field_name, type})
+}
+console.log(JSON.stringify(fields));
+`;
+    const extractor_code_path = target_locreq.resolve("dist/back/___extract_fields.js");
+    await fs_1.promises.writeFile(extractor_code_path, extractor_code);
+    const { stdout } = await (0, utils_1.exec)("node", [extractor_code_path]);
+    await fs_1.promises.unlink(extractor_code_path);
+    return JSON.parse(stdout);
+}
+exports.default = extract_fields_from_collection;
+//# sourceMappingURL=extract-fields-from-collection.js.map

package/package.json

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

package/src/add-route.test.ts

@@ -12,7 +12,11 @@ describe("add route test", () => {
 	const app_path = "/tmp/sealious-minimal";
 	const container_name = "sealgen-test-mongo";
 	afterEach(async function () {
-		if (node_pid != 0) await execAsync(`kill -9 ${node_pid}`);
+		try {
+			if (node_pid != 0) await execAsync(`kill -9 ${node_pid}`);
+		} catch (error) {
+			throw new Error("node process exited unexpectedly, please inspect the output");
+		}
 		await Promise.all([
 			fs.rm(app_path, { recursive: true, force: true }),
 			execAsync(`docker rm -f ${container_name}`),
@@ -23,7 +27,7 @@ describe("add route test", () => {
 		this.timeout(250000);
 		console.log("\tcloning sealious-minimal...");
 		await execAsync(
-			`git clone https://hub.sealcode.org/source/sealious-minimal.git ${app_path} && cd ${app_path} && git checkout f48991a0a8b426e0d2f4a4b448fdd41d643b0dae`
+			`git clone https://hub.sealcode.org/source/sealious-minimal.git ${app_path} && cd ${app_path} && git checkout ce4f33309294`
 		);
 		console.log("\tinstalling dependencies and sealgen...");
 		await execAsync(
@@ -43,6 +47,8 @@ describe("add route test", () => {
 		let app_start = spawn(`node`, [`${app_path}/dist/back/index.js`], {
 			env,
 		});
+		app_start.stdout.on("data", (data) => console.log(data.toString()));
+		app_start.stderr.on("data", (data) => console.log(data.toString()));
 		if (app_start.pid == undefined) throw new Error("node failed to start");
 		node_pid = app_start.pid;
 		await waitPort({
@@ -52,7 +58,8 @@ describe("add route test", () => {
 			timeout: 6000,
 		});
 		const res = await axios.get("http://localhost:8080/sample");
-		if (res.status != 200)
+		if (res.status != 200) {
 			throw new Error("url generated by add-route exists but doesnt return 200");
+		}
 	});
 });

package/src/build.ts

@@ -66,13 +66,6 @@ async function build_ts() {
 										all_named
 											.match(/[a-zA-Z_$][^,}]+/g)
 											.map((importname: string) => {
-												console.log(
-													importname,
-													`importname.startsWith("default as")`,
-													importname.startsWith(
-														"default as"
-													)
-												);
 												if (
 													importname.startsWith(
 														"default as"
@@ -98,7 +91,6 @@ async function build_ts() {
 												return `const ${importname} = ${new_name}?.default?.${importname} || ${new_name}?.${importname};`;
 											})
 											.join(" ");
-									console.log({ path, result });
 									return result;
 								}
 							);

package/src/generate-collections.ts

@@ -6,7 +6,7 @@ import { getPrettierConfig } from "./utils/prettier";
 
 const target_locreq = _locreq(process.cwd());
 
-async function extractCollectionClassname(
+export async function extractCollectionClassname(
 	full_file_path: string
 ): Promise<string> {
 	const file_content = await fs.readFile(full_file_path, "utf-8");

package/src/index.ts

@@ -24,3 +24,4 @@ export * as sanitize from "./sanitize";
 export * from "./forms/multiform";
 export * as Components from "./components/components";
 export * from "./mount";
+export * from "./page/default-list-filters";

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

@@ -0,0 +1,46 @@
+import { Field } from "sealious";
+import { FlatTemplatable } from "tempstream";
+
+export type ListFilterRender = (value: string, field: Field) => FlatTemplatable;
+
+export const BooleanListFilter = (value: string, field: 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 == undefined
+					? "selected"
+					: ""}
+			>
+				-
+			</option>
+		</select>
+	</label>`;
+};
+
+export const SimpleTextFilter = (value: string, field: Field) => {
+	return /* HTML */ `<label>
+		${field.name}
+		<input
+			type="text"
+			name="${field.name}"
+			${value ? `value="${value}"` : value}
+		/>
+	</label>`;
+};
+
+export const DefaultListFilters = {
+	boolean: BooleanListFilter,
+	text: SimpleTextFilter,
+	fallback: SimpleTextFilter,
+} as Record<string, ListFilterRender>;

package/src/page/list.ts

@@ -220,12 +220,12 @@ ${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
 		</form>`;
 	}
 
-	renderHeading(ctx: Context, field: string, label = field): FlatTemplatable {
-		const current_sort = decodeSort(
-			qs.parse(
-				new URL(ctx.url, "https://www.example.com").search.slice(1)
-			)["sort"]
-		);
+	async renderHeading(
+		ctx: Context,
+		field: string,
+		label = field
+	): Promise<FlatTemplatable> {
+		const current_sort = await this.getSort(ctx);
 		const current_order =
 			current_sort?.field == field ? current_sort.order : null;
 		const order = current_order == "desc" ? "asc" : "desc";

package/src/templates/list.ts

@@ -1,6 +1,11 @@
+import _locreq from "locreq";
 import { curryImportPath } from "../utils/import-path";
 import prompts = require("prompts");
 import { listCollections } from "../utils/list-collections";
+import { extractCollectionClassname } from "../generate-collections";
+import extract_fields_from_collection from "../utils/extract-fields-from-collection";
+import { DefaultListFilters } from "../page/default-list-filters";
+const target_locreq = _locreq(process.cwd());
 
 export const listTemplate = async (
 	action_name: string,
@@ -17,22 +22,66 @@ export const listTemplate = async (
 			value: collection,
 		})),
 	});
-	const collection = response.collection as string;
-	const uppercase_collection =
-		collection[0].toLocaleUpperCase() + collection.slice(1);
+	const collection_name = response.collection as string;
+	const [uppercase_collection, collection_fields] = await Promise.all([
+		extractCollectionClassname(
+			target_locreq.resolve(
+				"src/back/collections/" + collection_name + ".ts"
+			)
+		),
+		extract_fields_from_collection(collection_name),
+	]);
 	const rel = curryImportPath(newfilefullpath);
 	return `import { Context } from "koa";
-import { CollectionItem } from "sealious";
-import { tempstream } from "tempstream";
+import { CollectionItem, Field } from "sealious";
+import { FlatTemplatable, tempstream } from "tempstream";
 import { ${uppercase_collection} } from "${rel(
 		"src/back/collections/collections.js"
 	)}";
 import html from "${rel("src/back/html.js")}";
-import { SealiousItemListPage, BaseListPageFields } from "@sealcode/sealgen";
+import { SealiousItemListPage, BaseListPageFields, DefaultListFilters } from "@sealcode/sealgen";
+import qs from "qs";
+import { is, predicates } from "@sealcode/ts-predicates";
 
 export const actionName = "${action_name}";
 
-const filterFields = {};
+const filterFields = [
+${collection_fields
+	.map(
+		(field) =>
+			`	{ field: "${field.name}", render: ${
+				DefaultListFilters[field.type]
+					? `DefaultListFilters["${field.type}"]`
+					: `DefaultListFilters.fallback`
+			} }`
+	)
+	.join(",\n")}
+] as {
+	field: keyof (typeof PatronEvents)["fields"];
+	render?: (value: string, field: Field) => string;
+}[];
+
+const displayFields = [
+${collection_fields
+	.map((field) => {
+		if (field.type == "boolean") {
+			return `	{
+		field: "${field.name}",
+		label: "${field.name}",
+		format: (v: boolean) => (v ? "YES" : "NO"),
+	}`;
+		}
+		if (field.type == "datetime") {
+			return `	{
+		field: "${field.name}",
+		label: "${field.name}",
+		format: (v: number) => {const d = new Date(); d.setTime(v); return d.toString();},
+	}`;
+		}
+		return `	{ field: "${field.name}", label: "${field.name}" }`;
+	})
+	.join(",\n")}
+];
 
 export default new (class ${action_name}Page extends SealiousItemListPage<
 	typeof ${uppercase_collection},
@@ -40,23 +89,14 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 > {
 	fields = BaseListPageFields;
 
-	filterFields = filterFields;
-	filterControls = [];
-
 	async render(ctx: Context) {
 		return html(
 			ctx,
-			"${uppercase_collection}",
+			"${action_name}",
 			tempstream/* HTML */ \`<div>
-				<h2>${uppercase_collection} List</h2>
+				<h2>${action_name}</h2>
 				<table class="sealious-list">
-					\${this.renderTableHead(ctx, [
-						{ field: "id" },
-						...Object.keys(Patrons.fields).map((field) => ({
-							field,
-							label: field,
-						})),
-					])}
+					\${this.renderTableHead(ctx, displayFields)}
 					<tbody>
 						\${super.render(ctx)}
 					</tbody>
@@ -65,11 +105,56 @@ 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);
+		return tempstream/* HTML */ \`<form>
+			\${Object.entries(query_params).map(([key, value]) => {
+				if (key == "filter") {
+					return "";
+				}
+				return /* HTML */ \`<input
+					type="hidden"
+					name="\${key}"
+					value="\${value}"
+				/>\`;
+			})}
+			\${filterFields.map((field_name) => {
+				const filter =
+					FieldToFilter[this.collection.fields[field_name].typeName] ||
+					FieldToFilter.boolean;
+
+				return (
+					filter?.render(
+						filter_values[field_name] || "",
+						this.collection.fields[field_name]
+					) || ""
+				);
+			})}
+			<input type="submit" />
+		</form>\`;
+	}
+
+	async getFilterValues(ctx: Context) {
+		const query_params = qs.parse(ctx.search.slice(1));
+		const _filter_values = query_params?.filter || {};
+		let filter_values: Record<string, string | undefined> = is(
+			_filter_values,
+			predicates.record(predicates.string, predicates.string)
+		)
+			? _filter_values
+			: {};
+		return filter_values;
+	}
+
 	async renderItem(_: Context, item: CollectionItem<typeof ${uppercase_collection}>) {
-		return tempstream\`<tr><td>\${item.id}</td>\${Object.keys(${uppercase_collection}.fields).map(
-			(fieldname: keyof typeof ${uppercase_collection}["fields"]) =>
-				tempstream\`<td>\${item.get(fieldname)}</td>\`
-		)}</tr>\`;
+		return tempstream/* HTML */ \`<tr>
+			\${displayFields.map(({ field, format }) => {
+				const value = item.get(field as any);
+				return tempstream\`<td>\${format ? format(value) : value}</td>\`;
+			})}
+		</tr>\`;
 	}
 })(${uppercase_collection});
 `;

package/src/utils/extract-fields-from-collection.ts

@@ -0,0 +1,32 @@
+import _locreq from "locreq";
+import { curryImportPath, exec } from "./utils";
+const target_locreq = _locreq(process.cwd());
+import { promises as fs } from "fs";
+
+export default async function extract_fields_from_collection(
+	collection_name: string
+): Promise<{ name: string; type: string }[]> {
+	const rel = curryImportPath(target_locreq.resolve("dist/back"));
+	const extractor_code = `import {default as Collection} from "${rel(
+		`./back/collections/${collection_name}.js`
+	)}";
+const c = new Collection();
+const fields = [];
+for (const field_name in c.fields){
+    const field = c.fields[field_name];
+    let type = field.typeName;
+    if(["derived-value", "cached-value"].includes(type)){
+	type = field.virtual_field.typeName
+    }
+    fields.push({name: field_name, type})
+}
+console.log(JSON.stringify(fields));
+`;
+	const extractor_code_path = target_locreq.resolve(
+		"dist/back/___extract_fields.js"
+	);
+	await fs.writeFile(extractor_code_path, extractor_code);
+	const { stdout } = await exec("node", [extractor_code_path]);
+	await fs.unlink(extractor_code_path);
+	return JSON.parse(stdout);
+}