Notification Center

A comprehensive notification display component that provides a dropdown interface for viewing and interacting with user notifications.

Usage

Basic Usage

<template>
  <ci-notification-center 
    :notifications="notifications" 
    @notification:click="handleNotificationClick"
  />
</template>

<script>
export default {
  data() {
    return {
      notifications: [
        {
          id: "68a6de1340676c10bae65506",
          hintMessageTemplate: "Hint message with {Person.123321} that is in company {Company.123} that occurs at {CiSystem.123} and invalid prop {Test.123}",
          locationList: [
            {
              locationType: "Dashboard",
              readAt: "2025-08-21T09:25:11.118Z"
            },
            {
              locationType: "Toast",
              readAt: "2025-08-21T09:25:54.259Z"
            }
          ],
          relatedList: [
            {
              type: "Person",
              id: "123321",
              displayText: "<b>Cirrus</b>"
            },
            {
              type: "Company",
              id: "123",
              displayText: "Cirrusinsight"
            },
            {
              type: "CiSystem",
              id: "123",
              displayText: "2025-08-25T08:51:35.555+00:00"
            }
          ],
          avatar: {
            type: "Company",
            id: "company_id",
            displayText: "some company",
            imageUrl: ""
          },
          action: {},
          hasIncompleteRelatedNextItem: false,
          createdAt: "2025-08-21T08:51:35.555Z",
        },
        {
          id: "68a6de1340676c10bae652506",
          hintMessageTemplate: "Hint message with simple context",
          locationList: [
            {
              locationType: "Dashboard",
              readAt: null
            },
            {
              locationType: "Toast",
              readAt: null
            }
          ],
          relatedList: [],
          avatar: {
            type: "Person",
            id: "contact_id",
            displayText: "some contact",
            imageUrl: "https://randomuser.me/api/portraits/men/85.jpg"
          },
          action: {},
          hasIncompleteRelatedNextItem: true,
          createdAt: "2025-08-21T08:51:35.555Z",
        }
      ]
    }
  },
  methods: {
    handleNotificationClick(notificationId) {
      console.log('Notification clicked:', notificationId)
    }
  }
}
</script>

Dynamic loading

<template>
  <ci-notification-center 
    :notifications="manyNotifications" 
    :load-more-callback="loadMoreNotifications"
    :has-more-earlier-notifications="hasMoreEarlierNotifications"
    @notification:click="handleNotificationClick"
  />
</template>

<script>
export default {
  data() {
    return {
      hasMoreEarlierNotifications: true,
      manyNotifications: [
        {
          id: "new-1",
          hintMessageTemplate: "Urgent: System maintenance scheduled",
          locationList: [{ locationType: "Dashboard", readAt: null }],
          relatedList: [],
          avatar: {
            type: "CiSystem",
            id: "system",
            displayText: "System",
            imageUrl: ""
          },
          action: {},
          hasIncompleteRelatedNextItem: false,
          createdAt: "2025-01-15T10:30:00.000Z",
        },
        {
          id: "new-2",
          hintMessageTemplate: "New message from {Person.user1}",
          locationList: [{ locationType: "Dashboard", readAt: null }],
          relatedList: [
            { type: "Person", id: "user1", displayText: "Alice Cooper" }
          ],
          avatar: {
            type: "Person",
            id: "user1",
            displayText: "Alice Cooper",
            imageUrl: "https://randomuser.me/api/portraits/women/68.jpg"
          },
          action: {},
          hasIncompleteRelatedNextItem: false,
          createdAt: "2025-01-15T10:15:00.000Z",
        }
      ]
    }
  },
  methods: {
    handleNotificationClick(notificationId) {
      console.log('Notification clicked:', notificationId)
    },
    loadMoreNotifications() {
        return new Promise(resolve => {
          setTimeout(() => {
            this.manyNotifications.push(...Array.from({ length: 15 }, (_, i) => ({
              id: `earlier-${i + 1}`,
              hintMessageTemplate: `Earlier notification ${i + 1} from {Person.user${i + 1}}`,
              locationList: [{ 
                locationType: "Dashboard", 
                readAt: `2025-01-15T${9 - Math.floor(i/3)}:${30 - (i * 2)}:00.000Z` 
              }],
              relatedList: [
                { type: "Person", id: `user${i + 1}`, displayText: `User ${i + 1}` }
              ],
              avatar: {
                type: "Person",
                id: `user${i + 1}`,
                displayText: `User ${i + 1}`,
                imageUrl: `https://randomuser.me/api/portraits/${i % 2 === 0 ? 'men' : 'women'}/${(i % 50) + 1}.jpg`
              },
              action: {},
              hasIncompleteRelatedNextItem: i % 3 === 0,
              createdAt: `2025-01-15T10:15:00.000Z`
            })))

            resolve()
          }, 3000)
        })
    }
  }
}
</script>

Empty State

<template>
  <ci-notification-center :notifications="[]" />
</template>

Props

Prop	Type	Default	Description
notifications	NotificationSingleItem[]	[]	Array of notification objects to display
hasMoreEarlierNotifications	Boolean	false	Boolean that determines to show Show More or not
loadMoreCallback	Function	{}	Load more callback that is called when Show More is clicked
newNotificationBadgeIsShown	Boolean	false	Shows a red dot badge on the notification icon when true

Events

Event	Payload	Description
notification:click	string	Emitted when a notification is clicked, provides the notification ID
close	-	Emitted when the notification center popover is closed

Data Structure

NotificationSingleItem

interface NotificationSingleItem {
  id: string                                    // Unique notification identifier
  hintMessageTemplate: string                  // Template string with placeholders
  locationList: NotificationLocation[]         // Read status for different locations
  relatedList: NotificationRelated[]           // Related entities referenced in the message
  avatar: NotificationAvatar                   // Avatar information for the notification
  action: NotificationClickAction              // Click action configuration
  hasIncompleteRelatedNextItem: boolean        // Whether there are more related items
  createdAt: string                            // ISO timestamp of notification creation
}

NotificationAvatar

interface NotificationAvatar {
  id: string                                   // Avatar entity ID
  displayText: string                          // Display text for the avatar
  imageUrl: string                             // URL for avatar image (optional)
  type: NotificationAvatarType                             // Type of avatar (Person, Company, CiSystem)
}

NotificationRelated

interface NotificationRelated {
  id: string                                   // Related entity ID
  displayText: string                          // Display text for the entity
  type: NotificationRelatedType                            // Type of related entity
}

NotificationLocation

interface NotificationLocation {
  locationType: NotificationLocationType       // Where the notification appears
  readAt?: string | null                       // ISO timestamp when read (null if unread)
}

Message Template Format

The hintMessageTemplate supports dynamic content using placeholders in the format {Type.ID}:

• {Person.123321} - References a person with ID "123321"
• {Company.123} - References a company with ID "123"
• {CiSystem.123} - References a system entity with ID "123"

These placeholders are automatically replaced with the corresponding displayText from the relatedList and styled with bold formatting.