From dcda99830e4f7fd027ba9a91c3374e0c5938eaa9 Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Tue, 28 Feb 2023 13:08:58 +0200
Subject: [PATCH] feat: basic shipping zones UI

---
 migrations.py                                 |  1 +
 .../shipping-zones/shipping-zones.html        | 31 +++++++++++++++++++
 .../shipping-zones/shipping-zones.js          | 19 ++++++++++++
 static/js/index.js                            |  2 ++
 templates/nostrmarket/index.html              |  8 +++--
 5 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 static/components/shipping-zones/shipping-zones.html
 create mode 100644 static/components/shipping-zones/shipping-zones.js

diff --git a/migrations.py b/migrations.py
index 51567b5..b3fafbe 100644
--- a/migrations.py
+++ b/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
         );
diff --git a/static/components/shipping-zones/shipping-zones.html b/static/components/shipping-zones/shipping-zones.html
new file mode 100644
index 0000000..08ced67
--- /dev/null
+++ b/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>
diff --git a/static/components/shipping-zones/shipping-zones.js b/static/components/shipping-zones/shipping-zones.js
new file mode 100644
index 0000000..4aef5f8
--- /dev/null
+++ b/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 () {}
+    }
+  })
+}
diff --git a/static/js/index.js b/static/js/index.js
index 561c6ec..6d55b30 100644
--- a/static/js/index.js
+++ b/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
       }
     },
diff --git a/templates/nostrmarket/index.html b/templates/nostrmarket/index.html
index fc154b4..f7aaa6c 100644
--- a/templates/nostrmarket/index.html
+++ b/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 %}