From 0e2cad101dc7b2f4db1bb680091ed787cec55656 Mon Sep 17 00:00:00 2001
From: Ben Weeks <ben.weeks@outlook.com>
Date: Tue, 23 Dec 2025 13:34:43 +0000
Subject: [PATCH] feat: add search and sorting to shipping zones table (#157)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add search filter input to zones table
- Make all columns sortable with default sort by name
- Fix country list: alphabetize, remove asterisks from UK/US, remove "Flat rate"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 static/components/shipping-zones-list.js      | 28 +++++++++++--------
 .../components/shipping-zones-list.html       | 14 ++++++++++
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/static/components/shipping-zones-list.js b/static/components/shipping-zones-list.js
index a8cf58f..93b7f5f 100644
--- a/static/components/shipping-zones-list.js
+++ b/static/components/shipping-zones-list.js
@@ -6,6 +6,7 @@ window.app.component('shipping-zones-list', {
   data: function () {
     return {
       zones: [],
+      filter: '',
       zoneDialog: {
         showDialog: false,
         data: {
@@ -19,7 +20,6 @@ window.app.component('shipping-zones-list', {
       currencies: [],
       shippingZoneOptions: [
         'Free (digital)',
-        'Flat rate',
         'Worldwide',
         'Europe',
         'Australia',
@@ -27,6 +27,7 @@ window.app.component('shipping-zones-list', {
         'Belgium',
         'Brazil',
         'Canada',
+        'China',
         'Denmark',
         'Finland',
         'France',
@@ -34,8 +35,8 @@ window.app.component('shipping-zones-list', {
         'Greece',
         'Hong Kong',
         'Hungary',
-        'Ireland',
         'Indonesia',
+        'Ireland',
         'Israel',
         'Italy',
         'Japan',
@@ -59,10 +60,9 @@ window.app.component('shipping-zones-list', {
         'Thailand',
         'Turkey',
         'Ukraine',
-        'United Kingdom**',
-        'United States***',
-        'Vietnam',
-        'China'
+        'United Kingdom',
+        'United States',
+        'Vietnam'
       ],
       zonesTable: {
         columns: [
@@ -70,25 +70,29 @@ window.app.component('shipping-zones-list', {
             name: 'name',
             align: 'left',
             label: 'Name',
-            field: 'name'
+            field: 'name',
+            sortable: true
           },
           {
             name: 'countries',
             align: 'left',
             label: 'Countries',
-            field: 'countries'
+            field: 'countries',
+            sortable: true
           },
           {
             name: 'currency',
             align: 'left',
             label: 'Currency',
-            field: 'currency'
+            field: 'currency',
+            sortable: true
           },
           {
             name: 'cost',
             align: 'left',
             label: 'Cost',
-            field: 'cost'
+            field: 'cost',
+            sortable: true
           },
           {
             name: 'actions',
@@ -98,7 +102,9 @@ window.app.component('shipping-zones-list', {
           }
         ],
         pagination: {
-          rowsPerPage: 10
+          rowsPerPage: 10,
+          sortBy: 'name',
+          descending: false
         }
       }
     }
diff --git a/templates/nostrmarket/components/shipping-zones-list.html b/templates/nostrmarket/components/shipping-zones-list.html
index 2ff9f28..e3b856b 100644
--- a/templates/nostrmarket/components/shipping-zones-list.html
+++ b/templates/nostrmarket/components/shipping-zones-list.html
@@ -1,5 +1,18 @@
 <div>
   <div class="row items-center q-mb-md q-col-gutter-sm justify-end">
+    <div class="col-auto">
+      <q-input
+        dense
+        debounce="300"
+        v-model="filter"
+        placeholder="Search zones..."
+        style="min-width: 200px"
+      >
+        <template v-slot:prepend>
+          <q-icon name="search"></q-icon>
+        </template>
+      </q-input>
+    </div>
     <div class="col-auto">
       <q-btn
         unelevated
@@ -19,6 +32,7 @@
     row-key="id"
     :columns="zonesTable.columns"
     v-model:pagination="zonesTable.pagination"
+    :filter="filter"
   >
     <template v-slot:body="props">
       <q-tr :props="props">