diff options
Diffstat (limited to 'lib/basic-contract/gtc-vendor/clause-table.tsx')
| -rw-r--r-- | lib/basic-contract/gtc-vendor/clause-table.tsx | 261 |
1 files changed, 261 insertions, 0 deletions
diff --git a/lib/basic-contract/gtc-vendor/clause-table.tsx b/lib/basic-contract/gtc-vendor/clause-table.tsx new file mode 100644 index 00000000..a9230cd4 --- /dev/null +++ b/lib/basic-contract/gtc-vendor/clause-table.tsx @@ -0,0 +1,261 @@ +"use client" + +import * as React from "react" +import { type GtcClauseTreeView } from "@/db/schema/gtc" +import type { + DataTableAdvancedFilterField, + DataTableFilterField, + DataTableRowAction, +} from "@/types/table" + +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 type { + getGtcClauses, + getUsersForFilter, + getVendorClausesForDocument +} from "@/lib/gtc-contract/gtc-clauses/service" +import { getColumns } from "./gtc-clauses-table-columns" +import { GtcClausesTableToolbarActions } from "./gtc-clauses-table-toolbar-actions" +import { DeleteGtcClausesDialog } from "./delete-gtc-clauses-dialog" +import { UpdateGtcClauseSheet } from "./update-gtc-clause-sheet" +import { CreateVendorGtcClauseDialog } from "./create-gtc-clause-dialog" +import { DuplicateGtcClauseDialog } from "./duplicate-gtc-clause-dialog" + +interface GtcClausesTableProps { + promises: Promise< + [ + Awaited<ReturnType<typeof getGtcClauses>>, + Awaited<ReturnType<typeof getUsersForFilter>>, + Awaited<ReturnType<typeof getVendorClausesForDocument>>, + ] + > + , + documentId: number + document: any + vendorId?: number + vendorName?: string +} + +export function GtcClausesVendorTable({ + promises, + documentId, + document, + vendorId, + vendorName +}: GtcClausesTableProps) { + const [{ data, pageCount }, users, vendorData] = React.use(promises) + + + const [rowAction, setRowAction] = + React.useState<DataTableRowAction<GtcClauseTreeView> | null>(null) + + const dataWithVendor = React.useMemo(() => { + if (!vendorData?.vendorClauseMap) return data + + return data.map(clause => { + const vendorClause = vendorData.vendorClauseMap.get(clause.id) + + return { + ...clause, + vendorInfo: vendorClause || null, + } + }) + }, [data, vendorData]) + + + console.log(dataWithVendor,"dataWithVendor") + console.log(vendorData,"vendorData") + + const columns = React.useMemo( + () => getColumns({ + setRowAction, + documentId, + hasVendorInfo: !!vendorId && !!vendorData?.vendorDocument + }), + [setRowAction, documentId, vendorData] + ) + /** + * Filter fields for the data table. + */ + const filterFields: DataTableFilterField<GtcClauseTreeView>[] = [ + { + id: "itemNumber", + label: "채번", + placeholder: "채번으로 검색...", + }, + { + id: "subtitle", + label: "소제목", + placeholder: "소제목으로 검색...", + }, + { + id: "content", + label: "상세항목", + placeholder: "상세항목으로 검색...", + }, + ] + + /** + * Advanced filter fields for the data table. + */ + const advancedFilterFields: DataTableAdvancedFilterField<GtcClauseTreeView>[] = [ + { + id: "itemNumber", + label: "채번", + type: "text", + }, + { + id: "category", + label: "분류", + type: "text", + }, + { + id: "subtitle", + label: "소제목", + type: "text", + }, + { + id: "content", + label: "상세항목", + type: "text", + }, + { + id: "depth", + label: "계층 깊이", + type: "multi-select", + options: [ + { label: "1단계", value: "0" }, + { label: "2단계", value: "1" }, + { label: "3단계", value: "2" }, + { label: "4단계", value: "3" }, + { label: "5단계", value: "4" }, + ], + }, + { + id: "createdByName", + label: "작성자", + type: "multi-select", + options: users.map((user) => ({ + label: user.name, + value: user.name, + })), + }, + { + id: "updatedByName", + label: "수정자", + type: "multi-select", + options: users.map((user) => ({ + label: user.name, + value: user.name, + })), + }, + { + id: "createdAt", + label: "작성일", + type: "date", + }, + { + id: "updatedAt", + label: "수정일", + type: "date", + }, + ] + + const { table } = useDataTable({ + data: dataWithVendor, + columns, + pageCount, + filterFields, + enablePinning: true, + enableAdvancedFilter: true, + initialState: { + sorting: [{ "id": "itemNumber", "desc": false }], + columnPinning: { right: ["actions"] }, + }, + getRowId: (originalRow) => `${originalRow.id}`, + shallow: false, + clearOnDefault: true, + }) + + return ( + <> + <DataTable + table={table} + // floatingBar={<GtcClausesTableFloatingBar table={table} />} + > + <DataTableAdvancedToolbar + table={table} + filterFields={advancedFilterFields} + shallow={false} + > + <GtcClausesTableToolbarActions + table={table} + documentId={documentId} + document={document} + /> + </DataTableAdvancedToolbar> + </DataTable> + + {/* 삭제 다이얼로그 */} + <DeleteGtcClausesDialog + open={rowAction?.type === "delete"} + onOpenChange={() => setRowAction(null)} + gtcClauses={rowAction?.row.original ? [rowAction?.row.original] : []} + showTrigger={false} + onSuccess={() => rowAction?.row.toggleSelected(false)} + /> + + {/* 수정 시트 */} + <UpdateGtcClauseSheet + open={rowAction?.type === "update"} + onOpenChange={() => setRowAction(null)} + gtcClause={rowAction?.row.original ?? null} + vendorInfo={rowAction?.row.original?.vendorInfo ?? null} + documentId={documentId} + vendorId={vendorId} + vendorName={vendorName} + /> + + {/* 생성 다이얼로그 */} + {/* <CreateVendorGtcClauseDialog + key="main-create" + documentId={documentId} + document={document} + /> */} + + {/* 하위 조항 추가 다이얼로그 */} + <CreateVendorGtcClauseDialog + key={`sub-create-${rowAction?.row.original.id || 'none'}`} + documentId={documentId} + document={document} + parentClause={rowAction?.type === "addSubClause" ? rowAction.row.original : null} + open={rowAction?.type === "addSubClause"} + onOpenChange={(open) => { + if (!open) { + setRowAction(null) + } + }} + showTrigger={false} + onSuccess={() => { + setRowAction(null) + // 테이블 리프레시 로직 + }} + /> + + {/* 조항 복제 다이얼로그 */} + <DuplicateGtcClauseDialog + open={rowAction?.type === "duplicate"} + onOpenChange={() => setRowAction(null)} + sourceClause={rowAction?.row.original ?? null} + onSuccess={() => { + // 테이블 리프레시 로직 + }} + /> + + + </> + ) +}
\ No newline at end of file |