From 0226fc3f79f4548d8f431a9efb79888895823e2d Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Mon, 17 Jul 2023 15:13:08 +0300
Subject: [PATCH] feat: prepare for naddr fix

---
 .../market-config/market-config.html          | 22 ++++++------
 .../components/market-config/market-config.js | 34 ++++++++++++++-----
 static/js/market.js                           |  3 ++
 templates/nostrmarket/market.html             |  4 +--
 4 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/static/components/market-config/market-config.html b/static/components/market-config/market-config.html
index 79ad58e..adcd923 100644
--- a/static/components/market-config/market-config.html
+++ b/static/components/market-config/market-config.html
@@ -15,7 +15,7 @@
   <q-card-section>
     <div class="q-pa-md">
       <div class="q-gutter-y-md">
-      
+
         <q-tab-panels v-model="tab">
           <q-tab-panel name="merchants">
             <div>
@@ -85,20 +85,22 @@
           </q-tab-panel>
           <q-tab-panel name="marketplace">
             <div class="q-mb-md"> <strong>Information</strong></div>
-            <q-input outlined v-model="info.name" type="text" label="Marketplace Name" class="q-mb-md">
+            <q-input @change="updateUiConfig" outlined v-model="configData.name" type="text" label="Marketplace Name"
+              class="q-mb-md">
             </q-input>
+            <q-input @change="updateUiConfig" outlined v-model="configData.about" type="textarea" rows="3"
+              label="Marketplace Description" class="q-mb-lg"></q-input>
 
-            <q-input outlined v-model="info.description" type="textarea" rows="3" label="Marketplace Description"
-              class="q-mb-lg"></q-input>
             <div class="q-mb-md q-mt-lg">
               <strong>UI Configurations</strong>
             </div>
-            <q-input outlined v-model="info.theme" type="text" label="Theme" 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 outlined v-model="info.logo" type="text" label="Logo" class="q-mb-md">
-            </q-input>
-            <q-input outlined v-model="info.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"
+              :options="themeOptions" label="Marketplace Theme"></q-select>
 
 
           </q-tab-panel>
@@ -111,8 +113,8 @@
   <q-separator />
   <q-card-section>
     <div class="float-right">
-      <q-btn flat label="Copy Naddr" color="green"></q-btn>
-      <q-btn flat label="Update" color="primary"></q-btn>
+      <q-btn rounded label="Copy Naddr" color="green"></q-btn>
+      <q-btn rounded label="Update" class="q-ml-lg" color="primary"></q-btn>
     </div>
   </q-card-section>
   <q-card-section></q-card-section>
diff --git a/static/components/market-config/market-config.js b/static/components/market-config/market-config.js
index 6255fed..9c6c269 100644
--- a/static/components/market-config/market-config.js
+++ b/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'],
+        props: ['merchants', 'relays', 'config'],
         template,
 
         data: function () {
@@ -12,13 +12,27 @@ async function marketConfig(path) {
                 profiles: new Map(),
                 merchantPubkey: null,
                 relayUrl: null,
-                info: {
+                configData: {
+                    identifier: null,
                     name: null,
-                    description: null,
-                    theme: null,
-                    logo: null,
-                    banner: null
-                }
+                    about: null,
+                    ui: {
+                        picture: null,
+                        banner: null,
+                        theme: null
+                    }
+                },
+                themeOptions: [
+                    'classic',
+                    'bitcoin',
+                    'flamingo',
+                    'cyber',
+                    'freedom',
+                    'mint',
+                    'autumn',
+                    'monochrome',
+                    'salvador'
+                ]
             }
         },
         methods: {
@@ -67,9 +81,13 @@ async function marketConfig(path) {
             removeRelay: async function (relay) {
                 this.$emit('remove-relay', relay)
             },
+            updateUiConfig: function () {
+                console.log('### this.info', this.configData)
+                this.$emit('ui-config-update', this.configData)
+            }
         },
         created: async function () {
-
+            this.configData = { ...this.configData, ...this.config }
         }
     })
 }
diff --git a/static/js/market.js b/static/js/market.js
index 3efd8e0..ace2d73 100644
--- a/static/js/market.js
+++ b/static/js/market.js
@@ -345,6 +345,9 @@ const market = async () => {
         }
         this.configDialog.show = true
       },
+      updateUiConfig(configData) {
+        console.log('### updateUiConfig', configData)
+      },
       async sendConfig() {
         let { name, about, ui } = this.configDialog.data
         let merchants = Array.from(this.pubkeys)
diff --git a/templates/nostrmarket/market.html b/templates/nostrmarket/market.html
index 8c7c17d..4f603a2 100644
--- a/templates/nostrmarket/market.html
+++ b/templates/nostrmarket/market.html
@@ -265,8 +265,8 @@
         <q-separator class="q-mt-sm q-mb-md"></q-separator>
 
         <market-config v-if="activePage === 'market-config'" :merchants="merchants" @add-merchant="addMerchant"
-          @remove-merchant="removeMerchant" :relays="relays" @add-relay="addRelay"
-          @remove-relay="removeRelay"></market-config>
+          @remove-merchant="removeMerchant" :relays="relays" @add-relay="addRelay" @remove-relay="removeRelay"
+          :config="configDialog" @ui-config-update="updateUiConfig"></market-config>
 
         <user-config v-else-if="activePage === 'user-config'"></user-config>