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

src/api/api.message.ts

@@ -0,0 +1,7 @@
+import env from './index'
+const message = `${env.API_URI}/message`
+
+export default {
+  msgNotificate: `${message}/my-notifications`,
+  msgId: (id: string) => `${message}/my-notifications/${id}`,
+}

src/app.config.ts

@@ -1,20 +1,23 @@
 /**ใช้รวมไฟล์ย่อยๆ ของ api แต่ละไฟล์ */
 
 /** API ระบบลงเวลา */
-import leave from "@/api/api.checkin";
-import history from "@/api/api.history";
+import leave from '@/api/api.checkin'
+import history from '@/api/api.history'
+import message from '@/api/api.message'
 
 // environment variables
-export const s3ClusterUrl = import.meta.env.VITE_S3CLUSTER_PUBLIC_URL;
+export const s3ClusterUrl = import.meta.env.VITE_S3CLUSTER_PUBLIC_URL
 
 const API = {
   /**leave */
   ...leave,
   /**history */
   ...history,
-};
+  /**message */
+  ...message,
+}
 
 export default {
   API: API,
   s3ClusterUrl,
-};
+}

src/interface/index/Main.ts

@@ -13,4 +13,5 @@ interface notiType {
   body: string
   timereceive: Date
 }
+
 export type { DataOption, FormRef, notiType }

src/interface/response/Main.ts

@@ -0,0 +1,12 @@
+interface Noti {
+  id: string
+  body: string
+  receiverUserId: string
+  type: string
+  payload: null
+  isOpen: false
+  receiveDate: Date | null
+  openDate: null
+}
+
+export type { Noti }

src/stores/mixin.ts

@@ -238,6 +238,35 @@ export const useCounterMixin = defineStore('mixin', () => {
     }
   }
 
+  function dialogRemove(
+    q: any,
+    ok?: () => void,
+    title?: string, // ถ้ามี cancel action ใส่เป็น null
+    desc?: string, // ถ้ามี cancel action ใส่เป็น null
+    cancel?: () => void
+  ) {
+    q.dialog({
+      component: CustomComponent,
+      componentProps: {
+        title: title && title != null ? title : 'ยืนยันการลบข้อมูล',
+        message:
+          desc && desc != null
+            ? desc
+            : 'ต้องการยืนยันการลบข้อมูลนี้ใช่หรือไม่?',
+        icon: 'delete',
+        color: 'red',
+        textOk: 'ตกลง',
+        onlycancel: false,
+      },
+    })
+      .onOk(() => {
+        if (ok) ok()
+      })
+      .onCancel(() => {
+        if (cancel) cancel()
+      })
+  }
+
   return {
     date2Thai,
     showLoader,
@@ -247,5 +276,6 @@ export const useCounterMixin = defineStore('mixin', () => {
     messageError,
     success,
     notify,
+    dialogRemove,
   }
 })

src/views/HomeView.vue

@@ -9,6 +9,7 @@ import config from '@/app.config'
 
 // import Type
 import type { FormRef } from '@/interface/response/checkin'
+import type { Noti } from '@/interface/response/Main'
 import type { notiType } from '@/interface/index/Main'
 
 // import components
@@ -19,7 +20,7 @@ import MapCheck from '@/components/MapCheckin.vue'
 import { useCounterMixin } from '@/stores/mixin'
 
 const mixin = useCounterMixin()
-const { date2Thai, showLoader, hideLoader, messageError } = mixin
+const { date2Thai, showLoader, hideLoader, messageError, dialogRemove } = mixin
 const router = useRouter()
 const $q = useQuasar()
 
@@ -37,13 +38,65 @@ async function fetchCheckTime() {
       checkInId.value = data.checkInId ? data.checkInId : ''
     })
     .catch((err) => {
-      console.log(err)
+      messageError($q, err)
     })
     .finally(() => {
       hideLoader()
     })
 }
 
+const notiTrigger = ref<boolean>(false)
+const notiList = ref<notiType[]>([])
+/** function เรียกข้อมุลแจ้งเตือน */
+async function fetchNotifications() {
+  showLoader()
+  await http
+    .get(config.API.msgNotificate)
+    .then((res) => {
+      const response = res.data.result
+      const list: notiType[] = []
+      response.map((e: Noti) => {
+        list.push({
+          id: e.id,
+          sender:
+            e.createdFullName == '' || e.createdFullName == null
+              ? 'เจ้าหน้าที่'[0]
+              : e.createdFullName[0],
+          body: e.body ?? '',
+          timereceive: new Date(e.receiveDate),
+        })
+      })
+      notiList.value = list
+    })
+    .catch((err) => {
+      messageError($q, err)
+    })
+    .finally(() => {
+      hideLoader()
+    })
+}
+
+/**
+ * function ลบรายการแจ้งเตือน
+ * @param id noti
+ */
+async function onClickDelete(id: string) {
+  dialogRemove($q, async () => {
+    await http
+      .delete(config.API.msgId(id))
+      .then(() => {
+        success($q, 'ลบข้อมูลสำเร็จ')
+      })
+      .catch((e) => {
+        messageError($q, e)
+      })
+      .finally(async () => {
+        await fetchNotifications()
+        hideLoader()
+      })
+  })
+}
+
 /** ref อัพเดทเวลา*/
 const dateNow = ref<Date>(new Date())
 const Thai = ref<Date>(dateNow.value)
@@ -225,16 +278,6 @@ async function onClickConfirm() {
   dialogTime.value = false
 }
 
-const notiTrigger = ref<boolean>(false)
-const notiList = ref<notiType[]>([
-  {
-    id: '1',
-    sender: 'ท',
-    body: 'ลงเวลา',
-    timereceive: new Date(),
-  },
-])
-
 // class
 const getClass = (val: boolean) => {
   return {
@@ -245,6 +288,7 @@ const getClass = (val: boolean) => {
 /** Hook*/
 onMounted(async () => {
   await fetchCheckTime()
+  await fetchNotifications()
 
   updateClock()
 })
@@ -327,6 +371,7 @@ onMounted(async () => {
                       dense
                       icon="mdi-close"
                       class="mybtn q-mx-xs"
+                      @click="onClickDelete(n.id)"
                     ></q-btn>
                   </q-item>
                   <q-separator color="grey-2" />