Page MenuHomeSealhub
Files F10352832

index.list.tsx
No OneTemporary
Actions

index.list.tsx
View Options

import type { Context } from "koa";
import type { CollectionItem } from "sealious";
import type { FlatTemplatable, Templatable } from "tempstream";
import { TempstreamJSX, tempstream } from "tempstream";
import { NavbarLinks } from "src/back/collections/collections.js";
import html from "src/back/html.js";
import type { ListFilterRender } from "@sealcode/sealgen";
import {
SealiousItemListPage,
BaseListPageFields,
DefaultListFilters,
} from "@sealcode/sealgen";
import qs from "qs";
import {
NavbarLinksCRUDCreateURL,
NavbarLinksCRUDEditURL,
NavbarLinksCRUDDeleteURL,
AdminURL,
} from "../../urls.js";
export const actionName = "NavbarLinksCRUDList";
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
const filterFields = [
{ field: "label", ...DefaultListFilters["text"] },
{ field: "href", ...DefaultListFilters["text"] },
] as {
field: keyof (typeof NavbarLinks)["fields"];
render?: ListFilterRender;
prepareValue?: (filter_value: unknown) => unknown; // set this function to change what filter value is passed to Sealious
}[];
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
const displayFields = [
{ field: "label", label: "label" },
{ field: "href", label: "href" },
] as {
field: string;
label: string;
format?: (
value: unknown,
item: CollectionItem<typeof NavbarLinks>
) => FlatTemplatable;
}[];
export default new (class NavbarLinksCRUDListPage extends SealiousItemListPage<
typeof NavbarLinks,
typeof BaseListPageFields
> {
fields = BaseListPageFields;
async renderFilters(ctx: Context): Promise<FlatTemplatable> {
const query_params = qs.parse(ctx.search.slice(1));
query_params.page = "1";
const filter_values = await super.getFilterValues(ctx);
return (
<form>
{Object.entries(query_params).map(([key, value]) => {
if (key == "filter") {
return "";
}
// 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.render;
}
return (
render(
filter_values[field] || "",
this.collection.fields[field],
ctx
) || ""
);
})}
<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) {
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
const key = filterField.field as keyof typeof values;
if (key in values) {
const prepare_fn = filterField.prepareValue;
if (prepare_fn) {
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment
values[key] = prepare_fn(values[key]) as any;
}
}
}
return values;
}
async renderItem(ctx: Context, item: CollectionItem<typeof NavbarLinks>) {
return (
<tr>
{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, item) : value}</td>;
})}
<td>
<div class="sealious-list__actions">
<a href={NavbarLinksCRUDEditURL(item.id)}>Edit</a>
<a
data-turbo-method="POST"
data-turbo-confirm="Delete item?"
href={NavbarLinksCRUDDeleteURL(item.id)}
>
Delete
</a>
</div>
</td>
</tr>
);
}
renderListContainer(ctx: Context, content: Templatable): FlatTemplatable {
return (
<table class="sealious-list navbar-links-crudlist-table">
{this.renderTableHead(ctx, displayFields)}
<tbody>{content}</tbody>
</table>
);
}
renderTableHead(
ctx: Context,
fields: { field: string; label?: string }[]
): FlatTemplatable {
return tempstream/* HTML */ `<thead>
<tr>
${fields.map(({ label, field }) => this.renderHeading(ctx, field, label))}
<th>Actions</th>
</tr>
</thead>`;
}
async render(ctx: Context) {
return html({
ctx,
title: "Navbar",
description: "",
body: (
<div class="sealious-list-wrapper navbar-links-crudlist--wrapper">
<a href={AdminURL}>← Back to Admin</a>
<h2>Edit Navbar items</h2>
<a href={NavbarLinksCRUDCreateURL}> Create </a>
{super.render(ctx)}
</div>
),
});
}
})(NavbarLinks);

File Metadata

Mime Type
text/html
Expires
Sun, Nov 2, 21:36 (1 d, 12 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
1030532
Default Alt Text
index.list.tsx (4 KB)

Event Timeline