diff options
Diffstat (limited to 'lib/gtc-contract/status/gtc-contract-table.tsx')
| -rw-r--r-- | lib/gtc-contract/status/gtc-contract-table.tsx | 173 |
1 files changed, 173 insertions, 0 deletions
diff --git a/lib/gtc-contract/status/gtc-contract-table.tsx b/lib/gtc-contract/status/gtc-contract-table.tsx new file mode 100644 index 00000000..dd04fbc9 --- /dev/null +++ b/lib/gtc-contract/status/gtc-contract-table.tsx @@ -0,0 +1,173 @@ +"use client" + +import * as React from "react" +import { gtcDocuments, type GtcDocumentWithRelations } from "@/db/schema/gtc" +import type { + DataTableAdvancedFilterField, + DataTableFilterField, + DataTableRowAction, +} from "@/types/table" + +import { toSentenceCase } from "@/lib/utils" +import { useDataTable } from "@/hooks/use-data-table" +import { DataTable } from "@/components/data-table/data-table" +import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar" +import { DataTableToolbar } from "@/components/data-table/data-table-toolbar" + +import type { + getGtcDocuments, + getProjectsForFilter, + getUsersForFilter +} from "@/lib/gtc-contract/service" +import { getColumns } from "./gtc-documents-table-columns" +import { GtcDocumentsTableToolbarActions } from "./gtc-documents-table-toolbar-actions" +import { DeleteGtcDocumentsDialog } from "./delete-gtc-documents-dialog" +import { GtcDocumentsTableFloatingBar } from "./gtc-documents-table-floating-bar" +import { UpdateGtcDocumentSheet } from "./update-gtc-document-sheet" +import { CreateGtcDocumentDialog } from "./create-gtc-document-dialog" +import { CreateNewRevisionDialog } from "./create-new-revision-dialog" + +interface GtcDocumentsTableProps { + promises: Promise< + [ + Awaited<ReturnType<typeof getGtcDocuments>>, + Awaited<ReturnType<typeof getProjectsForFilter>>, + Awaited<ReturnType<typeof getUsersForFilter>> + ] + > +} + +export function GtcDocumentsTable({ promises }: GtcDocumentsTableProps) { + const [{ data, pageCount }, projects, users] = React.use(promises) + + const [rowAction, setRowAction] = + React.useState<DataTableRowAction<GtcDocumentWithRelations> | null>(null) + + const columns = React.useMemo( + () => getColumns({ setRowAction }), + [setRowAction] + ) + + /** + * Filter fields for the data table. + */ + const filterFields: DataTableFilterField<GtcDocumentWithRelations>[] = [ + { + id: "editReason", + label: "Edit Reason", + placeholder: "Filter by edit reason...", + }, + ] + + /** + * Advanced filter fields for the data table. + */ + const advancedFilterFields: DataTableAdvancedFilterField<GtcDocumentWithRelations>[] = [ + { + id: "type", + label: "Type", + type: "multi-select", + options: [ + { label: "Standard", value: "standard" }, + { label: "Project", value: "project" }, + ], + }, + { + id: "editReason", + label: "Edit Reason", + type: "text", + }, + { + id: "project.name", + label: "Project", + type: "multi-select", + options: projects.map((project) => ({ + label: `${project.name} (${project.code})`, + value: project.name, + })), + }, + { + id: "createdBy.name", + label: "Created By", + type: "multi-select", + options: users.map((user) => ({ + label: user.name, + value: user.name, + })), + }, + { + id: "updatedBy.name", + label: "Updated By", + type: "multi-select", + options: users.map((user) => ({ + label: user.name, + value: user.name, + })), + }, + { + id: "createdAt", + label: "Created At", + type: "date", + }, + { + id: "updatedAt", + label: "Updated At", + type: "date", + }, + ] + + const { table } = useDataTable({ + data, + columns, + pageCount, + filterFields, + enablePinning: true, + enableAdvancedFilter: true, + initialState: { + sorting: [{ id: "updatedAt", desc: true }], + columnPinning: { right: ["actions"] }, + }, + getRowId: (originalRow) => `${originalRow.id}`, + shallow: false, + clearOnDefault: true, + }) + + return ( + <> + <DataTable + table={table} + floatingBar={<GtcDocumentsTableFloatingBar table={table} />} + > + <DataTableAdvancedToolbar + table={table} + filterFields={advancedFilterFields} + shallow={false} + > + <GtcDocumentsTableToolbarActions table={table} /> + </DataTableAdvancedToolbar> + </DataTable> + + <DeleteGtcDocumentsDialog + open={rowAction?.type === "delete"} + onOpenChange={() => setRowAction(null)} + gtcDocuments={rowAction?.row.original ? [rowAction?.row.original] : []} + showTrigger={false} + onSuccess={() => rowAction?.row.toggleSelected(false)} + /> + + <UpdateGtcDocumentSheet + open={rowAction?.type === "update"} + onOpenChange={() => setRowAction(null)} + gtcDocument={rowAction?.row.original ?? null} + /> + + <CreateNewRevisionDialog + open={rowAction?.type === "createRevision"} + onOpenChange={() => setRowAction(null)} + originalDocument={rowAction?.row.original ?? null} + /> + + <CreateGtcDocumentDialog /> + </> + ) +}
\ No newline at end of file |
