feat: basic merchant fixes

static/components/market-config/market-config.html

@@ -10,28 +10,30 @@
       <q-tab-panels v-model="tab">
         <q-tab-panel name="merchants">
           <div>
-            <q-input outlined v-model="inputPubkey" @keydown.enter="addPubkey(null)" type="text" label="Pubkey/Npub"
+            <q-input outlined v-model="inputPubkey" @keydown.enter="addMerchant" type="text" label="Pubkey/Npub"
               hint="Add merchants">
-              <q-btn @click="addPubkey(null)" dense flat icon="add"></q-btn>
+              <q-btn @click="addMerchant" 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 v-for="{publicKey, profile} in merchants" :key="publicKey">
 
                 <q-item-section avatar>
                   <q-avatar>
-                    <img v-if="profiles.get(pub) && profiles.get(pub)?.picture" :src="profiles.get(pub).picture" />
+                    <img v-if="profile?.picture" :src="profile.picture" />
                     <img v-else src="/nostrmarket/static/images/blank-avatar.webp" />
                   </q-avatar>
                 </q-item-section>
-                <q-item-section>
+                <q-item-section class="q-mt-sm">
-                  <q-item-label v-if="profiles.get(pub) && profiles.get(pub)?.name">{{ profiles.get(pub).name
+                  <q-item-label><strong>{{ profile?.name}}</strong></q-item-label>
-                    }}</q-item-label>
+                  <q-item-label>
-                  <q-item-label v-else>{{ `${pub.slice(0, 5)}...${pub.slice(-5)}`
+                    <div class="text-caption text-grey ellipsis-2-lines">
-                    }}</q-item-label>
+                      <p>{{ publicKey }}</p>
-                  <q-tooltip>{{ pub }}</q-tooltip>
+                    </div>
+                  </q-item-label>
+                  <q-tooltip>{{ publicKey }}</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-btn class="gt-xs" size="12px" flat dense round icon="delete" @click="removeMerchant(publicKey)" />
                 </q-item-section>
 
               </q-item>

static/components/market-config/market-config.js

@@ -2,7 +2,7 @@ async function marketConfig(path) {
     const template = await loadTemplateAsync(path)
     Vue.component('market-config', {
         name: 'market-config',
-        props: ['adminkey',],
+        props: ['merchants',],
         template,
 
         data: function () {
@@ -14,45 +14,53 @@ async function marketConfig(path) {
             }
         },
         methods: {
-            async addPubkey(pubkey) {
+            addMerchant: async function() {
-                if (!pubkey) {
+                console.log('### market config', this.merchants)
-                    pubkey = String(this.inputPubkey).trim()
+                this.$emit('add-merchant', this.inputPubkey)
-                }
-                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) {
+            removeMerchant: async function(publicKey) {
-                // Needs a hack for Vue reactivity
+                this.$emit('remove-merchant', publicKey)
-                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
             },
+            // 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 () {
 

static/js/market.js

@@ -48,6 +48,9 @@ const market = async () => {
             key: null
           }
         },
+
+        merchants: [],
+
         showMarketConfig: false,
         searchNostr: false,
         drawer: true,
@@ -317,6 +320,7 @@ const market = async () => {
         }
       },
       async updateData(events) {
+        console.log('### updateData', events)
         if (events.length < 1) {
           this.$q.notify({
             message: 'No matches were found!'
@@ -335,6 +339,9 @@ const market = async () => {
             if (e.pubkey == this.account?.pubkey) {
               this.accountMetadata = this.profiles.get(this.account.pubkey)
             }
+            this.merchants.filter(m => m.publicKey === e.pubkey).forEach(m => m.profile = e.content)
+            this.merchants = this.merchants.concat([])
+            console.log('### this.merchants', this.merchants)
             return
           } else if (e.kind == 30018) {
             //it's a product `d` is the prod. id
@@ -390,15 +397,18 @@ const market = async () => {
 
         let relays = Array.from(this.relays)
 
+        const authors = Array.from(this.pubkeys).concat(this.merchants.map(m => m.publicKey))
+        console.log('### stupid', authors)
         // Get metadata and market data from the pubkeys
         await pool
           .list(relays, [
             {
               kinds: [0, 30017, 30018], // for production kind is 30017
-              authors: Array.from(this.pubkeys)
+              authors
             }
           ])
           .then(async events => {
+            console.log('### stupid response', events)
             if (!events || events.length == 0) return
             await this.updateData(events)
           })
@@ -409,10 +419,12 @@ const market = async () => {
         return
       },
       async poolSubscribe() {
+        const authors = Array.from(this.pubkeys).concat(this.merchants.map(m => m.publicKey))
+        console.log('### poolSubscribe.authors', authors)
         this.poolSub = this.pool.sub(Array.from(this.relays), [
           {
             kinds: [0, 30017, 30018],
-            authors: Array.from(this.pubkeys),
+            authors,
             since: Date.now() / 1000
           }
         ])
@@ -525,6 +537,19 @@ const market = async () => {
         this.relays = new Set(Array.from(relays))
         this.$q.localStorage.set(`diagonAlley.relays`, Array.from(this.relays))
         this.initNostr()
+      },
+      addMerchant(publicKey){
+        console.log('### addMerchat', publicKey)
+        this.merchants.unshift({
+          publicKey,
+          profile: null
+        })
+        this.initNostr() // todo: improve
+      },
+      removeMerchant(publicKey){
+        console.log('### removeMerchat', publicKey)
+        this.merchants = this.merchants.filter(m => m.publicKey !== publicKey)
+        this.initNostr() // todo: improve
       }
     }
   })

templates/nostrmarket/market.html

@@ -203,7 +203,8 @@
 
         <q-separator class="q-mt-md q-mb-md"></q-separator>
 
-        <market-config v-if="showMarketConfig"></market-config>
+        <market-config v-if="showMarketConfig" :merchants="merchants" @add-merchant="addMerchant"
+          @remove-merchant="removeMerchant"></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 ?? {}"