90 lines
3.2 KiB
TypeScript
90 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import React from "react"
|
|
import { DashboardHeader } from "@/base/components/layout/dashboard"
|
|
import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
|
|
import FormDialog from "@/shared/components/form-dialog"
|
|
import { Card, CardContent } from "@/shared/components/ui/card"
|
|
import { DataTable, type ActionsColumnOptions } from "@/shared/data-view/table-view"
|
|
import { useResourcePage, type UseResourcePageOptions, type ResourceItem, type ResourcePageClient } from "./use-resource-page"
|
|
import type { ColumnDef } from "@tanstack/react-table"
|
|
|
|
export type ResourceFormProps<TClient extends ResourcePageClient> = {
|
|
resourceId: string | null
|
|
initialData: ResourceItem<TClient> | null
|
|
onSuccess: () => void
|
|
}
|
|
|
|
export type ResourcePageColumnHelpers<TClient extends ResourcePageClient> = {
|
|
actionsColumn: (options?: Partial<ActionsColumnOptions<ResourceItem<TClient>>>) => ColumnDef<ResourceItem<TClient>, unknown>
|
|
openEdit: (row: ResourceItem<TClient>) => void
|
|
deleteItem: (id: string) => Promise<unknown>
|
|
}
|
|
|
|
export type ResourcePageProps<TClient extends ResourcePageClient> = UseResourcePageOptions<TClient> & {
|
|
title: string
|
|
columns: ColumnDef<ResourceItem<TClient>>[] | ((helpers: ResourcePageColumnHelpers<TClient>) => ColumnDef<ResourceItem<TClient>>[])
|
|
renderForm: (props: ResourceFormProps<TClient>) => React.ReactNode
|
|
pageTitle?: string
|
|
paramKey?: string
|
|
}
|
|
|
|
export function ResourcePage<TClient extends ResourcePageClient>({
|
|
title,
|
|
columns: columnsProp,
|
|
renderForm,
|
|
pageTitle,
|
|
routeKey,
|
|
getClient,
|
|
queryOptions,
|
|
paramKey,
|
|
}: ResourcePageProps<TClient>) {
|
|
type TItem = ResourceItem<TClient>
|
|
const page = useResourcePage<TClient>({ routeKey, getClient, queryOptions, paramKey })
|
|
|
|
const columns = typeof columnsProp === "function"
|
|
? columnsProp({
|
|
actionsColumn: page.actionsColumn,
|
|
openEdit: page.openEdit,
|
|
deleteItem: page.deleteItem,
|
|
})
|
|
: columnsProp
|
|
|
|
type ListResponse = { data?: TItem[] }
|
|
const responseData = page.data as ListResponse | undefined
|
|
|
|
return (
|
|
<DashboardPage
|
|
header={
|
|
<DashboardHeader
|
|
actions={
|
|
<FormDialog title={title} paramKey={paramKey}>
|
|
{(resourceId) =>
|
|
renderForm({
|
|
resourceId,
|
|
initialData: page.selectedItem,
|
|
onSuccess: () => page.invalidateQuery(),
|
|
})
|
|
}
|
|
</FormDialog>
|
|
}
|
|
/>
|
|
}
|
|
title={pageTitle}
|
|
>
|
|
<Card>
|
|
<CardContent>
|
|
<DataTable
|
|
columns={columns}
|
|
data={(responseData?.data ?? []) as TItem[]}
|
|
pagination={page.pagination}
|
|
sorting={page.sorting}
|
|
onChange={page.handleChange}
|
|
isLoading={page.isLoading}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</DashboardPage>
|
|
)
|
|
}
|