feat: 優化操作紀錄顯示與邏輯 (恢復描述欄位、支援來源標記、改進快照)
This commit is contained in:
@@ -14,7 +14,6 @@ import { Badge } from "@/Components/ui/badge";
|
||||
import Pagination from '@/Components/shared/Pagination';
|
||||
import { SearchableSelect } from "@/Components/ui/searchable-select";
|
||||
import { FileText, Eye, ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import { Button } from '@/Components/ui/button';
|
||||
import ActivityDetailDialog from './ActivityDetailDialog';
|
||||
|
||||
@@ -55,12 +54,12 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
|
||||
const [selectedActivity, setSelectedActivity] = useState<Activity | null>(null);
|
||||
const [detailOpen, setDetailOpen] = useState(false);
|
||||
|
||||
const getEventBadgeColor = (event: string) => {
|
||||
const getEventBadgeClass = (event: string) => {
|
||||
switch (event) {
|
||||
case 'created': return 'bg-green-500 hover:bg-green-600';
|
||||
case 'updated': return 'bg-blue-500 hover:bg-blue-600';
|
||||
case 'deleted': return 'bg-red-500 hover:bg-red-600';
|
||||
default: return 'bg-gray-500 hover:bg-gray-600';
|
||||
case 'created': return 'bg-green-50 text-green-700 border-green-200 hover:bg-green-100';
|
||||
case 'updated': return 'bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100';
|
||||
case 'deleted': return 'bg-red-50 text-red-700 border-red-200 hover:bg-red-100';
|
||||
default: return 'bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100';
|
||||
}
|
||||
};
|
||||
|
||||
@@ -73,13 +72,69 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
const getDescription = (activity: Activity) => {
|
||||
const props = activity.properties || {};
|
||||
const attrs = props.attributes || {};
|
||||
const old = props.old || {};
|
||||
|
||||
// Try to find a name in attributes or old values
|
||||
// Priority: specific name fields > generic name > code > ID
|
||||
const nameParams = ['product_name', 'warehouse_name', 'category_name', 'base_unit_name', 'name', 'code', 'title'];
|
||||
let subjectName = '';
|
||||
|
||||
// Special handling for Inventory: show "Warehouse - Product"
|
||||
if (attrs.warehouse_name && attrs.product_name) {
|
||||
subjectName = `${attrs.warehouse_name} - ${attrs.product_name}`;
|
||||
} else if (old.warehouse_name && old.product_name) {
|
||||
subjectName = `${old.warehouse_name} - ${old.product_name}`;
|
||||
} else {
|
||||
// Default fallback
|
||||
for (const param of nameParams) {
|
||||
if (attrs[param]) {
|
||||
subjectName = attrs[param];
|
||||
break;
|
||||
}
|
||||
if (old[param]) {
|
||||
subjectName = old[param];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If no name found, try ID but format it nicely if possible, or just don't show it if it's redundant with subject_type
|
||||
if (!subjectName && (attrs.id || old.id)) {
|
||||
subjectName = `#${attrs.id || old.id}`;
|
||||
}
|
||||
|
||||
// Combine parts: [Causer] [Action] [Name] [Subject]
|
||||
// Example: Admin 新增 可樂 商品
|
||||
// Example: Admin 更新 台北倉 - 可樂 庫存
|
||||
return (
|
||||
<span className="flex items-center gap-1.5 flex-wrap">
|
||||
<span className="font-medium text-gray-900">{activity.causer}</span>
|
||||
<span className="text-gray-500">{getEventLabel(activity.event)}</span>
|
||||
{subjectName && (
|
||||
<span className="font-medium text-primary-600 bg-primary-50 px-1.5 py-0.5 rounded text-xs">
|
||||
{subjectName}
|
||||
</span>
|
||||
)}
|
||||
<span className="text-gray-700">{activity.subject_type}</span>
|
||||
|
||||
{/* Display reason/source if available (e.g., from Replenishment) */}
|
||||
{(attrs._reason || old._reason) && (
|
||||
<span className="text-gray-500 text-xs">
|
||||
(來自 {attrs._reason || old._reason})
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const handleViewDetail = (activity: Activity) => {
|
||||
setSelectedActivity(activity);
|
||||
setDetailOpen(true);
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handlePerPageChange = (value: string) => {
|
||||
setPerPage(value);
|
||||
router.get(
|
||||
@@ -155,9 +210,9 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="w-[150px]">操作人員</TableHead>
|
||||
<TableHead className="w-[100px] text-center">動作</TableHead>
|
||||
<TableHead className="w-[150px]">對象</TableHead>
|
||||
<TableHead>描述</TableHead>
|
||||
<TableHead className="w-[100px] text-center">動作</TableHead>
|
||||
<TableHead>對象</TableHead>
|
||||
<TableHead className="w-[100px] text-center">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
@@ -174,24 +229,19 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
|
||||
<TableCell>
|
||||
<span className="font-medium text-gray-900">{activity.causer}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{getDescription(activity)}
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<Badge className={getEventBadgeColor(activity.event)}>
|
||||
<Badge variant="outline" className={getEventBadgeClass(activity.event)}>
|
||||
{getEventLabel(activity.event)}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant="outline" className="bg-slate-50">
|
||||
<Badge variant="outline" className="bg-slate-50 text-slate-600 border-slate-200">
|
||||
{activity.subject_type}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-gray-600" title={activity.description}>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{activity.causer}</span>
|
||||
<span className="text-gray-400">執行了</span>
|
||||
<span className="font-medium text-gray-700">{activity.description}</span>
|
||||
<span className="text-gray-400">動作</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
@@ -207,7 +257,7 @@ export default function ActivityLogIndex({ activities, filters }: Props) {
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center py-8 text-gray-500">
|
||||
<TableCell colSpan={6} className="text-center py-8 text-gray-500">
|
||||
尚無操作紀錄
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
Reference in New Issue
Block a user