feat: add sorting options to customers page (#646)
oliver-oat committed
Feb 2, 2026 at 19:26 UTC
388c903996eac9060e52c7b9f1986b2656f89081
1 file changed
+38
-6
frontend/src/components/customers/CustomersList.vue
+38
-6
@@ -1,9 +1,20 @@
1
<template>
2
<div class="customers-list">
3
<div class="header mb-4 flex items-center justify-between gap-2">
4
- <div>
5
- Total:
6
- <strong class="font-mono">{{ totalCustomers }}</strong>
4
+ <div class="flex items-center gap-4">
5
+ <div>
6
+ Total:
7
+ <strong class="font-mono">{{ totalCustomers }}</strong>
8
+ </div>
9
+ <div class="flex items-center gap-2">
10
+ <span class="text-sm">Sort by:</span>
11
+ <n-select
12
+ v-model:value="sortOption"
13
+ :options="sortOptions"
14
+ style="width: 120px"
15
+ size="small"
16
+ />
17
+ </div>
18
</div>
19
<div class="flex items-center gap-3">
20
<slot></slot>
@@ -11,9 +22,9 @@
22
</div>
23
<n-spin :show="loadingCustomers">
24
<div class="min-h-52">
14
- <template v-if="customersList.length">
25
+ <template v-if="sortedCustomersList.length">
26
<CustomerItem
16
- v-for="customer of customersList"
27
+ v-for="customer of sortedCustomersList"
28
:key="customer.customer_code"
29
:customer
30
:highlight="customer.customer_code === highlight"
@@ -32,7 +43,7 @@
43
44
<script setup lang="ts">
45
import type { Customer } from "@/types/customers.d"
35
-import { NEmpty, NSpin, useMessage } from "naive-ui"
46
+import { NEmpty, NSelect, NSpin, useMessage } from "naive-ui"
47
import { computed, nextTick, onBeforeMount, ref, toRefs, watch } from "vue"
48
import Api from "@/api"
49
import CustomerItem from "./CustomerItem.vue"
@@ -47,11 +58,32 @@ const { highlight, reload } = toRefs(props)
58
const message = useMessage()
59
const loadingCustomers = ref(false)
60
const customersList = ref<Customer[]>([])
61
+const sortOption = ref<string>("ID")
62
+
63
+const sortOptions = [
64
+ { label: "ID", value: "ID" },
65
+ { label: "A-Z", value: "A-Z" }
66
+]
67
68
const totalCustomers = computed<number>(() => {
69
return customersList.value.length || 0
70
})
71
72
+const sortedCustomersList = computed<Customer[]>(() => {
73
+ const customers = [...customersList.value]
74
+
75
+ if (sortOption.value === "A-Z") {
76
+ return customers.sort((a, b) => {
77
+ const nameA = a.customer_name.toLowerCase()
78
+ const nameB = b.customer_name.toLowerCase()
79
+ return nameA.localeCompare(nameB)
80
+ })
81
+ }
82
+
83
+ // For "ID" option, return original order (by creation/ID)
84
+ return customers
85
+})
86
+
87
function getCustomers() {
88
loadingCustomers.value = true
89