feat: add products table

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

@@ -115,6 +115,59 @@
           <div class="col-6 col-sm-8 q-pr-lg"></div>
           <div class="col-3 col-sm-1"></div>
         </div>
+
+        <div class="row items-center no-wrap q-mb-md">
+          <div class="col-12">
+            <q-table
+              flat
+              dense
+              :data="products"
+              row-key="id"
+              :columns="productsTable.columns"
+              :pagination.sync="productsTable.pagination"
+              :filter="productsFilter"
+            >
+              <template v-slot:body="props">
+                <q-tr :props="props">
+                  <q-td auto-width>
+                    <q-btn
+                      size="sm"
+                      color="pink"
+                      dense
+                      @click="props.row.expanded= !props.row.expanded"
+                      icon="delete"
+                    />
+                  </q-td>
+                  <q-td auto-width>
+                    <q-btn
+                      size="sm"
+                      color="accent"
+                      dense
+                      @click="props.row.expanded= !props.row.expanded"
+                      icon="edit"
+                    />
+                  </q-td>
+
+                  <q-td key="id" :props="props"> {{props.row.id}} </q-td>
+                  <q-td key="name" :props="props"> {{props.row.name}} </q-td>
+                  <q-td key="price" :props="props"> {{props.row.price}} </q-td>
+                  <q-td key="quantity" :props="props">
+                    {{props.row.quantity}}
+                  </q-td>
+
+                  <q-td key="categories" :props="props">
+                    <div>
+                      {{props.row.categories.filter(c => c).join(', ')}}
+                    </div>
+                  </q-td>
+                  <q-td key="description" :props="props">
+                    {{props.row.description}}
+                  </q-td>
+                </q-tr>
+              </template>
+            </q-table>
+          </div>
+        </div>
       </div>
     </q-tab-panel>
     <q-tab-panel name="orders">

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

@@ -32,6 +32,63 @@ async function stallDetails(path) {
             price: 0,
             quantity: 0
           }
+        },
+        productsFilter: '',
+        productsTable: {
+          columns: [
+            {
+              name: 'delete',
+              align: 'left',
+              label: '',
+              field: ''
+            },
+            {
+              name: 'edit',
+              align: 'left',
+              label: '',
+              field: ''
+            },
+
+            {
+              name: 'id',
+              align: 'left',
+              label: 'ID',
+              field: 'id'
+            },
+            {
+              name: 'name',
+              align: 'left',
+              label: 'Name',
+              field: 'name'
+            },
+            {
+              name: 'price',
+              align: 'left',
+              label: 'Price',
+              field: 'price'
+            },
+            {
+              name: 'quantity',
+              align: 'left',
+              label: 'Quantity',
+              field: 'quantity'
+            },
+            {
+              name: 'categories',
+              align: 'left',
+              label: 'Categories',
+              field: 'categories'
+            },
+            {
+              name: 'description',
+              align: 'left',
+              label: 'Description',
+              field: 'description'
+            }
+          ],
+          pagination: {
+            rowsPerPage: 10
+          }
         }
       }
     },
@@ -129,6 +186,20 @@ async function stallDetails(path) {
         this.productDialog.data.image = null
         this.productDialog = {...this.productDialog}
       },
+      getProducts: async function () {
+        try {
+          const {data} = await LNbits.api.request(
+            'GET',
+            '/nostrmarket/api/v1/product/' + this.stall.id,
+            this.inkey
+          )
+          this.products = data
+
+          console.log('### this.products', this.products)
+        } catch (error) {
+          LNbits.utils.notifyApiError(error)
+        }
+      },
       sendProductFormData: function () {
         var data = {
           stall_id: this.stall.id,
@@ -206,6 +277,7 @@ async function stallDetails(path) {
     },
     created: async function () {
       await this.getStall()
+      await this.getProducts()
     }
   })
 }