diff options
Diffstat (limited to 'lib/equip-class/table')
| -rw-r--r-- | lib/equip-class/table/equipClass-table-columns.tsx | 23 | ||||
| -rw-r--r-- | lib/equip-class/table/equipClass-table-toolbar-actions.tsx | 55 | ||||
| -rw-r--r-- | lib/equip-class/table/equipClass-table.tsx | 13 |
3 files changed, 54 insertions, 37 deletions
diff --git a/lib/equip-class/table/equipClass-table-columns.tsx b/lib/equip-class/table/equipClass-table-columns.tsx index 1255abf3..d149c836 100644 --- a/lib/equip-class/table/equipClass-table-columns.tsx +++ b/lib/equip-class/table/equipClass-table-columns.tsx @@ -3,37 +3,28 @@ import * as React from "react" import { type DataTableRowAction } from "@/types/table" import { type ColumnDef } from "@tanstack/react-table" -import { InfoIcon } from "lucide-react" import { formatDate } from "@/lib/utils" -import { Button } from "@/components/ui/button" -import { Checkbox } from "@/components/ui/checkbox" -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "@/components/ui/tooltip" import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" -import { TagClasses } from "@/db/schema/vendorData" import { equipclassColumnsConfig } from "@/config/equipClassColumnsConfig" +import { ExtendedTagClasses } from "../validation" interface GetColumnsProps { - setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<TagClasses> | null>> + setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<ExtendedTagClasses> | null>> } /** * tanstack table 컬럼 정의 (중첩 헤더 버전) */ -export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<TagClasses>[] { +export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<ExtendedTagClasses>[] { // ---------------------------------------------------------------- // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성 // ---------------------------------------------------------------- - // 3-1) groupMap: { [groupName]: ColumnDef<TagClasses>[] } - const groupMap: Record<string, ColumnDef<TagClasses>[]> = {} + // 3-1) groupMap: { [groupName]: ColumnDef<ExtendedTagClasses>[] } + const groupMap: Record<string, ColumnDef<ExtendedTagClasses>[]> = {} equipclassColumnsConfig.forEach((cfg) => { // 만약 group가 없으면 "_noGroup" 처리 @@ -44,7 +35,7 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<TagClas } // child column 정의 - const childCol: ColumnDef<TagClasses> = { + const childCol: ColumnDef<ExtendedTagClasses> = { accessorKey: cfg.id, enableResizing: true, header: ({ column }) => ( @@ -72,7 +63,7 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<TagClas // ---------------------------------------------------------------- // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기 // ---------------------------------------------------------------- - const nestedColumns: ColumnDef<TagClasses>[] = [] + const nestedColumns: ColumnDef<ExtendedTagClasses>[] = [] // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함 // 여기서는 그냥 Object.entries 순서 diff --git a/lib/equip-class/table/equipClass-table-toolbar-actions.tsx b/lib/equip-class/table/equipClass-table-toolbar-actions.tsx index 5e03d800..03db30a3 100644 --- a/lib/equip-class/table/equipClass-table-toolbar-actions.tsx +++ b/lib/equip-class/table/equipClass-table-toolbar-actions.tsx @@ -2,35 +2,66 @@ import * as React from "react" import { type Table } from "@tanstack/react-table" -import { Download, RefreshCcw, Upload } from "lucide-react" -import { toast } from "sonner" +import { Download, RefreshCcw } from "lucide-react" import { exportTableToExcel } from "@/lib/export" import { Button } from "@/components/ui/button" -import { TagClasses } from "@/db/schema/vendorData" - - +import { ExtendedTagClasses } from "../validation" +import { toast } from "sonner" interface ItemsTableToolbarActionsProps { - table: Table<TagClasses> + table: Table<ExtendedTagClasses> } export function EquipClassTableToolbarActions({ table }: ItemsTableToolbarActionsProps) { - // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식 - const fileInputRef = React.useRef<HTMLInputElement>(null) + const [isLoading, setIsLoading] = React.useState(false) + + const syncObjectClasses = async () => { + try { + setIsLoading(true) + // API 엔드포인트 호출 + const response = await fetch('/api/cron/object-classes') + if (!response.ok) { + const errorData = await response.json() + throw new Error(errorData.error || 'Failed to sync object classes') + } + + const data = await response.json() + + // 성공 메시지 표시 + toast.success( + `object classes synced successfully! ${data.result.items} items processed.` + ) + + // 페이지 새로고침으로 테이블 데이터 업데이트 + window.location.reload() + } catch (error) { + console.error('Error syncing object classes:', error) + toast.error( + error instanceof Error + ? error.message + : 'An error occurred while syncing object classes' + ) + } finally { + setIsLoading(false) + } + } return ( <div className="flex items-center gap-2"> - {/** 4) Export 버튼 */} <Button variant="samsung" size="sm" className="gap-2" + onClick={syncObjectClasses} + disabled={isLoading} > - <RefreshCcw className="size-4" aria-hidden="true" /> - <span className="hidden sm:inline">Get Equip Class</span> + <RefreshCcw className={`size-4 ${isLoading ? 'animate-spin' : ''}`} aria-hidden="true" /> + <span className="hidden sm:inline"> + {isLoading ? 'Syncing...' : 'Get Equip Class'} + </span> </Button> {/** 4) Export 버튼 */} @@ -39,7 +70,7 @@ export function EquipClassTableToolbarActions({ table }: ItemsTableToolbarAction size="sm" onClick={() => exportTableToExcel(table, { - filename: "tasks", + filename: "Equip Class", excludeColumns: ["select", "actions"], }) } diff --git a/lib/equip-class/table/equipClass-table.tsx b/lib/equip-class/table/equipClass-table.tsx index 56fd42aa..658718a6 100644 --- a/lib/equip-class/table/equipClass-table.tsx +++ b/lib/equip-class/table/equipClass-table.tsx @@ -12,10 +12,10 @@ 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 { TagClasses } from "@/db/schema/vendorData" import { getTagClassists } from "../service" import { EquipClassTableToolbarActions } from "./equipClass-table-toolbar-actions" import { getColumns } from "./equipClass-table-columns" +import { ExtendedTagClasses } from "../validation" interface ItemsTableProps { promises: Promise< @@ -31,11 +31,8 @@ export function EquipClassTable({ promises }: ItemsTableProps) { const [{ data, pageCount }] = React.use(promises) - -console.log(data) - const [rowAction, setRowAction] = - React.useState<DataTableRowAction<TagClasses> | null>(null) + React.useState<DataTableRowAction<ExtendedTagClasses> | null>(null) const columns = React.useMemo( () => getColumns({ setRowAction }), @@ -53,7 +50,7 @@ console.log(data) * @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<TagClasses>[] = [ + const filterFields: DataTableFilterField<ExtendedTagClasses>[] = [ ] @@ -67,7 +64,7 @@ console.log(data) * 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<TagClasses>[] = [ + const advancedFilterFields: DataTableAdvancedFilterField<ExtendedTagClasses>[] = [ { id: "code", label: "Code", @@ -125,9 +122,7 @@ console.log(data) > <EquipClassTableToolbarActions table={table} /> </DataTableAdvancedToolbar> - </DataTable> - </> ) } |