74 lines
2.3 KiB
TypeScript
74 lines
2.3 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 { quotationsQueryOptions } from '../api/queries';
|
|
import type { QuotationReferenceData } from '../api/types';
|
|
import { getQuotationColumns } from './quotation-columns';
|
|
|
|
export function QuotationsTable({
|
|
referenceData,
|
|
canUpdate,
|
|
canDelete
|
|
}: {
|
|
referenceData: QuotationReferenceData;
|
|
canUpdate: boolean;
|
|
canDelete: boolean;
|
|
}) {
|
|
const columns = useMemo(
|
|
() => getQuotationColumns({ referenceData, canUpdate, canDelete }),
|
|
[referenceData, canUpdate, canDelete]
|
|
);
|
|
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,
|
|
quotationType: parseAsString,
|
|
branch: parseAsString,
|
|
customer: parseAsString,
|
|
opportunity: parseAsString,
|
|
hot: parseAsString,
|
|
sort: getSortingStateParser(columnIds).withDefault([])
|
|
});
|
|
|
|
const filters = {
|
|
page: params.page,
|
|
limit: params.perPage,
|
|
...(params.name && { search: params.name }),
|
|
...(params.status && { status: params.status }),
|
|
...(params.quotationType && { quotationType: params.quotationType }),
|
|
...(params.branch && { branch: params.branch }),
|
|
...(params.customer && { customer: params.customer }),
|
|
...(params.opportunity && { opportunity: params.opportunity }),
|
|
...(params.hot && { hot: params.hot }),
|
|
...(params.sort.length > 0 && { sort: JSON.stringify(params.sort) })
|
|
};
|
|
|
|
const { data } = useSuspenseQuery(quotationsQueryOptions(filters));
|
|
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>
|
|
);
|
|
}
|
|
|