diff options
Diffstat (limited to 'components/knox/approval/ApprovalList.tsx')
| -rw-r--r-- | components/knox/approval/ApprovalList.tsx | 263 |
1 files changed, 82 insertions, 181 deletions
diff --git a/components/knox/approval/ApprovalList.tsx b/components/knox/approval/ApprovalList.tsx index ec47bf04..c63098a8 100644 --- a/components/knox/approval/ApprovalList.tsx +++ b/components/knox/approval/ApprovalList.tsx @@ -6,11 +6,10 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com import { Badge } from '@/components/ui/badge'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { toast } from 'sonner'; -import { Loader2, List, Eye, RefreshCw, AlertCircle } from 'lucide-react'; +import { Loader2, List, Eye, RefreshCw, AlertCircle, Play, Pause, Clock } from 'lucide-react'; // API 함수 및 타입 -import { getSubmissionList, getApprovalHistory, getApprovalLogsAction, syncApprovalStatusAction } from '@/lib/knox-api/approval/approval'; -import type { SubmissionListResponse, ApprovalHistoryResponse } from '@/lib/knox-api/approval/approval'; +import { getApprovalLogsAction, syncApprovalStatusAction } from '@/lib/knox-api/approval/approval'; import { formatDate } from '@/lib/utils'; // 상태 텍스트 매핑 (mock util 대체) @@ -31,13 +30,7 @@ const getStatusText = (status: string) => { }; interface ApprovalListProps { - type?: 'submission' | 'history' | 'database'; onItemClick?: (apInfId: string) => void; - userParams?: { - epId?: string; - userId?: string; - emailAddress?: string; - }; } type ListItem = { @@ -53,51 +46,28 @@ type ListItem = { }; export default function ApprovalList({ - type = 'database', onItemClick, - userParams }: ApprovalListProps) { const [listData, setListData] = useState<ListItem[]>([]); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState<string | null>(null); const [isSyncing, setIsSyncing] = useState(false); + const [autoSync, setAutoSync] = useState(false); + const [lastSyncTime, setLastSyncTime] = useState<Date | null>(null); const fetchData = useCallback(async () => { setIsLoading(true); setError(null); try { - if (type === 'database') { - // 새로운 데이터베이스 조회 방식 - const response = await getApprovalLogsAction(); - - if (response.success) { - setListData(response.data as unknown as ListItem[]); - } else { - setError(response.message); - toast.error(response.message); - } + // 데이터베이스에서 결재 로그 조회 + const response = await getApprovalLogsAction(); + + if (response.success) { + setListData(response.data as unknown as ListItem[]); } else { - // 기존 Knox API 방식 - let response: SubmissionListResponse | ApprovalHistoryResponse; - - if (type === 'submission') { - if (!userParams || (!userParams.epId && !userParams.userId && !userParams.emailAddress)) { - setError('사용자 정보가 필요합니다. (epId, userId, 또는 emailAddress)'); - toast.error('사용자 정보가 필요합니다.'); - return; - } - response = await getSubmissionList(userParams); - } else { - response = await getApprovalHistory(); - } - - if (response.result === 'success') { - setListData(response.data as unknown as ListItem[]); - } else { - setError('목록을 가져오는데 실패했습니다.'); - toast.error('목록을 가져오는데 실패했습니다.'); - } + setError(response.message); + toast.error(response.message); } } catch (err) { console.error('목록 조회 오류:', err); @@ -106,7 +76,7 @@ export default function ApprovalList({ } finally { setIsLoading(false); } - }, [type, userParams]); + }, []); const getStatusBadgeVariant = (status: string) => { switch (status) { @@ -123,123 +93,114 @@ export default function ApprovalList({ } }; - const getSecurityTypeText = (type: string) => { - const typeMap: Record<string, string> = { - 'PERSONAL': '개인', - 'CONFIDENTIAL': '기밀', - 'CONFIDENTIAL_STRICT': '극기밀' - }; - return typeMap[type] || type; - }; - - const getSecurityTypeBadgeVariant = (type: string) => { - switch (type) { - case 'PERSONAL': - return 'default'; - case 'CONFIDENTIAL': - return 'secondary'; - case 'CONFIDENTIAL_STRICT': - return 'destructive'; - default: - return 'outline'; - } - }; - - const getActionTypeText = (actionType: string) => { - const actionMap: Record<string, string> = { - 'SUBMIT': '상신', - 'APPROVE': '승인', - 'REJECT': '반려', - 'CANCEL': '취소', - 'DELEGATE': '위임' - }; - return actionMap[actionType] || actionType; - }; - const handleItemClick = (apInfId: string) => { onItemClick?.(apInfId); }; // 결재 상황 동기화 함수 - const handleSync = async () => { - if (type !== 'database') { - toast.error('데이터베이스 모드에서만 동기화가 가능합니다.'); - return; - } - + const handleSync = useCallback(async (silent = false) => { setIsSyncing(true); try { const result = await syncApprovalStatusAction(); if (result.success) { - toast.success(result.message); + if (!silent) toast.success(result.message); + setLastSyncTime(new Date()); // 동기화 후 데이터 새로고침 await fetchData(); } else { - toast.error(result.message); + if (!silent) toast.error(result.message); } } catch (error) { console.error('동기화 오류:', error); - toast.error('동기화 중 오류가 발생했습니다.'); + if (!silent) toast.error('동기화 중 오류가 발생했습니다.'); } finally { setIsSyncing(false); } - }; + }, [fetchData]); // 컴포넌트 마운트 시 데이터 로드 useEffect(() => { fetchData(); }, [fetchData]); + // 자동 동기화 Polling 효과 + useEffect(() => { + if (!autoSync) { + return; + } + + // 30초마다 자동 동기화 (조정 가능) + const intervalId = setInterval(() => { + handleSync(true); // silent 모드로 실행 + }, 30000); + + return () => clearInterval(intervalId); + }, [autoSync, handleSync]); + return ( <Card className="w-full max-w-5xl"> <CardHeader> <CardTitle className="flex items-center gap-2"> <List className="w-5 h-5" /> - {type === 'database' - ? '결재 로그 (데이터베이스)' - : type === 'submission' - ? '상신함' - : '결재 이력' - } + 결재 이력 </CardTitle> <CardDescription> - {type === 'database' - ? '데이터베이스에 저장된 결재 로그를 확인합니다.' - : type === 'submission' - ? '상신한 결재 목록을 확인합니다.' - : '결재 처리 이력을 확인합니다.' - } + 데이터베이스에 저장된 결재 로그를 확인하고 상태를 동기화합니다. </CardDescription> </CardHeader> <CardContent className="space-y-4"> {/* 제어 버튼들 */} <div className="flex justify-between items-center"> - <div className="text-sm text-gray-500"> - 총 {listData.length}건 + <div className="flex items-center gap-4"> + <div className="text-sm text-gray-500"> + 총 {listData.length}건 + </div> + {lastSyncTime && ( + <div className="text-xs text-gray-400 flex items-center gap-1"> + <Clock className="w-3 h-3" /> + 마지막 동기화: {formatDate(lastSyncTime.toISOString(), "kr")} + </div> + )} </div> <div className="flex gap-2"> - {type === 'database' && ( - <Button - onClick={handleSync} - disabled={isSyncing || isLoading} - variant="secondary" - size="sm" - > - {isSyncing ? ( - <> - <Loader2 className="w-4 h-4 mr-2 animate-spin" /> - 동기화 중... - </> - ) : ( - <> - <RefreshCw className="w-4 h-4 mr-2" /> - 상태 동기화 - </> - )} - </Button> - )} + <Button + onClick={() => setAutoSync(!autoSync)} + disabled={isSyncing || isLoading} + variant={autoSync ? "default" : "outline"} + size="sm" + > + {autoSync ? ( + <> + <Pause className="w-4 h-4 mr-2" /> + 자동 동기화 중 + </> + ) : ( + <> + <Play className="w-4 h-4 mr-2" /> + 자동 동기화 + </> + )} + </Button> + <Button + onClick={() => handleSync(false)} + disabled={isSyncing || isLoading} + variant="secondary" + size="sm" + > + {isSyncing ? ( + <> + <Loader2 className="w-4 h-4 mr-2 animate-spin" /> + 동기화 중... + </> + ) : ( + <> + <RefreshCw className="w-4 h-4 mr-2" /> + 상태 동기화 + </> + )} + </Button> <Button onClick={fetchData} disabled={isLoading || isSyncing} @@ -279,29 +240,15 @@ export default function ApprovalList({ <TableRow> <TableHead>결재 ID</TableHead> <TableHead>제목</TableHead> - <TableHead>상신일시</TableHead> <TableHead>상태</TableHead> - {type === 'submission' && ( - <> - <TableHead>긴급</TableHead> - <TableHead>보안등급</TableHead> - </> - )} - {type === 'history' && ( - <> - <TableHead>처리일시</TableHead> - <TableHead>처리자</TableHead> - <TableHead>처리유형</TableHead> - </> - )} <TableHead>작업</TableHead> </TableRow> </TableHeader> <TableBody> {listData.length === 0 ? ( <TableRow> - <TableCell - colSpan={type === 'submission' ? 7 : 8} + <TableCell + colSpan={4} className="text-center py-8 text-gray-500" > {isLoading ? '데이터를 불러오는 중...' : '데이터가 없습니다.'} @@ -317,56 +264,10 @@ export default function ApprovalList({ {item.subject} </TableCell> <TableCell> - {formatDate(item.sbmDt, "kr")} - </TableCell> - <TableCell> <Badge variant={getStatusBadgeVariant(item.status)}> {getStatusText(item.status)} </Badge> </TableCell> - - {type === 'submission' && ( - <> - <TableCell> - {item.urgYn === 'Y' ? ( - <Badge variant="destructive" className="text-xs"> - 긴급 - </Badge> - ) : ( - <Badge variant="outline" className="text-xs"> - 일반 - </Badge> - )} - </TableCell> - <TableCell> - <Badge - variant={getSecurityTypeBadgeVariant(item.docSecuType || 'PERSONAL')} - className="text-xs" - > - {getSecurityTypeText(item.docSecuType || 'PERSONAL')} - </Badge> - </TableCell> - </> - )} - - {type === 'history' && ( - <> - <TableCell> - {item.actionDt ? formatDate(item.actionDt, "kr") : '-'} - </TableCell> - <TableCell> - {item.userId || '-'} - </TableCell> - <TableCell> - {item.actionType ? ( - <Badge variant="outline" className="text-xs"> - {getActionTypeText(item.actionType)} - </Badge> - ) : '-'} - </TableCell> - </> - )} - <TableCell> <Button variant="ghost" |