feat: refresh market-config

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

@@ -95,12 +95,14 @@
               <strong>UI Configurations</strong>
             </div>
 
-            <q-input @change="updateUiConfig" outlined v-model="configData.ui.picture" type="text" label="Logo" class="q-mb-md">
+            <q-input @change="updateUiConfig" outlined v-model="configData.ui.picture" type="text" label="Logo"
+              class="q-mb-md">
             </q-input>
-            <q-input @change="updateUiConfig" outlined v-model="configData.ui.banner" type="text" label="Banner" class="q-mb-md">
+            <q-input @change="updateUiConfig" outlined v-model="configData.ui.banner" type="text" label="Banner"
+              class="q-mb-md">
             </q-input>
-            <q-select @change="updateUiConfig" filled v-model="configData.ui.theme" hint="Choose marketplace theme"
+            <q-select @input="updateUiConfig" filled v-model="configData.ui.theme"
-              :options="themeOptions" label="Marketplace Theme"></q-select>
+              hint="Choose marketplace theme" :options="themeOptions" label="Marketplace Theme"></q-select>
 
 
           </q-tab-panel>

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: ['merchants', 'relays', 'config'],
+        props: ['merchants', 'relays', 'config-ui'],
         template,
 
         data: function () {
@@ -82,12 +82,17 @@ async function marketConfig(path) {
                 this.$emit('remove-relay', relay)
             },
             updateUiConfig: function () {
-                console.log('### this.info', this.configData)
+                const { name, about, ui } = this.configData
-                this.$emit('ui-config-update', this.configData)
+                console.log('### this.info', { name, about, ui })
+                this.$emit('ui-config-update', { name, about, ui })
             }
         },
         created: async function () {
-            this.configData = { ...this.configData, ...this.config }
+            console.log('### this.configUi', this.configUi)
+            if (this.configUi) {
+                this.configData = { ...this.configData, ...this.configUi }
+            }
+
         }
     })
 }

static/js/market.js

@@ -98,43 +98,34 @@ const market = async () => {
         activeStall: null,
         activeProduct: null,
         pool: null,
-        config: null,
+        config: {
-        configData: {
+          opts: null
-          show: false,
-          data: {
-            name: null,
-            about: null,
-            ui: {
-              picture: null,
-              banner: null,
-              theme: null
-            }
-          }
         },
+
         naddr: null,
-        loading: false
+        loading: false,
+
+        defaultBanner: '/nostrmarket/static/images/nostr-cover.png',
+        defaultLogo: '/nostrmarket/static/images/nostr-avatar.png'
       }
     },
     watch: {
       config(n, o) {
-        console.log('### config new', n)
+        console.log('#### watch config', n)
-        const defaultBanner = '/nostrmarket/static/images/nostr-cover.png'
         if (!n?.opts?.ui?.banner) {
-          this.bannerImage = defaultBanner
+          this.bannerImage = this.defaultBanner
         } else if (n?.opts?.ui?.banner !== o?.opts?.ui?.banner) {
           this.bannerImage = null
           setTimeout(() => {
-            this.bannerImage = this.sanitizeImageSrc(n?.opts?.ui?.banner, defaultBanner), 1
+            this.bannerImage = this.sanitizeImageSrc(n?.opts?.ui?.banner, this.defaultBanner), 1
           })
         }
-
+        if (!n?.opts?.ui?.picture) {
-        const defaultLogo = '/nostrmarket/static/images/nostr-avatar.png'
+          this.logoImage = this.defaultLogo
-        if (n?.opts?.ui?.picture) {
-          this.logoImage = defaultLogo
         } else if (n?.opts?.ui?.picture !== o?.opts?.ui?.picture) {
           this.logoImage = null
           setTimeout(() => {
-            this.logoImage = this.sanitizeImageSrc(n?.opts?.ui?.picture, defaultLogo), 1
+            this.logoImage = this.sanitizeImageSrc(n?.opts?.ui?.picture, this.defaultLogo), 1
           })
         }
 
@@ -223,11 +214,24 @@ const market = async () => {
       }
     },
     async created() {
+      this.bannerImage = this.defaultBanner
+      this.logoImage = this.defaultLogo
+
       this.merchants = this.$q.localStorage.getItem('nostrmarket.merchants') || []
       this.shoppingCarts = this.$q.localStorage.getItem('nostrmarket.shoppingCarts') || []
 
       this.account = this.$q.localStorage.getItem('nostrmarket.account') || null
 
+      const uiConfig = this.$q.localStorage.getItem('nostrmarket.marketplace-config') || {}
+      // trigger the `watch` logic
+      this.config = { ...this.config, opts: { ...this.config.opts, ...uiConfig } }
+      if (this.config?.opts?.ui?.theme) {
+        document.body.setAttribute('data-theme', this.config.opts.ui.theme)
+      }
+
+      console.log('### uiConfig', uiConfig)
+      console.log('### this.config', this.config)
+
       const prefix = 'nostrmarket.orders.'
       const orderKeys = this.$q.localStorage.getAllKeys().filter(k => k.startsWith(prefix))
       orderKeys.forEach(k => {
@@ -238,6 +242,7 @@ const market = async () => {
 
 
 
+
       //console.log("UUID", crypto.randomUUID())
 
       // Check for stored merchants and relays on localStorage
@@ -357,24 +362,25 @@ const market = async () => {
       openAccountDialog() {
         this.accountDialog.show = true
       },
-      editConfigDialog() {
+
-        if (this.canEditConfig && this.config?.opts) {
+
-          let { name, about, ui } = this.config.opts
+      async updateUiConfig(updateData) {
-          this.configData.data = { name, about, ui }
+        console.log('### updateUiConfig', updateData)
-          this.configData.data.identifier = this.config?.d
+        const { name, about, ui } = updateData
+        this.config.opts = { ...this.config.opts, name, about, ui }
+        if (ui.theme) {
+          document.body.setAttribute('data-theme', ui.theme)
         }
+        this.$q.localStorage.set('nostrmarket.marketplace-config', { name, about, ui })
 
-      },
 
-      updateUiConfig(configData) {
-        console.log('### updateUiConfig', configData)
-      },
 
-      async sendConfig() {
+
-        let { name, about, ui } = this.configData.data
+        if (!this.account?.privkey) return
-        let merchants = Array.from(this.pubkeys)
+
-        let identifier = this.configData.data.identifier ?? crypto.randomUUID()
+        const merchants = Array.from(this.merchants.map(m => m.publicKey))
-        let event = {
+        const identifier = this.config.identifier ?? crypto.randomUUID()
+        const event = {
           ...(await NostrTools.getBlankEvent()),
           kind: 30019,
           content: JSON.stringify({ name, about, ui, merchants }),
@@ -407,25 +413,9 @@ const market = async () => {
           identifier: identifier,
           relays: Array.from(this.relays)
         })
-        this.config = this.configData.data
-        this.resetConfig()
         return
       },
-      resetConfig() {
+
-        this.configData = {
-          show: false,
-          identifier: null,
-          data: {
-            name: null,
-            about: null,
-            ui: {
-              picture: null,
-              banner: null,
-              theme: null
-            }
-          }
-        }
-      },
       async updateData(events) {
         console.log('### updateData', events)
         if (events.length < 1) {
@@ -510,6 +500,7 @@ const market = async () => {
       },
 
       async checkMarketplaceNaddr(pool) {
+        if (!this.naddr) return
         try {
           // add relays to the set   
 
@@ -533,12 +524,11 @@ const market = async () => {
           this.merchants.push(...extraMerchants)
 
           // change theme
-          let { theme } = this.config.opts?.ui
+          const { theme } = this.config.opts?.ui
           theme && document.body.setAttribute('data-theme', theme)
         } catch (error) {
           console.warn(error)
         }
-        console.log('### config', this.config)
       },
       async poolSubscribe() {
         const authors = Array.from(this.pubkeys).concat(this.merchants.map(m => m.publicKey))

templates/nostrmarket/market.html

@@ -74,11 +74,15 @@
       <div class="col-lg-8 col-md-10 col-sm-12 auto-width">
         <q-banner class="row q-pa-none q-mb-lg gt-sm shadow-2">
           <q-img v-if="bannerImage" :src="bannerImage" class="rounded-borders"
-            style="width: 100%; height: 250px" cover></q-img>
+            style="width: 100%; height: 250px" cover>
+            <div v-if="config?.opts?.about" class="absolute-bottom text-subtitle1 text-center">
+              <span v-text="config.opts.about"></span>
+            </div>
+          </q-img>
         </q-banner>
         <div>
           <q-breadcrumbs class="cursor">
-            <q-breadcrumbs-el :label="'Market'" icon="home" @click="navigateTo('market')" class="cursor-pointer">
+            <q-breadcrumbs-el :label="config?.opts?.name || 'Market'" icon="home" @click="navigateTo('market')" class="cursor-pointer">
               <q-checkbox v-model="groupByStall" v-if="activePage === 'market'" class="q-pl-md float-right" size="xs"
                 val="xs" label="Group by stalls"></q-checkbox>
 
@@ -109,7 +113,7 @@
 
         <market-config v-if="activePage === 'market-config'" :merchants="merchants" @add-merchant="addMerchant"
           @remove-merchant="removeMerchant" :relays="relays" @add-relay="addRelay" @remove-relay="removeRelay"
-          :config="configData" @ui-config-update="updateUiConfig"></market-config>
+          :config-ui="config?.opts" @ui-config-update="updateUiConfig"></market-config>
 
         <user-config v-else-if="activePage === 'user-config'"></user-config>