feat: add basic stall details

static/components/stall-details/stall-details.html

@@ -0,0 +1,109 @@
+<div>
+  <q-tabs v-model="tab" no-caps class="bg-dark text-white shadow-2">
+    <q-tab name="info" label="Stall Info"></q-tab>
+    <q-tab name="products" label="Products"></q-tab>
+    <q-tab name="orders" label="Orders"></q-tab>
+  </q-tabs>
+  <q-tab-panels v-model="tab">
+    <q-tab-panel name="info">
+      <div v-if="stall">
+        <div class="row items-center no-wrap q-mb-md">
+          <div class="col-3 q-pr-lg">Name:</div>
+          <div class="col-6 col-sm-8 q-pr-lg">
+            <q-input
+              filled
+              dense
+              v-model.trim="stall.name"
+              type="text"
+            ></q-input>
+          </div>
+          <div class="col-3 col-sm-1"></div>
+        </div>
+        <div class="row items-center no-wrap q-mb-md">
+          <div class="col-3 q-pr-lg">Description:</div>
+          <div class="col-6 col-sm-8 q-pr-lg">
+            <q-input
+              filled
+              dense
+              v-model.trim="stall.config.description"
+              type="textarea"
+              rows="3"
+              label="Description"
+            ></q-input>
+          </div>
+          <div class="col-3 col-sm-1"></div>
+        </div>
+        <div class="row items-center no-wrap q-mb-md">
+          <div class="col-3 q-pr-lg">Wallet:</div>
+          <div class="col-6 col-sm-8 q-pr-lg">
+            <q-select
+              filled
+              dense
+              emit-value
+              v-model="stall.wallet"
+              :options="walletOptions"
+              label="Wallet *"
+            >
+            </q-select>
+          </div>
+          <div class="col-3 col-sm-1"></div>
+        </div>
+        <div class="row items-center no-wrap q-mb-md">
+          <div class="col-3 q-pr-lg">Currency:</div>
+          <div class="col-6 col-sm-8 q-pr-lg">
+            <q-select
+              filled
+              dense
+              v-model="stall.currency"
+              type="text"
+              label="Unit"
+              :options="currencies"
+            ></q-select>
+          </div>
+          <div class="col-3 col-sm-1"></div>
+        </div>
+        <div class="row items-center no-wrap q-mb-md">
+          <div class="col-3 q-pr-lg">Shipping Zones:</div>
+          <div class="col-6 col-sm-8 q-pr-lg">
+            <q-select
+              :options="filteredZoneOptions"
+              filled
+              dense
+              multiple
+              v-model.trim="stall.shipping_zones"
+              label="Shipping Zones"
+            ></q-select>
+          </div>
+          <div class="col-3 col-sm-1"></div>
+        </div>
+      </div>
+    </q-tab-panel>
+    <q-tab-panel name="payment">
+      <div v-if="stall"></div>
+    </q-tab-panel>
+    <q-tab-panel name="config">
+      <div v-if="stall"></div>
+    </q-tab-panel>
+  </q-tab-panels>
+  <!-- <div class="row items-center q-mt-md q-mb-lg">
+      <div class="col-6 q-pr-lg">
+        <q-btn
+          unelevated
+          color="secondary"
+          class="float-left"
+          @click="updateRelay()"
+          >Update Relay</q-btn
+        >
+      </div>
+      <div class="col-6">
+        <q-btn
+          unelevated
+          color="pink"
+          icon="cancel"
+          class="float-right"
+          @click="deleteRelay()"
+          >Delete Relay</q-btn
+        >
+      </div>
+    </div> -->
+</div>

static/components/stall-details/stall-details.js

@@ -1,15 +1,50 @@
 async function stallDetails(path) {
   const template = await loadTemplateAsync(path)
+
   Vue.component('stall-details', {
     name: 'stall-details',
     template,
 
-    //props: ['stall-id', 'adminkey', 'inkey', 'wallet-options'],
+    props: [
+      'stall-id',
+      'adminkey',
+      'inkey',
+      'wallet-options',
+      'zone-options',
+      'currencies'
+    ],
     data: function () {
       return {
         tab: 'info',
-        relay: null
+        stall: null
+        // currencies: [],
       }
+    },
+    computed: {
+      filteredZoneOptions: function () {
+        if (!this.stall) return []
+        return this.zoneOptions.filter(z => z.currency === this.stall.currency)
+      }
+    },
+    methods: {
+      getStall: async function () {
+        try {
+          const {data} = await LNbits.api.request(
+            'GET',
+            '/nostrmarket/api/v1/stall/' + this.stallId,
+            this.inkey
+          )
+          this.stall = data
+          console.log('### this.stall', this.stall)
+        } catch (error) {
+          LNbits.utils.notifyApiError(error)
+        }
+      }
+
+    },
+    created: async function () {
+      await this.getStall()
+      console.log('### this.zoneOptions', this.zoneOptions)
     }
   })
 }

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

@@ -86,7 +86,16 @@
         <q-td colspan="100%">
           <div class="row items-center q-mb-lg">
             <div class="col-12">
-              <!-- <stall-details></stall-details> -->
+              <stall-details
+                :stall-id="props.row.id"
+                :adminkey="adminkey"
+                :inkey="inkey"
+                :wallet-options="walletOptions"
+                :zone-options="zoneOptions"
+                :currencies="currencies"
+              ></stall-details>
+              <!-- @stall-deleted="handleRelayDeleted"
+              @stall-updated="handleRelayUpdated" -->
             </div>
           </div>
         </q-td>

templates/nostrmarket/index.html

@@ -76,7 +76,7 @@
                 color="primary"
                 class="float-right"
               >
-                <q-tooltip> Show Public or Private keys </q-tooltip>
+                <q-tooltip> Show Public and Private keys </q-tooltip>
               </q-btn>
             </div>
           </div>
@@ -115,6 +115,7 @@
   </div>
 </div>
 {% endblock%}{% block scripts %} {{ window_vars(user) }}
+<!-- todo: serve locally -->
 <script src="https://unpkg.com/nostr-tools/lib/nostr.bundle.js"></script>
 
 <script src="{{ url_for('nostrmarket_static', path='js/utils.js') }}"></script>