first commit
This commit is contained in:
230
resources/js/Components/PurchaseOrder/PurchaseOrderTable.tsx
Normal file
230
resources/js/Components/PurchaseOrder/PurchaseOrderTable.tsx
Normal file
@@ -0,0 +1,230 @@
|
||||
/**
|
||||
* 採購單列表表格
|
||||
*/
|
||||
|
||||
import { useState, useMemo } from "react";
|
||||
import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/Components/ui/table";
|
||||
import { PurchaseOrderActions } from "./PurchaseOrderActions";
|
||||
import PurchaseOrderStatusBadge from "./PurchaseOrderStatusBadge";
|
||||
import CopyButton from "@/Components/shared/CopyButton";
|
||||
import type { PurchaseOrder } from "@/types/purchase-order";
|
||||
import { formatCurrency, formatDateTime } from "@/utils/format";
|
||||
import { STATUS_CONFIG } from "@/constants/purchase-order";
|
||||
|
||||
interface PurchaseOrderTableProps {
|
||||
orders: PurchaseOrder[];
|
||||
}
|
||||
|
||||
type SortField = "poNumber" | "warehouse_name" | "supplierName" | "createdAt" | "totalAmount" | "status";
|
||||
type SortDirection = "asc" | "desc" | null;
|
||||
|
||||
export default function PurchaseOrderTable({
|
||||
orders,
|
||||
}: PurchaseOrderTableProps) {
|
||||
const [sortField, setSortField] = useState<SortField | null>(null);
|
||||
const [sortDirection, setSortDirection] = useState<SortDirection>(null);
|
||||
|
||||
// 處理排序
|
||||
const handleSort = (field: SortField) => {
|
||||
if (sortField === field) {
|
||||
if (sortDirection === "asc") {
|
||||
setSortDirection("desc");
|
||||
} else if (sortDirection === "desc") {
|
||||
setSortDirection(null);
|
||||
setSortField(null);
|
||||
} else {
|
||||
setSortDirection("asc");
|
||||
}
|
||||
} else {
|
||||
setSortField(field);
|
||||
setSortDirection("asc");
|
||||
}
|
||||
};
|
||||
|
||||
// 排序後的訂單列表
|
||||
const sortedOrders = useMemo(() => {
|
||||
if (!sortField || !sortDirection) {
|
||||
return orders;
|
||||
}
|
||||
|
||||
return [...orders].sort((a, b) => {
|
||||
let aValue: string | number;
|
||||
let bValue: string | number;
|
||||
|
||||
switch (sortField) {
|
||||
case "poNumber":
|
||||
aValue = a.poNumber;
|
||||
bValue = b.poNumber;
|
||||
break;
|
||||
case "warehouse_name":
|
||||
aValue = a.warehouse_name || "";
|
||||
bValue = b.warehouse_name || "";
|
||||
break;
|
||||
case "supplierName":
|
||||
aValue = a.supplierName;
|
||||
bValue = b.supplierName;
|
||||
break;
|
||||
case "createdAt":
|
||||
aValue = a.createdAt;
|
||||
bValue = b.createdAt;
|
||||
break;
|
||||
case "totalAmount":
|
||||
aValue = a.totalAmount;
|
||||
bValue = b.totalAmount;
|
||||
break;
|
||||
case "status":
|
||||
aValue = STATUS_CONFIG[a.status].label;
|
||||
bValue = STATUS_CONFIG[b.status].label;
|
||||
break;
|
||||
default:
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (typeof aValue === "string" && typeof bValue === "string") {
|
||||
return sortDirection === "asc"
|
||||
? aValue.localeCompare(bValue, "zh-TW")
|
||||
: bValue.localeCompare(aValue, "zh-TW");
|
||||
} else {
|
||||
return sortDirection === "asc"
|
||||
? (aValue as number) - (bValue as number)
|
||||
: (bValue as number) - (aValue as number);
|
||||
}
|
||||
});
|
||||
}, [orders, sortField, sortDirection]);
|
||||
|
||||
const SortIcon = ({ field }: { field: SortField }) => {
|
||||
if (sortField !== field) {
|
||||
return <ArrowUpDown className="h-4 w-4 text-muted-foreground" />;
|
||||
}
|
||||
if (sortDirection === "asc") {
|
||||
return <ArrowUp className="h-4 w-4 text-primary" />;
|
||||
}
|
||||
if (sortDirection === "desc") {
|
||||
return <ArrowDown className="h-4 w-4 text-primary" />;
|
||||
}
|
||||
return <ArrowUpDown className="h-4 w-4 text-muted-foreground" />;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-lg border shadow-sm overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50/50">
|
||||
<TableHead className="w-[50px]">#</TableHead>
|
||||
<TableHead className="w-[180px]">
|
||||
<button
|
||||
onClick={() => handleSort("poNumber")}
|
||||
className="flex items-center gap-2 hover:text-foreground transition-colors font-semibold"
|
||||
>
|
||||
採購單編號
|
||||
<SortIcon field="poNumber" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="w-[200px]">
|
||||
<button
|
||||
onClick={() => handleSort("warehouse_name")}
|
||||
className="flex items-center gap-2 hover:text-foreground transition-colors font-semibold"
|
||||
>
|
||||
預計入庫倉庫
|
||||
<SortIcon field="warehouse_name" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="w-[180px]">
|
||||
<button
|
||||
onClick={() => handleSort("supplierName")}
|
||||
className="flex items-center gap-2 hover:text-foreground transition-colors font-semibold"
|
||||
>
|
||||
供應商
|
||||
<SortIcon field="supplierName" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="w-[150px]">
|
||||
<button
|
||||
onClick={() => handleSort("createdAt")}
|
||||
className="flex items-center gap-2 hover:text-foreground transition-colors font-semibold"
|
||||
>
|
||||
建立日期
|
||||
<SortIcon field="createdAt" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="w-[140px] text-right">
|
||||
<button
|
||||
onClick={() => handleSort("totalAmount")}
|
||||
className="flex items-center gap-2 ml-auto hover:text-foreground transition-colors font-semibold"
|
||||
>
|
||||
總金額
|
||||
<SortIcon field="totalAmount" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="w-[120px]">
|
||||
<button
|
||||
onClick={() => handleSort("status")}
|
||||
className="flex items-center gap-2 hover:text-foreground transition-colors font-semibold"
|
||||
>
|
||||
狀態
|
||||
<SortIcon field="status" />
|
||||
</button>
|
||||
</TableHead>
|
||||
<TableHead className="text-right font-semibold">操作</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{sortedOrders.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} className="text-center text-muted-foreground py-12">
|
||||
尚無採購單
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
sortedOrders.map((order, index) => (
|
||||
<TableRow key={order.id}>
|
||||
<TableCell className="text-gray-500 font-medium text-center">
|
||||
{index + 1}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="font-mono text-sm font-medium">{order.poNumber}</span>
|
||||
<CopyButton text={order.poNumber} label="複製單號" />
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="space-y-0.5">
|
||||
<div className="text-sm font-medium text-gray-900">{order.warehouse_name}</div>
|
||||
<div className="text-xs text-gray-500">{order.createdBy}</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-sm text-gray-700">{order.supplierName}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-sm text-gray-500">{formatDateTime(order.createdAt)}</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<span className="font-semibold text-gray-900">{formatCurrency(order.totalAmount)}</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<PurchaseOrderStatusBadge status={order.status} />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<PurchaseOrderActions
|
||||
order={order}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user