add notifi

1 files changed, 61 insertions, 1 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index a577b452..b24fef86 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -90,7 +90,7 @@
             }"
           >
             {{ $t('appHeader.support') }}
-          </b-nav-item> 
+          </b-nav-item>
         </b-navbar-nav> -->
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto helper-menu">
@@ -127,6 +127,29 @@
             </b-button>
           </li>
           <li class="nav-item">
+            <b-dropdown id="app-notifications" variant="link" right>
+              <template #button-content>
+                <icon-notification :title="$t('appHeader.titleNotification')" />
+              </template>
+              <b-dropdown-group
+                id="dropdown-group-1"
+                :header="$t('appHeader.titleCritical')"
+              >
+                <b-dropdown-item v-for="(log, index) in okLogs" :key="index"
+                  >{{ log.name }}
+                </b-dropdown-item>
+              </b-dropdown-group>
+              <b-dropdown-divider></b-dropdown-divider>
+              <b-dropdown-text>{{
+                $t('appHeader.titleWarnings')
+              }}</b-dropdown-text>
+              <b-dropdown-divider></b-dropdown-divider>
+              <b-dropdown-text>{{
+                $t('appHeader.titleMessages')
+              }}</b-dropdown-text>
+            </b-dropdown>
+          </li>
+          <li class="nav-item">
             <b-dropdown
               id="app-header-user"
               variant="link"
@@ -162,6 +185,7 @@ import IconClose from '@carbon/icons-vue/es/close/20';
 import IconMenu from '@carbon/icons-vue/es/menu/20';
 import IconAvatar from '@carbon/icons-vue/es/user--avatar/20';
 import IconRenew from '@carbon/icons-vue/es/renew/20';
+import IconNotification from '@carbon/icons-vue/es/notification/20';
 import StatusIcon from '@/components/Global/StatusIcon';
 export default {
   name: 'AppHeader',
@@ -171,6 +195,7 @@ export default {
     IconAvatar,
     IconRenew,
     StatusIcon,
+    IconNotification,
   },
   mixins: [BVToastMixin],
   props: {
@@ -185,6 +210,11 @@ export default {
     };
   },
   computed: {
+    okLogs() {
+      return this.$store.getters['eventLog/allEvents'].filter((log) => {
+        return log.severity === 'OK';
+      });
+    },
     isNavTagPresent() {
       return this.assetTag || this.modelType || this.serialNumber;
     },
@@ -454,4 +484,34 @@ export default {
     border: none;
   }
 }
+
+.dropdown-toggle::after {
+  display: none;
+}
+
+.dropdown-menu {
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+}
+
+.dropdown-header {
+  font-style: normal;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 16px;
+  text-transform: uppercase;
+  color: #0c1c29;
+  padding: 15px;
+}
+#dropdown-group-1 {
+  padding: 15px;
+}
+
+.dropdown-item {
+  font-style: normal;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+  color: #0c1c29;
+}
 </style>