diff options
Diffstat (limited to 'lib/tech-vendor-candidates/table/candidates-table.tsx')
| -rw-r--r-- | lib/tech-vendor-candidates/table/candidates-table.tsx | 173 |
1 files changed, 0 insertions, 173 deletions
diff --git a/lib/tech-vendor-candidates/table/candidates-table.tsx b/lib/tech-vendor-candidates/table/candidates-table.tsx deleted file mode 100644 index 9dab8f6d..00000000 --- a/lib/tech-vendor-candidates/table/candidates-table.tsx +++ /dev/null @@ -1,173 +0,0 @@ -"use client" - -import * as React from "react" -import type { - DataTableAdvancedFilterField, - DataTableFilterField, - DataTableRowAction, -} from "@/types/table" - -import { toSentenceCase } from "@/lib/utils" -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 { getVendorCandidateCounts, getVendorCandidates } from "../service" -import { vendorCandidates ,VendorCandidatesWithVendorInfo} from "@/db/schema/vendors" -import { VendorCandidateTableFloatingBar } from "./candidates-table-floating-bar" -import { getColumns } from "./candidates-table-columns" -import { CandidatesTableToolbarActions } from "./candidates-table-toolbar-actions" -import { DeleteCandidatesDialog } from "./delete-candidates-dialog" -import { UpdateCandidateSheet } from "./update-candidate-sheet" -import { getCandidateStatusIcon } from "@/lib/vendor-candidates/utils" - -interface VendorCandidatesTableProps { - promises: Promise< - [ - Awaited<ReturnType<typeof getVendorCandidates>>, - Awaited<ReturnType<typeof getVendorCandidateCounts>>, - ] - > -} - -export function VendorCandidateTable({ promises }: VendorCandidatesTableProps) { - const { featureFlags } = useFeatureFlags() - - const [{ data, pageCount }, statusCounts] = - React.use(promises) - - - - const [rowAction, setRowAction] = - React.useState<DataTableRowAction<VendorCandidatesWithVendorInfo> | null>(null) - - const columns = React.useMemo( - () => getColumns({ setRowAction }), - [setRowAction] - ) - - /** - * This component can render either a faceted filter or a search filter based on the `options` prop. - * - * @prop options - An array of objects, each representing a filter option. If provided, a faceted filter is rendered. If not, a search filter is rendered. - * - * Each `option` object has the following properties: - * @prop {string} label - The label for the filter option. - * @prop {string} value - The value for the filter option. - * @prop {React.ReactNode} [icon] - An optional icon to display next to the label. - * @prop {boolean} [withCount] - An optional boolean to display the count of the filter option. - */ - const filterFields: DataTableFilterField<VendorCandidatesWithVendorInfo>[] = [ - - { - id: "status", - label: "Status", - options: vendorCandidates.status.enumValues.map((status) => ({ - label: toSentenceCase(status), - value: status, - count: statusCounts[status], - })), - }, - - ] - - /** - * Advanced filter fields for the data table. - * These fields provide more complex filtering options compared to the regular filterFields. - * - * Key differences from regular filterFields: - * 1. More field types: Includes 'text', 'multi-select', 'date', and 'boolean'. - * 2. Enhanced flexibility: Allows for more precise and varied filtering options. - * 3. Used with DataTableAdvancedToolbar: Enables a more sophisticated filtering UI. - * 4. Date and boolean types: Adds support for filtering by date ranges and boolean values. - */ - const advancedFilterFields: DataTableAdvancedFilterField<VendorCandidatesWithVendorInfo>[] = [ - { - id: "companyName", - label: "Company Name", - type: "text", - }, - { - id: "contactEmail", - label: "Contact Email", - type: "text", - }, - { - id: "contactPhone", - label: "Contact Phone", - type: "text", - }, - { - id: "source", - label: "source", - type: "text", - }, - { - id: "status", - label: "Status", - type: "multi-select", - options: vendorCandidates.status.enumValues.map((status) => ({ - label: (status), - value: status, - icon: getCandidateStatusIcon(status), - count: statusCounts[status], - })), - }, - - { - id: "createdAt", - label: "수집일", - type: "date", - }, - ] - - - const { table } = useDataTable({ - data, - columns, - pageCount, - filterFields, - enablePinning: true, - enableAdvancedFilter: true, - initialState: { - sorting: [{ id: "createdAt", desc: true }], - columnPinning: { right: ["actions"] }, - }, - getRowId: (originalRow) => String(originalRow.id), - shallow: false, - clearOnDefault: true, - }) - - return ( - <> - <DataTable - table={table} - floatingBar={<VendorCandidateTableFloatingBar table={table} />} - > - - <DataTableAdvancedToolbar - table={table} - filterFields={advancedFilterFields} - shallow={false} - > - <CandidatesTableToolbarActions table={table} /> - </DataTableAdvancedToolbar> - - </DataTable> - <UpdateCandidateSheet - open={rowAction?.type === "update"} - onOpenChange={() => setRowAction(null)} - candidate={rowAction?.row.original ?? null} - /> - <DeleteCandidatesDialog - open={rowAction?.type === "delete"} - onOpenChange={() => setRowAction(null)} - candidates={rowAction?.row.original ? [rowAction?.row.original] : []} - showTrigger={false} - onSuccess={() => rowAction?.row.toggleSelected(false)} - /> - - </> - ) -} |
