@sealcode/sealgen 0.8.52 → 0.8.53

package/lib/page/sealious-list.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SealiousItemListPage = void 0;
+const list_1 = require("./list");
+const access_control_1 = require("./access-control");
+class SealiousItemListPage extends list_1.ListPage {
+    constructor(collection) {
+        super();
+        this.collection = collection;
+        this.canAccess = (0, access_control_1.peopleWhoCan)("list", this.collection);
+    }
+    async getContextForList(ctx) {
+        return ctx.$context;
+    }
+    async getTotalPages(ctx, itemsPerPage) {
+        const query = this.collection.list(await this.getContextForList(ctx));
+        await this.addFilter(ctx, query);
+        const { items } = await query.fetch();
+        return Math.ceil(items.length / itemsPerPage);
+    }
+    async addFilter(ctx, list) {
+        const filters = await this.getFilterValues(ctx);
+        for (const key in filters) {
+            if (filters[key] === undefined || filters[key] == "") {
+                delete filters[key];
+            }
+        }
+        if (Object.keys(filters).length) {
+            list.filter(filters);
+        }
+    }
+    async makeQuery(ctx) {
+        const query = this.collection.list(await this.getContextForList(ctx));
+        const sort = await this.getSort(ctx);
+        if (sort) {
+            query.sort({ [sort.field]: sort.order });
+        }
+        return query;
+    }
+    async getItems(ctx, page, itemsPerPage) {
+        const query = await this.makeQuery(ctx);
+        await this.addFilter(ctx, query);
+        const { items } = await query
+            .paginate({ items: itemsPerPage, page })
+            .fetch();
+        return items;
+    }
+    async renderItem(_, item, index) {
+        return `<div>${item.id}</div>`;
+    }
+}
+exports.SealiousItemListPage = SealiousItemListPage;
+//# sourceMappingURL=sealious-list.js.map

package/lib/page/stateful-page.js

@@ -21,18 +21,18 @@ class StatefulPage extends mountable_1.Mountable {
         };
     }
     wrapInForm(state, content) {
-        return tempstream_1.tempstream /* HTML */ `<form action="./" method="POST">
+        return (0, tempstream_1.tempstream /* HTML */) `<form action="./" method="POST">
 			<input
 				name="state"
 				type="hidden"
-				value="${base64_1.to_base64(JSON.stringify(state))}"
+				value="${(0, base64_1.to_base64)(JSON.stringify(state))}"
 			/>
 			${content}
 		</form>`;
     }
     makeActionButton(state, action_description, ...args) {
         let label, action;
-        if (ts_predicates_1.is(action_description, ts_predicates_1.predicates.object)) {
+        if ((0, ts_predicates_1.is)(action_description, ts_predicates_1.predicates.object)) {
             action = action_description.action.toString();
             label = action_description.label || action;
         }
@@ -44,12 +44,12 @@ class StatefulPage extends mountable_1.Mountable {
 			<input
 				type="submit"
 				value=${label}
-				formaction="./?action=${action}&args=${base64_1.to_base64(JSON.stringify(args))}"
+				formaction="./?action=${action}&args=${(0, base64_1.to_base64)(JSON.stringify(args))}"
 			/>
 		`;
     }
     extractState(ctx) {
-        if (!ts_predicates_1.hasShape({
+        if (!(0, ts_predicates_1.hasShape)({
             action: ts_predicates_1.predicates.maybe(ts_predicates_1.predicates.string),
             state: ts_predicates_1.predicates.string,
             args: ts_predicates_1.predicates.maybe(ts_predicates_1.predicates.string),
@@ -60,8 +60,8 @@ class StatefulPage extends mountable_1.Mountable {
         }
         const inputs = Object.fromEntries(Object.entries(ctx.$body).filter(([key]) => !["action", "state", "args", "$"].includes(key)));
         // the "$" key is parsed as dot notation and overrides the state
-        const original_state = JSON.parse(base64_1.from_base64(ctx.$body.state));
-        const modified_state = deepmerge_1.default(original_state, ctx.$body.$ || {}, {
+        const original_state = JSON.parse((0, base64_1.from_base64)(ctx.$body.state));
+        const modified_state = (0, deepmerge_1.default)(original_state, ctx.$body.$ || {}, {
             arrayMerge: (target, source, options) => {
                 // https://github.com/TehShrike/deepmerge#user-content-arraymerge-example-combine-arrays
                 const destination = target.slice();
@@ -71,7 +71,7 @@ class StatefulPage extends mountable_1.Mountable {
                             options.cloneUnlessOtherwiseSpecified(item, options);
                     }
                     else if (options.isMergeableObject(item)) {
-                        destination[index] = deepmerge_1.default(target[index], item, options);
+                        destination[index] = (0, deepmerge_1.default)(target[index], item, options);
                     }
                     else if (target.indexOf(item) === -1) {
                         destination.push(item);
@@ -104,7 +104,7 @@ class StatefulPage extends mountable_1.Mountable {
         router.post(path, (ctx) => {
             const { action, state, inputs, action_args } = this.extractState(ctx);
             if (action) {
-                ctx.body = this.render(ctx, this.actions[action](state, inputs, ...JSON.parse(base64_1.from_base64(action_args))), inputs);
+                ctx.body = this.render(ctx, this.actions[action](state, inputs, ...JSON.parse((0, base64_1.from_base64)(action_args))), inputs);
             }
             else {
                 ctx.body = this.render(ctx, state, inputs);

package/lib/templates/form.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.formTemplate = void 0;
 const import_path_1 = require("../utils/import-path");
 async function formTemplate(action_name, newfilefullpath) {
-    const rel = import_path_1.curryImportPath(newfilefullpath);
+    const rel = (0, import_path_1.curryImportPath)(newfilefullpath);
     return `import { Context } from "koa";
 import { Form, FormData, FormDataValue, Fields, Controls } from "@sealcode/sealgen";
 import html from "${rel("src/back/html")}";

package/lib/templates/list.js

@@ -9,14 +9,14 @@ const listTemplate = async (action_name, newfilefullpath) => {
         type: "autocomplete",
         name: "collection",
         message: "Which sealious collection do you want to list?",
-        choices: (await list_collections_1.listCollections()).map((collection) => ({
+        choices: (await (0, list_collections_1.listCollections)()).map((collection) => ({
             title: collection,
             value: collection,
         })),
     });
     const collection = response.collection;
     const uppercase_collection = collection[0].toLocaleUpperCase() + collection.slice(1);
-    const rel = import_path_1.curryImportPath(newfilefullpath);
+    const rel = (0, import_path_1.curryImportPath)(newfilefullpath);
     return `import { Context } from "koa";
 import { CollectionItem } from "sealious";
 import { tempstream } from "tempstream";
@@ -44,12 +44,13 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 			tempstream/* HTML */ \`<div>
 				<h2>${uppercase_collection} List</h2>
 				<table>
-					<thead>
-						<th>id</th>
-						\${Object.keys(${uppercase_collection}.fields).map(
-							(fieldname) => \`<th>\${fieldname}</th>\`
-						)}
-					</thead>
+					\${this.renderTableHead(ctx, [
+						{ field: "id" },
+						...Object.keys(Patrons.fields).map((field) => ({
+							field,
+							label: field,
+						})),
+					])}
 					<tbody>
 						\${super.render(ctx)}
 					</tbody>

package/lib/templates/multiform.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.multiformTemplate = void 0;
 const utils_1 = require("../utils/utils");
 async function multiformTemplate(action_name, newfilefullpath) {
-    const rel = utils_1.curryImportPath(newfilefullpath);
+    const rel = (0, utils_1.curryImportPath)(newfilefullpath);
     return `import { Context } from "koa";
 import html from "${rel("src/back/html")}";
 import { Controls, Fields, Form, FormMessage, Multiform } from "@sealcode/sealgen";

package/lib/templates/page.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.pageTemplate = void 0;
 const import_path_1 = require("../utils/import-path");
 async function pageTemplate(action_name, newfilefullpath) {
-    const rel = import_path_1.curryImportPath(newfilefullpath);
+    const rel = (0, import_path_1.curryImportPath)(newfilefullpath);
     return `import { Context } from "koa";
 import { tempstream } from "tempstream";
 import { Page } from "@sealcode/sealgen";

package/lib/templates/route-test.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.testTemplate = void 0;
 const import_path_1 = require("../utils/import-path");
 function testTemplate(action_name, new_file_fullpath) {
-    const rel = import_path_1.curryImportPath(new_file_fullpath);
+    const rel = (0, import_path_1.curryImportPath)(new_file_fullpath);
     return `import { withProdApp } from "${rel("src/back/test_utils/with-prod-app")}";
 import { LONG_TEST_TIMEOUT, webhintURL } from "${rel("src/back/test_utils/webhint")}";
 import { ${action_name}URL } from "${rel("src/back/routes/urls")}";

package/lib/templates/stateful-page.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.statefulPageTemplate = void 0;
 const import_path_1 = require("../utils/import-path");
 async function statefulPageTemplate(action_name, newfilefullpath) {
-    const rel = import_path_1.curryImportPath(newfilefullpath);
+    const rel = (0, import_path_1.curryImportPath)(newfilefullpath);
     return `import { BaseContext } from "koa";
 import { tempstream, Templatable } from "tempstream";
 import { StatefulPage } from "@sealcode/sealgen";

package/lib/test_utils/locator_is_visible.js

@@ -5,7 +5,7 @@ const sleep_1 = require("../utils/sleep");
 async function locator_is_visible(locator, timeout = 500) {
     let exists = false;
     while (timeout > 0 && !exists) {
-        await sleep_1.sleep(50);
+        await (0, sleep_1.sleep)(50);
         timeout -= 50;
         exists = await locator.isVisible();
     }

package/lib/utils/exec.js

@@ -7,7 +7,7 @@ async function exec(program, args) {
     return new Promise((resolve, reject) => {
         let stdout = "";
         let stderr = "";
-        const process = child_process_1.spawn(program, args);
+        const process = (0, child_process_1.spawn)(program, args);
         process.stdout.on("data", (data) => (stdout += data.toString()));
         process.stderr.on("data", (data) => (stderr += data.toString()));
         process.on("close", (exitCode) => {

package/lib/utils/import-path.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.curryImportPath = exports.importPath = void 0;
 const path_1 = require("path");
 const locreq_1 = __importDefault(require("locreq"));
-const target_locreq = locreq_1.default(process.cwd());
+const target_locreq = (0, locreq_1.default)(process.cwd());
 function importPath(project_module_path, project_target_path) {
-    let result = path_1.relative(path_1.dirname(target_locreq.resolve(project_module_path)), target_locreq.resolve(project_target_path).replace(/.ts$/, ""));
+    let result = (0, path_1.relative)((0, path_1.dirname)(target_locreq.resolve(project_module_path)), target_locreq.resolve(project_target_path).replace(/.ts$/, ""));
     if (result[0] != ".") {
         result = "./" + result;
     }

package/lib/utils/input-wrapper.js

@@ -10,7 +10,7 @@ function getModifierClasses(modifiers) {
     return modifiers.map((m) => "form-input__wrapper--" + m).join(" ");
 }
 function inputWrapper(modifiers, input) {
-    return tempstream_1.tempstream /* HTML */ `<div
+    return (0, tempstream_1.tempstream /* HTML */) `<div
 		class="form-input form-input__wrapper ${getModifierClasses(modifiers)}"
 	>
 		${input}

package/lib/utils/list-collections.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.listCollections = void 0;
 const locreq_1 = __importDefault(require("locreq"));
 const walk_1 = require("./walk");
-const target_locreq = locreq_1.default(process.cwd());
+const target_locreq = (0, locreq_1.default)(process.cwd());
 async function listCollections() {
-    const files = await walk_1.walkDir(target_locreq.resolve("src/back/collections"));
+    const files = await (0, walk_1.walkDir)(target_locreq.resolve("src/back/collections"));
     return files
         .filter((f) => f.endsWith(".ts") &&
         !f.endsWith(".test.ts") &&

package/lib/utils/prettier.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -25,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getPrettierConfig = void 0;
 const prettier = __importStar(require("prettier"));
 const locreq_1 = __importDefault(require("locreq"));
-const target_locreq = locreq_1.default(process.cwd());
+const target_locreq = (0, locreq_1.default)(process.cwd());
 async function getPrettierConfig() {
     return {
         ...(await prettier.resolveConfig(target_locreq.resolve("src/back/routes"))),

package/lib/utils/question.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.question = void 0;
 const readline_1 = require("readline");
 async function question(text, validator) {
-    const rl = readline_1.createInterface({
+    const rl = (0, readline_1.createInterface)({
         input: process.stdin,
         output: process.stdout,
     });

package/lib/utils/render-attributes.js

@@ -14,7 +14,7 @@ function renderAttributes(attrs) {
             }
         }
         else {
-            return `${key}="${sanitize_1.attribute(value)}"`;
+            return `${key}="${(0, sanitize_1.attribute)(value)}"`;
         }
     })
         .join(" ");

package/lib/utils/utils.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];

package/lib/utils/walk.js

@@ -10,7 +10,7 @@ async function walkDir(dir) {
         if (entry.includes(".#")) {
             continue;
         }
-        const fullpath = path_1.resolve(dir, entry);
+        const fullpath = (0, path_1.resolve)(dir, entry);
         // eslint-disable-next-line no-await-in-loop
         const info = await fs_1.promises.stat(fullpath);
         if (info.isDirectory()) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sealcode/sealgen",
-	"version": "0.8.52",
+	"version": "0.8.53",
 	"description": "Module to automate adding routes and collections to a sealious application",
 	"main": "lib/index.js",
 	"scripts": {
@@ -40,7 +40,7 @@
 		"playwright": "^1.29.2",
 		"source-map-support": "^0.5.21",
 		"ts-node": "^10.9.1",
-		"typescript": "^4.3.5",
+		"typescript": "^4.4",
 		"wait-port": "^1.0.4"
 	},
 	"types": "./@types/index.d.ts",

package/src/index.ts

@@ -18,6 +18,7 @@ export * from "./forms/form";
 export * from "./page/props-parser";
 export * from "./utils/utils";
 export * from "./page/list";
+export * from "./page/sealious-list";
 export * from "./utils/translate";
 export * as sanitize from "./sanitize";
 export * from "./forms/multiform";

package/src/page/list.ts

@@ -1,21 +1,13 @@
 import { Context } from "koa";
-import {
-	Collection,
-	CollectionItem,
-	ItemList,
-	Context as SealiousContext,
-	CollectionInput,
-} from "sealious";
-
 import { Templatable, tempstream, FlatTemplatable } from "tempstream";
-import { peopleWhoCan } from "./access-control";
 import { Page } from "./page";
 import { ShapeToType } from "@sealcode/ts-predicates";
 import { FormControl } from "../forms/controls/controls";
-import { FormField, NumberField } from "../forms/fields/field";
+import { FormField, NumberField, SimpleFormField } from "../forms/fields/field";
 import { naturalNumbers, UrlWithNewParams } from "../utils/utils";
 import { FormDataValue } from "..";
 import { makeHiddenInputs } from "../make-hidden-inputs";
+import qs from "qs";
 
 export const BasePagePropsShape = <const>{};
 export type BasePageProps = ShapeToType<typeof BasePagePropsShape>;
@@ -23,8 +15,33 @@ export type BasePageProps = ShapeToType<typeof BasePagePropsShape>;
 export const BaseListPageFields = <const>{
 	page: new NumberField(false, 1),
 	itemsPerPage: new NumberField(false, 12),
+	sort: new SimpleFormField(false),
 };
 
+const SORT_SEPARATOR = ":";
+function decodeSort(
+	s: unknown
+): { field: string; order: "asc" | "desc" } | null {
+	if (typeof s !== "string" || !s.includes(SORT_SEPARATOR)) {
+		return null;
+	}
+	let order = s.split(SORT_SEPARATOR)[1];
+	const field = s.split(SORT_SEPARATOR)[0];
+	if (order !== "asc" && order !== "desc") {
+		order = "asc";
+		return {
+			field,
+			order: order as "asc",
+		};
+	} else {
+		return { field, order };
+	}
+}
+
+function encodeSort(field: string, order: "asc" | "desc") {
+	return [field, order].join(SORT_SEPARATOR);
+}
+
 export abstract class ListPage<
 	ItemType,
 	F extends typeof BaseListPageFields
@@ -158,6 +175,21 @@ ${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
 		return filter;
 	}
 
+	async getSort(
+		ctx: Context
+	): Promise<{ field: string; order: "asc" | "desc" } | null> {
+		const { sort } = await this.extractRawValues(ctx);
+		return decodeSort(sort);
+	}
+
+	makeSortLink(ctx: Context, field: string, order: "asc" | "desc"): string {
+		const url = new URL(ctx.url, "https://example.com");
+		const params = qs.parse(url.search.slice(1));
+		params.sort = encodeSort(field, order);
+		url.search = qs.stringify(params);
+		return url.pathname + url.search;
+	}
+
 	async renderFilters(ctx: Context): Promise<FlatTemplatable> {
 		const values = await this.extractRawValues(ctx);
 		return tempstream/* HTML */ `<form method="GET">
@@ -177,64 +209,35 @@ ${this.renderListContainer(ctx, this.renderItems(ctx, values))}`;
 			})}
 		</form>`;
 	}
-}
-
-export abstract class SealiousItemListPage<
-	C extends Collection,
-	F extends typeof BaseListPageFields
-> extends ListPage<CollectionItem<C>, F> {
-	constructor(public collection: C) {
-		super();
-	}
-
-	async getContextForList(ctx: Context): Promise<SealiousContext> {
-		return ctx.$context;
-	}
 
-	async getTotalPages(ctx: Context, itemsPerPage: number): Promise<number> {
-		const query = this.collection.list(await this.getContextForList(ctx));
-		await this.addFilter(ctx, query);
-		const { items } = await query.fetch();
-		return Math.ceil(items.length / itemsPerPage);
-	}
-
-	protected async addFilter(ctx: Context, list: ItemList<C>): Promise<void> {
-		const filters = await this.getFilterValues(ctx);
-
-		for (const key in filters) {
-			if (filters[key] === undefined || filters[key] == "") {
-				delete filters[key];
-			}
-		}
-		if (Object.keys(filters).length) {
-			list.filter(filters as Partial<CollectionInput<C>>);
-		}
-	}
-
-	async makeQuery(ctx: Context): Promise<ItemList<C>> {
-		return this.collection.list(await this.getContextForList(ctx));
-	}
-
-	async getItems(
+	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"]
+		);
+		const current_order =
+			current_sort?.field == field ? current_sort.order : null;
+		const order = current_order == "desc" ? "asc" : "desc";
+		return /* HTML */ `<th>
+			<a href="${this.makeSortLink(ctx, field, order)}"
+				>${label}
+				${(current_order && (current_order == "asc" ? "↑" : "↓")) ||
+				""}</a
+			>
+		</th>`;
+	}
+
+	renderTableHead(
 		ctx: Context,
-		page: number,
-		itemsPerPage: number
-	): Promise<CollectionItem<C>[]> {
-		const query = await this.makeQuery(ctx);
-		await this.addFilter(ctx, query);
-		const { items } = await query
-			.paginate({ items: itemsPerPage, page })
-			.fetch();
-		return items;
-	}
-
-	async renderItem(
-		_: Context,
-		item: CollectionItem<C>,
-		index: number
-	): Promise<FlatTemplatable> {
-		return `<div>${item.id}</div>`;
+		fields: { field: string; label?: string }[]
+	): FlatTemplatable {
+		return tempstream/* HTML */ `<thead>
+			<tr>
+				${fields.map(({ label, field }) =>
+					this.renderHeading(ctx, field, label)
+				)}
+			</tr>
+		</thead>`;
 	}
-
-	canAccess = peopleWhoCan("list", this.collection);
 }

package/src/page/sealious-list.ts

@@ -0,0 +1,76 @@
+import { Context } from "koa";
+import { BaseListPageFields, ListPage } from "./list";
+import {
+	Collection,
+	CollectionItem,
+	ItemList,
+	Context as SealiousContext,
+	CollectionInput,
+} from "sealious";
+import { FlatTemplatable } from "tempstream";
+import { peopleWhoCan } from "./access-control";
+
+export abstract class SealiousItemListPage<
+	C extends Collection,
+	F extends typeof BaseListPageFields
+> extends ListPage<CollectionItem<C>, F> {
+	constructor(public collection: C) {
+		super();
+	}
+
+	async getContextForList(ctx: Context): Promise<SealiousContext> {
+		return ctx.$context;
+	}
+
+	async getTotalPages(ctx: Context, itemsPerPage: number): Promise<number> {
+		const query = this.collection.list(await this.getContextForList(ctx));
+		await this.addFilter(ctx, query);
+		const { items } = await query.fetch();
+		return Math.ceil(items.length / itemsPerPage);
+	}
+
+	protected async addFilter(ctx: Context, list: ItemList<C>): Promise<void> {
+		const filters = await this.getFilterValues(ctx);
+
+		for (const key in filters) {
+			if (filters[key] === undefined || filters[key] == "") {
+				delete filters[key];
+			}
+		}
+		if (Object.keys(filters).length) {
+			list.filter(filters as Partial<CollectionInput<C>>);
+		}
+	}
+
+	async makeQuery(ctx: Context): Promise<ItemList<C>> {
+		const query = this.collection.list(await this.getContextForList(ctx));
+		const sort = await this.getSort(ctx);
+		if (sort) {
+			query.sort({ [sort.field]: sort.order } as any);
+		}
+		return query;
+	}
+
+	async getItems(
+		ctx: Context,
+		page: number,
+		itemsPerPage: number
+	): Promise<CollectionItem<C>[]> {
+		const query = await this.makeQuery(ctx);
+		await this.addFilter(ctx, query);
+		const { items } = await query
+			.paginate({ items: itemsPerPage, page })
+			.fetch();
+		return items;
+	}
+
+	async renderItem(
+		_: Context,
+		item: CollectionItem<C>,
+		index: number
+	): Promise<FlatTemplatable> {
+		return `<div>${item.id}</div>`;
+	}
+
+	canAccess = peopleWhoCan("list", this.collection);
+}

package/src/templates/list.ts

@@ -50,12 +50,13 @@ export default new (class ${action_name}Page extends SealiousItemListPage<
 			tempstream/* HTML */ \`<div>
 				<h2>${uppercase_collection} List</h2>
 				<table>
-					<thead>
-						<th>id</th>
-						\${Object.keys(${uppercase_collection}.fields).map(
-							(fieldname) => \`<th>\${fieldname}</th>\`
-						)}
-					</thead>
+					\${this.renderTableHead(ctx, [
+						{ field: "id" },
+						...Object.keys(Patrons.fields).map((field) => ({
+							field,
+							label: field,
+						})),
+					])}
 					<tbody>
 						\${super.render(ctx)}
 					</tbody>