chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

배치목록 카드형으로 변경

Browse Source
This commit is contained in:
hjjeong
2025-09-30 10:30:26 +09:00
parent 0b787b4c4c
commit 7fc3111c4d
2 changed files with 203 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
frontend/components/admin/BatchCard.tsx Normal file
View File

@@ -0,0 +1,185 @@
"use client";
import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
Play,
Pause,
Edit,
Trash2,
RefreshCw,
Clock,
Database,
ArrowRight,
Globe,
Calendar,
Activity,
Settings
} from "lucide-react";
import { BatchConfig } from "@/lib/api/batch";
interface BatchCardProps {
batch: BatchConfig;
executingBatch: number | null;
onExecute: (batchId: number) => void;
onToggleStatus: (batchId: number, currentStatus: string) => void;
onEdit: (batchId: number) => void;
onDelete: (batchId: number, batchName: string) => void;
getMappingSummary: (mappings: any[]) => string;
}
export default function BatchCard({
batch,
executingBatch,
onExecute,
onToggleStatus,
onEdit,
onDelete,
getMappingSummary
}: BatchCardProps) {
// 상태에 따른 색상 및 스타일 결정
const getStatusColor = () => {
if (executingBatch === batch.id) return "bg-blue-50 border-blue-200";
if (batch.is_active === 'Y') return "bg-green-50 border-green-200";
return "bg-gray-50 border-gray-200";
};
const getStatusBadge = () => {
if (executingBatch === batch.id) {
return <Badge variant="outline" className="bg-blue-100 text-blue-700 border-blue-300 text-xs px-1.5 py-0.5 h-5">실행 중</Badge>;
}
return (
<Badge variant={batch.is_active === 'Y' ? 'default' : 'secondary'} className="text-xs px-1.5 py-0.5 h-5">
{batch.is_active === 'Y' ? '활성' : '비활성'}
</Badge>
);
};
return (
<Card className={`transition-all duration-200 hover:shadow-md ${getStatusColor()} h-fit`}>
<CardContent className="p-3">
{/* 헤더 섹션 */}
<div className="mb-1.5">
<div className="flex items-center justify-between mb-1">
<div className="flex items-center space-x-1 min-w-0 flex-1">
<Settings className="h-2.5 w-2.5 text-gray-600 flex-shrink-0" />
<h3 className="text-xs font-medium text-gray-900 truncate">{batch.batch_name}</h3>
</div>
{getStatusBadge()}
</div>
<p className="text-xs text-gray-500 line-clamp-1 leading-tight h-3 flex items-start">
{batch.description || '\u00A0'}
</p>
</div>
{/* 정보 섹션 */}
<div className="space-y-1 mb-2">
{/* 스케줄 정보 */}
<div className="flex items-center space-x-1 text-xs">
<Clock className="h-2.5 w-2.5 text-blue-600" />
<span className="text-gray-600 truncate text-xs">{batch.cron_schedule}</span>
</div>
{/* 생성일 정보 */}
<div className="flex items-center space-x-1 text-xs">
<Calendar className="h-2.5 w-2.5 text-green-600" />
<span className="text-gray-600 text-xs">
{new Date(batch.created_date).toLocaleDateString('ko-KR')}
</span>
</div>
</div>
{/* 매핑 정보 섹션 */}
{batch.batch_mappings && batch.batch_mappings.length > 0 && (
<div className="mb-2 p-1.5 bg-white rounded border border-gray-100">
<div className="flex items-center space-x-1 mb-1">
<Database className="h-2.5 w-2.5 text-purple-600" />
<span className="text-xs font-medium text-gray-700">
매핑 ({batch.batch_mappings.length})
</span>
</div>
<div className="text-xs text-gray-600 line-clamp-1">
{getMappingSummary(batch.batch_mappings)}
</div>
</div>
)}
{/* 액션 버튼 섹션 */}
<div className="grid grid-cols-2 gap-1 pt-2 border-t border-gray-100">
{/* 실행 버튼 */}
<Button
variant="outline"
size="sm"
onClick={() => onExecute(batch.id)}
disabled={executingBatch === batch.id}
className="flex items-center justify-center space-x-1 bg-blue-50 hover:bg-blue-100 text-blue-700 border-blue-200 text-xs h-6"
>
{executingBatch === batch.id ? (
<RefreshCw className="h-2.5 w-2.5 animate-spin" />
) : (
<Play className="h-2.5 w-2.5" />
)}
<span>실행</span>
</Button>
{/* 활성화/비활성화 버튼 */}
<Button
variant="outline"
size="sm"
onClick={() => onToggleStatus(batch.id, batch.is_active)}
className={`flex items-center justify-center space-x-1 text-xs h-6 ${
batch.is_active === 'Y'
? 'bg-orange-50 hover:bg-orange-100 text-orange-700 border-orange-200'
: 'bg-green-50 hover:bg-green-100 text-green-700 border-green-200'
}`}
>
{batch.is_active === 'Y' ? (
<Pause className="h-2.5 w-2.5" />
) : (
<Play className="h-2.5 w-2.5" />
)}
<span>{batch.is_active === 'Y' ? '비활성' : '활성'}</span>
</Button>
{/* 수정 버튼 */}
<Button
variant="outline"
size="sm"
onClick={() => onEdit(batch.id)}
className="flex items-center justify-center space-x-1 bg-gray-50 hover:bg-gray-100 text-gray-700 border-gray-200 text-xs h-6"
>
<Edit className="h-2.5 w-2.5" />
<span>수정</span>
</Button>
{/* 삭제 버튼 */}
<Button
variant="outline"
size="sm"
onClick={() => onDelete(batch.id, batch.batch_name)}
className="flex items-center justify-center space-x-1 bg-red-50 hover:bg-red-100 text-red-700 border-red-200 text-xs h-6"
>
<Trash2 className="h-2.5 w-2.5" />
<span>삭제</span>
</Button>
</div>
{/* 실행 중일 때 프로그레스 표시 */}
{executingBatch === batch.id && (
<div className="mt-2 pt-2 border-t border-blue-100">
<div className="flex items-center space-x-1 text-xs text-blue-600">
<Activity className="h-3 w-3 animate-pulse" />
<span>실행 중...</span>
</div>
<div className="mt-1 w-full bg-blue-100 rounded-full h-1">
<div className="bg-blue-600 h-1 rounded-full animate-pulse" style={{ width: '45%' }}></div>
</div>
</div>
)}
</CardContent>
</Card>
);
}