feat: refresh market-config
This commit is contained in:
Vlad Stan
parent
3ffb055e94
commit
d22c15d7a7
4 changed files with 67 additions and 66 deletions
|
|
@ -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"
|
||||
:options="themeOptions" label="Marketplace Theme"></q-select>
|
||||
<q-select @input="updateUiConfig" filled v-model="configData.ui.theme"
|
||||
hint="Choose marketplace theme" :options="themeOptions" label="Marketplace Theme"></q-select>
|
||||
|
||||
|
||||
</q-tab-panel>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
this.$emit('ui-config-update', this.configData)
|
||||
const { name, about, ui } = 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 }
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -98,43 +98,34 @@ const market = async () => {
|
|||
activeStall: null,
|
||||
activeProduct: null,
|
||||
pool: null,
|
||||
config: null,
|
||||
configData: {
|
||||
show: false,
|
||||
data: {
|
||||
name: null,
|
||||
about: null,
|
||||
ui: {
|
||||
picture: null,
|
||||
banner: null,
|
||||
theme: null
|
||||
}
|
||||
}
|
||||
config: {
|
||||
opts: 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)
|
||||
const defaultBanner = '/nostrmarket/static/images/nostr-cover.png'
|
||||
console.log('#### watch config', n)
|
||||
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
|
||||
})
|
||||
}
|
||||
|
||||
const defaultLogo = '/nostrmarket/static/images/nostr-avatar.png'
|
||||
if (n?.opts?.ui?.picture) {
|
||||
this.logoImage = defaultLogo
|
||||
if (!n?.opts?.ui?.picture) {
|
||||
this.logoImage = this.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
|
||||
this.configData.data = { name, about, ui }
|
||||
this.configData.data.identifier = this.config?.d
|
||||
|
||||
|
||||
async updateUiConfig(updateData) {
|
||||
console.log('### updateUiConfig', updateData)
|
||||
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
|
||||
let merchants = Array.from(this.pubkeys)
|
||||
let identifier = this.configData.data.identifier ?? crypto.randomUUID()
|
||||
let event = {
|
||||
|
||||
if (!this.account?.privkey) return
|
||||
|
||||
const merchants = Array.from(this.merchants.map(m => m.publicKey))
|
||||
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))
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue