diff options
9 files changed, 1477 insertions, 343 deletions
diff --git a/components/common/selectors/purchase-group-code/index.ts b/components/common/selectors/purchase-group-code/index.ts new file mode 100644 index 00000000..e10f6e26 --- /dev/null +++ b/components/common/selectors/purchase-group-code/index.ts @@ -0,0 +1,20 @@ +// 구매그룹코드 선택기 관련 컴포넌트와 타입 내보내기 + +export { PurchaseGroupCodeSelector } from './purchase-group-code-selector' +export type { PurchaseGroupCodeSelectorProps } from './purchase-group-code-selector' + +export { PurchaseGroupCodeSingleSelector } from './purchase-group-code-single-selector' +export type { PurchaseGroupCodeSingleSelectorProps } from './purchase-group-code-single-selector' + +export { PurchaseGroupCodeMultiSelector } from './purchase-group-code-multi-selector' +export type { PurchaseGroupCodeMultiSelectorProps } from './purchase-group-code-multi-selector' + +export { + getPurchaseGroupCodes, + addUsersToCodesAsync +} from './purchase-group-code-service' +export type { + PurchaseGroupCode, + PurchaseGroupCodeWithUser +} from './purchase-group-code-service' + diff --git a/components/common/selectors/purchase-group-code/purchase-group-code-multi-selector.tsx b/components/common/selectors/purchase-group-code/purchase-group-code-multi-selector.tsx new file mode 100644 index 00000000..f21a3ea7 --- /dev/null +++ b/components/common/selectors/purchase-group-code/purchase-group-code-multi-selector.tsx @@ -0,0 +1,455 @@ +'use client' + +/** + * 구매그룹코드 다중 선택 다이얼로그 + * + * @description + * - 여러 구매그룹코드를 선택할 수 있는 다이얼로그 + * - 체크박스를 통한 다중 선택 + * - 선택된 구매그룹코드들을 상단에 표시 + * - 확인/취소 버튼으로 선택 확정 + * - 선택 시 각 코드에 대한 사용자 정보도 함께 반환 + */ + +import { useState, useCallback, useMemo, useTransition } from 'react' +import { Button } from '@/components/ui/button' +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog' +import { Input } from '@/components/ui/input' +import { Checkbox } from '@/components/ui/checkbox' +import { Badge } from '@/components/ui/badge' +import { Search, Check, X, Trash2 } from 'lucide-react' +import { + ColumnDef, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, + SortingState, + ColumnFiltersState, + VisibilityState, + RowSelectionState, +} from '@tanstack/react-table' +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/components/ui/table' +import { + getPurchaseGroupCodes, + addUsersToCodesAsync, + PurchaseGroupCode, + PurchaseGroupCodeWithUser +} from './purchase-group-code-service' +import { toast } from 'sonner' + +// 간단한 디바운스 함수 +function debounce<T extends (...args: unknown[]) => void>(func: T, delay: number): T { + let timeoutId: NodeJS.Timeout + return ((...args: Parameters<T>) => { + clearTimeout(timeoutId) + timeoutId = setTimeout(() => func(...args), delay) + }) as T +} + +export interface PurchaseGroupCodeMultiSelectorProps { + open: boolean + onOpenChange: (open: boolean) => void + selectedCodes?: PurchaseGroupCodeWithUser[] + onCodesSelect: (codes: PurchaseGroupCodeWithUser[]) => void + onConfirm?: (codes: PurchaseGroupCodeWithUser[]) => void + onCancel?: () => void + title?: string + description?: string + maxSelection?: number +} + +export function PurchaseGroupCodeMultiSelector({ + open, + onOpenChange, + selectedCodes = [], + onCodesSelect, + onConfirm, + onCancel, + title = "구매그룹코드 다중 선택", + description = "여러 구매그룹코드를 선택하세요", + maxSelection +}: PurchaseGroupCodeMultiSelectorProps) { + const [codes, setCodes] = useState<PurchaseGroupCode[]>([]) + const [sorting, setSorting] = useState<SortingState>([]) + const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]) + const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({}) + const [rowSelection, setRowSelection] = useState<RowSelectionState>({}) + const [globalFilter, setGlobalFilter] = useState('') + const [isPending, startTransition] = useTransition() + const [tempSelectedCodes, setTempSelectedCodes] = useState<PurchaseGroupCode[]>( + selectedCodes.map(c => ({ + PURCHASE_GROUP_CODE: c.PURCHASE_GROUP_CODE, + DISPLAY_NAME: c.DISPLAY_NAME, + EMPLOYEE_NUMBER: c.EMPLOYEE_NUMBER + })) + ) + + // 구매그룹코드 선택/해제 핸들러 + const handleCodeToggle = useCallback((code: PurchaseGroupCode, checked: boolean) => { + setTempSelectedCodes(prev => { + if (checked) { + // 최대 선택 수 제한 확인 + if (maxSelection && prev.length >= maxSelection) { + toast.warning(`최대 ${maxSelection}개까지 선택할 수 있습니다.`) + return prev + } + // 이미 선택된 코드인지 확인 + if (prev.some(c => c.PURCHASE_GROUP_CODE === code.PURCHASE_GROUP_CODE)) { + return prev + } + return [...prev, code] + } else { + return prev.filter(c => c.PURCHASE_GROUP_CODE !== code.PURCHASE_GROUP_CODE) + } + }) + }, [maxSelection]) + + // 개별 코드 제거 핸들러 + const handleRemoveCode = useCallback((purchaseGroupCode: string) => { + setTempSelectedCodes(prev => prev.filter(c => c.PURCHASE_GROUP_CODE !== purchaseGroupCode)) + }, []) + + // 모든 선택 해제 핸들러 + const handleClearAll = useCallback(() => { + setTempSelectedCodes([]) + }, []) + + // 확인 버튼 핸들러 (사용자 정보 포함하여 반환) + const handleConfirm = useCallback(async () => { + try { + // 선택된 코드들에 대해 사용자 정보 추가 + const codesWithUsers = await addUsersToCodesAsync(tempSelectedCodes) + + onCodesSelect(codesWithUsers) + onConfirm?.(codesWithUsers) + onOpenChange(false) + } catch (error) { + console.error('구매그룹코드 정보 조회 오류:', error) + toast.error('구매그룹코드 정보를 가져오는 중 오류가 발생했습니다.') + } + }, [tempSelectedCodes, onCodesSelect, onConfirm, onOpenChange]) + + // 취소 버튼 핸들러 + const handleCancel = useCallback(() => { + setTempSelectedCodes( + selectedCodes.map(c => ({ + PURCHASE_GROUP_CODE: c.PURCHASE_GROUP_CODE, + DISPLAY_NAME: c.DISPLAY_NAME, + EMPLOYEE_NUMBER: c.EMPLOYEE_NUMBER + })) + ) + onCancel?.() + onOpenChange(false) + }, [selectedCodes, onCancel, onOpenChange]) + + // 테이블 컬럼 정의 + const columns: ColumnDef<PurchaseGroupCode>[] = useMemo(() => [ + { + id: 'select', + header: ({ table }) => ( + <Checkbox + checked={table.getIsAllPageRowsSelected()} + onCheckedChange={(value) => { + if (value) { + // 페이지의 모든 행을 선택하되, 최대 선택 수 제한 확인 + const currentPageRows = table.getRowModel().rows + const newSelections = currentPageRows + .map(row => row.original) + .filter(code => !tempSelectedCodes.some(c => c.PURCHASE_GROUP_CODE === code.PURCHASE_GROUP_CODE)) + + if (maxSelection) { + const remainingSlots = maxSelection - tempSelectedCodes.length + if (newSelections.length > remainingSlots) { + toast.warning(`최대 ${maxSelection}개까지 선택할 수 있습니다.`) + return + } + } + + setTempSelectedCodes(prev => [...prev, ...newSelections]) + } else { + // 페이지의 모든 행 선택 해제 + const currentPageCodes = table.getRowModel().rows.map(row => row.original.PURCHASE_GROUP_CODE) + setTempSelectedCodes(prev => prev.filter(c => !currentPageCodes.includes(c.PURCHASE_GROUP_CODE))) + } + }} + aria-label="모든 행 선택" + /> + ), + cell: ({ row }) => { + const isSelected = tempSelectedCodes.some(c => c.PURCHASE_GROUP_CODE === row.original.PURCHASE_GROUP_CODE) + return ( + <Checkbox + checked={isSelected} + onCheckedChange={(value) => handleCodeToggle(row.original, !!value)} + aria-label="행 선택" + /> + ) + }, + enableSorting: false, + enableHiding: false, + }, + { + accessorKey: 'PURCHASE_GROUP_CODE', + header: '구매그룹코드', + cell: ({ row }) => ( + <div className="font-mono text-sm">{row.getValue('PURCHASE_GROUP_CODE')}</div> + ), + }, + { + accessorKey: 'DISPLAY_NAME', + header: '이름', + cell: ({ row }) => ( + <div className="max-w-[400px] truncate">{row.getValue('DISPLAY_NAME')}</div> + ), + }, + { + accessorKey: 'EMPLOYEE_NUMBER', + header: '사번', + cell: ({ row }) => ( + <div className="font-mono text-sm">{row.getValue('EMPLOYEE_NUMBER')}</div> + ), + }, + ], [handleCodeToggle, tempSelectedCodes, maxSelection]) + + // 구매그룹코드 테이블 설정 + const table = useReactTable({ + data: codes, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + onColumnVisibilityChange: setColumnVisibility, + onRowSelectionChange: setRowSelection, + onGlobalFilterChange: setGlobalFilter, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + state: { + sorting, + columnFilters, + columnVisibility, + rowSelection, + globalFilter, + }, + }) + + // 서버에서 구매그룹코드 전체 목록 로드 (한 번만) + const loadCodes = useCallback(async () => { + startTransition(async () => { + try { + const result = await getPurchaseGroupCodes() + + if (result.success) { + setCodes(result.data) + } else { + toast.error(result.error || '구매그룹코드를 불러오는데 실패했습니다.') + setCodes([]) + } + } catch (error) { + console.error('구매그룹코드 목록 로드 실패:', error) + toast.error('구매그룹코드를 불러오는 중 오류가 발생했습니다.') + setCodes([]) + } + }) + }, []) + + // 다이얼로그 열기/닫기 핸들러 + const handleDialogOpenChange = useCallback((newOpen: boolean) => { + onOpenChange(newOpen) + if (newOpen) { + setTempSelectedCodes( + selectedCodes.map(c => ({ + PURCHASE_GROUP_CODE: c.PURCHASE_GROUP_CODE, + DISPLAY_NAME: c.DISPLAY_NAME, + EMPLOYEE_NUMBER: c.EMPLOYEE_NUMBER + })) + ) + if (codes.length === 0) { + loadCodes() + } + } + }, [onOpenChange, selectedCodes, loadCodes, codes.length]) + + // 검색어 변경 핸들러 (클라이언트 사이드 필터링) + const handleSearchChange = useCallback((value: string) => { + setGlobalFilter(value) + }, []) + + return ( + <Dialog open={open} onOpenChange={handleDialogOpenChange}> + <DialogContent className="max-w-6xl max-h-[85vh]"> + <DialogHeader> + <DialogTitle>{title}</DialogTitle> + <div className="text-sm text-muted-foreground"> + {description} + {maxSelection && ` (최대 ${maxSelection}개)`} + </div> + </DialogHeader> + + <div className="space-y-4"> + {/* 선택된 구매그룹코드들 표시 */} + {tempSelectedCodes.length > 0 && ( + <div className="space-y-2"> + <div className="flex items-center justify-between"> + <div className="text-sm font-medium"> + 선택된 구매그룹코드 ({tempSelectedCodes.length}개) + {maxSelection && ` / ${maxSelection}`} + </div> + <Button + variant="outline" + size="sm" + onClick={handleClearAll} + disabled={tempSelectedCodes.length === 0} + > + <Trash2 className="h-4 w-4 mr-2" /> + 모두 제거 + </Button> + </div> + <div className="flex flex-wrap gap-2 max-h-24 overflow-y-auto p-2 border rounded-md bg-muted/30"> + {tempSelectedCodes.map((code) => ( + <Badge + key={code.PURCHASE_GROUP_CODE} + variant="secondary" + className="text-xs" + > + [{code.PURCHASE_GROUP_CODE}] {code.DISPLAY_NAME} + <button + onClick={() => handleRemoveCode(code.PURCHASE_GROUP_CODE)} + className="ml-1 hover:text-destructive" + > + <X className="h-3 w-3" /> + </button> + </Badge> + ))} + </div> + </div> + )} + + <div className="flex items-center space-x-2"> + <Search className="h-4 w-4" /> + <Input + placeholder="구매그룹코드, 이름, 사번으로 검색..." + value={globalFilter} + onChange={(e) => handleSearchChange(e.target.value)} + className="flex-1" + /> + </div> + + {isPending ? ( + <div className="flex justify-center py-8"> + <div className="text-sm text-muted-foreground">구매그룹코드를 불러오는 중...</div> + </div> + ) : ( + <div className="border rounded-md"> + <Table> + <TableHeader> + {table.getHeaderGroups().map((headerGroup) => ( + <TableRow key={headerGroup.id}> + {headerGroup.headers.map((header) => ( + <TableHead key={header.id}> + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + </TableHead> + ))} + </TableRow> + ))} + </TableHeader> + <TableBody> + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => { + const isSelected = tempSelectedCodes.some(c => c.PURCHASE_GROUP_CODE === row.original.PURCHASE_GROUP_CODE) + return ( + <TableRow + key={row.id} + data-state={isSelected && "selected"} + className={`cursor-pointer hover:bg-muted/50 ${ + isSelected ? 'bg-muted/30' : '' + }`} + onClick={() => { + const isCurrentlySelected = tempSelectedCodes.some(c => c.PURCHASE_GROUP_CODE === row.original.PURCHASE_GROUP_CODE) + handleCodeToggle(row.original, !isCurrentlySelected) + }} + > + {row.getVisibleCells().map((cell) => ( + <TableCell key={cell.id}> + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + </TableCell> + ))} + </TableRow> + ) + }) + ) : ( + <TableRow> + <TableCell + colSpan={columns.length} + className="h-24 text-center" + > + 검색 결과가 없습니다. + </TableCell> + </TableRow> + )} + </TableBody> + </Table> + </div> + )} + + <div className="flex items-center justify-between"> + <div className="text-sm text-muted-foreground"> + 총 {table.getFilteredRowModel().rows.length}개 구매그룹코드 + </div> + <div className="flex items-center space-x-2"> + <Button + variant="outline" + size="sm" + onClick={() => table.previousPage()} + disabled={!table.getCanPreviousPage()} + > + 이전 + </Button> + <div className="text-sm"> + {table.getState().pagination.pageIndex + 1} / {table.getPageCount()} + </div> + <Button + variant="outline" + size="sm" + onClick={() => table.nextPage()} + disabled={!table.getCanNextPage()} + > + 다음 + </Button> + </div> + </div> + </div> + + <DialogFooter> + <Button variant="outline" onClick={handleCancel}> + <X className="h-4 w-4 mr-2" /> + 취소 + </Button> + <Button onClick={handleConfirm}> + <Check className="h-4 w-4 mr-2" /> + 확인 ({tempSelectedCodes.length}개 선택) + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + ) +} + diff --git a/components/common/selectors/purchase-group-code/purchase-group-code-selector.tsx b/components/common/selectors/purchase-group-code/purchase-group-code-selector.tsx new file mode 100644 index 00000000..4ca3e7ca --- /dev/null +++ b/components/common/selectors/purchase-group-code/purchase-group-code-selector.tsx @@ -0,0 +1,305 @@ +'use client' + +/** + * 구매그룹코드 선택기 + * + * @description + * - 오라클에서 CMCTB_CDNM, CMCTB_CD 테이블에서 CD_CLF = 'MMA070' 인 건들을 조회 + * - PURCHASE_GROUP_CODE: 구매그룹코드 + * - DISPLAY_NAME: 표시명 ([이름]_[부서]_[퇴직/전배정보]) + * - EMPLOYEE_NUMBER: 사번 + * - 선택 시 사용자 정보도 함께 반환 + */ + +import { useState, useCallback, useMemo, useTransition } from 'react' +import { Button } from '@/components/ui/button' +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog' +import { Input } from '@/components/ui/input' +import { Search, Check } from 'lucide-react' +import { + ColumnDef, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, + SortingState, + ColumnFiltersState, + VisibilityState, + RowSelectionState, +} from '@tanstack/react-table' +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/components/ui/table' +import { + getPurchaseGroupCodes, + addUsersToCodesAsync, + PurchaseGroupCode, + PurchaseGroupCodeWithUser +} from './purchase-group-code-service' +import { toast } from 'sonner' + +export interface PurchaseGroupCodeSelectorProps { + selectedCode?: PurchaseGroupCodeWithUser + onCodeSelect: (code: PurchaseGroupCodeWithUser) => void + disabled?: boolean + placeholder?: string + className?: string +} + +export function PurchaseGroupCodeSelector({ + selectedCode, + onCodeSelect, + disabled, + placeholder = "구매그룹코드를 선택하세요", + className +}: PurchaseGroupCodeSelectorProps) { + const [open, setOpen] = useState(false) + const [codes, setCodes] = useState<PurchaseGroupCode[]>([]) + const [sorting, setSorting] = useState<SortingState>([]) + const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]) + const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({}) + const [rowSelection, setRowSelection] = useState<RowSelectionState>({}) + const [globalFilter, setGlobalFilter] = useState('') + const [isPending, startTransition] = useTransition() + + // 구매그룹코드 선택 핸들러 + const handleCodeSelect = useCallback(async (code: PurchaseGroupCode) => { + try { + // 사용자 정보 추가 + const [codeWithUser] = await addUsersToCodesAsync(code) + onCodeSelect(codeWithUser) + setOpen(false) + } catch (error) { + console.error('구매그룹코드 선택 오류:', error) + toast.error('구매그룹코드 선택 중 오류가 발생했습니다.') + } + }, [onCodeSelect]) + + // 테이블 컬럼 정의 + const columns: ColumnDef<PurchaseGroupCode>[] = useMemo(() => [ + { + accessorKey: 'PURCHASE_GROUP_CODE', + header: '구매그룹코드', + cell: ({ row }) => ( + <div className="font-mono text-sm">{row.getValue('PURCHASE_GROUP_CODE')}</div> + ), + }, + { + accessorKey: 'DISPLAY_NAME', + header: '이름', + cell: ({ row }) => ( + <div className="max-w-[400px] truncate">{row.getValue('DISPLAY_NAME')}</div> + ), + }, + { + accessorKey: 'EMPLOYEE_NUMBER', + header: '사번', + cell: ({ row }) => ( + <div className="font-mono text-sm">{row.getValue('EMPLOYEE_NUMBER')}</div> + ), + }, + { + id: 'actions', + header: '선택', + cell: ({ row }) => ( + <Button + variant="ghost" + size="sm" + onClick={(e) => { + e.stopPropagation() + handleCodeSelect(row.original) + }} + > + <Check className="h-4 w-4" /> + </Button> + ), + }, + ], [handleCodeSelect]) + + // 구매그룹코드 테이블 설정 + const table = useReactTable({ + data: codes, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + onColumnVisibilityChange: setColumnVisibility, + onRowSelectionChange: setRowSelection, + onGlobalFilterChange: setGlobalFilter, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + state: { + sorting, + columnFilters, + columnVisibility, + rowSelection, + globalFilter, + }, + }) + + // 서버에서 구매그룹코드 전체 목록 로드 (한 번만) + const loadCodes = useCallback(async () => { + startTransition(async () => { + try { + const result = await getPurchaseGroupCodes() + + if (result.success) { + setCodes(result.data) + } else { + toast.error(result.error || '구매그룹코드를 불러오는데 실패했습니다.') + setCodes([]) + } + } catch (error) { + console.error('구매그룹코드 목록 로드 실패:', error) + toast.error('구매그룹코드를 불러오는 중 오류가 발생했습니다.') + setCodes([]) + } + }) + }, []) + + // 다이얼로그 열기 핸들러 + const handleDialogOpenChange = useCallback((newOpen: boolean) => { + setOpen(newOpen) + if (newOpen && codes.length === 0) { + loadCodes() + } + }, [loadCodes, codes.length]) + + // 검색어 변경 핸들러 (클라이언트 사이드 필터링) + const handleSearchChange = useCallback((value: string) => { + setGlobalFilter(value) + }, []) + + return ( + <Dialog open={open} onOpenChange={handleDialogOpenChange}> + <DialogTrigger asChild> + <Button + variant="outline" + disabled={disabled} + className={`w-full justify-start ${className || ''}`} + > + {selectedCode ? ( + <div className="flex items-center gap-2 w-full"> + <span className="font-mono text-sm">[{selectedCode.PURCHASE_GROUP_CODE}]</span> + <span className="truncate flex-1 text-left">{selectedCode.DISPLAY_NAME}</span> + </div> + ) : ( + <span className="text-muted-foreground">{placeholder}</span> + )} + </Button> + </DialogTrigger> + <DialogContent className="max-w-5xl max-h-[80vh]"> + <DialogHeader> + <DialogTitle>구매그룹코드 선택</DialogTitle> + <div className="text-sm text-muted-foreground"> + 구매그룹코드(CD_CLF=MMA070) 조회 + </div> + </DialogHeader> + + <div className="space-y-4"> + <div className="flex items-center space-x-2"> + <Search className="h-4 w-4" /> + <Input + placeholder="구매그룹코드, 이름, 사번으로 검색..." + value={globalFilter} + onChange={(e) => handleSearchChange(e.target.value)} + className="flex-1" + /> + </div> + + {isPending ? ( + <div className="flex justify-center py-8"> + <div className="text-sm text-muted-foreground">구매그룹코드를 불러오는 중...</div> + </div> + ) : ( + <div className="border rounded-md"> + <Table> + <TableHeader> + {table.getHeaderGroups().map((headerGroup) => ( + <TableRow key={headerGroup.id}> + {headerGroup.headers.map((header) => ( + <TableHead key={header.id}> + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + </TableHead> + ))} + </TableRow> + ))} + </TableHeader> + <TableBody> + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + <TableRow + key={row.id} + data-state={row.getIsSelected() && "selected"} + className="cursor-pointer hover:bg-muted/50" + onClick={() => handleCodeSelect(row.original)} + > + {row.getVisibleCells().map((cell) => ( + <TableCell key={cell.id}> + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + </TableCell> + ))} + </TableRow> + )) + ) : ( + <TableRow> + <TableCell + colSpan={columns.length} + className="h-24 text-center" + > + 검색 결과가 없습니다. + </TableCell> + </TableRow> + )} + </TableBody> + </Table> + </div> + )} + + <div className="flex items-center justify-between"> + <div className="text-sm text-muted-foreground"> + 총 {table.getFilteredRowModel().rows.length}개 구매그룹코드 + </div> + <div className="flex items-center space-x-2"> + <Button + variant="outline" + size="sm" + onClick={() => table.previousPage()} + disabled={!table.getCanPreviousPage()} + > + 이전 + </Button> + <div className="text-sm"> + {table.getState().pagination.pageIndex + 1} / {table.getPageCount()} + </div> + <Button + variant="outline" + size="sm" + onClick={() => table.nextPage()} + disabled={!table.getCanNextPage()} + > + 다음 + </Button> + </div> + </div> + </div> + </DialogContent> + </Dialog> + ) +} diff --git a/components/common/selectors/purchase-group-code/purchase-group-code-service.ts b/components/common/selectors/purchase-group-code/purchase-group-code-service.ts new file mode 100644 index 00000000..191c9f85 --- /dev/null +++ b/components/common/selectors/purchase-group-code/purchase-group-code-service.ts @@ -0,0 +1,147 @@ +"use server" + +import { oracleKnex } from '@/lib/oracle-db/db' +import { getUserByEmployeeNumber } from '@/lib/users/service' + +// 구매그룹코드 타입 정의 +export interface PurchaseGroupCode { + PURCHASE_GROUP_CODE: string // 구매그룹코드 + DISPLAY_NAME: string // 표시명 (이름_부서_퇴직/전배정보) + EMPLOYEE_NUMBER: string // 사번 +} + +// 구매그룹코드 + 사용자 정보 타입 +export interface PurchaseGroupCodeWithUser extends PurchaseGroupCode { + user?: { + id: number + name: string + email: string + employeeNumber: string | null + // 필요한 다른 사용자 필드들... + } | null +} + +// 테스트 환경용 폴백 데이터 +const FALLBACK_TEST_DATA: PurchaseGroupCode[] = [ + { PURCHASE_GROUP_CODE: '12L', DISPLAY_NAME: '김철수_구매팀_재직(테스트데이터 - 오라클 페칭 실패시)', EMPLOYEE_NUMBER: '1001234' }, + { PURCHASE_GROUP_CODE: '32F', DISPLAY_NAME: '이영희_자재팀_재직(테스트데이터 - 오라클 페칭 실패시)', EMPLOYEE_NUMBER: '1002345' }, + { PURCHASE_GROUP_CODE: '45A', DISPLAY_NAME: '박민수_조달팀_재직(테스트데이터 - 오라클 페칭 실패시)', EMPLOYEE_NUMBER: '1003456' }, + { PURCHASE_GROUP_CODE: '67K', DISPLAY_NAME: '정수진_구매1팀_재직(테스트데이터 - 오라클 페칭 실패시)', EMPLOYEE_NUMBER: '1004567' }, + { PURCHASE_GROUP_CODE: '89D', DISPLAY_NAME: '최동욱_구매2팀_재직(테스트데이터 - 오라클 페칭 실패시)', EMPLOYEE_NUMBER: '1005678' }, + { PURCHASE_GROUP_CODE: '11B', DISPLAY_NAME: '강미라_자재관리팀_재직(테스트데이터 - 오라클 페칭 실패시)', EMPLOYEE_NUMBER: '1006789' }, + { PURCHASE_GROUP_CODE: '23G', DISPLAY_NAME: '윤성호_구매기획팀_재직(테스트데이터 - 오라클 페칭 실패시)', EMPLOYEE_NUMBER: '1007890' }, + { PURCHASE_GROUP_CODE: '56H', DISPLAY_NAME: '임지훈_조달지원팀_재직(테스트데이터 - 오라클 페칭 실패시)', EMPLOYEE_NUMBER: '1008901' }, + { PURCHASE_GROUP_CODE: '78M', DISPLAY_NAME: '한소희_구매운영팀_재직(테스트데이터 - 오라클 페칭 실패시)', EMPLOYEE_NUMBER: '1009012' }, + { PURCHASE_GROUP_CODE: '90C', DISPLAY_NAME: '오준석_전략구매팀_재직(테스트데이터 - 오라클 페칭 실패시)', EMPLOYEE_NUMBER: '1010123' }, +] + +/** + * 모든 구매그룹코드 목록 조회 (Oracle에서 전체 조회, 실패 시 폴백 데이터 사용) + * CMCTB_CDNM, CMCTB_CD 테이블에서 CD_CLF = 'MMA070' 조건으로 조회 + * 클라이언트에서 검색/필터링 수행 + */ +export async function getPurchaseGroupCodes(): Promise<{ + success: boolean + data: PurchaseGroupCode[] + error?: string + isUsingFallback?: boolean +}> { + try { + console.log('📋 [getPurchaseGroupCodes] Oracle 쿼리 시작...') + + const result = await oracleKnex.raw(` + SELECT + CD.CD AS PURCHASE_GROUP_CODE, + NM.CDNM AS DISPLAY_NAME, + CD.USR_DF_CHAR_9 AS EMPLOYEE_NUMBER + FROM CMCTB_CDNM NM + JOIN CMCTB_CD CD + ON NM.CD_CLF = CD.CD_CLF + AND NM.CD = CD.CD + AND NM.CD2 = CD.CD3 + WHERE NM.CD_CLF = 'MMA070' + AND CD.DEL_YN != 'Y' + ORDER BY CD.CD + `) + + // Oracle raw query의 결과는 rows 배열에 들어있음 + const rows = (result.rows || result) as Array<Record<string, unknown>> + + console.log(`✅ [getPurchaseGroupCodes] Oracle 쿼리 성공 - ${rows.length}건 조회`) + + // null 값 필터링 + const cleanedResult = rows + .filter((item) => + item.PURCHASE_GROUP_CODE && + item.DISPLAY_NAME && + item.EMPLOYEE_NUMBER + ) + .map((item) => ({ + PURCHASE_GROUP_CODE: String(item.PURCHASE_GROUP_CODE), + DISPLAY_NAME: String(item.DISPLAY_NAME), + EMPLOYEE_NUMBER: String(item.EMPLOYEE_NUMBER) + })) + + console.log(`✅ [getPurchaseGroupCodes] 필터링 후 ${cleanedResult.length}건`) + + return { + success: true, + data: cleanedResult, + isUsingFallback: false + } + } catch (error) { + console.error('❌ [getPurchaseGroupCodes] Oracle 오류:', error) + console.log('🔄 [getPurchaseGroupCodes] 폴백 테스트 데이터 사용 (' + FALLBACK_TEST_DATA.length + '건)') + return { + success: true, + data: FALLBACK_TEST_DATA, + isUsingFallback: true + } + } +} + +/** + * 구매그룹코드(들)에 사용자 정보 추가 (1개 또는 여러 개 처리) + * @param codes - 단일 또는 배열 형태의 구매그룹코드 + * @returns 사용자 정보가 포함된 구매그룹코드 배열 + */ +export async function addUsersToCodesAsync( + codes: PurchaseGroupCode | PurchaseGroupCode[] +): Promise<PurchaseGroupCodeWithUser[]> { + try { + // 배열로 정규화 + const codesArray = Array.isArray(codes) ? codes : [codes] + + console.log(`👤 [addUsersToCodesAsync] ${codesArray.length}개 구매그룹코드에 대한 사용자 정보 조회 시작`) + + // 각 구매그룹코드에 대해 사용자 정보 조회 + const withUsers = await Promise.all( + codesArray.map(async (code) => { + console.log(` 🔍 [addUsersToCodesAsync] 사번 ${code.EMPLOYEE_NUMBER} 조회 중...`) + const user = await getUserByEmployeeNumber(code.EMPLOYEE_NUMBER) + + if (user) { + console.log(` ✅ [addUsersToCodesAsync] 사번 ${code.EMPLOYEE_NUMBER} → 사용자 찾음: ${user.name}`) + } else { + console.log(` ⚠️ [addUsersToCodesAsync] 사번 ${code.EMPLOYEE_NUMBER} → 사용자 없음`) + } + + return { + ...code, + user: user ? { + id: user.id, + name: user.name, + email: user.email, + employeeNumber: user.employeeNumber, + } : null + } + }) + ) + + return withUsers + } catch (error) { + console.error('❌ [addUsersToCodesAsync] 오류:', error) + const codesArray = Array.isArray(codes) ? codes : [codes] + return codesArray.map(code => ({ ...code, user: null })) + } +} diff --git a/components/common/selectors/purchase-group-code/purchase-group-code-single-selector.tsx b/components/common/selectors/purchase-group-code/purchase-group-code-single-selector.tsx new file mode 100644 index 00000000..47a2c5f0 --- /dev/null +++ b/components/common/selectors/purchase-group-code/purchase-group-code-single-selector.tsx @@ -0,0 +1,370 @@ +'use client' + +/** + * 구매그룹코드 단일 선택 다이얼로그 + * + * @description + * - 구매그룹코드를 하나만 선택할 수 있는 다이얼로그 + * - 트리거 버튼과 다이얼로그가 분리된 구조 + * - 외부에서 open 상태를 제어 가능 + * - 선택 시 사용자 정보도 함께 반환 + */ + +import { useState, useCallback, useMemo, useTransition, useEffect } from 'react' +import { Button } from '@/components/ui/button' +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog' +import { Input } from '@/components/ui/input' +import { Search, Check, X } from 'lucide-react' +import { + ColumnDef, + flexRender, + getCoreRowModel, + getFilteredRowModel, + getPaginationRowModel, + getSortedRowModel, + useReactTable, + SortingState, + ColumnFiltersState, + VisibilityState, + RowSelectionState, +} from '@tanstack/react-table' +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from '@/components/ui/table' +import { + getPurchaseGroupCodes, + addUsersToCodesAsync, + PurchaseGroupCode, + PurchaseGroupCodeWithUser +} from './purchase-group-code-service' +import { toast } from 'sonner' + +export interface PurchaseGroupCodeSingleSelectorProps { + open: boolean + onOpenChange: (open: boolean) => void + selectedCode?: PurchaseGroupCodeWithUser + onCodeSelect: (code: PurchaseGroupCodeWithUser) => void + onConfirm?: (code: PurchaseGroupCodeWithUser | undefined) => void + onCancel?: () => void + title?: string + description?: string + showConfirmButtons?: boolean +} + +export function PurchaseGroupCodeSingleSelector({ + open, + onOpenChange, + selectedCode, + onCodeSelect, + onConfirm, + onCancel, + title = "구매그룹코드 선택", + description = "구매그룹코드를 선택하세요", + showConfirmButtons = false +}: PurchaseGroupCodeSingleSelectorProps) { + const [codes, setCodes] = useState<PurchaseGroupCode[]>([]) + const [sorting, setSorting] = useState<SortingState>([]) + const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]) + const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({}) + const [rowSelection, setRowSelection] = useState<RowSelectionState>({}) + const [globalFilter, setGlobalFilter] = useState('') + const [isPending, startTransition] = useTransition() + const [tempSelectedCode, setTempSelectedCode] = useState<PurchaseGroupCodeWithUser | undefined>(selectedCode) + + // 구매그룹코드 선택 핸들러 + const handleCodeSelect = useCallback(async (code: PurchaseGroupCode) => { + try { + // 사용자 정보 추가 + const [codeWithUser] = await addUsersToCodesAsync(code) + if (showConfirmButtons) { + setTempSelectedCode(codeWithUser) + } else { + onCodeSelect(codeWithUser) + onOpenChange(false) + } + } catch (error) { + console.error('구매그룹코드 선택 오류:', error) + toast.error('구매그룹코드 선택 중 오류가 발생했습니다.') + } + }, [onCodeSelect, onOpenChange, showConfirmButtons]) + + // 확인 버튼 핸들러 + const handleConfirm = useCallback(() => { + if (tempSelectedCode) { + onCodeSelect(tempSelectedCode) + } + onConfirm?.(tempSelectedCode) + onOpenChange(false) + }, [tempSelectedCode, onCodeSelect, onConfirm, onOpenChange]) + + // 취소 버튼 핸들러 + const handleCancel = useCallback(() => { + setTempSelectedCode(selectedCode) + onCancel?.() + onOpenChange(false) + }, [selectedCode, onCancel, onOpenChange]) + + // 테이블 컬럼 정의 + const columns: ColumnDef<PurchaseGroupCode>[] = useMemo(() => [ + { + accessorKey: 'PURCHASE_GROUP_CODE', + header: '구매그룹코드', + cell: ({ row }) => ( + <div className="font-mono text-sm">{row.getValue('PURCHASE_GROUP_CODE')}</div> + ), + }, + { + accessorKey: 'DISPLAY_NAME', + header: '이름', + cell: ({ row }) => ( + <div className="max-w-[200px] truncate">{row.getValue('DISPLAY_NAME')}</div> + ), + }, + { + accessorKey: 'EMPLOYEE_NUMBER', + header: '사번', + cell: ({ row }) => ( + <div className="font-mono text-sm">{row.getValue('EMPLOYEE_NUMBER')}</div> + ), + }, + { + id: 'actions', + header: '선택', + cell: ({ row }) => { + const isSelected = showConfirmButtons + ? tempSelectedCode?.PURCHASE_GROUP_CODE === row.original.PURCHASE_GROUP_CODE + : selectedCode?.PURCHASE_GROUP_CODE === row.original.PURCHASE_GROUP_CODE + + return ( + <Button + variant={isSelected ? "default" : "ghost"} + size="sm" + onClick={(e) => { + e.stopPropagation() + handleCodeSelect(row.original) + }} + > + <Check className="h-4 w-4" /> + </Button> + ) + }, + }, + ], [handleCodeSelect, selectedCode, tempSelectedCode, showConfirmButtons]) + + // 구매그룹코드 테이블 설정 + const table = useReactTable({ + data: codes, + columns, + onSortingChange: setSorting, + onColumnFiltersChange: setColumnFilters, + onColumnVisibilityChange: setColumnVisibility, + onRowSelectionChange: setRowSelection, + onGlobalFilterChange: setGlobalFilter, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + getSortedRowModel: getSortedRowModel(), + getFilteredRowModel: getFilteredRowModel(), + state: { + sorting, + columnFilters, + columnVisibility, + rowSelection, + globalFilter, + }, + }) + + // 서버에서 구매그룹코드 전체 목록 로드 (한 번만) + const loadCodes = useCallback(async () => { + startTransition(async () => { + try { + const result = await getPurchaseGroupCodes() + + if (result.success) { + setCodes(result.data) + + // 폴백 데이터를 사용하는 경우 알림 + if (result.isUsingFallback) { + toast.info('Oracle 연결 실패', { + description: '테스트 데이터를 사용합니다.', + duration: 4000, + }) + } + } else { + toast.error(result.error || '구매그룹코드를 불러오는데 실패했습니다.') + setCodes([]) + } + } catch (error) { + console.error('구매그룹코드 목록 로드 실패:', error) + toast.error('구매그룹코드를 불러오는 중 오류가 발생했습니다.') + setCodes([]) + } + }) + }, []) + + // 다이얼로그 열릴 때 코드 로드 (open prop 변화 감지) + useEffect(() => { + if (open) { + setTempSelectedCode(selectedCode) + if (codes.length === 0) { + console.log('🚀 [PurchaseGroupCodeSingleSelector] 다이얼로그 열림 - loadCodes 호출') + loadCodes() + } else { + console.log('📦 [PurchaseGroupCodeSingleSelector] 다이얼로그 열림 - 기존 데이터 사용 (' + codes.length + '건)') + } + } + }, [open, selectedCode, loadCodes, codes.length]) + + // 검색어 변경 핸들러 (클라이언트 사이드 필터링) + const handleSearchChange = useCallback((value: string) => { + setGlobalFilter(value) + }, []) + + const currentSelectedCode = showConfirmButtons ? tempSelectedCode : selectedCode + + return ( + <Dialog open={open} onOpenChange={onOpenChange}> + <DialogContent className="max-w-5xl max-h-[80vh]"> + <DialogHeader> + <DialogTitle>{title}</DialogTitle> + <div className="text-sm text-muted-foreground"> + {description} + </div> + </DialogHeader> + + <div className="space-y-4"> + {/* 현재 선택된 구매그룹코드 표시 */} + {currentSelectedCode && ( + <div className="p-3 bg-muted rounded-md"> + <div className="text-sm font-medium">선택된 구매그룹코드:</div> + <div className="flex items-center gap-2 mt-1"> + <span className="font-mono text-sm">[{currentSelectedCode.PURCHASE_GROUP_CODE}]</span> + <span>{currentSelectedCode.DISPLAY_NAME}</span> + {currentSelectedCode.user && ( + <span className="text-muted-foreground">({currentSelectedCode.user.name})</span> + )} + </div> + </div> + )} + + <div className="flex items-center space-x-2"> + <Search className="h-4 w-4" /> + <Input + placeholder="구매그룹코드, 이름, 사번으로 검색..." + value={globalFilter} + onChange={(e) => handleSearchChange(e.target.value)} + className="flex-1" + /> + </div> + + {isPending ? ( + <div className="flex justify-center py-8"> + <div className="text-sm text-muted-foreground">구매그룹코드를 불러오는 중...</div> + </div> + ) : ( + <div className="border rounded-md"> + <Table> + <TableHeader> + {table.getHeaderGroups().map((headerGroup) => ( + <TableRow key={headerGroup.id}> + {headerGroup.headers.map((header) => ( + <TableHead key={header.id}> + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} + </TableHead> + ))} + </TableRow> + ))} + </TableHeader> + <TableBody> + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => { + const isRowSelected = currentSelectedCode?.PURCHASE_GROUP_CODE === row.original.PURCHASE_GROUP_CODE + return ( + <TableRow + key={row.id} + data-state={isRowSelected && "selected"} + className={`cursor-pointer hover:bg-muted/50 ${ + isRowSelected ? 'bg-muted' : '' + }`} + onClick={() => handleCodeSelect(row.original)} + > + {row.getVisibleCells().map((cell) => ( + <TableCell key={cell.id}> + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + </TableCell> + ))} + </TableRow> + ) + }) + ) : ( + <TableRow> + <TableCell + colSpan={columns.length} + className="h-24 text-center" + > + 검색 결과가 없습니다. + </TableCell> + </TableRow> + )} + </TableBody> + </Table> + </div> + )} + + <div className="flex items-center justify-between"> + <div className="text-sm text-muted-foreground"> + 총 {table.getFilteredRowModel().rows.length}개 구매그룹코드 + </div> + <div className="flex items-center space-x-2"> + <Button + variant="outline" + size="sm" + onClick={() => table.previousPage()} + disabled={!table.getCanPreviousPage()} + > + 이전 + </Button> + <div className="text-sm"> + {table.getState().pagination.pageIndex + 1} / {table.getPageCount()} + </div> + <Button + variant="outline" + size="sm" + onClick={() => table.nextPage()} + disabled={!table.getCanNextPage()} + > + 다음 + </Button> + </div> + </div> + </div> + + {showConfirmButtons && ( + <DialogFooter> + <Button variant="outline" onClick={handleCancel}> + <X className="h-4 w-4 mr-2" /> + 취소 + </Button> + <Button onClick={handleConfirm} disabled={!tempSelectedCode}> + <Check className="h-4 w-4 mr-2" /> + 확인 + </Button> + </DialogFooter> + )} + </DialogContent> + </Dialog> + ) +} + diff --git a/lib/rfq-last/table/create-general-rfq-dialog.tsx b/lib/rfq-last/table/create-general-rfq-dialog.tsx index 1d369648..7263f20f 100644 --- a/lib/rfq-last/table/create-general-rfq-dialog.tsx +++ b/lib/rfq-last/table/create-general-rfq-dialog.tsx @@ -5,8 +5,7 @@ import { useForm, useFieldArray } from "react-hook-form" import { zodResolver } from "@hookform/resolvers/zod" import { z } from "zod" import { format } from "date-fns" -import { CalendarIcon, Plus, Loader2, Trash2, PlusCircle, Check, ChevronsUpDown } from "lucide-react" -import { useRouter } from "next/navigation" +import { CalendarIcon, Plus, Loader2, Trash2, PlusCircle } from "lucide-react" import { useSession } from "next-auth/react" import { Button } from "@/components/ui/button" @@ -42,22 +41,18 @@ import { PopoverContent, PopoverTrigger, } from "@/components/ui/popover" -import { - Command, - CommandInput, - CommandList, - CommandGroup, - CommandItem, - CommandEmpty, -} from "@/components/ui/command" import { Calendar } from "@/components/ui/calendar" import { Badge } from "@/components/ui/badge" import { cn } from "@/lib/utils" import { toast } from "sonner" import { ScrollArea } from "@/components/ui/scroll-area" import { Separator } from "@/components/ui/separator" -import { createGeneralRfqAction, getPUsersForFilter, previewGeneralRfqCode } from "../service" +import { createGeneralRfqAction, previewGeneralRfqCode } from "../service" import { ProjectSelector } from "@/components/ProjectSelector" +import { + PurchaseGroupCodeSingleSelector, + PurchaseGroupCodeWithUser +} from "@/components/common/selectors/purchase-group-code" // 아이템 스키마 const itemSchema = z.object({ @@ -90,21 +85,12 @@ interface CreateGeneralRfqDialogProps { export function CreateGeneralRfqDialog({ onSuccess }: CreateGeneralRfqDialogProps) { const [open, setOpen] = React.useState(false) const [isLoading, setIsLoading] = React.useState(false) - const [users, setUsers] = React.useState<Array<{ id: number; name: string }>>([]) - const [isLoadingUsers, setIsLoadingUsers] = React.useState(false) - const [userPopoverOpen, setUserPopoverOpen] = React.useState(false) - const [userSearchTerm, setUserSearchTerm] = React.useState("") + const [selectedPurchaseGroupCode, setSelectedPurchaseGroupCode] = React.useState<PurchaseGroupCodeWithUser | undefined>(undefined) + const [selectorOpen, setSelectorOpen] = React.useState(false) const [previewCode, setPreviewCode] = React.useState("") const [isLoadingPreview, setIsLoadingPreview] = React.useState(false) - const userOptionIdsRef = React.useRef<Record<number, string>>({}) - const router = useRouter() const { data: session } = useSession() - // 고유 ID 생성 - const buttonId = React.useMemo(() => `user-button-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, []) - const popoverContentId = React.useMemo(() => `user-popover-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, []) - const commandId = React.useMemo(() => `user-command-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`, []) - const userId = React.useMemo(() => { return session?.user?.id ? Number(session.user.id) : null; }, [session]); @@ -171,49 +157,24 @@ export function CreateGeneralRfqDialog({ onSuccess }: CreateGeneralRfqDialogProp return () => subscription.unsubscribe() }, [form, generatePreviewCode]) - // 사용자 목록 로드 - React.useEffect(() => { - const loadUsers = async () => { - setIsLoadingUsers(true) - try { - const userList = await getPUsersForFilter() - setUsers(userList) - } catch (error) { - console.log("사용자 목록 로드 오류:", error) - toast.error("사용자 목록을 불러오는데 실패했습니다") - } finally { - setIsLoadingUsers(false) - } - } - loadUsers() - }, []) - - // 세션 사용자 ID로 기본값 설정 - React.useEffect(() => { - if (userId && !form.getValues("picUserId")) { - form.setValue("picUserId", userId) + // 구매그룹코드 선택 핸들러 + const handlePurchaseGroupCodeSelect = React.useCallback((code: PurchaseGroupCodeWithUser) => { + setSelectedPurchaseGroupCode(code) + + // 사용자 정보가 있으면 폼에 설정 + if (code.user) { + form.setValue("picUserId", code.user.id) + } else { + // 유저 정보가 없는 경우 경고 + toast.warning( + `해당 구매그룹코드(${code.PURCHASE_GROUP_CODE})의 사번 정보의 유저가 없습니다`, + { + description: `사번: ${code.EMPLOYEE_NUMBER}`, + duration: 5000, + } + ) } - }, [userId, form]) - - // 사용자 검색 필터링 - const userOptions = React.useMemo(() => { - return users.filter((user) => - user.name.toLowerCase().includes(userSearchTerm.toLowerCase()) - ) - }, [users, userSearchTerm]) - - // 선택된 사용자 찾기 - const selectedUser = React.useMemo(() => { - const picUserId = form.watch("picUserId") - return users.find(user => user.id === picUserId) - }, [users, form.watch("picUserId")]) - - // 사용자 선택 핸들러 - const handleSelectUser = (user: { id: number; name: string }) => { - form.setValue("picUserId", user.id) - setUserPopoverOpen(false) - setUserSearchTerm("") - } + }, [form]) // 다이얼로그 열림/닫힘 처리 및 폼 리셋 const handleOpenChange = (newOpen: boolean) => { @@ -238,8 +199,7 @@ export function CreateGeneralRfqDialog({ onSuccess }: CreateGeneralRfqDialogProp }, ], }) - setUserSearchTerm("") - setUserPopoverOpen(false) + setSelectedPurchaseGroupCode(undefined) setPreviewCode("") setIsLoadingPreview(false) } @@ -463,92 +423,47 @@ export function CreateGeneralRfqDialog({ onSuccess }: CreateGeneralRfqDialogProp )} /> - {/* 구매 담당자 - 검색 가능한 셀렉터로 변경 */} + {/* 구매 담당자 - 구매그룹코드 선택기 */} <FormField control={form.control} name="picUserId" - render={({ field }) => ( + render={() => ( <FormItem className="flex flex-col"> <FormLabel> - 견적담당자 <span className="text-red-500">*</span> + 견적담당자 (구매그룹코드) <span className="text-red-500">*</span> </FormLabel> <FormControl> - <Popover open={userPopoverOpen} onOpenChange={setUserPopoverOpen}> - <PopoverTrigger asChild> - <Button - key={buttonId} - type="button" - variant="outline" - className="w-full justify-between relative h-9" - disabled={isLoadingUsers} - > - {isLoadingUsers ? ( - <> - <span>담당자 로딩 중...</span> - <Loader2 className="ml-2 h-4 w-4 animate-spin" /> - </> - ) : ( - <> - <span className="truncate mr-1 flex-grow text-left"> - {selectedUser ? selectedUser.name : "견적담당자를 선택하세요"} - </span> - <ChevronsUpDown className="h-4 w-4 opacity-50 flex-shrink-0" /> - </> + <Button + type="button" + variant="outline" + className="w-full justify-start h-auto min-h-[36px]" + onClick={() => setSelectorOpen(true)} + > + {selectedPurchaseGroupCode ? ( + <div className="flex flex-col items-start gap-1 w-full"> + <div className="flex items-center gap-2"> + <Badge variant="secondary" className="font-mono text-xs"> + {selectedPurchaseGroupCode.PURCHASE_GROUP_CODE} + </Badge> + <span className="text-sm">{selectedPurchaseGroupCode.DISPLAY_NAME}</span> + </div> + {selectedPurchaseGroupCode.user && ( + <div className="text-xs text-muted-foreground"> + 담당자: {selectedPurchaseGroupCode.user.name} ({selectedPurchaseGroupCode.user.email}) + </div> )} - </Button> - </PopoverTrigger> - <PopoverContent key={popoverContentId} className="w-[300px] p-0"> - <Command key={commandId}> - <CommandInput - key={`${commandId}-input`} - placeholder="담당자 검색..." - value={userSearchTerm} - onValueChange={setUserSearchTerm} - /> - <CommandList - key={`${commandId}-list`} - className="max-h-[300px]" - onWheel={(e) => { - e.stopPropagation(); // 이벤트 전파 차단 - const target = e.currentTarget; - target.scrollTop += e.deltaY; // 직접 스크롤 처리 - }} - > - <CommandEmpty key={`${commandId}-empty`}>담당자를 찾을 수 없습니다.</CommandEmpty> - <CommandGroup key={`${commandId}-group`}> - {userOptions.map((user, userIndex) => { - if (!userOptionIdsRef.current[user.id]) { - userOptionIdsRef.current[user.id] = - `user-${user.id}-${Date.now()}-${Math.random() - .toString(36) - .slice(2, 9)}` - } - const optionId = userOptionIdsRef.current[user.id] - - return ( - <CommandItem - key={`${optionId}-${userIndex}`} - onSelect={() => handleSelectUser(user)} - value={user.name} - className="truncate" - title={user.name} - > - <span className="truncate">{user.name}</span> - <Check - key={`${optionId}-check`} - className={cn( - "ml-auto h-4 w-4 flex-shrink-0", - selectedUser?.id === user.id ? "opacity-100" : "opacity-0" - )} - /> - </CommandItem> - ) - })} - </CommandGroup> - </CommandList> - </Command> - </PopoverContent> - </Popover> + {!selectedPurchaseGroupCode.user && ( + <div className="text-xs text-orange-600"> + ⚠️ 연결된 사용자가 없습니다 + </div> + )} + </div> + ) : ( + <span className="text-muted-foreground text-sm"> + 구매그룹코드를 선택하세요 + </span> + )} + </Button> </FormControl> {/* RFQ 코드 미리보기 */} {previewCode && ( @@ -779,6 +694,17 @@ export function CreateGeneralRfqDialog({ onSuccess }: CreateGeneralRfqDialogProp </Button> </DialogFooter> </DialogContent> + + {/* 구매그룹코드 선택 다이얼로그 */} + <PurchaseGroupCodeSingleSelector + open={selectorOpen} + onOpenChange={setSelectorOpen} + selectedCode={selectedPurchaseGroupCode} + onCodeSelect={handlePurchaseGroupCodeSelect} + title="견적 담당자 선택" + description="일반견적의 담당자를 구매그룹코드로 선택하세요" + showConfirmButtons={false} + /> </Dialog> ) }
\ No newline at end of file diff --git a/lib/rfq-last/table/rfq-assign-pic-dialog.tsx b/lib/rfq-last/table/rfq-assign-pic-dialog.tsx index 94dde779..9ca34ccd 100644 --- a/lib/rfq-last/table/rfq-assign-pic-dialog.tsx +++ b/lib/rfq-last/table/rfq-assign-pic-dialog.tsx @@ -10,36 +10,15 @@ import { DialogTitle, } from "@/components/ui/dialog"; import { Button } from "@/components/ui/button"; -import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList, -} from "@/components/ui/command"; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from "@/components/ui/popover"; -import { Check, ChevronsUpDown, Loader2, User, Users } from "lucide-react"; -import { cn } from "@/lib/utils"; +import { Loader2, Users } from "lucide-react"; import { toast } from "sonner"; -import { getPUsersForFilter } from "@/lib/rfq-last/service"; import { assignPicToRfqs } from "../service"; import { Badge } from "@/components/ui/badge"; import { Alert, AlertDescription } from "@/components/ui/alert"; - -interface User { - id: number; - name: string | null; - userCode: string | null; - deptName: string | null; - isAbsent: boolean | null; - isDeletedOnNonSap: boolean | null; - email?: string; -} +import { + PurchaseGroupCodeSingleSelector, + PurchaseGroupCodeWithUser +} from "@/components/common/selectors/purchase-group-code"; interface RfqAssignPicDialogProps { open: boolean; @@ -56,12 +35,9 @@ export function RfqAssignPicDialog({ selectedRfqCodes, onSuccess, }: RfqAssignPicDialogProps) { - const [users, setUsers] = React.useState<User[]>([] as User[]); - const [isLoadingUsers, setIsLoadingUsers] = React.useState(false); const [isAssigning, setIsAssigning] = React.useState(false); - const [selectedUser, setSelectedUser] = React.useState<User | null>(null); - const [userPopoverOpen, setUserPopoverOpen] = React.useState(false); - const [userSearchTerm, setUserSearchTerm] = React.useState(""); + const [selectedCode, setSelectedCode] = React.useState<PurchaseGroupCodeWithUser | undefined>(undefined); + const [selectorOpen, setSelectorOpen] = React.useState(false); // ITB만 필터링 (rfqCode가 "I"로 시작하는 것) const itbCodes = React.useMemo(() => { @@ -72,50 +48,36 @@ export function RfqAssignPicDialog({ return selectedRfqIds.filter((id, index) => selectedRfqCodes[index]?.startsWith("I")); }, [selectedRfqIds, selectedRfqCodes]); - // 유저 목록 로드 + // 다이얼로그 열릴 때 초기화 React.useEffect(() => { - const loadUsers = async () => { - setIsLoadingUsers(true); - try { - const userList = await getPUsersForFilter(); - setUsers(userList as User[]); - } catch (error) { - console.log("사용자 목록 로드 오류:", error); - toast.error("사용자 목록을 불러오는데 실패했습니다"); - } finally { - setIsLoadingUsers(false); - } - }; - if (open) { - loadUsers(); - // 다이얼로그 열릴 때 초기화 - setSelectedUser(null); - setUserSearchTerm(""); + setSelectedCode(undefined); } }, [open]); - // 유저 검색 - const filteredUsers = React.useMemo(() => { - if (!userSearchTerm || !userSearchTerm.trim()) return users; - - const searchTerm = userSearchTerm.trim(); - return users.filter( - (user) => - (user.name && user.name.includes(searchTerm)) || - (user.userCode && user.userCode.toLowerCase().includes(searchTerm.toLowerCase())) || - (user.deptName && user.deptName.includes(searchTerm)) - ); - }, [users, userSearchTerm]); - - const handleSelectUser = (user: User) => { - setSelectedUser(user); - setUserPopoverOpen(false); + const handleCodeSelect = (code: PurchaseGroupCodeWithUser) => { + setSelectedCode(code); + + // 유저 정보가 없는 경우 toast로 알림 + if (!code.user) { + toast.warning( + `해당 구매그룹코드(${code.PURCHASE_GROUP_CODE})의 사번 정보의 유저가 없습니다`, + { + description: `사번: ${code.EMPLOYEE_NUMBER}`, + duration: 5000, + } + ); + } }; const handleAssign = async () => { - if (!selectedUser) { - toast.error("담당자를 선택해주세요"); + if (!selectedCode) { + toast.error("구매그룹코드를 선택해주세요"); + return; + } + + if (!selectedCode.user) { + toast.error("선택한 구매그룹코드에 연결된 사용자가 없습니다"); return; } @@ -128,7 +90,7 @@ export function RfqAssignPicDialog({ try { const result = await assignPicToRfqs({ rfqIds: itbIds, - picUserId: selectedUser.id, + picUserId: selectedCode.user.id, }); if (result.success) { @@ -196,144 +158,63 @@ export function RfqAssignPicDialog({ )} </div> - {/* 담당자 선택 */} + {/* 구매 담당자 선택 (구매그룹코드) */} <div className="space-y-2"> - <label className="text-sm font-medium">구매 담당자</label> - <Popover open={userPopoverOpen} onOpenChange={setUserPopoverOpen}> - <PopoverTrigger asChild> - <Button - type="button" - variant="outline" - className="w-full justify-between h-10" - disabled={isLoadingUsers || itbCodes.length === 0} - > - {isLoadingUsers ? ( - <> - <span>담당자 로딩 중...</span> - <Loader2 className="ml-2 h-4 w-4 animate-spin" /> - </> - ) : ( - <> - <span className="flex items-center gap-2"> - <User className="h-4 w-4" /> - {selectedUser ? ( - <> - {selectedUser.name} - {selectedUser.userCode && ( - <span className="text-muted-foreground"> - ({selectedUser.userCode}) - </span> - )} - </> - ) : ( - <span className="text-muted-foreground"> - 구매 담당자를 선택하세요 - </span> - )} - </span> - <ChevronsUpDown className="h-4 w-4 opacity-50" /> - </> + <label className="text-sm font-medium">구매 담당자 (구매그룹코드)</label> + <Button + type="button" + variant="outline" + className="w-full justify-start h-auto min-h-[40px]" + disabled={itbCodes.length === 0} + onClick={() => setSelectorOpen(true)} + > + {selectedCode ? ( + <div className="flex flex-col items-start gap-1 w-full"> + <div className="flex items-center gap-2"> + <Badge variant="secondary" className="font-mono"> + {selectedCode.PURCHASE_GROUP_CODE} + </Badge> + <span>{selectedCode.DISPLAY_NAME}</span> + </div> + {selectedCode.user && ( + <div className="text-xs text-muted-foreground"> + 사용자: {selectedCode.user.name} ({selectedCode.user.email}) + </div> )} - </Button> - </PopoverTrigger> - <PopoverContent className="w-[460px] p-0"> - <Command shouldFilter={false}> - <CommandInput - placeholder="이름, 구매그룹코드 또는 부서로 검색..." - value={userSearchTerm} - onValueChange={setUserSearchTerm} - /> - <CommandList className="max-h-[300px]"> - <CommandEmpty>검색 결과가 없습니다</CommandEmpty> - <CommandGroup - className="overflow-y-auto" - onWheel={(e) => { - // 마우스 휠 스크롤이 제대로 작동하도록 이벤트 전파 허용 - e.stopPropagation(); - }} - > - {filteredUsers.map((user) => ( - <CommandItem - key={user.id} - value={`${user.name || ''} ${user.userCode || ''} ${user.deptName || ''}`} - onSelect={() => handleSelectUser(user)} - className="flex items-center justify-between" - > - <div className="flex flex-col gap-1"> - <div className="flex items-center gap-2"> - <User className="h-4 w-4" /> - <span>{user.name || '이름 없음'}</span> - {user.userCode && ( - <span className="text-muted-foreground text-sm"> - ({user.userCode}) - </span> - )} - {(user.isAbsent || user.isDeletedOnNonSap) && ( - <div className="flex gap-1"> - {user.isAbsent && ( - <Badge variant="outline" className="text-xs px-1 py-0"> - 휴직 - </Badge> - )} - {user.isDeletedOnNonSap && ( - <Badge variant="outline" className="text-xs px-1 py-0"> - 퇴직 - </Badge> - )} - </div> - )} - </div> - {user.deptName && ( - <span className="text-xs text-muted-foreground"> - {user.deptName} - </span> - )} - </div> - <Check - className={cn( - "h-4 w-4", - selectedUser?.id === user.id - ? "opacity-100" - : "opacity-0" - )} - /> - </CommandItem> - ))} - </CommandGroup> - </CommandList> - </Command> - </PopoverContent> - </Popover> - {selectedUser && ( - <div className="text-xs text-muted-foreground"> - <div className="flex items-center gap-2"> - <p> - 선택한 담당자: {selectedUser.name || '이름 없음'} - {selectedUser.userCode && ` (${selectedUser.userCode})`} - </p> - {(selectedUser.isAbsent || selectedUser.isDeletedOnNonSap) && ( - <div className="flex gap-1"> - {selectedUser.isAbsent && ( - <Badge variant="outline" className="text-xs px-1 py-0 border-orange-300 text-orange-700 bg-orange-50"> - 휴직 - </Badge> - )} - {selectedUser.isDeletedOnNonSap && ( - <Badge variant="outline" className="text-xs px-1 py-0 border-red-300 text-red-700 bg-red-50"> - 퇴직 - </Badge> - )} + {!selectedCode.user && ( + <div className="text-xs text-orange-600"> + ⚠️ 연결된 사용자가 없습니다 </div> )} </div> - {selectedUser.deptName && ( - <p>{selectedUser.deptName}</p> - )} - </div> + ) : ( + <span className="text-muted-foreground"> + 구매그룹코드를 선택하세요 + </span> + )} + </Button> + + {selectedCode && !selectedCode.user && ( + <Alert className="border-orange-200 bg-orange-50"> + <AlertDescription className="text-orange-800 text-xs"> + 선택한 구매그룹코드에 연결된 사용자가 없습니다. 다른 구매그룹코드를 선택해주세요. + </AlertDescription> + </Alert> )} </div> </div> + {/* 구매그룹코드 선택 다이얼로그 */} + <PurchaseGroupCodeSingleSelector + open={selectorOpen} + onOpenChange={setSelectorOpen} + selectedCode={selectedCode} + onCodeSelect={handleCodeSelect} + title="구매 담당자 선택" + description="ITB에 지정할 구매 담당자의 구매그룹코드를 선택하세요" + showConfirmButtons={false} + /> + <DialogFooter> <Button type="button" @@ -346,7 +227,7 @@ export function RfqAssignPicDialog({ <Button type="submit" onClick={handleAssign} - disabled={!selectedUser || itbCodes.length === 0 || isAssigning} + disabled={!selectedCode || !selectedCode.user || itbCodes.length === 0 || isAssigning} > {isAssigning ? ( <> @@ -361,4 +242,4 @@ export function RfqAssignPicDialog({ </DialogContent> </Dialog> ); -}
\ No newline at end of file +} diff --git a/lib/users/service.ts b/lib/users/service.ts index 96bc4719..bca28a16 100644 --- a/lib/users/service.ts +++ b/lib/users/service.ts @@ -1106,3 +1106,27 @@ export async function searchUsersForSelector( } } +/** + * 사번으로 사용자 조회 + */ +export async function getUserByEmployeeNumber(employeeNumber: string) { + try { + + if(!employeeNumber) { + throw new Error( + '사번으로 유저 정보 반환 함수(getUserByEmployeeNumber): 받은 사번이 없음.' + ); + } + + const user = await db + .select() + .from(users) + .where(eq(users.employeeNumber, employeeNumber)) + .limit(1) + + return user[0] + } + catch (error) { + console.error("사용자 조회 오류:", error) + } +}
\ No newline at end of file diff --git a/lib/vendor-document-list/plant/document-stages-service.ts b/lib/vendor-document-list/plant/document-stages-service.ts index 98eb6f8b..5f803104 100644 --- a/lib/vendor-document-list/plant/document-stages-service.ts +++ b/lib/vendor-document-list/plant/document-stages-service.ts @@ -976,6 +976,12 @@ export async function createDocument(data: CreateDocumentData) { } } catch (error) { console.error("문서 생성 실패:", error) + + // PostgreSQL unique constraint 위반 에러 처리 + if (error instanceof Error && error.message.includes('duplicate key value violates unique constraint "unique_project_vendor_doc"')) { + return { success: false, error: "해당 CPY Project Document Number에 대해 이미 문서가 존재합니다." } + } + return { success: false, error: "문서 생성 중 오류가 발생했습니다." } } } |