orion/docs/__REVAMPING/FRONTEND/FRONTEND_SHARED/PAGINATION_DOCUMENTATION.md

Vendor Page Pagination Implementation

🎯 What's New

Your vendors page now includes:

1. ✅ Edit button - Already present (pencil icon next to view icon)
2. ✅ Pagination - New pagination controls at the bottom of the table

---

📦 Files Updated

1. vendors.html

Changes:

• Changed x-for="vendor in vendors" → x-for="vendor in paginatedVendors"
• Added pagination footer with controls
• Added "Showing X-Y of Z" results display

2. vendors.js

Changes:

• Added pagination state: currentPage, itemsPerPage
• Added computed properties:
  • paginatedVendors - Returns current page's vendors
  • totalPages - Calculates total number of pages
  • startIndex / endIndex - For "Showing X-Y" display
  • pageNumbers - Generates smart page number array with ellipsis
• Added pagination methods:
  • goToPage(page) - Navigate to specific page
  • nextPage() - Go to next page
  • previousPage() - Go to previous page

---

🎨 Pagination Features

Smart Page Number Display

The pagination intelligently shows page numbers:

Example 1: Few pages (≤7)

← 1 2 3 4 5 6 7 →

Example 2: Many pages, current = 1

← 1 2 3 ... 9 10 →

Example 3: Many pages, current = 5

← 1 ... 4 5 6 ... 10 →

Example 4: Many pages, current = 10

← 1 ... 8 9 10 →

Configurable Items Per Page

Default: 10 vendors per page

To change, edit in vendors.js:

itemsPerPage: 10,  // Change this number

---

🔧 How It Works

1. Computed Properties (Alpine.js)

Alpine.js computes these values reactively:

get paginatedVendors() {
    const start = (this.currentPage - 1) * this.itemsPerPage;
    const end = start + this.itemsPerPage;
    return this.vendors.slice(start, end);
}

When currentPage changes, paginatedVendors automatically updates!

2. Template Binding

The HTML template uses the computed property:

<template x-for="vendor in paginatedVendors" :key="vendor.vendor_code">
    <!-- Vendor row -->
</template>

3. Pagination Controls

Buttons call the pagination methods:

<button @click="previousPage()" :disabled="currentPage === 1">
<button @click="goToPage(page)">
<button @click="nextPage()" :disabled="currentPage === totalPages">

---

📊 Visual Layout

┌──────────────────────────────────────────────────────────┐
│ Vendor Management                      [+ Create Vendor] │
├──────────────────────────────────────────────────────────┤
│ [Total] [Verified] [Pending] [Inactive]  ← Stats Cards  │
├──────────────────────────────────────────────────────────┤
│ Vendor │ Subdomain │ Status │ Created │ Actions         │
├────────┼───────────┼────────┼─────────┼─────────────────┤
│ Acme   │ acme      │ ✓      │ Jan 1   │ 👁 ✏️ 🗑       │
│ Beta   │ beta      │ ⏰     │ Jan 2   │ 👁 ✏️ 🗑       │
│ ...    │ ...       │ ...    │ ...     │ ...             │
├──────────────────────────────────────────────────────────┤
│ Showing 1-10 of 45              ← 1 2 [3] 4 ... 9 →     │
└──────────────────────────────────────────────────────────┘
                                    ↑
                              Pagination controls

---

🎭 Action Buttons Explained

Each vendor row has 3 action buttons:

1. View Button (👁 Eye icon - Blue)

   • Shows vendor details
   • Calls: viewVendor(vendor.vendor_code)
   • Navigates to: /admin/vendors/{code}

2. Edit Button (✏️ Pencil icon - Purple) ⭐ NEW

   • Opens edit form
   • Calls: editVendor(vendor.vendor_code)
   • Navigates to: /admin/vendors/{code}/edit

3. Delete Button (🗑 Trash icon - Red)

   • Deletes vendor with confirmation
   • Calls: deleteVendor(vendor)
   • Shows confirmation dialog first

---

🧪 Testing the Pagination

Test Scenarios

Test 1: With few vendors (<10)

• Pagination should not show if only 1 page
• All vendors visible on page 1

Test 2: With many vendors (>10)

• Pagination controls appear
• Can navigate between pages
• "Previous" disabled on page 1
• "Next" disabled on last page

Test 3: Navigation

• Click page numbers to jump to specific page
• Click "Previous" arrow to go back
• Click "Next" arrow to go forward
• Page numbers update dynamically

Test 4: After Delete

• Delete a vendor
• Data reloads
• Returns to page 1
• Pagination updates

---

🎨 Styling

The pagination uses the same Windmill theme as your dashboard:

• Normal buttons: Gray with hover effect
• Current page: Purple background (matches your theme)
• Disabled buttons: 50% opacity, cursor not-allowed
• Hover effects: Light gray background
• Dark mode: Full support

---

🔧 Customization Options

Change Items Per Page

In vendors.js:

itemsPerPage: 20,  // Show 20 vendors per page

Change Page Number Display Logic

In vendors.js, modify the pageNumbers computed property:

get pageNumbers() {
    // Modify this logic to change how page numbers appear
}

Change Pagination Position

In vendors.html, the pagination footer is at line ~220. Move this entire <div class="grid px-4 py-3..."> section.

---

📝 Code Comparison

Before (No Pagination)

// vendors.js
vendors: [],  // All vendors displayed at once

// vendors.html
<template x-for="vendor in vendors">

After (With Pagination)

// vendors.js
vendors: [],
currentPage: 1,
itemsPerPage: 10,
get paginatedVendors() {
    return this.vendors.slice(start, end);
}

// vendors.html
<template x-for="vendor in paginatedVendors">

---

✅ Installation Checklist

Replace these files in your project:

• static/admin/js/vendors.js → Use vendors-with-pagination.js
• templates/admin/vendors.html → Use vendors-with-pagination.html
• Clear browser cache (Ctrl+Shift+R)
• Test with >10 vendors to see pagination
• Test edit button works
• Test page navigation
• Test in dark mode

---

🆘 Troubleshooting

Pagination not showing?

• Make sure you have more than 10 vendors
• Check itemsPerPage value in vendors.js
• Verify paginatedVendors is used in template

Edit button not working?

• Check browser console for errors
• Verify editVendor() method exists in vendors.js
• Check the route exists on your backend: /admin/vendors/{code}/edit

Page numbers not updating?

• This is a computed property - it should update automatically
• Check Alpine.js is loaded correctly
• Clear browser cache

"Showing X-Y of Z" incorrect?

• Check startIndex and endIndex computed properties
• Verify vendors.length is correct

---

💡 Tips

1. Performance: Pagination is client-side. For 1000+ vendors, consider server-side pagination.

2. State Preservation: When returning from edit page, user goes back to page 1. To preserve page state, you'd need to:

   • Store currentPage in localStorage
   • Restore it on page load

3. Search/Filter: To add search, filter vendors array first, then paginate the filtered results.

4. Sorting: Add sorting before pagination to maintain consistent page content.

---

🎉 Features Summary

✅ Edit button added (pencil icon) ✅ Smart pagination (10 items per page) ✅ Dynamic page numbers with ellipsis ✅ Previous/Next navigation ✅ Disabled states for boundary pages ✅ "Showing X-Y of Z" display ✅ Dark mode support ✅ Fully responsive ✅ Follows Windmill design theme

Happy paginating! 📖