89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import { parseAsInteger, parseAsString, useQueryStates } from "nuqs";
|
|
import { useSuspenseQuery } from "@tanstack/react-query";
|
|
import { DataTable } from "@/components/ui/table/data-table";
|
|
import { DataTableToolbar } from "@/components/ui/table/data-table-toolbar";
|
|
import { useDataTable } from "@/hooks/use-data-table";
|
|
import { getSortingStateParser } from "@/lib/parsers";
|
|
import { enquiriesQueryOptions } from "../api/queries";
|
|
import type { EnquiryReferenceData } from "../api/types";
|
|
import { getEnquiryColumns } from "./enquiry-columns";
|
|
|
|
export function EnquiriesTable({
|
|
referenceData,
|
|
workspace,
|
|
canUpdate,
|
|
canDelete,
|
|
canAssign,
|
|
canReassign,
|
|
}: {
|
|
referenceData: EnquiryReferenceData;
|
|
workspace: "lead" | "enquiry";
|
|
canUpdate: boolean;
|
|
canDelete: boolean;
|
|
canAssign: boolean;
|
|
canReassign: boolean;
|
|
}) {
|
|
const columns = useMemo(
|
|
() =>
|
|
getEnquiryColumns({
|
|
referenceData,
|
|
workspace,
|
|
canUpdate,
|
|
canDelete,
|
|
canAssign,
|
|
canReassign,
|
|
}),
|
|
[referenceData, workspace, canUpdate, canDelete, canAssign, canReassign],
|
|
);
|
|
const columnIds = columns
|
|
.map((column) => column.id)
|
|
.filter(Boolean) as string[];
|
|
const [params] = useQueryStates({
|
|
page: parseAsInteger.withDefault(1),
|
|
perPage: parseAsInteger.withDefault(10),
|
|
name: parseAsString,
|
|
status: parseAsString,
|
|
productType: parseAsString,
|
|
priority: parseAsString,
|
|
branch: parseAsString,
|
|
customer: parseAsString,
|
|
sort: getSortingStateParser(columnIds).withDefault([]),
|
|
});
|
|
|
|
const filters = {
|
|
page: params.page,
|
|
limit: params.perPage,
|
|
pipelineStage: workspace,
|
|
...(params.name && { search: params.name }),
|
|
...(params.status && { status: params.status }),
|
|
...(params.productType && { productType: params.productType }),
|
|
...(params.priority && { priority: params.priority }),
|
|
...(params.branch && { branch: params.branch }),
|
|
...(params.customer && { customer: params.customer }),
|
|
...(params.sort.length > 0 && { sort: JSON.stringify(params.sort) }),
|
|
};
|
|
|
|
const { data } = useSuspenseQuery(enquiriesQueryOptions(filters));
|
|
console.log("data", data);
|
|
const pageCount = Math.ceil(data.totalItems / params.perPage);
|
|
const { table } = useDataTable({
|
|
data: data.items,
|
|
columns,
|
|
pageCount,
|
|
shallow: true,
|
|
debounceMs: 500,
|
|
initialState: {
|
|
columnPinning: { right: ["actions"] },
|
|
},
|
|
});
|
|
|
|
return (
|
|
<DataTable table={table}>
|
|
<DataTableToolbar table={table} />
|
|
</DataTable>
|
|
);
|
|
}
|