ปรับ กล่องข้อความ

src/modules/01_dashboard/views/Dashboard.vue

@@ -7,6 +7,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import PopupReplyInbox from "@/components/PopupReplyInbox.vue";
+import PopupDetailInbox from "@/components/PopupDetailInbox.vue";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -82,14 +83,15 @@ const items = ref<any>([
   },
 ]);
 onMounted(async () => {
-  await fetchlistInbox();
+  await fetchlistInbox(1);
 });
-const fetchlistInbox = async () => {
-  showLoader();
+const fetchlistInbox = async (index: number) => {
+  index === 1 && showLoader();
   await http
-    .get(config.API.msgInbox)
+    .get(config.API.msgInbox + `?page=${index}&pageSize=${10}`)
     .then((res) => {
-      let data = res.data.result;
+      let data = res.data.result.data;
+      totalInbox.value = res.data.result.total;
       let listItem: any = [];
       data.map((e: any) => {
         listItem.push({
@@ -100,11 +102,13 @@ const fetchlistInbox = async () => {
               : e.createdFullName,
           subject: e.subject ?? "",
           timereceive: date2Thai(e.createdAt),
-          body: e.body ?? "",
+          body: e.body ?? "-",
           ratingModel: 0,
+          receiveDate: date2Thai(e.receiveDate),
+          payload: e.payload,
         });
       });
-      inboxList.value = listItem;
+      inboxList.value.push(...listItem);
     })
     .catch((err) => {
       console.log(err);
@@ -130,6 +134,38 @@ function modalReplyClose() {
   contactNo.value = "";
   modalReply.value = false;
 }
+
+const dataInbox = ref<any>();
+const modalDetial = ref<boolean>(false);
+function onClickOpenPopupDetail(data: any) {
+  dataInbox.value = data;
+  link.value = data.no;
+  modalDetial.value = !modalDetial.value;
+}
+
+function updateModalDetail(val: boolean) {
+  modalDetial.value = val;
+}
+
+const scrollTargetRef = ref<any>(null);
+const totalInbox = ref<number>(0);
+function onLoad(index: number, done: any) {
+  if (inboxList.value.length < totalInbox.value) {
+    setTimeout(() => {
+      fetchlistInbox(index + 1);
+      done();
+    }, 2000);
+  }
+}
+
+// function onLoadRef(index: number, done: any) {
+//   if (inboxList.value.length < totalInbox.value) {
+//     setTimeout(() => {
+//       fetchlistInbox(index + 1);
+//       done();
+//     }, 2000);
+//   }
+// }
 </script>
 
 <template>
@@ -184,7 +220,7 @@ function modalReplyClose() {
       <q-card
         flat
         bordered
-        :style="$q.screen.gt.xs ? 'max-height: 74vh' : 'height: auto;'"
+        :style="$q.screen.gt.xs ? 'max-height: 74vh' : 'height: 100px;'"
         class="q-pb-md col-12"
       >
         <div class="col-12 row q-pa-md">
@@ -200,8 +236,73 @@ function modalReplyClose() {
             flat
           /> -->
         </div>
+        <div
+          v-if="totalInbox != 0"
+          ref="scrollTargetRef"
+          class="q-pa-md"
+          style="max-height: 90%; overflow: auto"
+        >
+          <q-infinite-scroll
+            @load="onLoad"
+            :offset="250"
+            class="q-pa-md"
+            :scroll-target="scrollTargetRef"
+          >
+            <div
+              v-for="(item, index) in inboxList"
+              :key="index"
+              class="caption"
+            >
+              <q-item
+                clickable
+                v-ripple
+                class="q-py-md q-mb-sm my-menu"
+                :active="link === item.no"
+                active-class="my-menu-link"
+                @click="onClickOpenPopupDetail(item)"
+              >
+                <q-item-section>
+                  <q-item-label>
+                    {{ item.sender }}
+                    <q-icon
+                      v-if="item.payload"
+                      name="mdi-paperclip"
+                      color="grey-6"
+                      size="18px"
+                  /></q-item-label>
+                  <q-item-label caption class="text-grey-6" lines="2">{{
+                    item.subject
+                  }}</q-item-label>
+                </q-item-section>
 
-        <q-scroll-area style="height: 64vh" v-if="inboxList.length > 0">
+                <q-item-section side top>
+                  <q-item-label caption>{{ item.timereceive }}</q-item-label>
+                </q-item-section>
+
+                <q-item-section side top>
+                  <q-btn
+                    flat
+                    round
+                    dense
+                    icon="mdi-reply"
+                    size="10px"
+                    color="grey-7"
+                    @click="dialogRepleOpen(item.no)"
+                  >
+                    <q-tooltip>ตอบกลับข้อความ</q-tooltip>
+                  </q-btn>
+                </q-item-section>
+              </q-item>
+            </div>
+            <template v-slot:loading v-if="inboxList.length < totalInbox">
+              <div class="row justify-center q-my-md">
+                <q-spinner-dots color="primary" size="40px" />
+              </div>
+            </template>
+          </q-infinite-scroll>
+        </div>
+
+        <!-- <q-scroll-area style="height: 64vh" v-if="inboxList.length > 0">
           <q-list
             v-for="(contact, index) in inboxList"
             :key="index"
@@ -212,11 +313,18 @@ function modalReplyClose() {
               v-ripple
               class="q-py-md q-mb-sm my-menu"
               :active="link === contact.no"
-              @click="link = contact.no"
               active-class="my-menu-link"
+              @click="onClickOpenPopupDetail(contact)"
             >
               <q-item-section>
-                <q-item-label>{{ contact.sender }}</q-item-label>
+                <q-item-label>
+                  {{ contact.sender }}
+                  <q-icon
+                    v-if="contact.payload"
+                    name="mdi-paperclip"
+                    color="grey-6"
+                    size="18px"
+                /></q-item-label>
                 <q-item-label caption class="text-grey-6" lines="2">{{
                   contact.subject
                 }}</q-item-label>
@@ -241,7 +349,7 @@ function modalReplyClose() {
               </q-item-section>
             </q-item>
           </q-list>
-        </q-scroll-area>
+        </q-scroll-area> -->
         <q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-else>
           <div class="text-yellow-10">
             <q-icon
@@ -261,6 +369,12 @@ function modalReplyClose() {
     :idInbox="contactNo"
     :click-close="modalReplyClose"
   />
+
+  <PopupDetailInbox
+    :modal="modalDetial"
+    :data="dataInbox"
+    @update:modal="updateModalDetail"
+  />
 </template>
 <style>
 .my-menu-link {