DiuAngularHeader

This Angular Library is to house the Header Components for applications managed by the Digital Intelligence Unit.

Components

Header Bar (lib-diu-angular-header)

Example use:

<lib-diu-angular-header [strAppName]="appName" [strHome]="home" [alerts]="myAlerts" [messages]="myMessages" [tasks]="myTasks" [token]="tokenDecoded" (endSession)="logout($event) (changeSidebar)="toggleSidebar($event)"></lib-diu-angular-header>

Includes:

Logout Button

Outputs a boolean when the Logout button is selected. The event name is endSession and can be handled by calling the component like so:

(endSession)="logout($event)"

Where logout is a function that will end the User's current session and return them to the Login page.

Display Account

Default displays "Guest". Shows Display name of logged in user when a JWT is passed in as Input like so:

[token]="tokenDecoded"

Where tokenDecoded is a JWt that has been decoded using a library such as angular2-jwt:

import { JwtHelper } from "angular2-jwt";
...
const token = this.store.selectSnapshot(AuthState.getToken);
const jwtHelper = new JwtHelper();
this.tokenDecoded = jwtHelper.decodeToken(token);

Display Messages

Shows the top ten messages passed through as an array using the following input:

[messages]="myMessages"

Where myMessages is an array of Notifications which has the following structure:

export interface Notifications {
  _id: string;
  username?: string;
  teamcode?: string;
  method: string;
  type: string;
  sentdate: Date;
  acknowledgeddate?: Date;
  sender: string;
  header: string;
  message: string;
  link?: string;
  importance: string;
  archive: boolean;
}

Display Tasks

Shows the top ten tasks passed through as an array using the following input:

[tasks]="myTasks"

Where myTasks is an array of Tasks which has the following structure:

export interface Tasks {
  _id: string;
  username?: string;
  teamcode?: string;
  iscompleted: boolean;
  completedby?: string;
  enddate?: Date;
  sentdate: Date;
  acknowledgeddate?: Date;
  sender: string;
  header: string;
  message: string;
  link?: string;
  importance: string;
  archive: boolean;
  invite?: string;
  app_id?: string;
}

Display Alerts

Shows the top ten active alerts passed through as an array using the following input:

[alerts]="myAlerts"

Where myAlerts is an array of SystemAlerts which has the following structure:

export interface SystemAlerts {
  _id: string;
  name: string;
  message: string;
  startdate: Date;
  enddate: Date;
  status: string;
  icon: string;
  author?: string;
  archive: boolean;
}

Application Name

Shows the name of the application, passed through as a string called strAppName

Home Link

Provides a link to the main page of the application, passed through as a string called strHome. This page should reference a url where you wish the user to navigate to if they click the Application name.

Toggle Sidebar

Outputs a boolean when the toggle sidebar button selected. The event name is changeSidebar and can be handled by calling the component like so:

(changeSidebar)="toggleSidebar($event)"

Where toggleSidebar is a function that will minimize or expand the Side Menu.