Builderall Vue UI

# BUINotifications

BuiNotifications is a sidebar that displays system notifications on the side opposite the main sidebar. It provides a standard layout for displaying notifications and emits events so that you can code your own "read" and "readAll" methods

# Demo

# Code

<template>
  <div>
    <bui-notifications-bell />
    <bui-notifications :notifications="notifications" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      notifications: [
        {
          read: false,
          _id: 1,
          message: 'Test',
          description: 'A simple fake notification description',
          createdAt: '2021-02-23T21:19:58.258Z'
        }
      ]
    }
  }
}
</script>

# Complete example

# Demo

# Code

<template>
  <div>
    <bui-navbar logo="https://booking.builderall.com/images/images/meta/logo.png">
      <template #items-right>
        <bui-notifications-bell bui-notifications-id="example-notifications-complete"/>
      </template>
    </bui-navbar>

    <bui-notifications
      id="example-notifications-complete"
      :notifications="notifications"
      label-notifications="Notificações"
      label-empty="Tem nada aqui!"
      label-read-all="Ler tudo"
      label-view-all="Ver tudo"
      :loading="loading"
      @hidden="onHidden"
      @shown="onShown"
      @read="onRead"
      @readAll="onReadAll"
    >
      <template #notification-date="{ date }">
        {{ formatDateFn(date) }}
      </template>
    </bui-notifications>
  </div>
</template>

<script>
export default {
  data () {
    return {
      notifications: [],
      loading: false
    }
  },

  methods: {

    onHidden () {
      alert('hide!')
    },

    onReadAll () {
      alert('mark all as read!')
    },

    onRead (notification) {
      alert('click notification! \n' + JSON.stringify(notification))
    },

    onShown () {
      this.loading = true
      this.getNotifications().then((notifications) => {
        this.notifications = notifications
      }).finally(() => {
        this.loading = false
      })
    },

    formatDateFn (date) {
      return new Intl.DateTimeFormat('pt-BR').format(new Date(date))
    },

    getNotifications () {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(Array.from({ length: 40 }, () => (this.makeFakeNotification())))
        }, 1500)
      })
    },

    makeFakeNotification () {
      const random = Math.random().toString(36).slice(2)

      return {
        read: Math.random() < 0.5,
        _id: random,
        message: random,
        description: 'A simple fake notification description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc posuere et ligula sed vestibulum. Donec interdum ornare urna, eget dapibus mi',
        action: 'https://booking.builderall.io/',
        category: 'booking',
        from: 'booking',
        createdAt: '2021-02-23T21:19:58.258Z'
      }
    }
  }
}
</script>

# BUINotificationsBell

This is a subcomponent of BuiNotifications responsible for opening the notification popup and displaying a badge when there are unread notifications. You can use BuiNotificationsBell to insert it into your BuiNavbar.

<bui-notifications-bell />
<bui-notifications-bell has-notifications />

# API Reference

# Events

Name Args Description
hidden When the sidebar is hidding
shown When the sidebar is showing. You can fetch the notifications at this event if you want
read Notification object When a notification was clicked. When this happens you must inform the microservice that that notification has been read and, if you have an action, execute it
readAll Command to mark all notifications as read

# Props

Property Type Default Description
notifications Array [] An array of notification objects, where each notification must contain _id,read, message,description and createdAt
label-notifications String 'Notifications' Label for sidebar title
label-empty String 'Empty' Label to show when don't have notifications
label-read-all String Mark all as read Label to "mark all as read" action
label-view-all String 'View All' Label to "view all" action
loading Boolean false If true, a b-spinner will be displayed while searching for notifications
id String bui-notifications Sidebar ID. It is based on this ID that you must configure the sidebar's opening directive. For example, if the ID is xpto-notifications, for you to open the sidebar you must usev-b-toggle.xpto-notifications

# Slots

Name Description
empty Content to display when there are no notifications
notification-date Slot for notification dates. This is where you must enter your own date formatting.

← Alert →