การแจ้งเตือน

src/interface/index/Main.ts

@@ -16,7 +16,7 @@ interface notiType {
   id: string
   sender: string
   body: string
-  timereceive: Date
+  timereceive: string | null
 }
 
 interface LocationObject {
@@ -24,4 +24,10 @@ interface LocationObject {
   longitude: number
 }
 
-export type { DataOption, FormRef, notiType, DataDateMonthObject, LocationObject}
+export type {
+  DataOption,
+  FormRef,
+  notiType,
+  DataDateMonthObject,
+  LocationObject,
+}

src/views/HomeView.vue

@@ -55,26 +55,46 @@ const notiTrigger = ref<boolean>(false)
 const notiList = ref<notiType[]>([])
 const totalNotiList = ref<number>(0)
 /** function เรียกข้อมุลแจ้งเตือน */
-async function fetchNotifications() {
+async function fetchNotifications(index: number, type: string) {
   showLoader()
   await http
-    .get(config.API.msgNotificate)
+    .get(config.API.msgNotificate + `?page=${index}&pageSize=${20}`)
     .then((res) => {
       const response = res.data.result.data
-      totalNotiList.value = res.data.result.total
       const list: notiType[] = []
-      response.map((e: any) => {
-        list.push({
-          id: e.id,
-          sender:
-            e.createdFullName == '' || e.createdFullName == null
-              ? 'เจ้าหน้าที่'[0]
-              : e.createdFullName[0],
-          body: e.body ?? '',
-          timereceive: new Date(e.receiveDate),
+      if (type === 'DEL') {
+        totalNotiList.value = res.data.result.total
+        console.log(notiList.value.length)
+        if (notiList.value.length === 14) {
+          notiList.value = []
+          response.map((e: any) => {
+            list.push({
+              id: e.id,
+              sender:
+                e.createdFullName == '' || e.createdFullName == null
+                  ? 'เจ้าหน้าที่'[0]
+                  : e.createdFullName[0],
+              body: e.body ?? '',
+              timereceive: e.receiveDate ? date2Thai(e.receiveDate) : '-',
+            })
+          })
+          notiList.value.push(...list)
+        }
+      } else {
+        response.map((e: any) => {
+          list.push({
+            id: e.id,
+            sender:
+              e.createdFullName == '' || e.createdFullName == null
+                ? 'เจ้าหน้าที่'[0]
+                : e.createdFullName[0],
+            body: e.body ?? '',
+            timereceive: e.receiveDate ? date2Thai(e.receiveDate) : '-',
+          })
         })
-      })
-      notiList.value = list
+        notiList.value.push(...list)
+        totalNotiList.value = res.data.result.total
+      }
     })
     .catch((err) => {
       messageError($q, err)
@@ -88,18 +108,19 @@ async function fetchNotifications() {
  * function ลบรายการแจ้งเตือน
  * @param id noti
  */
-async function onClickDelete(id: string) {
+async function onClickDelete(id: string, index: number) {
   dialogRemove($q, async () => {
     await http
       .delete(config.API.msgId(id))
       .then(() => {
+        notiList.value.splice(index, 1)
         success($q, 'ลบข้อมูลสำเร็จ')
       })
       .catch((e) => {
         messageError($q, e)
       })
       .finally(async () => {
-        await fetchNotifications()
+        fetchNotifications(1, 'DEL')
         hideLoader()
       })
   })
@@ -300,6 +321,15 @@ function onClickLogout() {
   })
 }
 
+function onLoad(index: any, done: any) {
+  if (notiList.value.length < totalNotiList.value) {
+    setTimeout(() => {
+      fetchNotifications(index + 1, 'NOMAL')
+      done()
+    }, 2000)
+  }
+}
+
 // class
 const getClass = (val: boolean) => {
   return {
@@ -312,7 +342,7 @@ const fullName = ref<string>('')
 /** Hook*/
 onMounted(async () => {
   await fetchCheckTime()
-  await fetchNotifications()
+  await fetchNotifications(1, 'NOMAL')
   if (keycloak.tokenParsed != null) {
     fullName.value = keycloak.tokenParsed.name
   }
@@ -370,7 +400,57 @@ onMounted(async () => {
                 </div>
               </div>
 
-              <q-list
+              <q-infinite-scroll @load="onLoad" :offset="250">
+                <div
+                  v-for="(item, index) in notiList"
+                  :key="index"
+                  class="caption"
+                >
+                  <q-item v-ripple class="mytry q-py-sm" dense>
+                    <q-item-section avatar top style="min-width: 10px">
+                      <q-avatar
+                        rounded
+                        color="primary"
+                        size="25px"
+                        text-color="white"
+                      >
+                        <span class="text-weight-medium text-uppercase">{{
+                          item.sender[0]
+                        }}</span>
+                      </q-avatar>
+                    </q-item-section>
+                    <q-item-section>
+                      <q-item-label caption class="text-black">{{
+                        item.body
+                      }}</q-item-label>
+                      <q-item-label
+                        caption
+                        class="row items-center text-grey-7"
+                        style="font-size: 12px"
+                        >{{ item.timereceive }}</q-item-label
+                      >
+                    </q-item-section>
+                    <div>
+                      <q-btn
+                        size="sm"
+                        unelevated
+                        dense
+                        icon="mdi-close"
+                        class="mybtn q-mx-xs"
+                        @click="onClickDelete(item.id, index)"
+                      ></q-btn>
+                    </div>
+                  </q-item>
+                </div>
+
+                <template v-slot:loading v-if="notiList.length < totalNotiList">
+                  <div class="row justify-center q-my-md">
+                    <q-spinner-dots color="primary" size="40px" />
+                  </div>
+                </template>
+              </q-infinite-scroll>
+
+              <!-- <q-list
                 style="min-width: 300px"
                 v-for="n in notiList"
                 :key="n.id"
@@ -403,7 +483,7 @@ onMounted(async () => {
                   ></q-btn>
                 </q-item>
                 <q-separator color="grey-2" />
-              </q-list>
+              </q-list> -->
             </q-menu>
           </q-btn>
           <q-btn round dense flat icon="account_circle" style="font-size: 16px">