feat: 統一清單頁面分頁與每頁顯示 UI

2026-01-13 17:09:52 +08:00
parent f18fb169f3
commit 566dfa31ae
7 changed files with 131 additions and 66 deletions
--- a/resources/js/Pages/Vendor/Index.tsx
+++ b/resources/js/Pages/Vendor/Index.tsx
@@ -9,6 +9,8 @@ import { Head, router } from "@inertiajs/react";
 import { debounce } from "lodash";
 import { getBreadcrumbs } from "@/utils/breadcrumb";
 import { Can } from "@/Components/Permission/Can";
+import Pagination from "@/Components/shared/Pagination";
+import { SearchableSelect } from "@/Components/ui/searchable-select";

 export interface Vendor {
    id: number;
@@ -37,6 +39,7 @@ interface PageProps {
        search?: string;
        sort_field?: string;
        sort_direction?: string;
+        per_page?: string;
    };
 }

@@ -44,6 +47,7 @@ export default function VendorManagement({ vendors, filters }: PageProps) {
    const [searchTerm, setSearchTerm] = useState(filters.search || "");
    const [sortField, setSortField] = useState<string | null>(filters.sort_field || null);
    const [sortDirection, setSortDirection] = useState<"asc" | "desc" | null>(filters.sort_direction as "asc" | "desc" || null);
+    const [perPage, setPerPage] = useState<string>(filters.per_page || "10");
    const [isDialogOpen, setIsDialogOpen] = useState(false);
    const [editingVendor, setEditingVendor] = useState<Vendor | null>(null);

@@ -52,6 +56,7 @@ export default function VendorManagement({ vendors, filters }: PageProps) {
        setSearchTerm(filters.search || "");
        setSortField(filters.sort_field || null);
        setSortDirection(filters.sort_direction as "asc" | "desc" || null);
+        setPerPage(filters.per_page || "10");
    }, [filters]);

    // Debounced Search
@@ -125,6 +130,15 @@ export default function VendorManagement({ vendors, filters }: PageProps) {
        router.delete(route('vendors.destroy', id));
    };

+    const handlePerPageChange = (value: string) => {
+        setPerPage(value);
+        router.get(
+            route("vendors.index"),
+            { search: searchTerm, sort_field: sortField, sort_direction: sortDirection, per_page: value },
+            { preserveState: false, replace: true, preserveScroll: true }
+        );
+    };
+
    return (
        <AuthenticatedLayout breadcrumbs={getBreadcrumbs("vendors")}>
            <Head title="廠商資料管理" />
@@ -186,6 +200,27 @@ export default function VendorManagement({ vendors, filters }: PageProps) {
                    onOpenChange={setIsDialogOpen}
                    vendor={editingVendor}
                />
+
+                {/* 分頁元件 - 統一樣式 */}
+                <div className="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
+                    <div className="flex items-center gap-2 text-sm text-gray-500">
+                        <span>每頁顯示</span>
+                        <SearchableSelect
+                            value={perPage}
+                            onValueChange={handlePerPageChange}
+                            options={[
+                                { label: "10", value: "10" },
+                                { label: "20", value: "20" },
+                                { label: "50", value: "50" },
+                                { label: "100", value: "100" }
+                            ]}
+                            className="w-[80px] h-8"
+                            showSearch={false}
+                        />
+                        <span>筆</span>
+                    </div>
+                    <Pagination links={vendors.links} />
+                </div>
            </div>
        </AuthenticatedLayout>
    );