feat: basic stall flow

static/components/stall-list/stall-list.html

@@ -0,0 +1,157 @@
+<div>
+  <div class="row items-center no-wrap q-mb-md">
+    <div class="col q-pr-lg">
+      <q-btn
+        @click="stallDialog.show = true"
+        unelevated
+        color="green"
+        class="float-left"
+        >New Stall</q-btn
+      >
+      <q-input
+        borderless
+        dense
+        debounce="300"
+        v-model="filter"
+        placeholder="Search"
+        class="float-right"
+      >
+        <template v-slot:append>
+          <q-icon name="search"></q-icon>
+        </template>
+      </q-input>
+    </div>
+    <!-- <div class="col-auto">
+        <q-btn outline color="grey" label="...">
+          <q-menu auto-close>
+            <q-list style="min-width: 100px">
+              <q-item clickable>
+                <q-item-section @click="exportrelayCSV"
+                  >Export to CSV</q-item-section
+                >
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
+      </div> -->
+  </div>
+  <!--
+    <q-table
+      flat
+      dense
+      :data="stalls"
+      row-key="id"
+      :columns="relaysTable.columns"
+      :pagination.sync="relaysTable.pagination"
+      :filter="filter"
+    >
+      <template v-slot:body="props">
+        <q-tr :props="props">
+          <q-td auto-width>
+            <q-btn
+              size="sm"
+              color="accent"
+              round
+              dense
+              @click="props.row.expanded= !props.row.expanded"
+              :icon="props.row.expanded? 'remove' : 'add'"
+            />
+          </q-td>
+
+          <q-td key="id" :props="props">
+            <a style="color: unset" :href="props.row.id" target="_blank">
+              {{props.row.id}}</a
+            >
+          </q-td>
+          <q-td key="toggle" :props="props">
+            <q-toggle
+              size="sm"
+              color="secodary"
+              v-model="props.row.active"
+              @input="showToggleRelayDialog(props.row)"
+            ></q-toggle>
+          </q-td>
+          <q-td auto-width> {{props.row.name}} </q-td>
+          <q-td key="description" :props="props">
+            {{props.row.description}}
+          </q-td>
+          <q-td key="pubkey" :props="props">
+            <div>{{props.row.pubkey}}</div>
+          </q-td>
+          <q-td key="contact" :props="props">
+            <div>{{props.row.contact}}</div>
+          </q-td>
+        </q-tr>
+        <q-tr v-if="props.row.expanded" :props="props">
+          <q-td colspan="100%">
+            <div class="row items-center q-mb-lg">
+              <div class="col-12">
+                <relay-details
+                  :relay-id="props.row.id"
+                  :adminkey="g.user.wallets[0].adminkey"
+                  :inkey="g.user.wallets[0].inkey"
+                  :wallet-options="g.user.walletOptions"
+                  @relay-deleted="handleRelayDeleted"
+                  @relay-updated="handleRelayUpdated"
+                ></relay-details>
+              </div>
+            </div>
+          </q-td>
+        </q-tr>
+      </template>
+      {% endraw %}
+    </q-table>
+    -->
+  <div>
+    <q-dialog v-model="stallDialog.show" position="top">
+      <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
+        <q-form @submit="sendStallFormData" class="q-gutter-md">
+          <q-input
+            filled
+            dense
+            v-model.trim="stallDialog.data.name"
+            label="Name"
+          ></q-input>
+          <q-select
+            filled
+            dense
+            emit-value
+            v-model="stallDialog.data.wallet"
+            :options="walletOptions"
+            label="Wallet *"
+          >
+          </q-select>
+          <q-select
+            filled
+            dense
+            v-model="stallDialog.data.currency"
+            type="text"
+            label="Unit"
+            :options="currencies"
+          ></q-select>
+          <q-select
+            :options="zoneOptions"
+            filled
+            dense
+            multiple
+            v-model.trim="stallDialog.data.shippingZones"
+            label="Shipping Zones"
+          ></q-select>
+
+          <div class="row q-mt-lg">
+            <q-btn
+              unelevated
+              color="primary"
+              :disable="stallDialog.data.wallet == null"
+              type="submit"
+              >Create Stall</q-btn
+            >
+            <q-btn v-close-popup flat color="grey" class="q-ml-auto"
+              >Cancel</q-btn
+            >
+          </div>
+        </q-form>
+      </q-card>
+    </q-dialog>
+  </div>
+</div>

static/components/stall-list/stall-list.js

@@ -0,0 +1,84 @@
+async function stallList(path) {
+  const template = await loadTemplateAsync(path)
+  Vue.component('stall-list', {
+    name: 'stall-list',
+    template,
+
+    props: [`adminkey`, 'inkey', 'wallet-options'],
+    data: function () {
+      return {
+        filter: '',
+        stalls: [],
+        currencies: [],
+        stallDialog: {
+          show: false,
+          data: {
+            name: '',
+            wallet: null,
+            currency: 'sat',
+            shippingZones: []
+          }
+        },
+        zoneOptions: []
+      }
+    },
+    methods: {
+      sendStallFormData: async function () {
+        console.log('### sendStallFormData', this.stallDialog.data)
+
+        await this.createStall({
+          name: this.stallDialog.data.name,
+          wallet: this.stallDialog.data.wallet,
+          currency: this.stallDialog.data.currency,
+          shipping_zones: this.stallDialog.data.shippingZones.map(z => z.id),
+          config: {}
+        })
+      },
+      createStall: async function (stall) {
+        console.log('### createStall', stall)
+        try {
+          const {data} = await LNbits.api.request(
+            'POST',
+            '/nostrmarket/api/v1/stall',
+            this.adminkey,
+            stall
+          )
+        } catch (error) {
+          LNbits.utils.notifyApiError(error)
+        }
+      },
+      getCurrencies: async function () {
+        try {
+          const {data} = await LNbits.api.request(
+            'GET',
+            '/nostrmarket/api/v1/currencies',
+            this.inkey
+          )
+
+          this.currencies = ['sat', ...data]
+        } catch (error) {
+          LNbits.utils.notifyApiError(error)
+        }
+      },
+      getZones: async function () {
+        try {
+          const {data} = await LNbits.api.request(
+            'GET',
+            '/nostrmarket/api/v1/zone',
+            this.inkey
+          )
+          this.zoneOptions = data.map(z => ({
+            id: z.id,
+            label: `${z.name} (${z.countries.join(', ')})`
+          }))
+        } catch (error) {
+          LNbits.utils.notifyApiError(error)
+        }
+      }
+    },
+    created: async function () {
+      await this.getCurrencies()
+      await this.getZones()
+    }
+  })
+}

static/js/index.js

@@ -1,9 +1,10 @@
 const merchant = async () => {
   Vue.component(VueQrcode.name, VueQrcode)
 
-  await stallDetails('static/components/stall-details/stall-details.html')
   await keyPair('static/components/key-pair/key-pair.html')
   await shippingZones('static/components/shipping-zones/shipping-zones.html')
+  await stallDetails('static/components/stall-details/stall-details.html')
+  await stallList('static/components/stall-list/stall-list.html')
 
   const nostr = window.NostrTools