3/25 까지의 대표님 작업사항

1 files changed, 154 insertions, 0 deletions

diff --git a/lib/rfqs/vendor-table/vendor-list/vendor-list-table-column.tsx b/lib/rfqs/vendor-table/vendor-list/vendor-list-table-column.tsx
new file mode 100644
index 00000000..bfcbe75b
--- /dev/null
+++ b/lib/rfqs/vendor-table/vendor-list/vendor-list-table-column.tsx
@@ -0,0 +1,154 @@
+"use client"
+// Because columns rely on React state/hooks for row actions
+
+import * as React from "react"
+import { ColumnDef, Row } from "@tanstack/react-table"
+import { VendorData } from "./vendor-list-table"
+import { ClientDataTableColumnHeaderSimple } from "@/components/client-data-table/data-table-column-simple-header"
+import { formatDate } from "@/lib/utils"
+import { Checkbox } from "@/components/ui/checkbox"
+
+export interface DataTableRowAction<TData> {
+  row: Row<TData>
+  type: "open" | "update" | "delete"
+}
+
+interface GetColumnsProps {
+  setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<VendorData> | null>>
+  setSelectedVendorIds: React.Dispatch<React.SetStateAction<number[]>> // Changed to array
+}
+
+/** getColumns: return array of ColumnDef for 'vendors' data */
+export function getColumns({
+  setRowAction,
+  setSelectedVendorIds, // Changed parameter name
+}: GetColumnsProps): ColumnDef<VendorData>[] {
+  return [
+    // MULTIPLE SELECT COLUMN
+    {
+      id: "select",
+      enableSorting: false,
+      enableHiding: false,
+      size: 40,
+      // Add checkbox in header for select all functionality
+      header: ({ table }) => (
+        <Checkbox
+          checked={
+            table.getFilteredSelectedRowModel().rows.length > 0 &&
+            table.getFilteredSelectedRowModel().rows.length === table.getFilteredRowModel().rows.length
+          }
+          onCheckedChange={(checked) => {
+            table.toggleAllRowsSelected(!!checked)
+            
+            // Update selectedVendorIds based on all rows selection
+            if (checked) {
+              const allIds = table.getFilteredRowModel().rows.map(row => row.original.id)
+              setSelectedVendorIds(allIds)
+            } else {
+              setSelectedVendorIds([])
+            }
+          }}
+          aria-label="Select all"
+        />
+      ),
+      cell: ({ row }) => {
+        const isSelected = row.getIsSelected()
+        
+        return (
+          <Checkbox
+            checked={isSelected}
+            onCheckedChange={(checked) => {
+              row.toggleSelected(!!checked)
+              
+              // Update the selectedVendorIds state by adding or removing this ID
+              setSelectedVendorIds(prevIds => {
+                if (checked) {
+                  // Add this ID if it doesn't exist
+                  return prevIds.includes(row.original.id) 
+                    ? prevIds 
+                    : [...prevIds, row.original.id]
+                } else {
+                  // Remove this ID
+                  return prevIds.filter(id => id !== row.original.id)
+                }
+              })
+            }}
+            aria-label="Select row"
+          />
+        )
+      },
+    },
+    
+    // Vendor Name
+    {
+      accessorKey: "vendorName",
+      header: ({ column }) => (
+        <ClientDataTableColumnHeaderSimple column={column} title="Vendor Name" />
+      ),
+      cell: ({ row }) => row.getValue("vendorName"),
+    },
+    
+    // Vendor Code
+    {
+      accessorKey: "vendorCode",
+      header: ({ column }) => (
+        <ClientDataTableColumnHeaderSimple column={column} title="Vendor Code" />
+      ),
+      cell: ({ row }) => row.getValue("vendorCode"),
+    },
+    
+    // Status
+    {
+      accessorKey: "status",
+      header: ({ column }) => (
+        <ClientDataTableColumnHeaderSimple column={column} title="Status" />
+      ),
+      cell: ({ row }) => row.getValue("status"),
+    },
+    
+    // Country
+    {
+      accessorKey: "country",
+      header: ({ column }) => (
+        <ClientDataTableColumnHeaderSimple column={column} title="Country" />
+      ),
+      cell: ({ row }) => row.getValue("country"),
+    },
+    
+    // Email
+    {
+      accessorKey: "email",
+      header: ({ column }) => (
+        <ClientDataTableColumnHeaderSimple column={column} title="Email" />
+      ),
+      cell: ({ row }) => row.getValue("email"),
+    },
+    
+    // Phone
+    {
+      accessorKey: "phone",
+      header: ({ column }) => (
+        <ClientDataTableColumnHeaderSimple column={column} title="Phone" />
+      ),
+      cell: ({ row }) => row.getValue("phone"),
+    },
+    
+    // Created At
+    {
+      accessorKey: "createdAt",
+      header: ({ column }) => (
+        <ClientDataTableColumnHeaderSimple column={column} title="Created At" />
+      ),
+      cell: ({ cell }) => formatDate(cell.getValue() as Date),
+    },
+    
+    // Updated At
+    {
+      accessorKey: "updatedAt",
+      header: ({ column }) => (
+        <ClientDataTableColumnHeaderSimple column={column} title="Updated At" />
+      ),
+      cell: ({ cell }) => formatDate(cell.getValue() as Date),
+    },
+  ]
+}
\ No newline at end of file