From 3d3ba53a53fbcd1e79b65537fc78dc507aa79498 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Mon, 10 Mar 2025 14:39:24 +0700
Subject: [PATCH] fix: mark notifications as read when accessed

---
 src/layouts/MainLayout.vue             | 129 ++++++++++++++-----------
 src/pages/00_notification/MainPage.vue |   9 +-
 2 files changed, 78 insertions(+), 60 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index a83837ee..15f3da8f 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -115,8 +115,13 @@ function doLogout() {
 }
 
 function readNoti(id: string) {
+  const notification = notificationData.value.find((n) => n.id === id);
+
   state.notiDialog = true;
   state.notiId = id;
+  if (notification) {
+    notification.read = true;
+  }
 }
 
 onMounted(async () => {
@@ -301,20 +306,19 @@ onMounted(async () => {
                 :offset="[0, 10]"
                 anchor="bottom middle"
                 self="top middle"
-                style="max-height: 30vh; width: 300px"
                 @before-hide="
                   () => {
                     state.notiOpen = false;
                   }
                 "
               >
-                <div class="q-px-md q-py-sm row col-12 items-center">
+                <div class="q-pa-sm row col-12 items-center">
                   <div class="text-subtitle1 text-weight-bold">
                     {{ $t('noti.title') }}
                   </div>
                   <q-space />
                 </div>
-                <div class="q-px-md q-pb-md q-gutter-x-md">
+                <div class="q-px-sm q-pb-md">
                   <q-btn
                     rounded
                     padding="0px 10px"
@@ -328,67 +332,76 @@ onMounted(async () => {
                     @click="setActive(btn)"
                   />
                 </div>
-                <div style="overflow-y: auto">
-                  <section
-                    v-if="
-                      state.filterUnread
-                        ? notificationData.filter((v) => !v.read).length
-                        : notificationData.length
-                    "
-                    class="caption cursor-pointer"
+                <section
+                  v-if="
+                    state.filterUnread
+                      ? notificationData.filter((v) => !v.read).length
+                      : notificationData.length
+                  "
+                  class="caption cursor-pointer scroll"
+                  style="max-height: 30vh; width: 300px"
+                >
+                  <q-item
+                    v-for="(item, i) in state.filterUnread
+                      ? notificationData.filter((v) => !v.read)
+                      : notificationData"
+                    dense
+                    clickable
+                    class="items-center q-py-xs q-px-sm"
+                    v-ripple
+                    @click="readNoti(item.id)"
+                    :key="i"
                   >
-                    <q-item
-                      v-for="(item, i) in state.filterUnread
-                        ? notificationData.filter((v) => !v.read)
-                        : notificationData"
-                      dense
-                      clickable
-                      class="q-py-sm"
-                      v-ripple
-                      @click="readNoti(item.id)"
-                      :key="i"
+                    <div
+                      class="rounded q-mr-sm"
+                      :style="`background: hsl(var(--info-bg)/${item.read ? 0 : 1}); width: 6px; height: 6px`"
+                    />
+                    <q-avatar
+                      v-if="$q.screen.gt.xs"
+                      color="positive"
+                      style="height: 36px; width: 36px"
                     >
-                      <q-avatar
-                        v-if="$q.screen.gt.xs"
-                        color="positive"
-                        style="height: 36px; width: 36px"
-                      >
-                        <q-icon color="white" name="mdi-check" />
-                      </q-avatar>
+                      <q-icon color="white" name="mdi-check" />
+                    </q-avatar>
 
-                      <div class="col column text-caption q-pl-md ellipsis">
-                        <span
-                          class="block ellipsis full-width text-weight-bold"
-                        >
-                          {{ item.title }}
-                        </span>
-                        <span class="block ellipsis full-width text-stone">
-                          {{ item.detail }}
-                        </span>
-                      </div>
-                      <span
-                        align="right"
-                        class="text-caption text-stone q-pl-sm"
-                      >
-                        {{ moment(item.createdAt).fromNow() }}
-                      </span>
-                      <q-tooltip
-                        anchor="top middle"
-                        self="bottom middle"
-                        :delay="1000"
-                        :offset="[10, 10]"
-                      >
+                    <div class="col column text-caption q-pl-md ellipsis">
+                      <span class="block ellipsis full-width text-weight-bold">
                         {{ item.title }}
+                      </span>
+                      <span
+                        class="block ellipsis full-width text-stone"
+                        :class="{ 'text-weight-medium': !item.read }"
+                      >
                         {{ item.detail }}
-                      </q-tooltip>
-                    </q-item>
-                  </section>
-                  <section v-else class="text-center q-py-sm">
-                    <span class="app-text-muted">
-                      {{ $t('general.noData') }}
+                      </span>
+                    </div>
+                    <span
+                      align="right"
+                      class="text-caption text-stone q-pl-md"
+                      :class="{ 'text-weight-bold': !item.read }"
+                    >
+                      {{ moment(item.createdAt).fromNow() }}
                     </span>
-                  </section>
-                </div>
+                    <q-tooltip
+                      anchor="top middle"
+                      self="bottom middle"
+                      :delay="1000"
+                      :offset="[10, 10]"
+                    >
+                      {{ item.title }}
+                      {{ item.detail }}
+                    </q-tooltip>
+                  </q-item>
+                </section>
+                <section
+                  v-else
+                  class="text-center q-py-sm"
+                  style="max-height: 30vh; width: 300px"
+                >
+                  <span class="app-text-muted">
+                    {{ $t('general.noData') }}
+                  </span>
+                </section>
                 <div class="col bordered-t">
                   <q-btn
                     flat
diff --git a/src/pages/00_notification/MainPage.vue b/src/pages/00_notification/MainPage.vue
index b581fd68..a3506813 100644
--- a/src/pages/00_notification/MainPage.vue
+++ b/src/pages/00_notification/MainPage.vue
@@ -75,8 +75,13 @@ async function deleteNoti() {
 }
 
 function readNoti(id: string) {
+  const notification = noti.value.find((n) => n.id === id);
+
   state.notiId = id;
   state.notiDialog = true;
+  if (notification) {
+    notification.read = true;
+  }
 }
 
 onMounted(async () => {
@@ -203,10 +208,10 @@ onMounted(async () => {
             class="q-py-sm q-px-md rounded row no-wrap items-center"
             @click.stop="readNoti(n.id)"
           >
-            <!-- <div
+            <div
               class="rounded"
               :style="`background: hsl(var(--info-bg)/${n.read ? 0 : 1}); width: 6px; height: 6px`"
-            /> -->
+            />
             <q-checkbox
               :model-value="selectedNoti.includes(n.id)"
               size="xs"