feat: 優化操作紀錄顯示與邏輯 (恢復描述欄位、支援來源標記、改進快照)
This commit is contained in:
@@ -1,12 +1,12 @@
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/Components/ui/dialog";
|
||||
import { Badge } from "@/Components/ui/badge";
|
||||
import { ScrollArea } from "@/Components/ui/scroll-area";
|
||||
import { User, Clock, Package, Activity as ActivityIcon } from "lucide-react";
|
||||
|
||||
interface Activity {
|
||||
id: number;
|
||||
@@ -27,6 +27,43 @@ interface Props {
|
||||
activity: Activity | null;
|
||||
}
|
||||
|
||||
// Field translation map
|
||||
const fieldLabels: Record<string, string> = {
|
||||
name: '名稱',
|
||||
code: '代碼',
|
||||
description: '描述',
|
||||
price: '價格',
|
||||
cost: '成本',
|
||||
stock: '庫存',
|
||||
category_id: '分類',
|
||||
unit_id: '單位',
|
||||
is_active: '啟用狀態',
|
||||
conversion_rate: '換算率',
|
||||
specification: '規格',
|
||||
brand: '品牌',
|
||||
base_unit_id: '基本單位',
|
||||
large_unit_id: '大單位',
|
||||
purchase_unit_id: '採購單位',
|
||||
email: 'Email',
|
||||
password: '密碼',
|
||||
phone: '電話',
|
||||
address: '地址',
|
||||
role_id: '角色',
|
||||
// Snapshot fields
|
||||
category_name: '分類名稱',
|
||||
base_unit_name: '基本單位名稱',
|
||||
large_unit_name: '大單位名稱',
|
||||
purchase_unit_name: '採購單位名稱',
|
||||
// Warehouse & Inventory fields
|
||||
warehouse_name: '倉庫名稱',
|
||||
product_name: '商品名稱',
|
||||
warehouse_id: '倉庫',
|
||||
product_id: '商品',
|
||||
quantity: '數量',
|
||||
safety_stock: '安全庫存',
|
||||
location: '儲位',
|
||||
};
|
||||
|
||||
export default function ActivityDetailDialog({ open, onOpenChange, activity }: Props) {
|
||||
if (!activity) return null;
|
||||
|
||||
@@ -41,12 +78,12 @@ export default function ActivityDetailDialog({ open, onOpenChange, activity }: P
|
||||
!['created_at', 'updated_at', 'deleted_at', 'id'].includes(key)
|
||||
);
|
||||
|
||||
const getEventBadgeColor = (event: string) => {
|
||||
const getEventBadgeClass = (event: string) => {
|
||||
switch (event) {
|
||||
case 'created': return 'bg-green-500';
|
||||
case 'updated': return 'bg-blue-500';
|
||||
case 'deleted': return 'bg-red-500';
|
||||
default: return 'bg-gray-500';
|
||||
case 'created': return 'bg-green-100 text-green-700 hover:bg-green-200 border-green-200';
|
||||
case 'updated': return 'bg-blue-100 text-blue-700 hover:bg-blue-200 border-blue-200';
|
||||
case 'deleted': return 'bg-red-100 text-red-700 hover:bg-red-200 border-red-200';
|
||||
default: return 'bg-gray-100 text-gray-700 hover:bg-gray-200 border-gray-200';
|
||||
}
|
||||
};
|
||||
|
||||
@@ -59,73 +96,133 @@ export default function ActivityDetailDialog({ open, onOpenChange, activity }: P
|
||||
}
|
||||
};
|
||||
|
||||
const formatValue = (value: any) => {
|
||||
const formatValue = (key: string, value: any) => {
|
||||
if (value === null || value === undefined) return <span className="text-gray-400">-</span>;
|
||||
if (typeof value === 'boolean') return value ? '是' : '否';
|
||||
|
||||
// Special handling for boolean values based on key
|
||||
if (typeof value === 'boolean') {
|
||||
if (key === 'is_active') return value ? '啟用' : '停用';
|
||||
return value ? '是' : '否';
|
||||
}
|
||||
|
||||
if (typeof value === 'object') return JSON.stringify(value);
|
||||
return String(value);
|
||||
};
|
||||
|
||||
const getFieldName = (key: string) => {
|
||||
return fieldLabels[key] || key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, ' ');
|
||||
};
|
||||
|
||||
// Helper to check if a key is a snapshot name field
|
||||
const isSnapshotField = (key: string) => {
|
||||
return ['category_name', 'base_unit_name', 'large_unit_name', 'purchase_unit_name', 'warehouse_name', 'product_name'].includes(key);
|
||||
};
|
||||
|
||||
// Helper to get formatted value (merging ID and Name if available)
|
||||
const getFormattedValue = (key: string, value: any, allData: Record<string, any>) => {
|
||||
// If it's an ID field, check if we have a corresponding name snapshot
|
||||
if (key.endsWith('_id')) {
|
||||
const nameKey = key.replace('_id', '_name');
|
||||
const nameValue = allData[nameKey];
|
||||
if (nameValue) {
|
||||
return `${nameValue}`;
|
||||
}
|
||||
}
|
||||
return formatValue(key, value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
操作詳情
|
||||
<Badge className={getEventBadgeColor(activity.event)}>
|
||||
<DialogHeader className="border-b pb-4">
|
||||
<DialogTitle className="flex items-center gap-3">
|
||||
<span className="text-xl font-bold text-gray-900">操作詳情</span>
|
||||
<Badge variant="outline" className={`text-sm px-3 py-1 ${getEventBadgeClass(activity.event)}`}>
|
||||
{getEventLabel(activity.event)}
|
||||
</Badge>
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{activity.created_at} 由 {activity.causer} 執行的操作
|
||||
</DialogDescription>
|
||||
|
||||
{/* Modern Metadata Strip */}
|
||||
<div className="flex flex-wrap items-center gap-6 pt-4 text-sm text-gray-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<User className="w-4 h-4 text-gray-400" />
|
||||
<span className="font-medium text-gray-700">{activity.causer}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-4 h-4 text-gray-400" />
|
||||
<span>{activity.created_at}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Package className="w-4 h-4 text-gray-400" />
|
||||
<span>{activity.subject_type}</span>
|
||||
</div>
|
||||
{/* Only show 'description' if it differs from event name (unlikely but safe) */}
|
||||
{activity.description !== getEventLabel(activity.event) &&
|
||||
activity.description !== 'created' && activity.description !== 'updated' && (
|
||||
<div className="flex items-center gap-2">
|
||||
<ActivityIcon className="w-4 h-4 text-gray-400" />
|
||||
<span>{activity.description}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="mt-4 space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<span className="text-gray-500">操作對象：</span>
|
||||
<span className="font-medium ml-2">{activity.subject_type}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">描述：</span>
|
||||
<span className="font-medium ml-2">{activity.description}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="py-4">
|
||||
{activity.event === 'created' ? (
|
||||
<div className="bg-gray-50 p-4 rounded-md text-center text-gray-500 text-sm">
|
||||
已新增資料 (初始建立)
|
||||
<div className="border rounded-md overflow-hidden bg-white">
|
||||
<div className="grid grid-cols-2 bg-gray-50/80 px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider border-b">
|
||||
<div>欄位</div>
|
||||
<div>初始內容</div>
|
||||
</div>
|
||||
<ScrollArea className="h-[300px]">
|
||||
<div className="divide-y divide-gray-100">
|
||||
{filteredKeys
|
||||
.filter(key => attributes[key] !== null && attributes[key] !== '' && !isSnapshotField(key))
|
||||
.map((key) => (
|
||||
<div key={key} className="grid grid-cols-2 px-4 py-3 text-sm hover:bg-gray-50/50 transition-colors">
|
||||
<div className="font-medium text-gray-700">{getFieldName(key)}</div>
|
||||
<div className="text-gray-900 font-medium">
|
||||
{getFormattedValue(key, attributes[key], attributes)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{filteredKeys.filter(key => attributes[key] !== null && attributes[key] !== '' && !isSnapshotField(key)).length === 0 && (
|
||||
<div className="p-8 text-center text-gray-500 text-sm">
|
||||
無初始資料
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
) : (
|
||||
<div className="border rounded-md">
|
||||
<div className="grid grid-cols-3 bg-gray-50 p-2 text-sm font-medium text-gray-500">
|
||||
<div className="border rounded-md overflow-hidden bg-white">
|
||||
<div className="grid grid-cols-3 bg-gray-50/80 px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider border-b">
|
||||
<div>欄位</div>
|
||||
<div>異動前</div>
|
||||
<div>異動後</div>
|
||||
</div>
|
||||
<ScrollArea className="h-[300px]">
|
||||
{filteredKeys.length > 0 ? (
|
||||
<div className="divide-y">
|
||||
{filteredKeys.map((key) => {
|
||||
const oldValue = old[key];
|
||||
const newValue = attributes[key];
|
||||
// Ensure we catch changes even if one value is missing/null
|
||||
// For deleted events, newValue might be empty, so we just show oldValue
|
||||
const isChanged = JSON.stringify(oldValue) !== JSON.stringify(newValue);
|
||||
{filteredKeys.some(key => !isSnapshotField(key)) ? (
|
||||
<div className="divide-y divide-gray-100">
|
||||
{filteredKeys
|
||||
.filter(key => !isSnapshotField(key))
|
||||
.map((key) => {
|
||||
const oldValue = old[key];
|
||||
const newValue = attributes[key];
|
||||
const isChanged = JSON.stringify(oldValue) !== JSON.stringify(newValue);
|
||||
|
||||
return (
|
||||
<div key={key} className={`grid grid-cols-3 p-2 text-sm ${isChanged ? 'bg-yellow-50/30' : ''}`}>
|
||||
<div className="font-medium text-gray-700">{key}</div>
|
||||
<div className="text-gray-600 break-words pr-2">
|
||||
{formatValue(oldValue)}
|
||||
return (
|
||||
<div key={key} className={`grid grid-cols-3 px-4 py-3 text-sm transition-colors ${isChanged ? 'bg-amber-50/50' : 'hover:bg-gray-50/50'}`}>
|
||||
<div className="font-medium text-gray-700 flex items-center">{getFieldName(key)}</div>
|
||||
<div className="text-gray-500 break-words pr-4">
|
||||
{getFormattedValue(key, oldValue, old)}
|
||||
</div>
|
||||
<div className="text-gray-900 font-medium break-words">
|
||||
{activity.event === 'deleted' ? '-' : getFormattedValue(key, newValue, attributes)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-gray-900 break-words font-medium">
|
||||
{activity.event === 'deleted' ? '-' : formatValue(newValue)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="p-8 text-center text-gray-500 text-sm">
|
||||
|
||||
Reference in New Issue
Block a user