order list

static/components/chat-dialog/chat-dialog.html

@@ -8,8 +8,14 @@
   >
     <q-card>
       <q-bar>
-        <q-icon name="chat" />
+        <q-btn dense flat icon="chat" label="Chat" @click="isChat = true" />
-        <div>Chat Box</div>
+        <q-btn
+          dense
+          flat
+          icon="receipt_long"
+          label="Orders"
+          @click="isChat = false"
+        />
 
         <q-space></q-space>
 
@@ -17,7 +23,7 @@
           <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
-
+      <div v-if="isChat">
         <q-card-section
           class="q-ml-auto"
           style="
@@ -63,6 +69,18 @@
             </q-input>
           </q-form>
         </q-card-actions>
+      </div>
+      <div v-else>
+        <q-card-section style="height: calc(100vh - 120px)">
+          <q-table
+            title="Orders"
+            :data="ordersList"
+            :columns="ordersTable.columns"
+            :pagination.sync="ordersTable.pagination"
+            row-key="id"
+          />
+        </q-card-section>
+      </div>
       <q-inner-loading :showing="loading">
         <q-spinner-cube size="50px" color="primary" />
       </q-inner-loading>

static/components/chat-dialog/chat-dialog.js

@@ -9,15 +9,64 @@ async function chatDialog(path) {
     data: function () {
       return {
         dialog: false,
+        isChat: false,
         loading: false,
         pool: null,
         nostrMessages: [],
-        newMessage: ''
+        newMessage: '',
+        ordersTable: {
+          columns: [
+            {
+              name: 'id',
+              align: 'left',
+              label: 'ID',
+              field: 'id'
+            },
+            {
+              name: 'paid',
+              align: 'left',
+              label: 'Paid',
+              field: 'paid',
+              sortable: true
+            },
+            {
+              name: 'shipped',
+              align: 'left',
+              label: 'Shipped',
+              field: 'shipped',
+              sortable: true
+            },
+            {
+              name: 'invoice',
+              align: 'left',
+              label: 'Invoice',
+              field: row =>
+                row.payment_options &&
+                row.payment_options.find(p => p.type == 'ln').link
+            }
+          ],
+          pagination: {
+            rowsPerPage: 10
+          }
+        }
       }
     },
     computed: {
       sortedMessages() {
         return this.nostrMessages.sort((a, b) => b.created_at - a.created_at)
+      },
+      ordersList() {
+        let orders = this.nostrMessages
+          .sort((a, b) => b.created_at - a.created_at)
+          .filter(o => isJson(o.msg))
+          .reduce((acc, cur) => {
+            const obj = JSON.parse(cur.msg)
+            const key = obj.id
+            const curGroup = acc[key] ?? {}
+            return {...acc, [key]: {...curGroup, ...obj}}
+          }, {})
+        console.log(orders)
+        return Object.values(orders)
       }
     },
     methods: {
@@ -67,6 +116,7 @@ async function chatDialog(path) {
                 event.content
               )
             }
+            if (plaintext) {
               messagesMap.set(event.id, {
                 created_at: event.created_at,
                 msg: plaintext,
@@ -74,6 +124,7 @@ async function chatDialog(path) {
                 sender: `${mine ? 'Me' : 'Merchant'}`
               })
               this.nostrMessages = Array.from(messagesMap.values())
+            }
           } catch {
             console.error('Unable to decrypt message!')
           }