g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update order-table.tsx

Browse Source
This commit is contained in:
NotII
2025-03-20 16:58:33 +01:00
parent 3d9e46e4d3
commit 26b036d8c6
1 changed files with 62 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
components/tables/order-table.tsx
View File

@@ -129,6 +129,8 @@ export default function OrderTable() {
const queryParams = new URLSearchParams({
page: currentPage.toString(),
limit: itemsPerPage.toString(),
sortBy: sortConfig.column,
sortOrder: sortConfig.direction,
...(statusFilter !== "all" && { status: statusFilter }),
});
@@ -143,7 +145,7 @@ export default function OrderTable() {
} finally {
setLoading(false);
}
}, [currentPage, statusFilter, itemsPerPage]);
}, [currentPage, statusFilter, itemsPerPage, sortConfig]);
useEffect(() => {
fetchOrders();
@@ -165,38 +167,24 @@ export default function OrderTable() {
};
// Derived data calculations
const filteredOrders = orders.filter(
(order) => statusFilter === "all" || order.status === statusFilter
);
const filteredOrders = orders;
const sortedOrders = [...filteredOrders].sort((a, b) => {
const aValue = a[sortConfig.column];
const bValue = b[sortConfig.column];
if (typeof aValue === "string" && typeof bValue === "string") {
return sortConfig.direction === "asc"
? aValue.localeCompare(bValue)
: bValue.localeCompare(aValue);
}
if (typeof aValue === "number" && typeof bValue === "number") {
return sortConfig.direction === "asc" ? aValue - bValue : bValue - aValue;
}
return 0;
});
const paginatedOrders = sortedOrders.slice(
(currentPage - 1) * itemsPerPage,
currentPage * itemsPerPage
);
// Use orders directly as they're already sorted by the server
const sortedOrders = filteredOrders;
const paginatedOrders = sortedOrders;
// Handlers
const handleSort = (column: SortableColumns) => {
setSortConfig(prev => ({
const newDirection = sortConfig.column === column && sortConfig.direction === "asc" ? "desc" : "asc";
console.log(`Setting sort config: ${column} ${newDirection}`);
setSortConfig({
column,
direction: prev.column === column && prev.direction === "asc" ? "desc" : "asc"
}));
direction: newDirection
});
// Force a re-fetch when sorting changes
fetchOrders();
};
const toggleSelection = (orderId: string) => {
@@ -365,24 +353,60 @@ export default function OrderTable() {
onCheckedChange={toggleAll}
/>
</TableHead>
<TableHead className="cursor-pointer" onClick={() => handleSort("orderId")}>
Order ID <ArrowUpDown className="ml-2 inline h-4 w-4" />
<TableHead
className={`cursor-pointer hover:bg-zinc-800 transition-colors p-2 select-none`}
onClick={() => handleSort("orderId")}
>
<div className="flex items-center">
Order ID
<ArrowUpDown className={`ml-2 h-4 w-4 ${sortConfig.column === 'orderId' ? 'text-primary' : 'text-muted-foreground'}`} />
{sortConfig.column === 'orderId' && (
<span className="ml-1 text-xs text-primary">{sortConfig.direction}</span>
)}
</div>
</TableHead>
<TableHead className="cursor-pointer" onClick={() => handleSort("totalPrice")}>
Total <ArrowUpDown className="ml-2 inline h-4 w-4" />
<TableHead
className={`cursor-pointer hover:bg-zinc-800 transition-colors p-2 select-none`}
onClick={() => handleSort("totalPrice")}
>
<div className="flex items-center">
Total
<ArrowUpDown className={`ml-2 h-4 w-4 ${sortConfig.column === 'totalPrice' ? 'text-primary' : 'text-muted-foreground'}`} />
{sortConfig.column === 'totalPrice' && (
<span className="ml-1 text-xs text-primary">{sortConfig.direction}</span>
)}
</div>
</TableHead>
<TableHead className="cursor-pointer" onClick={() => handleSort("status")}>
Status <ArrowUpDown className="ml-2 inline h-4 w-4" />
<TableHead
className={`cursor-pointer hover:bg-zinc-800 transition-colors p-2 select-none`}
onClick={() => handleSort("status")}
>
<div className="flex items-center">
Status
<ArrowUpDown className={`ml-2 h-4 w-4 ${sortConfig.column === 'status' ? 'text-primary' : 'text-muted-foreground'}`} />
{sortConfig.column === 'status' && (
<span className="ml-1 text-xs text-primary">{sortConfig.direction}</span>
)}
</div>
</TableHead>
<TableHead className="cursor-pointer" onClick={() => handleSort("orderDate")}>
Date <ArrowUpDown className="ml-2 inline h-4 w-4" />
<TableHead
className={`cursor-pointer hover:bg-zinc-800 transition-colors p-2 select-none`}
onClick={() => handleSort("orderDate")}
>
<div className="flex items-center">
Date
<ArrowUpDown className={`ml-2 h-4 w-4 ${sortConfig.column === 'orderDate' ? 'text-primary' : 'text-muted-foreground'}`} />
{sortConfig.column === 'orderDate' && (
<span className="ml-1 text-xs text-primary">{sortConfig.direction}</span>
)}
</div>
</TableHead>
<TableHead>Buyer</TableHead>
<TableHead className="w-24 text-center">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{orders.map((order) => {
{paginatedOrders.map((order) => {
const StatusIcon = statusConfig[order.status as keyof typeof statusConfig]?.icon || XCircle;
return (