diff options
Diffstat (limited to 'lib/form-list/table')
| -rw-r--r-- | lib/form-list/table/formLists-table-columns.tsx | 14 | ||||
| -rw-r--r-- | lib/form-list/table/formLists-table-toolbar-actions.tsx | 47 | ||||
| -rw-r--r-- | lib/form-list/table/formLists-table.tsx | 22 | ||||
| -rw-r--r-- | lib/form-list/table/meta-sheet.tsx | 2 |
4 files changed, 63 insertions, 22 deletions
diff --git a/lib/form-list/table/formLists-table-columns.tsx b/lib/form-list/table/formLists-table-columns.tsx index f638c4df..647a8af1 100644 --- a/lib/form-list/table/formLists-table-columns.tsx +++ b/lib/form-list/table/formLists-table-columns.tsx @@ -17,16 +17,16 @@ import { import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" import { formListsColumnsConfig } from "@/config/formListsColumnsConfig" -import { TagTypeClassFormMappings } from "@/db/schema/vendorData" +import { ExtendedFormMappings } from "../validation" interface GetColumnsProps { - setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<TagTypeClassFormMappings> | null>> + setRowAction: React.Dispatch<React.SetStateAction<DataTableRowAction<ExtendedFormMappings> | null>> } /** * tanstack table 컬럼 정의 (중첩 헤더 버전) */ -export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<TagTypeClassFormMappings>[] { +export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<ExtendedFormMappings>[] { // ---------------------------------------------------------------- // 1) select 컬럼 (체크박스) // ---------------------------------------------------------------- @@ -35,7 +35,7 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<TagType // ---------------------------------------------------------------- // 2) actions 컬럼 (단일 버튼 - Meta Info 바로 보기) // ---------------------------------------------------------------- - const actionsColumn: ColumnDef<TagTypeClassFormMappings> = { + const actionsColumn: ColumnDef<ExtendedFormMappings> = { id: "actions", enableHiding: false, cell: function Cell({ row }) { @@ -65,7 +65,7 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<TagType // 3) 일반 컬럼들을 "그룹"별로 묶어 중첩 columns 생성 // ---------------------------------------------------------------- // 3-1) groupMap: { [groupName]: ColumnDef<TagTypeClassFormMappings>[] } - const groupMap: Record<string, ColumnDef<TagTypeClassFormMappings>[]> = {} + const groupMap: Record<string, ColumnDef<ExtendedFormMappings>[]> = {} formListsColumnsConfig.forEach((cfg) => { // 만약 group가 없으면 "_noGroup" 처리 @@ -76,7 +76,7 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<TagType } // child column 정의 - const childCol: ColumnDef<TagTypeClassFormMappings> = { + const childCol: ColumnDef<ExtendedFormMappings> = { accessorKey: cfg.id, enableResizing: true, header: ({ column }) => ( @@ -104,7 +104,7 @@ export function getColumns({ setRowAction }: GetColumnsProps): ColumnDef<TagType // ---------------------------------------------------------------- // 3-2) groupMap에서 실제 상위 컬럼(그룹)을 만들기 // ---------------------------------------------------------------- - const nestedColumns: ColumnDef<TagTypeClassFormMappings>[] = [] + const nestedColumns: ColumnDef<ExtendedFormMappings>[] = [] // 순서를 고정하고 싶다면 group 순서를 미리 정의하거나 sort해야 함 // 여기서는 그냥 Object.entries 순서 diff --git a/lib/form-list/table/formLists-table-toolbar-actions.tsx b/lib/form-list/table/formLists-table-toolbar-actions.tsx index 346a3980..96494607 100644 --- a/lib/form-list/table/formLists-table-toolbar-actions.tsx +++ b/lib/form-list/table/formLists-table-toolbar-actions.tsx @@ -7,18 +7,49 @@ import { toast } from "sonner" import { exportTableToExcel } from "@/lib/export" import { Button } from "@/components/ui/button" -import { TagTypeClassFormMappings } from "@/db/schema/vendorData" +import { ExtendedFormMappings } from "../validation" interface ItemsTableToolbarActionsProps { - table: Table<TagTypeClassFormMappings> + table: Table<ExtendedFormMappings> } export function FormListsTableToolbarActions({ table }: ItemsTableToolbarActionsProps) { - // 파일 input을 숨기고, 버튼 클릭 시 참조해 클릭하는 방식 - const fileInputRef = React.useRef<HTMLInputElement>(null) + const [isLoading, setIsLoading] = React.useState(false) + const syncForms = async () => { + try { + setIsLoading(true) + + // API 엔드포인트 호출 + const response = await fetch('/api/cron/forms') + + if (!response.ok) { + const errorData = await response.json() + throw new Error(errorData.error || 'Failed to sync forms') + } + + const data = await response.json() + + // 성공 메시지 표시 + toast.success( + `Forms synced successfully! ${data.result.items} items processed.` + ) + + // 페이지 새로고침으로 테이블 데이터 업데이트 + window.location.reload() + } catch (error) { + console.error('Error syncing forms:', error) + toast.error( + error instanceof Error + ? error.message + : 'An error occurred while syncing forms' + ) + } finally { + setIsLoading(false) + } + } return ( @@ -29,8 +60,10 @@ export function FormListsTableToolbarActions({ table }: ItemsTableToolbarActions size="sm" className="gap-2" > - <RefreshCcw className="size-4" aria-hidden="true" /> - <span className="hidden sm:inline">Get Forms</span> + <RefreshCcw className={`size-4 ${isLoading ? 'animate-spin' : ''}`} aria-hidden="true" /> + <span className="hidden sm:inline"> + {isLoading ? 'Syncing...' : 'Get Forms'} + </span> </Button> {/** 4) Export 버튼 */} @@ -39,7 +72,7 @@ export function FormListsTableToolbarActions({ table }: ItemsTableToolbarActions size="sm" onClick={() => exportTableToExcel(table, { - filename: "tasks", + filename: "Forms", excludeColumns: ["select", "actions"], }) } diff --git a/lib/form-list/table/formLists-table.tsx b/lib/form-list/table/formLists-table.tsx index be252655..58ac4671 100644 --- a/lib/form-list/table/formLists-table.tsx +++ b/lib/form-list/table/formLists-table.tsx @@ -12,17 +12,17 @@ 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 { TagTypeClassFormMappings } from "@/db/schema/vendorData" import { getFormLists } from "../service" import { getColumns } from "./formLists-table-columns" import { FormListsTableToolbarActions } from "./formLists-table-toolbar-actions" import { ViewMetas } from "./meta-sheet" +import { ExtendedFormMappings } from "../validation" interface ItemsTableProps { promises: Promise< [ Awaited<ReturnType<typeof getFormLists>>, - ] + ] > } @@ -34,7 +34,7 @@ export function FormListsTable({ promises }: ItemsTableProps) { const [rowAction, setRowAction] = - React.useState<DataTableRowAction<TagTypeClassFormMappings> | null>(null) + React.useState<DataTableRowAction<ExtendedFormMappings> | null>(null) const columns = React.useMemo( () => getColumns({ setRowAction }), @@ -52,7 +52,7 @@ export function FormListsTable({ promises }: ItemsTableProps) { * @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<TagTypeClassFormMappings>[] = [ + const filterFields: DataTableFilterField<ExtendedFormMappings>[] = [ ] @@ -67,18 +67,26 @@ export function FormListsTable({ promises }: ItemsTableProps) { * 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<TagTypeClassFormMappings>[] = [ + const advancedFilterFields: DataTableAdvancedFilterField<ExtendedFormMappings>[] = [ + { + id: "projectCode", + label: "Project Code", + type: "text", + }, + { + id: "projectName", + label: "Project Name", + type: "text", + }, { id: "formCode", label: "Form Code", type: "text", - }, { id: "formName", label: "Form Name", type: "text", - }, { id: "tagTypeLabel", diff --git a/lib/form-list/table/meta-sheet.tsx b/lib/form-list/table/meta-sheet.tsx index 155e4f5a..694ee845 100644 --- a/lib/form-list/table/meta-sheet.tsx +++ b/lib/form-list/table/meta-sheet.tsx @@ -77,7 +77,7 @@ export function ViewMetas({ open, onOpenChange, form }: ViewMetasProps) { setLoading(true) try { // 서버 액션 호출 - const metaData = await fetchFormMetadata(form.formCode) + const metaData = await fetchFormMetadata(form.formCode, form.projectId) if (metaData) { setMetadata(metaData) } else { |
