Files
myeasycms-v2/apps/web/app/[locale]/home/[account]/modules/[moduleId]/page.tsx
T. Zehetbauer 7b078f298b
Some checks failed
Workflow / ʦ TypeScript (push) Failing after 4m50s
Workflow / ⚫️ Test (push) Has been skipped
feat: enhance API response handling and add new components for module management
2026-04-01 15:18:24 +02:00

101 lines
2.8 KiB
TypeScript

import Link from 'next/link';
import { Plus } from 'lucide-react';
import { createModuleBuilderApi } from '@kit/module-builder/api';
import { getSupabaseServerClient } from '@kit/supabase/server-client';
import { Button } from '@kit/ui/button';
import { decodeFilters } from './_lib/filter-params';
import { ModuleSearchBar } from './module-search-bar';
interface ModuleDetailPageProps {
params: Promise<{ account: string; moduleId: string }>;
searchParams: Promise<Record<string, string | string[] | undefined>>;
}
export default async function ModuleDetailPage({
params,
searchParams,
}: ModuleDetailPageProps) {
const { account, moduleId } = await params;
const search = await searchParams;
const client = getSupabaseServerClient();
const api = createModuleBuilderApi(client);
const moduleWithFields = await api.modules.getModuleWithFields(moduleId);
if (!moduleWithFields) {
return <div>Modul nicht gefunden</div>;
}
const page = Number(search.page) || 1;
const pageSize =
Number(search.pageSize) || moduleWithFields.default_page_size || 25;
const filters = decodeFilters(search.f as string | undefined);
const result = await api.query.query({
moduleId,
page,
pageSize,
sortField:
(search.sort as string) ??
moduleWithFields.default_sort_field ??
undefined,
sortDirection:
(search.dir as 'asc' | 'desc') ??
(moduleWithFields.default_sort_direction as 'asc' | 'desc') ??
'asc',
search: (search.q as string) ?? undefined,
filters,
});
const fields = (
moduleWithFields as unknown as {
fields: Array<{
name: string;
display_name: string;
show_in_filter: boolean;
show_in_search: boolean;
}>;
}
).fields;
return (
<div className="flex flex-col gap-4">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold">
{moduleWithFields.display_name}
</h1>
{moduleWithFields.description && (
<p className="text-muted-foreground">
{moduleWithFields.description}
</p>
)}
</div>
<Button asChild>
<Link href={`/home/${account}/modules/${moduleId}/new`}>
<Plus className="mr-2 h-4 w-4" />
Neuer Datensatz
</Link>
</Button>
</div>
<ModuleSearchBar fields={fields} />
<div className="text-muted-foreground text-sm">
{result.pagination.total} Datensätze Seite {result.pagination.page}{' '}
von {result.pagination.totalPages}
</div>
<div className="rounded-lg border">
<pre className="max-h-96 overflow-auto p-4 text-xs">
{JSON.stringify(result.data, null, 2)}
</pre>
</div>
</div>
);
}