298 lines
8.2 KiB
Markdown
298 lines
8.2 KiB
Markdown
# 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`:
|
|
```javascript
|
|
itemsPerPage: 10, // Change this number
|
|
```
|
|
|
|
---
|
|
|
|
## 🔧 How It Works
|
|
|
|
### 1. Computed Properties (Alpine.js)
|
|
Alpine.js computes these values reactively:
|
|
|
|
```javascript
|
|
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:
|
|
```html
|
|
<template x-for="vendor in paginatedVendors" :key="vendor.vendor_code">
|
|
<!-- Vendor row -->
|
|
</template>
|
|
```
|
|
|
|
### 3. Pagination Controls
|
|
Buttons call the pagination methods:
|
|
```html
|
|
<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`:
|
|
```javascript
|
|
itemsPerPage: 20, // Show 20 vendors per page
|
|
```
|
|
|
|
### Change Page Number Display Logic
|
|
In `vendors.js`, modify the `pageNumbers` computed property:
|
|
```javascript
|
|
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)
|
|
```javascript
|
|
// vendors.js
|
|
vendors: [], // All vendors displayed at once
|
|
|
|
// vendors.html
|
|
<template x-for="vendor in vendors">
|
|
```
|
|
|
|
### After (With Pagination)
|
|
```javascript
|
|
// 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! 📖
|