From 310cf50d5cf3fe86a2edacf00741363856673dd2 Mon Sep 17 00:00:00 2001
From: Tiago Vasconcelos <talvasconcelos@gmail.com>
Date: Fri, 10 Mar 2023 12:03:46 +0000
Subject: [PATCH] order list

---
 .../components/chat-dialog/chat-dialog.html   | 114 ++++++++++--------
 static/components/chat-dialog/chat-dialog.js  |  67 ++++++++--
 2 files changed, 125 insertions(+), 56 deletions(-)

diff --git a/static/components/chat-dialog/chat-dialog.html b/static/components/chat-dialog/chat-dialog.html
index 7c629b1..fab1a11 100644
--- a/static/components/chat-dialog/chat-dialog.html
+++ b/static/components/chat-dialog/chat-dialog.html
@@ -8,8 +8,14 @@
   >
     <q-card>
       <q-bar>
-        <q-icon name="chat" />
-        <div>Chat Box</div>
+        <q-btn dense flat icon="chat" label="Chat" @click="isChat = true" />
+        <q-btn
+          dense
+          flat
+          icon="receipt_long"
+          label="Orders"
+          @click="isChat = false"
+        />
 
         <q-space></q-space>
 
@@ -17,52 +23,64 @@
           <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
         </q-btn>
       </q-bar>
-
-      <q-card-section
-        class="q-ml-auto"
-        style="
-          width: 100%;
-          max-width: 720px;
-          height: calc(100vh - 120px);
-          overflow-y: scroll;
-          display: flex;
-          flex-direction: column-reverse;
-        "
-      >
-        <q-chat-message
-          :key="index"
-          v-for="(message, index) in sortedMessages"
-          :name="message.sender"
-          :text="[message.msg]"
-          :sent="message.sender == 'Me'"
-          :bg-color="message.sender == 'Me' ? 'white' : 'light-green-2'"
-          :stamp="message.timestamp"
-          size="6"
-        />
-      </q-card-section>
-      <q-card-actions>
-        <q-form @submit="sendMessage" class="full-width chat-input">
-          <q-input
-            ref="newMessage"
-            v-model="newMessage"
-            placeholder="Message"
-            class="full-width"
-            dense
-            outlined
-          >
-            <template>
-              <q-btn
-                round
-                dense
-                flat
-                type="submit"
-                icon="send"
-                color="primary"
-              />
-            </template>
-          </q-input>
-        </q-form>
-      </q-card-actions>
+      <div v-if="isChat">
+        <q-card-section
+          class="q-ml-auto"
+          style="
+            width: 100%;
+            max-width: 720px;
+            height: calc(100vh - 120px);
+            overflow-y: scroll;
+            display: flex;
+            flex-direction: column-reverse;
+          "
+        >
+          <q-chat-message
+            :key="index"
+            v-for="(message, index) in sortedMessages"
+            :name="message.sender"
+            :text="[message.msg]"
+            :sent="message.sender == 'Me'"
+            :bg-color="message.sender == 'Me' ? 'white' : 'light-green-2'"
+            :stamp="message.timestamp"
+            size="6"
+          />
+        </q-card-section>
+        <q-card-actions>
+          <q-form @submit="sendMessage" class="full-width chat-input">
+            <q-input
+              ref="newMessage"
+              v-model="newMessage"
+              placeholder="Message"
+              class="full-width"
+              dense
+              outlined
+            >
+              <template>
+                <q-btn
+                  round
+                  dense
+                  flat
+                  type="submit"
+                  icon="send"
+                  color="primary"
+                />
+              </template>
+            </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>
diff --git a/static/components/chat-dialog/chat-dialog.js b/static/components/chat-dialog/chat-dialog.js
index 405992b..28db8dc 100644
--- a/static/components/chat-dialog/chat-dialog.js
+++ b/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,13 +116,15 @@ async function chatDialog(path) {
                 event.content
               )
             }
-            messagesMap.set(event.id, {
-              created_at: event.created_at,
-              msg: plaintext,
-              timestamp: timeFromNow(event.created_at * 1000),
-              sender: `${mine ? 'Me' : 'Merchant'}`
-            })
-            this.nostrMessages = Array.from(messagesMap.values())
+            if (plaintext) {
+              messagesMap.set(event.id, {
+                created_at: event.created_at,
+                msg: plaintext,
+                timestamp: timeFromNow(event.created_at * 1000),
+                sender: `${mine ? 'Me' : 'Merchant'}`
+              })
+              this.nostrMessages = Array.from(messagesMap.values())
+            }
           } catch {
             console.error('Unable to decrypt message!')
           }