@finema/finework-layer 0.2.140 → 0.2.142

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [0.2.142](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.141...0.2.142) (2026-02-19)
+
+## [0.2.141](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.140...0.2.141) (2026-02-19)
+
+### Bug Fixes
+
+* improve noti ([cb22978](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/cb22978810ab73bdabb21bf0f49c35aaa19ed282))
+
 ## [0.2.140](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.139...0.2.140) (2026-02-17)
 
 ### Features

package/app/components/Notifications/index.vue

@@ -31,53 +31,54 @@
         v-else
         :loading="notification.fetch.status.isLoading"
       >
-        <div class="space-y-2 divide-y-1 divide-gray-200">
-          <div
-            v-for="item in notification.fetch.items"
-            :key="item.id"
+        <div
+          v-for="item in notification.fetch.items"
+          :key="item.id"
+        >
+          <Separator />
+          <NuxtLink
+            :to="getLink(item)"
+            :target="getLink(item) === '#' ? '_self' : '_blank'"
+            :class="['flex cursor-pointer items-start gap-2 rounded-lg p-4 hover:bg-gray-100']"
           >
-            <NuxtLink
-              :to="getLink(item)"
-              :target="getLink(item) === '#' ? '_self' : '_blank'"
-              :class="['mb-2 flex cursor-pointer items-start gap-2 rounded-lg p-4 hover:bg-gray-100']"
-            >
-              <Chip
-                v-if="getImage(item)"
+            <!-- <Chip
                 position="bottom-right"
                 size="3xl"
                 inset
                 :color="getNotificationColor(item)"
-              >
-                <img
-
-                  :src="getImage(item)!"
-                  class="w-12"
-                />
-              </Chip>
-
-              <div class="flex-1">
-                <div class="flex items-start justify-between gap-2">
-                  <p
-                    class="line-clamp-1 text-sm font-medium text-gray-700"
-                    :title="item.title"
-                  >
-                    {{ item.title }}
-                  </p>
-                  <FormatTimeFromNow
-                    class="text-muted flex-1 text-right text-xs whitespace-nowrap"
-                    :value="item.sent_at"
-                  />
-                </div>
-
-                <p
-                  class="text-sm text-neutral-500"
-                  :title="getMessage(item)"
-                >
-                  {{ getMessage(item) }}
-                </p>
-              </div>
-            </NuxtLink>
-          </div>
+              > -->
+            <div
+              v-if="item.actor?.avatar_url"
+              class="relative"
+            >
+              <Avatar
+                class="min-h-12 min-w-12"
+                :src="item.actor?.avatar_url"
+                :alt="item.actor?.display_name"
+              />
+              <img
+                :src="getImage(item)!"
+                class="absolute -right-1 -bottom-1 w-5 rounded-full bg-white p-0.25"
+              />
+            </div>
+            <img
+              v-else
+              :src="getImage(item)!"
+              class="h-12 min-h-12 w-12 min-w-12"
+            />
+            <!-- </Chip> -->
+
+            <div class="flex flex-1 flex-col gap-0">
+              <p
+                class="text-gray line-clamp-2 text-sm"
+                v-html="getMessage(item)"
+              />
+              <FormatTimeFromNow
+                class="text-xs font-medium whitespace-nowrap text-gray-600"
+                :value="item.sent_at"
+              />
+            </div>
+          </NuxtLink>
         </div>
       </Loader>
     </template>
@@ -101,24 +102,41 @@ onMounted(() => {
 })
 
 const getLink = (item: INotificationItem) => {
-  if (item.data?.url) {
-    return item.data.url
-  }
+  if (item.data?.url) return item.data.url
 
-  if (item.source_type === 'PMO_PROJECT') {
-    return `/pmo/projects/${item.source_id}`
-  } else if (item.source_type === 'NEWSLETTER') {
-    return `/announcement/${item.source_id}`
-  } else if (item.source_type === 'TODO' && (item.action_type === 'TODO_ASSIGN_CARD' || item.action_type === 'TODO_COMMENT_ADD' || item.action_type === 'TODO_DUE_DATE_CHANGE' || item.action_type === 'TODO_STATUS_CHANGE')) {
-    return `/todo/boards/${item.data?.todo_board_slug}/cards/${item.data?.todo_slug}`
-  } else if (item.source_type === 'TODO' && (item.action_type === 'TODO_REMOVE_CARD' || item.action_type === 'TODO_ASSIGN_BOARD')) {
-    return `/todo/boards/${item.data?.todo_board_slug}`
-  } else if (item.source_type === 'TODO' && item.action_type === 'TODO_REMOVE_BOARD') {
-    return `/todo/cards`
-  }
+  switch (item.source_type) {
+    case 'PMO_PROJECT':
+      return `/pmo/projects/${item.source_id}`
+
+    case 'NEWSLETTER':
+      return `/announcement/${item.source_id}`
+
+    case 'TODO': {
+      const boardSlug = item.data?.todo_board_slug
+      const cardSlug = item.data?.todo_slug
+
+      switch (item.action_type) {
+        case 'TODO_ASSIGN_CARD':
+        case 'TODO_COMMENT_ADD':
+        case 'TODO_DUE_DATE_CHANGE':
+        case 'TODO_STATUS_CHANGE':
+          return `/todo/boards/${boardSlug}/cards/${cardSlug}`
+
+        case 'TODO_REMOVE_CARD':
+        case 'TODO_ASSIGN_BOARD':
+          return `/todo/boards/${boardSlug}`
 
-  // todo/boards/MEE/cards/MEE-1
-  return '#'
+        case 'TODO_REMOVE_BOARD':
+          return `/todo/cards`
+
+        default:
+          return '#'
+      }
+    }
+
+    default:
+      return '#'
+  }
 }
 
 const getImage = (item: INotificationItem): string | null => {
@@ -159,7 +177,42 @@ const getNotificationColor = (item: INotificationItem): string => {
 }
 
 const getMessage = (item: INotificationItem): string => {
-  return item.message
+  let message = item.message
+
+  // ตรวจหาวันที่ในรูปแบบ yyyy-mm-dd และแปลงเป็น text
+  const datePattern = /\b(\d{4})-(\d{2})-(\d{2})\b/g
+
+  message = message.replace(datePattern, (match) => {
+    try {
+      const date = new Date(match)
+
+      return TimeHelper.displayDate(date)
+        ? `<span class="text-primary font-medium"> ${TimeHelper.displayDate(date)}</span>`
+        : match
+    } catch {
+      return match
+    }
+  })
+
+  if (item.data) {
+    Object.entries(item.data).forEach(([key, value]) => {
+      if (key.endsWith('_slug') && typeof value === 'string' && value) {
+        // หา slug ในข้อความและครอบด้วย <strong>
+        const slugPattern = new RegExp(`\\b${value}\\b`, 'g')
+
+        message = message.replace(slugPattern, `<span class="text-primary font-medium">${value}</span>`)
+      }
+    })
+  }
+
+  // ตรวจหาคำที่อยู่ระหว่าง "from" และ "to" และทำให้เป็น bold + text-primary font-semibold
+  const fromToPattern = /\bfrom\s+(\S+)\s+to\s+(\S+)/gi
+
+  message = message.replace(fromToPattern, (_match, from, to) => {
+    return `from <span class="text-primary font-medium">${from}</span> to <span class="text-primary font-semibold">${to}</span>`
+  })
+
+  return message
 }
 
 useWatchTrue(() => markAllRead.status.value.isSuccess, () => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@finema/finework-layer",
   "type": "module",
-  "version": "0.2.140",
+  "version": "0.2.142",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground -o",