Make notifications responsive

package.json

@@ -8,8 +8,11 @@
     "watch": "ng build --watch --configuration development",
     "test": "ng test",
 
-    "docker-build": "docker build -t b2rs-multi-stage-image .",
-    "docker-create": "docker run --name b2rs-app-container -d -p 80:80 b2rs-multi-stage-image",
+    "docker-build": "docker build -t b2rs-front-end-image .",
+    "docker-tag": "docker tag b2rs-front-end-image:latest 834628752744.dkr.ecr.ap-southeast-1.amazonaws.com/b2rs-front-end-image:latest",
+    "docker-push": "docker push 834628752744.dkr.ecr.ap-southeast-1.amazonaws.com/b2rs-front-end-image:latest",
+    
+    "docker-create": "docker run --name b2rs-app-container -d -p 80:80 b2rs-front-end-image",
     "docker-destroy": "docker container rm b2rs-app-container",
 
     "docker-start": "docker start b2rs-app-container",

src/app/layout/navbar/navbar.component.ts

@@ -13,12 +13,16 @@ export class NavbarComponent implements OnInit, OnDestroy {
     showLogout: boolean = false;
 
     isShowingNotificationsSubscription: Subscription;
+    loginRoleSubscription: Subscription;
 
     loginName: string = '';
     notificationsCount: number = 0;
 
     constructor(loginService: LoginService, private notificationService: NotificationService) {
-        this.loginName = loginService.getLoginName();
+        this.loginRoleSubscription = loginService.getLoginRoleObservable().subscribe(loginRole => {
+            this.loginName = loginService.getLoginName();
+        });
+
         this.notificationsCount = notificationService.getAllowedNotifications().length;
 
         this.isShowingNotificationsSubscription = this.notificationService.getIsShowingNotificationsObservable().subscribe(isShowingNotifications => this.isShowingNotifications = isShowingNotifications);
@@ -35,6 +39,10 @@ export class NavbarComponent implements OnInit, OnDestroy {
         if (this.isShowingNotificationsSubscription) {
             this.isShowingNotificationsSubscription.unsubscribe();
         }
+
+        if (this.loginRoleSubscription) {
+            this.loginRoleSubscription.unsubscribe();
+        }
     }
 
 }

src/app/layout/notifications/notifications-list/notifications-list.component.html

@@ -1,6 +1,6 @@
 <ul>
     <li *ngFor="let notification of allowedNotifications">
-        <a *ngIf="notification.redirectionUrl" [routerLink]="notification.redirectionUrl">
+        <a *ngIf="notification.redirectionUrl" (click)="closeNotifications()" [routerLink]="notification.redirectionUrl">
             <h5> {{ notification.text }} </h5>
             <p *ngIf="notification.description"> {{ notification.description }} </p>
             <span class="time-stamp"> {{ notification.timeStamp }} </span>

src/app/layout/notifications/notifications-list/notifications-list.component.ts

@@ -9,11 +9,15 @@ import { Notification, NotificationService } from 'src/app/services/notification
 export class NotificationsListComponent implements OnInit {
     allowedNotifications: Array<Notification> = [];
 
-    constructor(notificationService: NotificationService) {
+    constructor(private notificationService: NotificationService) {
         this.allowedNotifications = notificationService.getAllowedNotifications();
     }
 
     ngOnInit(): void {
     }
 
+    closeNotifications() {
+        this.notificationService.setIsShowingNotifications(false);
+    }
+
 }

src/app/layout/tabs/tabs.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Subscription } from 'rxjs';
 import { LoginService } from 'src/app/services/login.service';
 import { NotificationService } from 'src/app/services/notification.service';
 
@@ -7,19 +8,30 @@ import { NotificationService } from 'src/app/services/notification.service';
     templateUrl: './tabs.component.html',
     styleUrls: ['./tabs.component.scss']
 })
-export class TabsComponent implements OnInit {
+export class TabsComponent implements OnInit, OnDestroy {
     showNotifications: boolean = false;
     showLogout: boolean = false;
 
+    loginRoleSubscription: Subscription;
+
     loginName: string = '';
     notificationsCount: number = 0;
 
     constructor(loginService: LoginService, notificationService: NotificationService) {
-        this.loginName = loginService.getLoginName();
+        this.loginRoleSubscription = loginService.getLoginRoleObservable().subscribe(loginRole => {
+            this.loginName = loginService.getLoginName();
+        });
+
         this.notificationsCount = notificationService.getAllowedNotifications().length;
     }
 
     ngOnInit(): void {
     }
 
+    ngOnDestroy(): void {
+        if (this.loginRoleSubscription) {
+            this.loginRoleSubscription.unsubscribe();
+        }
+    }
+
 }

src/app/pages/investigate-business-entities-and-individuals/investigate-business-entities-and-individuals.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 type State = 'VIEW INITIAL DETAILS'|'ENTER MORE DETAILS'|'ASSIGN COMMITTEE'|'REVIEW NON COMPLIANCE'|'CONCUR COMPLIANCE REVIEW'|'CLOSING REMARKS'|'PREPARE PRELIMINARY LETTER'|'RESPOND TO PRELIMINARY LETTER';
-type Role = 'Investigator'|'Hod'|'Panel'|'Customer';
+type Role = 'Investigator'|'Hod'|'Panel'|'Customer'|'Officer';
 
 @Component({
   selector: 'app-investigate-business-entities-and-individuals',
@@ -41,6 +41,8 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
             this.loginRole = 'Panel';
         } else if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('customer')) {
             this.loginRole = 'Customer';
+        } else if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('officer')) {
+            this.loginRole = 'Officer';
         } else {
             this.loginRole = 'Investigator';
         }

src/app/pages/login/login.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { LoginService } from 'src/app/services/login.service';
 
 @Component({
     selector: 'app-login',
@@ -8,7 +9,7 @@ import { Component, OnInit } from '@angular/core';
 export class LoginComponent implements OnInit {
     email = '';
     
-    constructor() { }
+    constructor(private loginService: LoginService) { }
 
     ngOnInit(): void {
     }
@@ -17,6 +18,7 @@ export class LoginComponent implements OnInit {
         this.email = email;
 
         localStorage.setItem('loginEmail', email);
+        this.loginService.updateLoginRole();
     }
 
 }

src/app/services/login.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
 
 export type Role = 'Officer'|'Investigator'|'Hod'|'Panel'|'Customer';
 
@@ -7,8 +8,15 @@ export type Role = 'Officer'|'Investigator'|'Hod'|'Panel'|'Customer';
 })
 export class LoginService {
     private loginRole: Role;
+    private loginRoleSubject: BehaviorSubject<string>;
 
     constructor() {
+        this.loginRole = 'Customer';
+        this.loginRoleSubject = new BehaviorSubject('');
+        this.updateLoginRole();
+    }
+
+    updateLoginRole() {
         const loginEmail = localStorage.getItem('loginEmail');
 
         if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('hod')) {
@@ -22,6 +30,8 @@ export class LoginService {
         } else {
             this.loginRole = 'Officer';
         }
+
+        this.loginRoleSubject.next(this.loginRole);
     }
 
     getLoginName() {
@@ -34,6 +44,10 @@ export class LoginService {
         }
     }
 
+    getLoginRoleObservable() {
+        return this.loginRoleSubject.asObservable();
+    }
+
     getLoginRole() {
         return this.loginRole;
     }

src/app/services/notification.service.ts

@@ -71,8 +71,10 @@ export class NotificationService {
     private allowedNotifications: Array<Notification> = [];
 
     constructor(loginService: LoginService) {
-        const loginRole = loginService.getLoginRole();
-        this.allowedNotifications = this.notifications.filter(notification => notification.roles.includes(loginRole));
+        loginService.getLoginRoleObservable().subscribe(loginRoleObserved => {
+            const loginRole = loginService.getLoginRole();
+            this.allowedNotifications = this.notifications.filter(notification => notification.roles.includes(loginRole));
+        });
     }
 
     getAllowedNotifications() {