Merge branch 'develop' into devTee

src/views/Dashboard.vue

@@ -29,43 +29,45 @@ const inboxList = ref<DataInbox[]>([]);
 const data = ref<DataInbox[]>([]);
 
 onMounted(async () => {
-  await getData();
+  await getData(1);
 });
 
-const getData = async () => {
-  showLoader();
-  await http
-    .get(config.API.msgInbox)
-    .then((res: any) => {
-      const data = res.data.result;
+const getData = async (index: number) => {
+  index === 1 && showLoader();
+  index != 0 &&
+    (await http
+      .get(config.API.msgInbox + `?page=${index}&pageSize=${10}`)
+      .then((res: any) => {
+        const data = res.data.result.data;
+        totalInbox.value = res.data.result.total;
 
-      let list: DataInbox[] = [];
-      data.map((e: ResponseInbox) => {
-        list.push({
-          no: e.id ?? "",
-          sender:
-            e.createdFullName == "" || e.createdFullName == null
-              ? "เจ้าหน้าที่"
-              : e.createdFullName,
-          subject: e.subject ?? "",
-          timereceive: new Date(e.receiveDate),
-          body: e.body ?? "",
-          payload: e.payload,
-          ratingModel: 0,
+        let list: DataInbox[] = [];
+        data.map((e: ResponseInbox) => {
+          list.push({
+            no: e.id ?? "",
+            sender:
+              e.createdFullName == "" || e.createdFullName == null
+                ? "เจ้าหน้าที่"
+                : e.createdFullName,
+            subject: e.subject ?? "",
+            timereceive: new Date(e.receiveDate),
+            body: e.body ?? "",
+            payload: e.payload,
+            ratingModel: 0,
+          });
         });
-      });
-      inboxList.value = list;
+        inboxList.value.push(...list);
 
-      if (inboxList.value.length > 0) {
-        selectInbox(inboxList.value[0].no);
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+        if (inboxList.value.length > 0) {
+          selectInbox(inboxList.value[0].no);
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      }));
 };
 
 const selectInbox = (id: string) => {
@@ -88,7 +90,7 @@ const removeData = async (id: string) => {
       messageError($q, e);
     })
     .finally(() => {
-      getData();
+      // getData();
       hideLoader();
     });
 };
@@ -105,6 +107,18 @@ function dialogRepleOpen() {
 function modalReplyClose() {
   modalReply.value = false;
 }
+
+const scrollTargetRef = ref<any>(null);
+const totalInbox = ref<number>(0);
+function onLoad(index: number, done: any) {
+  const num = index === 1 ? 0 : index++;
+  if (inboxList.value.length < totalInbox.value) {
+    setTimeout(() => {
+      getData(num);
+      done();
+    }, 2000);
+  }
+}
 </script>
 
 <!-- page:หน้าแรก -->
@@ -128,7 +142,68 @@ function modalReplyClose() {
           <div class="text-subtitle1 text-weight-medium">กล่องข้อความ</div>
         </div>
         <q-separator />
-        <q-scroll-area
+
+        <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"
+          >
+            <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-section>
+                  <q-item-label caption class="text-weight-light">{{
+                    date2Thai(contact.timereceive)
+                  }}</q-item-label>
+                  <q-item-label class="text-weight-medium">{{
+                    contact.sender
+                  }}</q-item-label>
+                  <q-item-label caption lines="2">{{
+                    contact.subject
+                  }}</q-item-label>
+                </q-item-section>
+                <q-item-section side top>
+                  <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-list>
+
+            <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="$q.screen.gt.xs ? 'height: 74vh' : 'height: 40vh;'"
           class="bg-white rounded-borders q-px-md row col-12"
         >
@@ -157,14 +232,6 @@ function modalReplyClose() {
                 }}</q-item-label>
               </q-item-section>
               <q-item-section side top>
-                <!-- <q-rating
-                  v-model="contact.ratingModel"
-                  size="1.4em"
-                  :max="1"
-                  color="grey"
-                  color-selected="yellow-13"
-                /> -->
-
                 <q-icon
                   v-if="contact.payload !== null"
                   class="q-mt-md"
@@ -196,7 +263,7 @@ function modalReplyClose() {
               ไม่พบข้อความ
             </div>
           </q-banner>
-        </q-scroll-area>
+        </q-scroll-area> -->
       </q-card>
     </template>
 
@@ -248,7 +315,7 @@ function modalReplyClose() {
                   >
                     <q-tooltip>ตอบกลับข้อความ</q-tooltip>
                   </q-btn>
-                  
+
                   <PopupReplyInbox
                     :modal="modalReply"
                     :idInbox="d.no"

src/views/MainLayout.vue

@@ -83,12 +83,13 @@ const options = ref<optionType[]>([
   },
 ]);
 
-const getDataNotification = async () => {
+const getDataNotification = async (index: number) => {
   // showLoader();
   await http
-    .get(config.API.msgNotificate)
+    .get(config.API.msgNotificate + `?page=${index}&pageSize=${20}`)
     .then((res: any) => {
-      const response = res.data.result;
+      const response = res.data.result.data;
+      totalInbox.value = res.data.result.total;
       let list: notiType[] = [];
       response.map((e: any) => {
         list.push({
@@ -101,7 +102,7 @@ const getDataNotification = async () => {
           timereceive: new Date(e.receiveDate),
         });
       });
-      notiList.value = list;
+      notiList.value.push(...list);
     })
     .catch((e) => {
       // messageError($q, e);
@@ -218,7 +219,7 @@ onMounted(async () => {
     await fetchroleUser(keycloak.tokenParsed.role);
   }
 
-  await getDataNotification();
+  await getDataNotification(1);
   myEventHandler(null, false);
   window.addEventListener("resize", (e: any) => {
     myEventHandler(e, true);
@@ -421,7 +422,7 @@ const deleteData = async (id: string) => {
       messageError($q, e);
     })
     .finally(async () => {
-      getDataNotification();
+      getDataNotification(1);
       hideLoader();
     });
 };
@@ -429,6 +430,16 @@ const deleteData = async (id: string) => {
 const clickDelete = (id: string) => {
   dialogRemove($q, () => deleteData(id));
 };
+
+const totalInbox = ref<number>(0);
+function onLoad(index: any, done: any) {
+  if (notiList.value.length < totalInbox.value) {
+    setTimeout(() => {
+      getDataNotification(index + 1);
+      done();
+    }, 2000);
+  }
+}
 </script>
 
 <!-- โครงเว็บ -->
@@ -485,41 +496,58 @@ const clickDelete = (id: string) => {
             color="negative"
             text-color="white"
             floating
-            >{{ notiList.length }}</q-badge
+            >{{ totalInbox }}</q-badge
           >
           <q-menu v-model="notiTrigger" max-width="480px" :offset="[0, 10]">
             <div class="q-px-md q-py-sm row col-12 items-center">
               <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
             </div>
 
-            <q-list style="min-width: 300px" v-for="n in notiList" :key="n.id">
-              <q-item v-ripple class="mytry q-py-xs" dense>
-                <q-item-section avatar top style="min-width: 40px">
-                  <q-avatar color="primary" size="22px" text-color="white">
-                    <span class="text-weight-medium text-uppercase">{{
-                      n.sender
-                    }}</span>
-                  </q-avatar>
-                </q-item-section>
-                <q-item-section>
-                  <q-item-label caption class="text-black">{{
-                    n.body
-                  }}</q-item-label>
-                  <q-item-label caption class="row items-center text-grey-7">{{
-                    date2Thai(n.timereceive)
-                  }}</q-item-label>
-                </q-item-section>
-                <q-btn
-                  size="sm"
-                  unelevated
-                  dense
-                  icon="mdi-close"
-                  class="mybtn q-mx-xs"
-                  @click="clickDelete(n.id)"
-                ></q-btn>
-              </q-item>
-              <q-separator color="grey-2" />
-            </q-list>
+            <q-infinite-scroll
+              @load="onLoad"
+              :offset="250"
+              style="min-width: 300px"
+            >
+              <q-list
+                style="min-width: 300px"
+                v-for="n in notiList"
+                :key="n.id"
+              >
+                <q-item v-ripple class="mytry q-py-xs" dense>
+                  <q-item-section avatar top style="min-width: 40px">
+                    <q-avatar color="primary" size="22px" text-color="white">
+                      <span class="text-weight-medium text-uppercase">{{
+                        n.sender
+                      }}</span>
+                    </q-avatar>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label caption class="text-black">{{
+                      n.body
+                    }}</q-item-label>
+                    <q-item-label
+                      caption
+                      class="row items-center text-grey-7"
+                      >{{ date2Thai(n.timereceive) }}</q-item-label
+                    >
+                  </q-item-section>
+                  <q-btn
+                    size="sm"
+                    unelevated
+                    dense
+                    icon="mdi-close"
+                    class="mybtn q-mx-xs"
+                    @click="clickDelete(n.id)"
+                  ></q-btn>
+                </q-item>
+                <q-separator color="grey-2" />
+              </q-list>
+              <template v-slot:loading v-if="notiList.length < totalInbox">
+                <div class="row justify-center q-my-md">
+                  <q-spinner-dots color="primary" size="40px" />
+                </div>
+              </template>
+            </q-infinite-scroll>
           </q-menu>
         </q-btn>
         <div class="row items-center no-wrap">