@finema/finework-layer 0.2.76 → 0.2.77

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [0.2.77](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.76...0.2.77) (2025-12-04)
+
+### Features
+
+* implement notification display component and related management composables and types. ([80f14a6](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/80f14a683bc508f1b40fadf8151a1e5dfa3aabe4))
+* introduce Notifications slideover component for displaying and managing user notifications. ([cf79e03](https://gitlab.finema.co/finema/finework/finework-frontend-layer/commit/cf79e03385ba2ff30df53998ca81344452a63cdd))
+
 ## [0.2.76](https://gitlab.finema.co/finema/finework/finework-frontend-layer/compare/0.2.75...0.2.76) (2025-12-04)
 
 ### Features

package/app/components/Notifications/index.vue

@@ -8,12 +8,12 @@
     }"
     :modal="false"
     title="Notifications"
+    @update:open="onOpenTrigger"
   >
     <Chip
       inset
       color="success"
       :show="Number(unreadCount.data?.count) > 0"
-      @click="markAllRead.run()"
     >
       <Icon
         name="ph:bell"
@@ -71,9 +71,9 @@
 
                 <p
                   class="text-sm text-neutral-500"
-                  :title="item.message"
+                  :title="getMessage(item)"
                 >
-                  {{ item.message }}
+                  {{ getMessage(item) }}
                 </p>
               </div>
             </NuxtLink>
@@ -94,9 +94,9 @@ defineProps<{
 const notification = useNotificationLoader()
 const unreadCount = useNotificationUnreadCount()
 const markAllRead = useNotificationMarkAllRead()
+const route = useRoute()
 
 onMounted(() => {
-  notification.fetchPage()
   unreadCount.run()
 })
 
@@ -141,7 +141,22 @@ const getNotificationColor = (item: INotificationItem): string => {
   }
 }
 
+const getMessage = (item: INotificationItem): string => {
+  return item.message
+}
+
 useWatchTrue(() => markAllRead.status.value.isSuccess, () => {
   unreadCount.run()
 })
+
+useWatchChange(() => route.path, () => {
+  unreadCount.run()
+})
+
+const onOpenTrigger = (isOpen: boolean) => {
+  if (isOpen) {
+    markAllRead.run()
+    notification.fetchPage()
+  }
+}
 </script>

package/app/composables/useNotification.ts

@@ -12,6 +12,17 @@ export const NotificationType = {
   SYSTEM: 'SYSTEM',
 }
 
+export const NotificationPMOActionType = {
+  PROJECT_CREATE: 'PROJECT_CREATE',
+  PROJECT_STATUS_CHANGED: 'PROJECT_STATUS_CHANGED',
+  PROJECT_OWNER_CHANGED: 'PROJECT_OWNER_CHANGED',
+  PROJECT_UPDATE: 'PROJECT_UPDATE',
+
+  COLLABORATOR_ADD: 'COLLABORATOR_ADD',
+  COLLABORATOR_UPDATE: 'COLLABORATOR_UPDATE',
+  COLLABORATOR_REMOVE: 'COLLABORATOR_REMOVE',
+}
+
 export interface INotificationItem {
   id: string
   created_at: string
@@ -24,6 +35,7 @@ export interface INotificationItem {
   source_type?: 'PMO_PROJECT' | string
   source_id?: string
   actor_id?: string
+  action_type?: typeof NotificationPMOActionType[keyof typeof NotificationPMOActionType] & string
   is_read: boolean
   read_at: string
   channels: string[]

package/package.json

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