Add notification feature to webapps and libs

Author: Fajfa

client/web/admin/src/app.js

@@ -92,6 +92,9 @@ export default (options = {}) => {
         // Load effective permissions
         this.$store.dispatch('rbac/load', enabledApis)
 
+        // Initialize notifications
+        this.$store.dispatch('notifications/fetchNotifications')
+
         return this.loadBundle(bundleLoaderOpt)
           .then(() => this.$SystemAPI.automationList({ excludeInvalid: true }))
           .then(this.makeAutomationScriptsRegistrator(
@@ -147,6 +150,22 @@ export default (options = {}) => {
               this.$store.dispatch('wfPrompts/clear', msg['@value'])
               break
 
+            case 'notification':
+              this.$store.dispatch('notifications/addNotification', msg['@value'])
+              break
+
+            case 'notification.read':
+              this.$store.dispatch('notifications/updateReadNotification', msg['@value'])
+              break
+
+            case 'notification.read.all':
+              this.$store.dispatch('notifications/updateAllReadNotifications', msg['@value'])
+              break
+
+            case 'notification.delete':
+              this.$store.dispatch('notifications/removeNotification', msg['@value'])
+              break
+
             case 'error':
               this.toastDanger('Websocket message with error', msg['@value'])
           }
@@ -163,6 +182,7 @@ export default (options = {}) => {
       'general',
       'navigation',
       'notification',
+      'notifications',
       'general',
       'permissions',
       'system.stats',

client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue

@@ -21,6 +21,12 @@
           {{ $t('app-selector.hide') }}
         </b-form-checkbox>
 
+        <b-form-checkbox
+          v-model="topbarSettings.hideNotifications"
+        >
+          {{ $t('notifications.hide') }}
+        </b-form-checkbox>
+
         <b-form-checkbox
           v-model="topbarSettings.hideHelp"
         >

client/web/admin/src/components/faIcons.js

@@ -11,6 +11,7 @@ import {
   faAngleDoubleRight,
   faPowerOff,
   faCheck,
+  faCheckDouble,
   faTachometerAlt,
   faTimes,
   faFileCode,
@@ -53,6 +54,8 @@ import {
   faTrashRestore,
   faLocationArrow,
   faEyeSlash,
+  faBellSlash,
+  faBell as faBellSolid,
 } from '@fortawesome/free-solid-svg-icons'
 
 import {
@@ -62,6 +65,7 @@ import {
   faUser,
   faTrashAlt,
   faEdit,
+  faBell,
 } from '@fortawesome/free-regular-svg-icons'
 
 library.add(
@@ -77,6 +81,7 @@ library.add(
   faAngleDoubleRight,
   faPowerOff,
   faCheck,
+  faCheckDouble,
   faTachometerAlt,
   faTimes,
   faFileCode,
@@ -125,4 +130,7 @@ library.add(
   faAngleUp,
   faAngleDown,
   faEyeSlash,
+  faBell,
+  faBellSolid,
+  faBellSlash,
 )

client/web/admin/src/store/index.js

@@ -27,5 +27,11 @@ export default new Vuex.Store({
         webapp: 'admin',
       }),
     },
+    notifications: {
+      namespaced: true,
+      ...cvStore.notifications({
+        api: Vue.prototype.$SystemAPI,
+      }),
+    },
   },
 })

client/web/admin/src/views/Layout.vue

@@ -117,6 +117,8 @@
         warning: (countdownTime) => $t('general:extendSession.labels.warning', { countdownTime }),
       }"
     />
+
+    <c-notification-sidebar v-if="!$Settings.get('ui.topbar', {}).hideNotifications" />
   </div>
 </template>
 
@@ -125,7 +127,7 @@ import CTheMainNav from 'corteza-webapp-admin/src/components/CTheMainNav'
 import { components, mixins } from '@cortezaproject/corteza-vue'
 import { mapGetters } from 'vuex'
 
-const { CExtendSession, CPermissionsModal, CPrompts, CTopbar, CSidebar } = components
+const { CExtendSession, CPermissionsModal, CPrompts, CTopbar, CSidebar, CNotificationSidebar } = components
 
 export default {
   i18nOptions: {
@@ -139,6 +141,7 @@ export default {
     CSidebar,
     CTheMainNav,
     CExtendSession,
+    CNotificationSidebar,
   },
 
   mixins: [

client/web/compose/src/app.js

@@ -92,6 +92,9 @@ export default (options = {}) => {
         // Initializes reminders subsystems, do prefetch of all pending reminders
         this.$Reminder.init(this, { filter: { assignedTo: user.userID } })
 
+        // Initialize notifications
+        this.$store.dispatch('notifications/fetchNotifications')
+
         this.loadBundle(bundleLoaderOpt)
           .then(() => this.$ComposeAPI.automationList({ excludeInvalid: true }))
           .then(this.makeAutomationScriptsRegistrator(
@@ -153,6 +156,22 @@ export default (options = {}) => {
               this.$Reminder.enqueueRaw(msg['@value'])
               break
 
+            case 'notification':
+              this.$store.dispatch('notifications/addNotification', msg['@value'])
+              break
+
+            case 'notification.read':
+              this.$store.dispatch('notifications/updateReadNotification', msg['@value'])
+              break
+
+            case 'notification.read.all':
+              this.$store.dispatch('notifications/updateAllReadNotifications', msg['@value'])
+              break
+
+            case 'notification.delete':
+              this.$store.dispatch('notifications/removeNotification', msg['@value'])
+              break
+
             case 'error':
               this.toastDanger('Websocket message with error', msg['@value'])
           }
@@ -172,6 +191,7 @@ export default (options = {}) => {
       'namespace',
       'navigation',
       'notification',
+      'notifications',
       'onboarding',
       'page',
       'permissions',

client/web/compose/src/components/faIcons.js

@@ -13,6 +13,7 @@ import {
   faCloudDownloadAlt,
   faTimes,
   faCheck,
+  faCheckDouble,
   faBold,
   faItalic,
   faUnderline,
@@ -67,6 +68,8 @@ import {
   faTools,
   faTable,
   faCamera,
+  faBellSlash,
+  faBell as faBellSolid,
 } from '@fortawesome/free-solid-svg-icons'
 
 import {
@@ -117,6 +120,7 @@ library.add(
   faCloudDownloadAlt,
   faTimes,
   faCheck,
+  faCheckDouble,
   faBell,
   faClock,
   faSquare,
@@ -182,4 +186,7 @@ library.add(
   faExclamationCircle,
   faTable,
   faCamera,
+  faBell,
+  faBellSolid,
+  faBellSlash,
 )

client/web/compose/src/store/index.js

@@ -42,5 +42,11 @@ export default new Vuex.Store({
         webapp: 'compose',
       }),
     },
+    notifications: {
+      namespaced: true,
+      ...cvStore.notifications({
+        api: Vue.prototype.$SystemAPI,
+      }),
+    },
   },
 })

client/web/compose/src/views/Layout.vue

@@ -120,6 +120,8 @@
         warning: (countdownTime) => $t('general:extendSession.labels.warning', { countdownTime }),
       }"
     />
+
+    <c-notification-sidebar v-if="!$Settings.get('ui.topbar', {}).hideNotifications" />
   </div>
 </template>
 
@@ -129,7 +131,7 @@ import CTranslationModal from '../components/Translator/CTranslatorModal'
 import { mapGetters, mapActions } from 'vuex'
 import { debounce } from 'lodash'
 import { components } from '@cortezaproject/corteza-vue'
-const { CToaster, CPrompts, CPermissionsModal, CTopbar, CSidebar, CExtendSession } = components
+const { CToaster, CPrompts, CPermissionsModal, CTopbar, CSidebar, CExtendSession, CNotificationSidebar } = components
 
 export default {
   i18nOptions: {
@@ -144,6 +146,7 @@ export default {
     CSidebar,
     CToaster, // Only used for reminders
     CExtendSession,
+    CNotificationSidebar,
   },
 
   data () {
@@ -369,3 +372,14 @@ export default {
   },
 }
 </script>
+
+<style lang="scss" scoped>
+.sidebar-spacer {
+  width: 0;
+  transition: width 0.2s ease-in-out;
+
+  &.expanded {
+    width: 240px;
+  }
+}
+</style>

client/web/discovery/package.json

@@ -34,6 +34,7 @@
     "lodash": "^4.17.21",
     "portal-vue": "^2.1.7",
     "vue": "2.7.16",
+    "vue-native-websocket": "^2.0.15",
     "vue-router": "^3.4.9",
     "vue-text-highlight": "^2.0.10",
     "vuex": "^3.6.2"