เพิ่มapi download เอกสาร

src/interface/response/dashboard/dashboard.ts

@@ -1,6 +1,9 @@
+interface attachments {
+  name: string;
+  url: string;
+}
 interface ResponseInbox {
   body: string;
-  createdAt: Date;
   createdFullName: string;
   createdUserId: string;
   id: string;
@@ -9,7 +12,7 @@ interface ResponseInbox {
   lastUpdateUserId: string;
   lastUpdatedAt: Date;
   openDate: Date | null;
-  payload: string;
+  payload: {attachments:attachments[]}
   receiveDate: Date;
   receiverUserId: string;
   subject: string;
@@ -21,7 +24,7 @@ interface DataInbox {
   subject: string;
   timereceive: Date;
   body: string;
-  payload: string;
+  payload: {attachments:attachments[]}
   ratingModel: number;
 }
 

src/views/Dashboard.vue

@@ -20,41 +20,15 @@ const {
   success,
   messageError,
   date2Thai,
-  dialogRemove
+  dialogRemove,
 } = mixin;
 
 const iteminbox = ref<any>([]);
 const splitterModel = ref<number>(30);
 const link = ref<string>("0");
-const inboxList = ref<DataInbox[]>([
-  //   {
-  //     no: "1",
-  //     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
-  //     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-  //     timereceive: new Date(),
-  //     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
-  //     ratingModel: 0,
-  //   },
-  //   {
-  //     no: "2",
-  //     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
-  //     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-  //     timereceive: new Date(),
-  //     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
-  //     ratingModel: 0,
-  //   },
-]);
-const data = ref<DataInbox[]>([
-  //   {
-  //     no: "1",
-  //     sender: "เจ้าหน้าที่ทะเบียนประวัติ",
-  //     subject: "ขอแก้ไขข้อมูลทะเบียนประวัติ",
-  //     timereceive: new Date(),
-  //     body: "ขอแก้ไขข้อมูลทะเบียนประวัติ เรื่อง ชื่อ-นามสกุล",
-  //     ratingModel: 0,
-  //   },
-]);
-const payLoadtext = ref<string>()
+const inboxList = ref<DataInbox[]>([]);
+const data = ref<DataInbox[]>([]);
+const payLoadtext = ref<string>();
 const btnReply = ref<boolean>(true);
 const listpayload = ref<any>([]);
 const listpayloadNolink = ref<any>([]);
@@ -86,10 +60,10 @@ const getData = async () => {
   await http
     .get(config.API.msgInbox)
     .then((res: any) => {
-      const response = res.data.result;
-        console.log(response);
+      const data = res.data.result;
+      console.log(data);
       let list: DataInbox[] = [];
-      response.map((e: ResponseInbox) => {
+      data.map((e: ResponseInbox) => {
         list.push({
           no: e.id ?? "",
           sender:
@@ -104,7 +78,10 @@ const getData = async () => {
         });
       });
       inboxList.value = list;
-    })
+      console.log("🚀 ~ file: Dashboard.vue:82 ~ .then ~ inboxList:", inboxList.value)
+    }
+    )
+    
     .catch((e) => {
       // messageError($q, e);
     })
@@ -117,26 +94,29 @@ const selectInbox = (id: string) => {
   link.value = id;
   data.value = inboxList.value.filter((r) => r.no == id);
 };
-const deleteData = (id:string) => {
-  dialogRemove($q, () => removeData(id))
-}
+const deleteData = (id: string) => {
+  dialogRemove($q, () => removeData(id));
+};
 
 //รอ api ลบ
-const removeData = async (id:string) => {
-  console.log("delete=",id)
- showLoader();
-await http
-.delete(config.API.msgInboxDelete(id))
-.then((res) => {
-  success($q, "ลบข้อมูลสำเร็จ");
-})
-.catch((e) => {
-  messageError($q, e);
-})
-.finally(() => {
-  getData()
-  hideLoader()
-})
+const removeData = async (id: string) => {
+  console.log("delete=", id);
+  showLoader();
+  await http
+    .delete(config.API.msgInboxDelete(id))
+    .then((res) => {
+      success($q, "ลบข้อมูลสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      getData();
+      hideLoader();
+    });
+};
+const fileOpen = (url:string) => {
+  window.open(url, '_blank');
 }
 </script>
 
@@ -170,6 +150,7 @@ await http
             :key="contact.no"
             class="q-pt-sm"
           >
+
             <q-item
               clickable
               v-ripple
@@ -199,7 +180,7 @@ await http
                 /> -->
 
                 <q-icon
-                  v-if="contact.payload !== null "
+                  v-if="contact.payload !== null"
                   class="q-mt-md"
                   name="mdi-paperclip"
                   color="grey-5"
@@ -306,14 +287,19 @@ await http
               :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">
-                <div v-if="d.payload !== ''" class="row self-center">
-                  <q-icon name="mdi-paperclip" color="grey" size="xs" />
-                  <div class="text-grey-8 q-pl-sm text-weight-light">
-                    เอกสารแนบ
-                  </div>
-                </div>
+                <q-btn v-if="d.payload !== null" color="primary" label="เอกสารแนบ" icon="mdi-paperclip" outline>
+                  <q-menu transition-show="jump-down" transition-hide="jump-up" anchor="top middle" self="bottom middle">
+                    <q-list style="min-width: 160px">
+                      <q-item clickable v-for="(link,num) in d.payload.attachments" :key="num" @click="fileOpen(link.url)">
+                        <q-item-section>{{ link.name }}</q-item-section>
+                      </q-item>
+                      <q-separator />
+                    </q-list>
+                  </q-menu>
+                </q-btn>
                 <!-- <q-btn
                   unelevated
                   size="12px"