1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
"use client"
import * as React from "react"
import { useRouter } from "next/navigation"
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 { useFeatureFlags } from "./feature-flags-provider"
import { getColumns } from "./investigation-table-columns"
import { getVendorsInvestigation } from "../service"
import { VendorsTableToolbarActions } from "./investigation-table-toolbar-actions"
import {
VendorInvestigationsViewWithContacts,
ContactItem,
PossibleItem
} from "@/config/vendorInvestigationsColumnsConfig"
import { UpdateVendorInvestigationSheet } from "./update-investigation-sheet"
interface VendorsTableProps {
promises: Promise<
[
Awaited<ReturnType<typeof getVendorsInvestigation>>,
]
>
}
export function VendorsInvestigationTable({ promises }: VendorsTableProps) {
const { featureFlags } = useFeatureFlags()
// Get data from Suspense
const [rawResponse] = React.use(promises)
// Transform the data to match the expected types
const transformedData: VendorInvestigationsViewWithContacts[] = React.useMemo(() => {
return rawResponse.data.map(item => {
// Parse contacts field if it's a string
let contacts: ContactItem[] = []
if (typeof item.contacts === 'string') {
try {
contacts = JSON.parse(item.contacts) as ContactItem[]
} catch (e) {
console.error('Failed to parse contacts:', e)
}
} else if (Array.isArray(item.contacts)) {
contacts = item.contacts
}
// Parse possibleItems field if it's a string
let possibleItems: PossibleItem[] = []
if (typeof item.possibleItems === 'string') {
try {
possibleItems = JSON.parse(item.possibleItems) as PossibleItem[]
} catch (e) {
console.error('Failed to parse possibleItems:', e)
}
} else if (Array.isArray(item.possibleItems)) {
possibleItems = item.possibleItems
}
// Return a new object with the transformed fields
return {
...item,
contacts,
possibleItems
} as VendorInvestigationsViewWithContacts
})
}, [rawResponse.data])
const pageCount = rawResponse.pageCount
const [rowAction, setRowAction] = React.useState<DataTableRowAction<VendorInvestigationsViewWithContacts> | null>(null)
// Get router
const router = useRouter()
// Call getColumns() with router injection
const columns = React.useMemo(
() => getColumns({ setRowAction }),
[setRowAction, router]
)
const filterFields: DataTableFilterField<VendorInvestigationsViewWithContacts>[] = [
{ id: "vendorCode", label: "Vendor Code" },
]
const advancedFilterFields: DataTableAdvancedFilterField<VendorInvestigationsViewWithContacts>[] = [
{ id: "vendorName", label: "Vendor Name", type: "text" },
{ id: "vendorCode", label: "Vendor Code", type: "text" },
]
const { table } = useDataTable({
data: transformedData,
columns,
pageCount,
filterFields,
enablePinning: true,
enableAdvancedFilter: true,
initialState: {
sorting: [{ id: "investigationCreatedAt", desc: true }],
columnPinning: { right: ["actions"] },
},
getRowId: (originalRow) => String(originalRow.investigationId),
shallow: false,
clearOnDefault: true,
})
return (
<>
<DataTable
table={table}
>
<DataTableAdvancedToolbar
table={table}
filterFields={advancedFilterFields}
shallow={false}
>
<VendorsTableToolbarActions table={table} />
</DataTableAdvancedToolbar>
</DataTable>
<UpdateVendorInvestigationSheet
open={rowAction?.type === "update"}
onOpenChange={() => setRowAction(null)}
investigation={rowAction?.row.original ?? null}
/>
</>
)
}
|
