redirect payload

src/interface/request/main/main.ts

@@ -33,6 +33,7 @@ interface notiType {
   body: string;
   timereceive: string;
   isOpen: boolean;
+  payload: string;
 }
 
 interface optionType {

src/views/MainLayout.vue

@@ -117,6 +117,7 @@ const getDataNotification = async (index: number, type: string) => {
             e.receiveDate
           ).toLocaleTimeString("th-TH", thaiOptions)} น.`,
           isOpen: e.isOpen,
+          payload: e.payload,
         });
       });
       notiList.value.push(...list);
@@ -590,7 +591,11 @@ async function fetchPermissionsSys() {
             v-if="totalNoti !== 0"
             >{{ totalNoti }}</q-badge
           >
-          <q-menu v-model="notiTrigger" :offset="[0, 8]" style="width: 480px">
+          <q-menu
+            v-model="notiTrigger"
+            :offset="[0, 8]"
+            style="width: 480px; height: 60vh"
+          >
             <div class="q-px-md q-py-sm row col-12 items-center">
               <div class="text-subtitle1 text-weight-medium">การแจ้งเตือน</div>
               <q-space />
@@ -607,13 +612,21 @@ async function fetchPermissionsSys() {
               <div
                 v-for="(n, index) in notiList"
                 :key="index"
-                class="caption q-pa-xs"
+                :class="
+                  n.payload
+                    ? 'caption q-pa-xs cursor-pointer'
+                    : 'caption q-pa-xs'
+                "
+                @click.stop.prevent="
+                  n.payload ? $router.push(`/${n.payload}`) : ''
+                "
               >
                 <q-item
-                  v-ripple
                   :class="
                     !n.isOpen ? 'mytry q-py-xs my-menu-link' : 'mytry q-py-xs'
                   "
+                  :clickable="n.payload !== ''"
+                  :v-ripple="n.payload !== ''"
                   dense
                 >
                   <q-item-section avatar top style="min-width: 40px">
@@ -639,7 +652,7 @@ async function fetchPermissionsSys() {
                     dense
                     icon="mdi-close"
                     class="mybtn q-mx-xs"
-                    @click="clickDelete(n.id, index)"
+                    @click.stop.pervent="clickDelete(n.id, index)"
                   ></q-btn>
                 </q-item>
               </div>