feat: improve DMs for structured messages

static/components/direct-messages/direct-messages.html

@@ -6,19 +6,11 @@
           <h6 class="text-subtitle1 q-my-none">Messages</h6>
         </div>
         <div class="col-4">
-          <q-badge v-if="unreadMessages" color="green"
+          <q-badge v-if="unreadMessages" color="green"><span v-text="unreadMessages"></span>&nbsp; new</q-badge>
-            ><span v-text="unreadMessages"></span>&nbsp; new</q-badge
-          >
         </div>
         <div class="col-6">
-          <q-btn
+          <q-btn v-if="activePublicKey" @click="showClientOrders" unelevated outline class="float-right">Client
-            v-if="activePublicKey"
+            Orders</q-btn>
-            @click="showClientOrders"
-            unelevated
-            outline
-            class="float-right"
-            >Client Orders</q-btn
-          >
         </div>
       </div>
     </q-card-section>
@@ -28,26 +20,17 @@
     <q-card-section>
       <div class="row">
         <div class="col-10">
-          <q-select
+          <q-select v-model="activePublicKey"
-          v-model="activePublicKey"
+            :options="customers.map(c => ({label: buildCustomerLabel(c), value: c.public_key}))" label="Select Customer"
-          :options="customers.map(c => ({label: buildCustomerLabel(c), value: c.public_key}))"
+            emit-value @input="selectActiveCustomer()">
-          label="Select Customer"
+          </q-select>
-          emit-value
-          @input="selectActiveCustomer()"
-        >
-        </q-select>
         </div>
         <div class="col-2">
-          <q-btn
+          <q-btn label="Add" color="green" class="float-right q-mt-md" @click="showAddPublicKey = true">
-          label="Add"
+            <q-tooltip>
-          color="green"
+              Add a public key to chat with
-          class="float-right q-mt-md"
+            </q-tooltip>
-          @click="showAddPublicKey = true"
+          </q-btn>
-        >
-          <q-tooltip>
-            Add a public key to chat with
-          </q-tooltip>
-        </q-btn>
         </div>
       </div>
 
@@ -56,36 +39,36 @@
       <div class="chat-container" ref="chatCard">
         <div class="chat-box">
           <div class="chat-messages" style="height: 45vh">
-            <q-chat-message
+            <q-chat-message v-for="(dm, index) in messagesAsJson" :key="index" :name="dm.incoming ? 'customer': 'me'"
-              v-for="(dm, index) in messages"
+              :text="dm.isJson ? [] : [dm.message]" :sent="!dm.incoming"
-              :key="index"
+              :bg-color="dm.incoming ? 'white' : 'light-green-2'" :class="'chat-mesage-index-'+index">
-              :name="dm.incoming ? 'customer': 'me'"
+              <div v-if="dm.isJson">
-              :text="[dm.message]"
+                <div v-if="dm.message.type === 0">
-              :sent="!dm.incoming"
+                  <strong>New order:</strong>
-              :bg-color="dm.incoming ? 'white' : 'light-green-2'"
+                  <span v-text="dm.message.id"></span>
-              :class="'chat-mesage-index-'+index"
+                </div>
-            />
+                <div v-else-if="dm.message.type === 1">
+                  <strong>Invoice sent for order: </strong>
+                  <span v-text="dm.message.id"></span>
+                </div>
+                <div v-else-if="dm.message.type === 2">
+                  <q-badge v-if="dm.message.paid" color="green">Paid </q-badge>
+                  <q-badge v-if="dm.message.shipped" color="green">Shipped </q-badge>
+                  <span v-text="dm.message.message"></span><br>
+                  <span v-text="dm.message.id"></span>
+                </div>
+                <div v-else>
+                  <span v-text="JSON.stringify(dm.message)"></span>
+                </div>
+              </div>
+            </q-chat-message>
           </div>
         </div>
         <q-card-section>
           <q-form @submit="sendDirectMesage" class="full-width chat-input">
-            <q-input
+            <q-input ref="newMessage" v-model="newMessage" placeholder="Message" class="full-width" dense outlined>
-              ref="newMessage"
-              v-model="newMessage"
-              placeholder="Message"
-              class="full-width"
-              dense
-              outlined
-            >
               <template>
-                <q-btn
+                <q-btn round dense flat type="submit" icon="send" color="primary" />
-                  round
-                  dense
-                  flat
-                  type="submit"
-                  icon="send"
-                  color="primary"
-                />
               </template>
             </q-input>
           </q-form>
@@ -97,26 +80,13 @@
     <q-dialog v-model="showAddPublicKey" position="top">
       <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
         <q-form @submit="addPublicKey" class="q-gutter-md">
-          <q-input
+          <q-input filled dense v-model.trim="newPublicKey" label="Public Key (hex or nsec)"></q-input>
-            filled
-            dense
-            v-model.trim="newPublicKey"
-            label="Public Key (hex or nsec)"
-          ></q-input>
           <div class="row q-mt-lg">
-            <q-btn
+            <q-btn unelevated color="primary" :disable="!newPublicKey" type="submit">Add</q-btn>
-              unelevated
+            <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
-              color="primary"
-              :disable="!newPublicKey"
-              type="submit"
-              >Add</q-btn
-            >
-            <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-              >Cancel</q-btn
-            >
           </div>
         </q-form>
       </q-card>
     </q-dialog>
   </div>
-</div>
+</div>

static/components/direct-messages/direct-messages.js

@@ -13,6 +13,25 @@ async function directMessages(path) {
         await this.getDirectMessages(n)
       }
     },
+    computed: {
+      messagesAsJson: function() {
+        return this.messages.map(m => {
+          try {
+            return {
+              isJson: true,
+              ...m,
+              message: JSON.parse(m.message)
+            }
+          } catch (error) {
+            return {
+              isJson: false,
+              ...m,
+              message: m.message
+            }
+          }
+        })
+      }
+    },
     data: function () {
       return {
         customers: [],