feat: show orders per stall

static/components/order-list/order-list.html

@@ -1,3 +1,44 @@
 <div>
-    xx1
-</div>
+  <q-table
+    flat
+    dense
+    :data="orders"
+    row-key="id"
+    :columns="ordersTable.columns"
+    :pagination.sync="ordersTable.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"> {{toShortId(props.row.id)}} </q-td>
+        <q-td key="total" :props="props"> {{props.row.total}} </q-td>
+
+        <q-td key="paid" :props="props"> {{props.row.paid}} </q-td>
+        <q-td key="shipped" :props="props"> {{props.row.shipped}} </q-td>
+
+        <q-td key="pubkey" :props="props">
+          {{toShortId(props.row.pubkey)}}
+        </q-td>
+        <q-td key="time" :props="props"> {{formatDate(props.row.time)}} </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"></div>
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
+  </q-table>
+</div>

static/components/order-list/order-list.js

@@ -1,18 +1,95 @@
 async function orderList(path) {
-    const template = await loadTemplateAsync(path)
-    Vue.component('order-list', {
-      name: 'order-list',
-      props: ['adminkey', 'inkey'],
-      template,
-  
-      data: function () {
-        return {
+  const template = await loadTemplateAsync(path)
+  Vue.component('order-list', {
+    name: 'order-list',
+    props: ['stall-id', 'adminkey', 'inkey'],
+    template,
+
+    data: function () {
+      return {
+        orders: [],
+
+        filter: '',
+        ordersTable: {
+          columns: [
+            {
+              name: '',
+              align: 'left',
+              label: '',
+              field: ''
+            },
+            {
+              name: 'id',
+              align: 'left',
+              label: 'ID',
+              field: 'id'
+            },
+            {
+              name: 'total',
+              align: 'left',
+              label: 'Total',
+              field: 'total'
+            },
+            {
+              name: 'paid',
+              align: 'left',
+              label: 'Paid',
+              field: 'paid'
+            },
+            {
+              name: 'shipped',
+              align: 'left',
+              label: 'Shipped',
+              field: 'shipped'
+            },
+            {
+              name: 'pubkey',
+              align: 'left',
+              label: 'Customer',
+              field: 'pubkey'
+            },
+            {
+              name: 'time',
+              align: 'left',
+              label: 'Date',
+              field: 'time'
+            }
+          ],
+          pagination: {
+            rowsPerPage: 10
+          }
         }
-      },
-      methods: {
-      },
-      created: async function () {
       }
-    })
-  }
-  
+    },
+    methods: {
+      toShortId: function (value) {
+        return value.substring(0, 5) + '...' + value.substring(value.length - 5)
+      },
+      formatDate: function (value) {
+        return Quasar.utils.date.formatDate(
+          new Date(value * 1000),
+          'YYYY-MM-DD HH:mm'
+        )
+      },
+      getOrders: async function () {
+        try {
+          const ordersPath = this.stallId
+            ? `/stall/order/${this.stallId}`
+            : '/order'
+          const {data} = await LNbits.api.request(
+            'GET',
+            '/nostrmarket/api/v1' + ordersPath,
+            this.inkey
+          )
+          this.orders = data.map(s => ({...s, expanded: false}))
+          console.log('### this.orders', this.orders)
+        } catch (error) {
+          LNbits.utils.notifyApiError(error)
+        }
+      }
+    },
+    created: async function () {
+      await this.getOrders()
+    }
+  })
+}