Feat: Sort Customer List (ASC/DESC)

[munyanezaarmel]

Brief summary of the change made

Add customer list sorting by relevant fields
closes: #1117

Are there any other side effects of this change that we should be aware of?

I left phone, isActive, and device as NON-clickable because backend doesn't support sorting them yet

Describe how you tested your changes?

Pull Request checklist

Please confirm you have completed any of the necessary steps below.

• Meaningful Pull Request title and description
• Changes tested as described above
• Added appropriate documentation for the change.
• Created GitHub issues for any relevant followup/future enhancements if appropriate.

[dmohns]

Hey @munyanezaarmel thanks a lot.

I'm curious: This looks very different to the documentation over at https://www.creative-tim.com/vuematerial/components/table Any reason we cannot use the way it's recommended in the docs?

[munyanezaarmel]

Hey @munyanezaarmel thanks a lot.

I'm curious: This looks very different to the documentation over at https://www.creative-tim.com/vuematerial/components/table Any reason we cannot use the way it's recommended in the docs?

Hi @dmohns,

Great question! I didn't use Vue Material's built-in md-sort because:

1. Server-side pagination: We're paginating 250 customers (15 per page). Vue Material's md-sort only sorts the current page's 15 items, not all 250 customers. We need the backend to sort all customers and return the correct page.

2. Complex sorting: Columns like "Agent" and "City" require database JOINs to sort correctly. The backend (using Spatie Query Builder) handles this with subqueries. The frontend doesn't have access to the full related data needed for proper sorting.

3. Backend API design: The backend implemented sorting via the sort_by query parameter (e.g., ?sort_by=name or sort_by=-name). This follows the JSON:API specification that Spatie Query Builder uses.

4. Performance: Loading all 250 customers to the frontend just for client-side sorting would be inefficient. Server-side sorting keeps the response size small (only 15 items per page).

Alternative approach:
If you prefer using Vue Material's native sorting for better UI/UX, we could:

• Use md-sort for visual indicators
• Override the sort behavior to call our backend API
• This would give us Vue Material's animations while still doing server-side sorting

Would you like me to refactor it to use Vue Material's sorting components with server-side sorting underneath?

Let me know your preference!

[dmohns]

Alternative approach: If you prefer using Vue Material's native sorting for better UI/UX, we could:

• Use md-sort for visual indicators
• Override the sort behavior to call our backend API
• This would give us Vue Material's animations while still doing server-side sorting

Would you like me to refactor it to use Vue Material's sorting components with server-side sorting underneath?

Let me know your preference!

It would be great if you can do this, yes 🙏