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

add items per page

Browse Source
This commit is contained in:
NotII
2025-03-06 01:19:13 +00:00
parent df58540053
commit a5b0551b02
2 changed files with 200 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -64,6 +64,46 @@ interface StatusConfig {
type OrderStatus = "paid" | "unpaid" | "acknowledged" | "shipped" | "completed" | "cancelled" | "confirming"; type OrderStatus = "paid" | "unpaid" | "acknowledged" | "shipped" | "completed" | "cancelled" | "confirming";
// Create a StatusFilter component to replace the missing component
const StatusFilter = ({ currentStatus, onChange }: { currentStatus: string, onChange: (value: string) => void }) => {
return (
<Select value={currentStatus} onValueChange={onChange}>
<SelectTrigger className="w-40">
<SelectValue placeholder="Filter Status" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All Statuses</SelectItem>
{["paid", "unpaid", "acknowledged", "shipped", "completed", "cancelled", "confirming"].map(status => (
<SelectItem key={status} value={status}>
{status.charAt(0).toUpperCase() + status.slice(1)}
</SelectItem>
))}
</SelectContent>
</Select>
);
};
// Create a PageSizeSelector component
const PageSizeSelector = ({ currentSize, onChange, options }: { currentSize: number, onChange: (value: string) => void, options: number[] }) => {
return (
<div className="flex items-center gap-2">
<div className="text-sm font-medium text-muted-foreground">Show:</div>
<Select value={currentSize.toString()} onValueChange={onChange}>
<SelectTrigger className="w-24">
<SelectValue placeholder="Page Size" />
</SelectTrigger>
<SelectContent>
{options.map(size => (
<SelectItem key={size} value={size.toString()}>
{size}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
);
};
export default function OrderTable() { export default function OrderTable() {
const [orders, setOrders] = useState<Order[]>([]); const [orders, setOrders] = useState<Order[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -77,7 +117,8 @@ export default function OrderTable() {
}>({ column: "orderDate", direction: "desc" }); }>({ column: "orderDate", direction: "desc" });
const [selectedOrders, setSelectedOrders] = useState<Set<string>>(new Set()); const [selectedOrders, setSelectedOrders] = useState<Set<string>>(new Set());
const [isShipping, setIsShipping] = useState(false); const [isShipping, setIsShipping] = useState(false);
const ITEMS_PER_PAGE = 10; const [itemsPerPage, setItemsPerPage] = useState<number>(20);
const pageSizeOptions = [5, 10, 15, 20, 25, 50, 75, 100];
// Fetch orders with server-side pagination // Fetch orders with server-side pagination
const fetchOrders = useCallback(async () => { const fetchOrders = useCallback(async () => {
@@ -85,7 +126,7 @@ export default function OrderTable() {
setLoading(true); setLoading(true);
const queryParams = new URLSearchParams({ const queryParams = new URLSearchParams({
page: currentPage.toString(), page: currentPage.toString(),
limit: ITEMS_PER_PAGE.toString(), limit: itemsPerPage.toString(),
...(statusFilter !== "all" && { status: statusFilter }), ...(statusFilter !== "all" && { status: statusFilter }),
}); });
@@ -100,7 +141,7 @@ export default function OrderTable() {
} finally { } finally {
setLoading(false); setLoading(false);
} }
}, [currentPage, statusFilter]); }, [currentPage, statusFilter, itemsPerPage]);
useEffect(() => { useEffect(() => {
fetchOrders(); fetchOrders();
@@ -115,6 +156,12 @@ export default function OrderTable() {
setCurrentPage(newPage); setCurrentPage(newPage);
}; };
const handleItemsPerPageChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const newSize = parseInt(e.target.value, 10);
setItemsPerPage(newSize);
setCurrentPage(1); // Reset to first page when changing items per page
};
// Derived data calculations // Derived data calculations
const filteredOrders = orders.filter( const filteredOrders = orders.filter(
(order) => statusFilter === "all" || order.status === statusFilter (order) => statusFilter === "all" || order.status === statusFilter
@@ -138,8 +185,8 @@ export default function OrderTable() {
}); });
const paginatedOrders = sortedOrders.slice( const paginatedOrders = sortedOrders.slice(
(currentPage - 1) * ITEMS_PER_PAGE, (currentPage - 1) * itemsPerPage,
currentPage * ITEMS_PER_PAGE currentPage * itemsPerPage
); );
// Handlers // Handlers
@@ -249,28 +296,25 @@ export default function OrderTable() {
}; };
return ( return (
<div className="rounded-lg border shadow-sm overflow-hidden"> <div className="space-y-4">
{/* Toolbar */} <div className="border border-zinc-800 rounded-md bg-black/40 overflow-hidden">
<div className="p-4 flex justify-between items-center border-b"> {/* Filters header */}
<div className="flex items-center gap-4"> <div className="p-4 border-b border-zinc-800 bg-black/60">
<Select value={statusFilter} onValueChange={setStatusFilter}> <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<SelectTrigger className="w-40"> <div className="flex flex-col sm:flex-row gap-2 sm:items-center">
<SelectValue placeholder="Filter Status" /> <StatusFilter
</SelectTrigger> currentStatus={statusFilter}
<SelectContent> onChange={setStatusFilter}
<SelectItem value="all">All Statuses</SelectItem> />
{Object.keys(statusConfig).map(status => (
<SelectItem key={status} value={status}> <PageSizeSelector
{status.charAt(0).toUpperCase() + status.slice(1)} currentSize={itemsPerPage}
</SelectItem> onChange={(value) => handleItemsPerPageChange({ target: { value } } as React.ChangeEvent<HTMLSelectElement>)}
))} options={pageSizeOptions}
</SelectContent> />
</Select>
<div className="text-sm text-muted-foreground">
Total Orders: {totalOrders}
</div>
</div> </div>
<div className="flex items-center gap-2 self-end sm:self-auto">
<AlertDialog> <AlertDialog>
<AlertDialogTrigger asChild> <AlertDialogTrigger asChild>
<Button disabled={selectedOrders.size === 0 || isShipping}> <Button disabled={selectedOrders.size === 0 || isShipping}>
@@ -299,6 +343,8 @@ export default function OrderTable() {
</AlertDialogContent> </AlertDialogContent>
</AlertDialog> </AlertDialog>
</div> </div>
</div>
</div>
{/* Table */} {/* Table */}
<div className="relative"> <div className="relative">
@@ -307,8 +353,9 @@ export default function OrderTable() {
<Loader2 className="h-6 w-6 animate-spin" /> <Loader2 className="h-6 w-6 animate-spin" />
</div> </div>
)} )}
<Table> <div className="max-h-[calc(100vh-300px)] overflow-auto">
<TableHeader className="bg-muted"> <Table className="[&_tr]:border-b [&_tr]:border-zinc-800 [&_tr:last-child]:border-b-0 [&_td]:border-r [&_td]:border-zinc-800 [&_td:last-child]:border-r-0 [&_th]:border-r [&_th]:border-zinc-800 [&_th:last-child]:border-r-0 [&_tr:hover]:bg-zinc-900/70">
<TableHeader className="bg-black/60 sticky top-0 z-10">
<TableRow> <TableRow>
<TableHead className="w-12"> <TableHead className="w-12">
<Checkbox <Checkbox
@@ -329,7 +376,7 @@ export default function OrderTable() {
Date <ArrowUpDown className="ml-2 inline h-4 w-4" /> Date <ArrowUpDown className="ml-2 inline h-4 w-4" />
</TableHead> </TableHead>
<TableHead>Buyer</TableHead> <TableHead>Buyer</TableHead>
<TableHead className="w-24">Actions</TableHead> <TableHead className="w-24 text-center">Actions</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -363,8 +410,8 @@ export default function OrderTable() {
<TableCell> <TableCell>
{order.telegramUsername ? `@${order.telegramUsername}` : "-"} {order.telegramUsername ? `@${order.telegramUsername}` : "-"}
</TableCell> </TableCell>
<TableCell className="text-right"> <TableCell className="text-center">
<Button variant="ghost" size="sm" asChild> <Button variant="ghost" size="sm" className="mx-auto" asChild>
<Link href={`/dashboard/orders/${order._id}`}> <Link href={`/dashboard/orders/${order._id}`}>
<Eye className="h-4 w-4" /> <Eye className="h-4 w-4" />
</Link> </Link>
@@ -376,11 +423,12 @@ export default function OrderTable() {
</TableBody> </TableBody>
</Table> </Table>
</div> </div>
</div>
{/* Pagination */} {/* Pagination */}
<div className="flex items-center justify-between px-4 py-4 border-t"> <div className="flex items-center justify-between px-4 py-4 border-t border-zinc-800 bg-black/40">
<div className="text-sm text-muted-foreground"> <div className="text-sm text-muted-foreground">
Page {currentPage} of {totalPages} Page {currentPage} of {totalPages} ({totalOrders} total)
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button
@@ -404,5 +452,6 @@ export default function OrderTable() {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }

4
components/ui/table.tsx
View File

@@ -9,7 +9,7 @@ const Table = React.forwardRef<
<div className="relative w-full overflow-auto"> <div className="relative w-full overflow-auto">
<table <table
ref={ref} ref={ref}
className={cn("w-full caption-bottom text-sm", className)} className={cn("w-full caption-bottom text-sm border-collapse", className)}
{...props} {...props}
/> />
</div> </div>
@@ -58,7 +58,7 @@ const TableRow = React.forwardRef<
<tr <tr
ref={ref} ref={ref}
className={cn( className={cn(
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", "transition-colors hover:bg-muted/20 data-[state=selected]:bg-muted",
className className
)} )}
{...props} {...props}