From 6c02e58f84cede98e3c9c30f21d9490df37a154b Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Wed, 5 Jul 2023 14:43:59 +0300
Subject: [PATCH] feat: basic `market-config` component

---
 .../market-config/market-config.html          | 55 +++++++++++++++++
 .../components/market-config/market-config.js | 61 +++++++++++++++++++
 static/js/market.js                           |  4 +-
 templates/nostrmarket/market.html             |  7 ++-
 4 files changed, 124 insertions(+), 3 deletions(-)
 create mode 100644 static/components/market-config/market-config.html
 create mode 100644 static/components/market-config/market-config.js

diff --git a/static/components/market-config/market-config.html b/static/components/market-config/market-config.html
new file mode 100644
index 0000000..d5e9a6e
--- /dev/null
+++ b/static/components/market-config/market-config.html
@@ -0,0 +1,55 @@
+<q-card>
+  <div class="q-pa-md">
+    <div class="q-gutter-y-md">
+      <q-tabs v-model="tab" active-color="primary" align="justify">
+        <q-tab name="merchants" label="Merchants" @update="val => tab = val.name"></q-tab>
+        <q-tab name="relays" label="Relays" @update="val => tab = val.name"></q-tab>
+        <q-tab name="marketplace" label="Look And Feel" @update="val => tab = val.name"></q-tab>
+
+      </q-tabs>
+      <q-tab-panels v-model="tab">
+        <q-tab-panel name="merchants">
+          <div>
+            <q-input filled v-model="inputPubkey" @keydown.enter="addPubkey(null)" type="text" label="Pubkey/Npub"
+              hint="Add merchants">
+              <q-btn @click="addPubkey(null)" dense flat icon="add"></q-btn>
+            </q-input>
+            <q-list class="q-mt-md">
+              <q-item v-for="pub in Array.from(pubkeys)" :key="pub">
+
+                <q-item-section avatar>
+                  <q-avatar>
+                    <img v-if="profiles.get(pub) && profiles.get(pub)?.picture" :src="profiles.get(pub).picture" />
+                    <img v-else src="/nostrmarket/static/images/blank-avatar.webp" />
+                  </q-avatar>
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label v-if="profiles.get(pub) && profiles.get(pub)?.name">{{ profiles.get(pub).name
+                    }}</q-item-label>
+                  <q-item-label v-else>{{ `${pub.slice(0, 5)}...${pub.slice(-5)}`
+                    }}</q-item-label>
+                  <q-tooltip>{{ pub }}</q-tooltip>
+                </q-item-section>
+                <q-item-section side>
+                  <q-btn class="gt-xs" size="12px" flat dense round icon="delete" @click="removePubkey(pub)" />
+                </q-item-section>
+
+              </q-item>
+            </q-list>
+          </div>
+        </q-tab-panel>
+        <q-tab-panel name="relays">
+          <div>
+            Relays
+          </div>
+        </q-tab-panel>
+        <q-tab-panel name="marketplace">
+          <div>
+            Marketplace
+          </div>
+        </q-tab-panel>
+      </q-tab-panels>
+    </div>
+  </div>
+
+</q-card>
\ No newline at end of file
diff --git a/static/components/market-config/market-config.js b/static/components/market-config/market-config.js
new file mode 100644
index 0000000..aa2bf7b
--- /dev/null
+++ b/static/components/market-config/market-config.js
@@ -0,0 +1,61 @@
+async function marketConfig(path) {
+    const template = await loadTemplateAsync(path)
+    Vue.component('market-config', {
+        name: 'market-config',
+        props: ['adminkey',],
+        template,
+
+        data: function () {
+            return {
+                tab: 'merchants',
+                pubkeys: new Set(),
+                profiles: new Map(),
+                inputPubkey: null,
+            }
+        },
+        methods: {
+            async addPubkey(pubkey) {
+                if (!pubkey) {
+                    pubkey = String(this.inputPubkey).trim()
+                }
+                let regExp = /^#([0-9a-f]{3}){1,2}$/i
+                if (pubkey.startsWith('n')) {
+                    try {
+                        let { type, data } = NostrTools.nip19.decode(pubkey)
+                        if (type === 'npub') pubkey = data
+                        else if (type === 'nprofile') {
+                            pubkey = data.pubkey
+                            givenRelays = data.relays
+                        }
+                    } catch (err) {
+                        console.error(err)
+                    }
+                } else if (regExp.test(pubkey)) {
+                    pubkey = pubkey
+                }
+                this.pubkeys.add(pubkey)
+                this.inputPubkey = null
+                this.$q.localStorage.set(
+                    `diagonAlley.merchants`,
+                    Array.from(this.pubkeys)
+                )
+                // this.initNostr()// todo: emit
+            },
+            removePubkey(pubkey) {
+                // Needs a hack for Vue reactivity
+                let pubkeys = this.pubkeys
+                pubkeys.delete(pubkey)
+                this.profiles.delete(pubkey)
+                this.pubkeys = new Set(Array.from(pubkeys))
+                this.$q.localStorage.set(
+                    `diagonAlley.merchants`,
+                    Array.from(this.pubkeys)
+                )
+                // this.initNostr() // todo: emit
+            },
+        },
+        created: async function () {
+
+        }
+    })
+}
diff --git a/static/js/market.js b/static/js/market.js
index fac2655..b158000 100644
--- a/static/js/market.js
+++ b/static/js/market.js
@@ -30,7 +30,8 @@ const market = async () => {
     customerStall('static/components/customer-stall/customer-stall.html'),
     productDetail('static/components/product-detail/product-detail.html'),
     shoppingCart('static/components/shopping-cart/shopping-cart.html'),
-    chatDialog('static/components/chat-dialog/chat-dialog.html')
+    chatDialog('static/components/chat-dialog/chat-dialog.html'),
+    marketConfig('static/components/market-config/market-config.html')
   ])
 
   new Vue({
@@ -47,6 +48,7 @@ const market = async () => {
             key: null
           }
         },
+        showMarketConfig: false,
         searchNostr: false,
         drawer: true,
         pubkeys: new Set(),
diff --git a/templates/nostrmarket/market.html b/templates/nostrmarket/market.html
index 94208b8..71dc336 100644
--- a/templates/nostrmarket/market.html
+++ b/templates/nostrmarket/market.html
@@ -154,6 +154,7 @@
   </q-drawer>
   <!-- <q-drawer v-model="drawer" side="right"></q-drawer> -->
   <q-page-container>
+
     <div class="row q-mb-md">
       <!-- <q-toolbar class="col-2">
         <q-btn flat round dense icon="menu" @click="drawer = !drawer"></q-btn>
@@ -170,7 +171,7 @@
         <div class="float-right">
           <q-btn color="gray" icon="travel_explore" flat size="lg" @click="searchNostr = !searchNostr"><q-tooltip>Search
               for products on Nostr</q-tooltip></q-btn>
-          <q-btn color="gray" icon="settings" flat size="lg" @click="searchNostr = !searchNostr"><q-tooltip>
+          <q-btn color="gray" icon="settings" flat size="lg" @click="showMarketConfig = !showMarketConfig"><q-tooltip>
               Settings</q-tooltip></q-btn>
           <q-btn v-if="account" color="gray" icon="perm_identity" flat size="lg"><q-tooltip>User
               Login</q-tooltip></q-btn>
@@ -183,7 +184,8 @@
       </q-toolbar>
 
     </div>
-    <customer-stall v-if="!isLoading && activeStall" :stall="stalls.find(stall => stall.id == activeStall)"
+    <market-config v-if="showMarketConfig"></market-config>
+    <customer-stall v-else-if="!isLoading && activeStall" :stall="stalls.find(stall => stall.id == activeStall)"
       :products="filterProducts" :stall-products="products.filter(p => p.stall_id == activeStall)"
       :product-detail="activeProduct" :relays="relays" :account="account" :pool="pool" :styles="config?.opts ?? {}"
       @login-dialog="openAccountDialog" @change-page="navigateTo"></customer-stall>
@@ -275,6 +277,7 @@
 <script src="{{ url_for('nostrmarket_static', path='components/product-detail/product-detail.js') }}"></script>
 <script src="{{ url_for('nostrmarket_static', path='components/shopping-cart/shopping-cart.js') }}"></script>
 <script src="{{ url_for('nostrmarket_static', path='components/chat-dialog/chat-dialog.js') }}"></script>
+<script src="{{ url_for('nostrmarket_static', path='components/market-config/market-config.js') }}"></script>
 <script src="{{ url_for('nostrmarket_static', path='js/market.js') }}"></script>
 <style scoped>
   .q-field__native span {