feat: basic shipping zones UI

migrations.py

@@ -58,6 +58,7 @@ async def m001_initial(db):
         CREATE TABLE nostrmarket.zones (
             id TEXT PRIMARY KEY,
             user_id TEXT NOT NULL,
+            name TEXT NOT NULL,
             cost REAL NOT NULL,
             countries TEXT NOT NULL
         );

static/components/shipping-zones/shipping-zones.html

@@ -0,0 +1,31 @@
+<div>
+  <q-btn-dropdown
+    split
+    unelevated
+    color="primary"
+    icon="public"
+    label="Shipping Zones"
+    @click="createShippingZone"
+  >
+    <q-list>
+      <q-item clickable v-close-popup @click="createShippingZone">
+        <q-item-section>
+          <q-item-label>New Shipping Zone</q-item-label>
+          <q-item-label caption>Create a new shipping zone</q-item-label>
+        </q-item-section>
+      </q-item>
+      <q-item
+        v-for="zone of zones"
+        :key="zone.id"
+        clickable
+        v-close-popup
+        @click="editShippingZone"
+      >
+        <q-item-section>
+          <q-item-label>XXX</q-item-label>
+          <q-item-label caption>xxxxxxxxxxxxx</q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-list></q-btn-dropdown
+  >
+</div>

static/components/shipping-zones/shipping-zones.js

@@ -0,0 +1,19 @@
+async function shippingZones(path) {
+  const template = await loadTemplateAsync(path)
+  Vue.component('shipping-zones', {
+    name: 'shipping-zones',
+    template,
+
+    data: function () {
+      return {
+        zones: []
+      }
+    },
+    methods: {
+      createShippingZone: async function () {
+        console.log('### createShippingZone', createShippingZone)
+      },
+      editShippingZone: async function () {}
+    }
+  })
+}

static/js/index.js

@@ -3,6 +3,7 @@ const merchant = async () => {
 
   await stallDetails('static/components/stall-details/stall-details.html')
   await keyPair('static/components/key-pair/key-pair.html')
+  await shippingZones('static/components/shipping-zones/shipping-zones.html')
 
   const nostr = window.NostrTools
 
@@ -12,6 +13,7 @@ const merchant = async () => {
     data: function () {
       return {
         merchant: {},
+        shippingZones: [],
         showKeys: false
       }
     },

templates/nostrmarket/index.html

@@ -61,12 +61,15 @@
       <q-card>
         <q-card-section>
           <div class="row">
-            <div class="col-12">
+            <div class="col-6"></div>
+            <div class="col-4">
+              <shipping-zones></shipping-zones>
+            </div>
+            <div class="col-2">
               <q-btn
                 @click="showKeys = !showKeys"
                 :label="showKeys ? 'Hide Keys' : 'Show Keys'"
                 color="primary"
-                class="float-right"
               >
                 <q-tooltip> Show Public or Private keys </q-tooltip>
               </q-btn>
@@ -103,6 +106,7 @@
 <script src="{{ url_for('nostrmarket_static', path='js/utils.js') }}"></script>
 <script src="{{ url_for('nostrmarket_static', path='components/stall-details/stall-details.js') }}"></script>
 <script src="{{ url_for('nostrmarket_static', path='components/key-pair/key-pair.js') }}"></script>
+<script src="{{ url_for('nostrmarket_static', path='components/shipping-zones/shipping-zones.js') }}"></script>
 <script src="{{ url_for('nostrmarket_static', path='js/index.js') }}"></script>
 
 {% endblock %}