From 95a05f45da1925c696fa0e6d41938c6d8e247588 Mon Sep 17 00:00:00 2001
From: waruneeta <warunee.auy@gmail.com>
Date: Tue, 12 Sep 2023 12:06:59 +0700
Subject: [PATCH] inbox btn download

---
 src/views/Dashboard.vue | 132 +++++++++++-----------------------------
 1 file changed, 37 insertions(+), 95 deletions(-)

diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 17eac8e39..3ba13fe3a 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -81,7 +81,7 @@ const getData = async () => {
       console.log("🚀 ~ file: Dashboard.vue:82 ~ .then ~ inboxList:", inboxList.value)
     }
     )
-    
+
     .catch((e) => {
       // messageError($q, e);
     })
@@ -115,7 +115,7 @@ const removeData = async (id: string) => {
       hideLoader();
     });
 };
-const fileOpen = (url:string) => {
+const fileOpen = (url: string) => {
   window.open(url, '_blank');
 }
 </script>
@@ -123,42 +123,20 @@ const fileOpen = (url:string) => {
 <!-- page:หน้าแรก -->
 <template>
   <div class="toptitle text-dark">หน้าแรก</div>
-  <q-splitter
-    v-model="splitterModel"
-    :horizontal="$q.screen.lt.sm"
-    separator-class="bg-grey-2 row"
-    separator-style="width: 12px"
-    class="text-dark"
-    :style="$q.screen.gt.xs ? 'height: 80vh' : 'height:100%;'"
-  >
+  <q-splitter v-model="splitterModel" :horizontal="$q.screen.lt.sm" separator-class="bg-grey-2 row"
+    separator-style="width: 12px" class="text-dark" :style="$q.screen.gt.xs ? 'height: 80vh' : 'height:100%;'">
     <template v-slot:before>
-      <q-card
-        flat
-        bordered
-        :style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'"
-      >
+      <q-card flat bordered :style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'">
         <div class="col-12 q-py-sm q-px-md bg-grey-1">
           <div class="text-subtitle1 text-weight-medium">กล่องข้อความ</div>
         </div>
         <q-separator />
-        <q-scroll-area
-          :style="$q.screen.gt.xs ? 'height: 74vh' : 'height: 40vh;'"
-          class="bg-white rounded-borders q-px-md row col-12"
-        >
-          <q-list
-            v-for="(contact, index) in inboxList"
-            :key="contact.no"
-            class="q-pt-sm"
-          >
+        <q-scroll-area :style="$q.screen.gt.xs ? 'height: 74vh' : 'height: 40vh;'"
+          class="bg-white rounded-borders q-px-md row col-12">
+          <q-list v-for="(contact, index) in inboxList" :key="contact.no" class="q-pt-sm">
 
-            <q-item
-              clickable
-              v-ripple
-              class="mytry"
-              :active="link === contact.no"
-              active-class="my-menu-link"
-              @click="selectInbox(contact.no)"
-            >
+            <q-item clickable v-ripple class="mytry" :active="link === contact.no" active-class="my-menu-link"
+              @click="selectInbox(contact.no)">
               <q-item-section>
                 <q-item-label caption class="text-weight-light">{{
                   date2Thai(contact.timereceive)
@@ -179,34 +157,15 @@ const fileOpen = (url:string) => {
                   color-selected="yellow-13"
                 /> -->
 
-                <q-icon
-                  v-if="contact.payload !== null"
-                  class="q-mt-md"
-                  name="mdi-paperclip"
-                  color="grey-5"
-                  size="xs"
-                />
+                <q-icon v-if="contact.payload !== null" class="q-mt-md" name="mdi-paperclip" color="grey-5" size="xs" />
               </q-item-section>
             </q-item>
-            <q-separator
-              v-if="index + 1 < inboxList.length"
-              :key="index"
-              color="grey-3 q-mt-sm"
-            />
+            <q-separator v-if="index + 1 < inboxList.length" :key="index" color="grey-3 q-mt-sm" />
           </q-list>
 
-          <q-banner
-            rounded
-            class="bg-amber-1 text-center q-mt-sm"
-            v-if="inboxList.length < 1"
-          >
+          <q-banner rounded class="bg-amber-1 text-center q-mt-sm" v-if="inboxList.length < 1">
             <div class="text-yellow-10">
-              <q-icon
-                name="mdi-alert-box"
-                class="q-mx-xs"
-                size="sm"
-                color="yellow-10"
-              />
+              <q-icon name="mdi-alert-box" class="q-mx-xs" size="sm" color="yellow-10" />
               ไม่พบข้อความ
             </div>
           </q-banner>
@@ -215,23 +174,13 @@ const fileOpen = (url:string) => {
     </template>
 
     <template v-slot:after>
-      <q-card
-        v-if="data != null"
-        class="q-pa-none rounded-borders"
-        flat
-        bordered
-        :style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'"
-      >
+      <q-card v-if="data != null" class="q-pa-none rounded-borders" flat bordered
+        :style="$q.screen.gt.xs ? 'height: 80vh' : 'height: auto;'">
         <div class="eow col-12" v-for="(d, index) in data" :key="d.no">
           <div class="col-12 q-pa-xs">
             <q-item>
               <q-item-section top avatar>
-                <q-avatar
-                  size="40px"
-                  rounded
-                  color="primary"
-                  class="text-white"
-                >
+                <q-avatar size="40px" rounded color="primary" class="text-white">
                   <q-icon name="mdi-account" size="28px" />
                 </q-avatar>
               </q-item-section>
@@ -240,9 +189,7 @@ const fileOpen = (url:string) => {
                 <q-item-label class="text-weight-medium">{{
                   d.subject
                 }}</q-item-label>
-                <q-item-label caption lines="2"
-                  >จาก : {{ d.sender }}</q-item-label
-                >
+                <q-item-label caption lines="2">จาก : {{ d.sender }}</q-item-label>
               </q-item-section>
 
               <q-item-section side top>
@@ -258,15 +205,7 @@ const fileOpen = (url:string) => {
                     size="10px"
                     color="grey-7"
                   /> -->
-                  <q-btn
-                    flat
-                    round
-                    dense
-                    icon="mdi-trash-can"
-                    size="10px"
-                    color="red"
-                    @click="deleteData(d.no)"
-                  />
+                  <q-btn flat round dense icon="mdi-trash-can" size="10px" color="red" @click="deleteData(d.no)" />
                   <!-- <q-btn
                     flat
                     round
@@ -280,29 +219,29 @@ const fileOpen = (url:string) => {
             </q-item>
           </div>
           <div flat class="q-mb-md">
-            <q-card
-              flat
-              bordered
-              class="text-dark q-mx-md q-pa-md bg-grey-1"
-              :style="$q.screen.gt.xs ? 'height: 64vh' : ''"
-              >{{ d.body }}</q-card
-            >
+            <q-card flat bordered class="text-dark q-mx-md q-pa-md bg-grey-1"
+              :style="$q.screen.gt.xs ? 'height: 64vh' : ''">{{ d.body }}</q-card>
 
             <div :class="$q.screen.gt.xs ? 'absolute-bottom q-mb-md' : ''">
               <div class="row col-12 self-center q-px-md q-pt-md">
-                <q-btn v-if="d.payload !== null" color="primary" label="เอกสารแนบ" icon="mdi-paperclip" outline>
+                <div v-if="d.payload !== null" class="row self-center pointer">
+                  <q-icon name="mdi-paperclip" color="grey" size="xs" />
+                  <div class="text-grey-8 q-pl-sm text-weight-light">
+                    ดาวน์โหลดเอกสารแนบ
+                  </div>
                   <q-menu transition-show="jump-down" transition-hide="jump-up" anchor="top middle" self="bottom middle">
                     <q-list style="min-width: 160px">
-                      <div v-for="(link,num) in d.payload.attachments" :key="num">
-                        <q-item clickable  @click="fileOpen(link.url)">
-                        <q-item-section>{{ link.name }}</q-item-section>
-                      </q-item>
-                      <q-separator />
+                      <div v-for="(link, num) in d.payload.attachments" :key="num">
+                        <q-item clickable @click="fileOpen(link.url)">
+                          <q-item-section>{{ link.name }}</q-item-section>
+                        </q-item>
+                        <q-separator />
                       </div>
-
                     </q-list>
                   </q-menu>
-                </q-btn>
+
+                </div>
+
                 <!-- <q-btn
                   unelevated
                   size="12px"
@@ -339,4 +278,7 @@ const fileOpen = (url:string) => {
 .mytry:hover {
   border-radius: 5px;
 }
+.pointer {
+  cursor: pointer;
+}
 </style>