dwindown 52f7c1b99d feat: Hide drag handle on mobile + persist sort order to database ...

1. Hide Drag Handle on Mobile ✅

   Problem: Drag handle looks messy on mobile
   Solution: Hide on mobile, show only on desktop

   Changes:
   - Added 'hidden md:block' to drag handle
   - Added 'md:pl-8' to content wrapper
   - Mobile: Clean list without drag handle
   - Desktop: Drag handle visible for sorting

   UX Priority: Better mobile experience > sorting on mobile

2. Persist Sort Order to Database ✅

   Backend Implementation:

   A. New API Endpoint
      POST /woonoow/v1/payments/gateways/order
      Body: { category: 'manual'|'online', order: ['id1', 'id2'] }

   B. Save to WordPress Options
      - woonoow_payment_gateway_order_manual
      - woonoow_payment_gateway_order_online

   C. Load Order on Page Load
      GET /payments/gateways returns:
      {
        gateways: [...],
        order: {
          manual: ['bacs', 'cheque', 'cod'],
          online: ['paypal', 'stripe']
        }
      }

   Frontend Implementation:

   A. Save on Drag End
      - Calls API immediately after reorder
      - Shows success toast
      - Reverts on error with error toast

   B. Load Saved Order
      - Extracts order from API response
      - Uses saved order if available
      - Falls back to gateway order if no saved order

   C. Error Handling
      - Try/catch on save
      - Revert order on failure
      - User feedback via toast

3. Flow Diagram

   Page Load:
   ┌─────────────────────────────────────┐
   │ GET /payments/gateways              │
   ├─────────────────────────────────────┤
   │ Returns: { gateways, order }        │
   │ - order.manual: ['bacs', 'cod']     │
   │ - order.online: ['paypal']          │
   └─────────────────────────────────────┘
              ↓
   ┌─────────────────────────────────────┐
   │ Initialize State                    │
   │ - setManualOrder(order.manual)      │
   │ - setOnlineOrder(order.online)      │
   └─────────────────────────────────────┘
              ↓
   ┌─────────────────────────────────────┐
   │ Display Sorted List                 │
   │ - useMemo sorts by saved order      │
   └─────────────────────────────────────┘

   User Drags:
   ┌─────────────────────────────────────┐
   │ User drags item                     │
   └─────────────────────────────────────┘
              ↓
   ┌─────────────────────────────────────┐
   │ handleDragEnd                       │
   │ - Calculate new order               │
   │ - Update state (optimistic)         │
   └─────────────────────────────────────┘
              ↓
   ┌─────────────────────────────────────┐
   │ POST /payments/gateways/order       │
   │ Body: { category, order }           │
   └─────────────────────────────────────┘
              ↓
   ┌─────────────────────────────────────┐
   │ Success: Toast notification         │
   │ Error: Revert + error toast         │
   └─────────────────────────────────────┘

4. Mobile vs Desktop

   Mobile (< 768px):
   ✅ Clean list without drag handle
   ✅ No left padding
   ✅ Better UX
   ❌ No sorting (desktop only)

   Desktop (≥ 768px):
   ✅ Drag handle visible
   ✅ Full sorting capability
   ✅ Visual feedback
   ✅ Keyboard accessible

Benefits:
✅ Order persists across sessions
✅ Order persists across page reloads
✅ Clean mobile UI
✅ Full desktop functionality
✅ Error handling with rollback
✅ Optimistic UI updates

Files Modified:
- PaymentsController.php: New endpoint + load order
- Payments.tsx: Save order + load order + mobile hide
- Database: 2 new options for order storage

2025-11-06 13:59:37 +07:00

13 KiB

Raw Blame History

View Raw