diff options
Diffstat (limited to 'lib/docu-list-rule/combo-box-settings/table/combo-box-options-detail-sheet.tsx')
| -rw-r--r-- | lib/docu-list-rule/combo-box-settings/table/combo-box-options-detail-sheet.tsx | 185 |
1 files changed, 185 insertions, 0 deletions
diff --git a/lib/docu-list-rule/combo-box-settings/table/combo-box-options-detail-sheet.tsx b/lib/docu-list-rule/combo-box-settings/table/combo-box-options-detail-sheet.tsx new file mode 100644 index 00000000..1c145c55 --- /dev/null +++ b/lib/docu-list-rule/combo-box-settings/table/combo-box-options-detail-sheet.tsx @@ -0,0 +1,185 @@ +"use client" + +import * as React from "react" +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 type { DataTableAdvancedFilterField, DataTableRowAction } from "@/types/table" +import { + Sheet, + SheetContent, +} from "@/components/ui/sheet" + +import { getComboBoxOptions } from "../service" +import { getColumns } from "./combo-box-options-table-columns" +import { ComboBoxOptionsEditSheet } from "./combo-box-options-edit-sheet" +import { DeleteComboBoxOptionsDialog } from "./delete-combo-box-options-dialog" +import { ComboBoxOptionsTableToolbarActions } from "./combo-box-options-table-toolbar" +import { codeGroups } from "@/db/schema/codeGroups" + +type ComboBoxOption = { + id: number + codeGroupId: number + code: string + description: string + remark: string | null + isActive: boolean + createdAt: Date + updatedAt: Date +} + +interface ComboBoxOptionsDetailSheetProps { + open: boolean + onOpenChange: (open: boolean) => void + codeGroup: typeof codeGroups.$inferSelect | null + onSuccess?: () => void + promises?: Promise<[{ data: ComboBoxOption[]; pageCount: number }]> +} + +export function ComboBoxOptionsDetailSheet({ + open, + onOpenChange, + codeGroup, + onSuccess, + promises, +}: ComboBoxOptionsDetailSheetProps) { + const [rowAction, setRowAction] = React.useState<DataTableRowAction<any> | null>(null) + const [rawData, setRawData] = React.useState<{ data: ComboBoxOption[]; pageCount: number }>({ data: [], pageCount: 0 }) + + React.useEffect(() => { + if (promises) { + promises.then(([result]) => { + setRawData(result) + }) + } else if (open && codeGroup) { + // fallback: 클라이언트에서 직접 fetch (CSR) + (async () => { + try { + const result = await getComboBoxOptions(codeGroup.id, { + page: 1, + perPage: 10, + search: "", + sort: [{ id: "createdAt", desc: true }], + filters: [], + joinOperator: "and", + }) + if (result.success && result.data) { + // isActive 필드가 없는 경우 기본값 true로 설정 + const optionsWithIsActive = result.data.map(option => ({ + ...option, + isActive: (option as any).isActive ?? true + })) + setRawData({ + data: optionsWithIsActive, + pageCount: result.pageCount || 1 + }) + } + } catch (error) { + console.error("Error refreshing data:", error) + } + })() + } + }, [promises, open, codeGroup]) + + const refreshData = React.useCallback(async () => { + if (!codeGroup) return + + try { + const result = await getComboBoxOptions(codeGroup.id, { + page: 1, + perPage: 10, + search: "", + sort: [{ id: "createdAt", desc: true }], + filters: [], + joinOperator: "and", + }) + if (result.success && result.data) { + // isActive 필드가 없는 경우 기본값 true로 설정 + const optionsWithIsActive = result.data.map(option => ({ + ...option, + isActive: (option as any).isActive ?? true + })) + setRawData({ + data: optionsWithIsActive, + pageCount: result.pageCount || 1 + }) + } + } catch (error) { + console.error("Error refreshing data:", error) + } + }, [codeGroup]) + + const columns = React.useMemo(() => getColumns({ setRowAction: setRowAction as any }), [setRowAction]) + + // 고급 필터 필드 설정 + const advancedFilterFields: DataTableAdvancedFilterField<any>[] = [ + { id: "code", label: "코드", type: "text" }, + { id: "description", label: "값", type: "text" }, + { id: "remark", label: "비고", type: "text" }, + ] + + const { table } = useDataTable({ + data: rawData.data as any, + columns: columns as any, + pageCount: rawData.pageCount, + enablePinning: true, + enableAdvancedFilter: true, + manualSorting: true, + manualFiltering: true, + initialState: { + sorting: [{ id: "createdAt", desc: true }], + columnPinning: { right: ["actions"] }, + }, + getRowId: (originalRow) => String((originalRow as any).id), + shallow: false, + clearOnDefault: true, + }) + + if (!codeGroup) return null + + return ( + <Sheet open={open} onOpenChange={onOpenChange}> + <SheetContent className="flex flex-col gap-6 sm:max-w-4xl"> + <div className="flex items-center justify-between"> + <div> + <h3 className="text-lg font-medium">{codeGroup.description} 옵션 관리</h3> + <p className="text-sm text-muted-foreground"> + {codeGroup.groupId}의 Combo Box 옵션들을 관리합니다. + </p> + </div> + </div> + + <ComboBoxOptionsTableToolbarActions + table={table as any} + codeGroupId={codeGroup.id} + onSuccess={refreshData} + /> + + <DataTable table={table as any}> + <DataTableAdvancedToolbar + table={table as any} + filterFields={advancedFilterFields} + /> + </DataTable> + + <DeleteComboBoxOptionsDialog + open={rowAction?.type === "delete"} + onOpenChange={() => setRowAction(null)} + options={rowAction?.row.original ? [rowAction?.row.original] : []} + showTrigger={false} + onSuccess={() => { + rowAction?.row.toggleSelected(false) + refreshData() + }} + /> + + <ComboBoxOptionsEditSheet + open={rowAction?.type === "update"} + onOpenChange={() => setRowAction(null)} + data={rowAction?.row.original ?? null} + onSuccess={refreshData} + /> + </SheetContent> + </Sheet> + ) +}
\ No newline at end of file |