Conserve state and show screens based on logged in user

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

@@ -22,6 +22,7 @@ export class NotificationsComponent implements OnInit {
     }, {
         text: 'Request to create a new Committee',
         timeStamp: '2 hours ago',
+        redirectionUrl: '/tabs/investigate-business-entities-and-individuals',
     }, {
         text: 'New name application has been submitted',
         description: 'A new Applicant in the company name Kimao has applied for an appeal',

src/app/layout/tabs/tabs.component.html

@@ -27,9 +27,11 @@
             <img src="assets/icons/chevron-down.svg" alt="chevron down image">
         </ng-container>
         <ng-container *ngIf="showLogout">
-            <img src="assets/icons/logout.svg" class="logout-icon" alt="logout icon">
-            <span> Log me out </span>
-            <img src="assets/icons/chevron-down.svg" alt="chevron down image">
+            <a [routerLink]="['/login']">
+                <img src="assets/icons/logout.svg" class="logout-icon" alt="logout icon">
+                <span> Log me out </span>
+                <img src="assets/icons/chevron-down.svg" alt="chevron down image">
+            </a>
         </ng-container>
     </section>
 

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

@@ -9,26 +9,33 @@
     <span class="current-page"> Investigating Business Entities and Individuals </span>
 </section>
 
+<app-check-status
+    *ngIf="!canExecute"
+    [status]="state"
+    [assignedTo]="executingRole"
+></app-check-status>
 
-<app-view-case-details 
-    *ngIf="state === 'VIEW INITIAL DETAILS'"
-    [hasEnoughData]="hasEnoughData" 
-    (updateHasEnoughData)="hasEnoughData = $event"
-></app-view-case-details>
-
-<app-modify-case-details
-    *ngIf="state === 'ENTER MORE DETAILS'"
-></app-modify-case-details>
-
-<app-assign-panel
-    *ngIf="state === 'ASSIGN COMMITTEE'"
-></app-assign-panel>
+<ng-container *ngIf="canExecute">
+    <app-view-case-details 
+        *ngIf="state === 'VIEW INITIAL DETAILS'"
+        [hasEnoughData]="hasEnoughData" 
+        (updateHasEnoughData)="hasEnoughData = $event"
+    ></app-view-case-details>
+    
+    <app-modify-case-details
+        *ngIf="state === 'ENTER MORE DETAILS'"
+    ></app-modify-case-details>
     
-<div class="form-action-buttons">
-    <button class="common-button neutral" *ngIf="stateHistory.length > 0" (click)="goBack()">
-        Back
-    </button>
-    <button class="common-button" (click)="proceed()">
-        Proceed
-    </button>
-</div>
+    <app-assign-panel
+        *ngIf="state === 'ASSIGN COMMITTEE'"
+    ></app-assign-panel>
+        
+    <div class="form-action-buttons">
+        <button class="common-button neutral" *ngIf="stateHistory.length > 0" (click)="goBack()">
+            Back
+        </button>
+        <button class="common-button" (click)="proceed()">
+            Proceed
+        </button>
+    </div>
+</ng-container>

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

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 
 type State = 'VIEW INITIAL DETAILS'|'ENTER MORE DETAILS'|'ASSIGN COMMITTEE';
+type Role = 'Investigator'|'Hod'|'Panel';
 
 @Component({
   selector: 'app-investigate-business-entities-and-individuals',
@@ -10,10 +11,43 @@ type State = 'VIEW INITIAL DETAILS'|'ENTER MORE DETAILS'|'ASSIGN COMMITTEE';
 export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnInit {
     hasEnoughData = false;
 
-    state: State = 'VIEW INITIAL DETAILS';
+    state: State;
     stateHistory: Array<State> = [];
 
-    constructor() { }
+    loginRole: Role;
+
+    canExecute: boolean;
+    executingRole: Role;
+
+    constructor() {
+        const loginEmail = localStorage.getItem('loginEmail');
+
+        if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('hod')) {
+            this.loginRole = 'Hod';
+        } else if (loginEmail && loginEmail.toLocaleLowerCase().startsWith('panel')) {
+            this.loginRole = 'Panel';
+        } else {
+            this.loginRole = 'Investigator';
+        }
+
+        const savedState = localStorage.getItem('state');
+
+        switch (savedState) {
+            case 'ENTER MORE DETAILS':
+                this.state = 'ENTER MORE DETAILS';
+                this.executingRole = 'Investigator';
+                break;
+            case 'ASSIGN COMMITTEE':
+                this.state = 'ASSIGN COMMITTEE';
+                this.executingRole = 'Hod';
+                break;
+            default:
+                this.state = 'VIEW INITIAL DETAILS';
+                this.executingRole = 'Investigator';
+        }
+
+        this.canExecute = this.loginRole === this.executingRole;
+    }
 
     proceed() {
         this.stateHistory.push(this.state);
@@ -22,14 +56,21 @@ export class InvestigateBusinessEntitiesAndIndividualsComponent implements OnIni
             case 'VIEW INITIAL DETAILS':
                 if (this.hasEnoughData) {
                     this.state = 'ASSIGN COMMITTEE';
+                    this.executingRole = 'Hod';
                 } else {
                     this.state = 'ENTER MORE DETAILS';
+                    this.executingRole = 'Investigator';
                 }
                 break;
             case 'ENTER MORE DETAILS':
                 this.state = 'ASSIGN COMMITTEE';
+                this.executingRole = 'Hod';
                 break;
         }
+
+        localStorage.setItem('state', this.state);
+
+        this.canExecute = this.loginRole === this.executingRole;
     }
 
     goBack() {

src/app/pages/login/login.component.html

@@ -8,8 +8,10 @@
 
         <app-generic-input
             type="email"
-            placeholder="johndoe@mail.com"
+            placeholder="e.g. johndoe@mail.com"
             label="Email ID"
+            [value]="email"
+            (onChange)="updateEmail($event)"
         ></app-generic-input>
 
         <app-generic-input

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

@@ -6,10 +6,17 @@ import { Component, OnInit } from '@angular/core';
     styleUrls: ['./login.component.scss']
 })
 export class LoginComponent implements OnInit {
+    email = '';
     
     constructor() { }
 
     ngOnInit(): void {
     }
 
+    updateEmail(email: string) {
+        this.email = email;
+
+        localStorage.setItem('loginEmail', email);
+    }
+
 }

src/app/pages/register-business/register-business.component.html

@@ -53,7 +53,7 @@
                 ></app-select-input>
             </ng-container>
     
-            <ng-container *ngIf="registerInput.type === 'text' || registerInput.type === 'email' || registerInput.type === 'number'">
+            <ng-container *ngIf="registerInput.type === 'text' || registerInput.type === 'email'">
                 <app-generic-input
                     [label]="registerInput.name"
                     [type]="registerInput.type" 

src/app/widgets/check-status/check-status.component.html

@@ -1,13 +1,7 @@
-<header class="tab-header">
-    <h2>
-        Application Status
-    </h2>
-</header>
-
-
-<div class="search-input-container">
-    <section class="form-message" [ngClass]="{'error' : error.type === 'DANGER', 'warning' : error.type === 'WARNING' }" *ngIf="error">        
-        <p> <strong> Assigned To: </strong> {{ error.assignedTo }} </p>
-        <h5> {{ error.status }} </h5>
+<div class="message-container">
+    <section class="form-message" [ngClass]="{'error' : type === 'DANGER', 'warning' : type === 'WARNING' }" >
+        <p> <strong> Assigned To: </strong> {{ assignedTo }} </p>
+        <h5> {{ status }} </h5>
     </section>
+    <p class="note">Please wait for the assigned user to continue this process.</p>
 </div>

src/app/widgets/check-status/check-status.component.scss

@@ -1,4 +1,4 @@
-.search-input-container {
+.message-container {
     width: 60%;
     margin: 0 auto;
     text-align: center;
@@ -33,4 +33,9 @@
             color: var(--dark-grey);
         }
     }
+}
+
+.note {
+    font-size: 1.4rem;
+    font-style: italic;
 }

src/app/widgets/check-status/check-status.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
     selector: 'app-check-status',
@@ -6,20 +6,12 @@ import { Component, OnInit } from '@angular/core';
     styleUrls: ['./check-status.component.scss']
 })
 export class CheckStatusComponent implements OnInit {
-    
-    error?: {
-        status: string,
-        assignedTo: string,
-        type: 'SUCCESS' | 'WARNING' | 'DANGER',
-    };
+    @Input() status = 'PENDING';
+    @Input() assignedTo = 'Another User';
+    @Input() type: 'SUCCESS' | 'WARNING' | 'DANGER' = 'WARNING';
 
     constructor() { }
 
     ngOnInit(): void {
-        this.error = {
-            status: 'In Progress',
-            assignedTo: 'Mr Miyagi',
-            type: 'WARNING'
-        };
     }
 }

src/app/widgets/form/generic-input/generic-input.component.html

@@ -1,5 +1,5 @@
 <div class="input-holder">
-    <input [type]="type" [placeholder]="placeholder ? placeholder : ''">
+    <input [type]="type" [placeholder]="placeholder ? placeholder : ''" [ngModel]="value" (ngModelChange)="updateValue($event)">
 
     <label> {{ label }}: </label>
 </div>

src/app/widgets/form/generic-input/generic-input.component.ts

@@ -1,8 +1,8 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
 
 export interface GenericInputProperties {
     name: string,
-    type: 'text' | 'email' | 'number' | 'password',
+    type: 'text' | 'email' | 'password',
     placeholder?: string,
 }
 
@@ -14,11 +14,19 @@ export interface GenericInputProperties {
 export class GenericInputComponent implements OnInit {
     @Input() label = '';
     @Input() placeholder: string|undefined;
-    @Input() type: 'text'|'email'|'number'|'password' = 'text';
+    @Input() type: 'text'|'email'|'password' = 'text';
+    @Input() value = '';
+
+    @Output() onChange = new EventEmitter<string>();
+
 
     constructor() { }
 
     ngOnInit(): void {
     }
 
+    updateValue(value: string) {
+        this.onChange.emit(value);
+    }
+
 }