Added nav-bar to show home link and user status

bookie/src/app/app.component.html

@@ -1,3 +1,4 @@
+<app-nav-bar></app-nav-bar>
 <div fxLayout="column" fxLayoutAlign="center none" class="mat-app-background basic-container">
   <router-outlet></router-outlet>
 </div>

bookie/src/app/app.module.ts

@@ -25,6 +25,8 @@ import { CoreModule } from './core/core.module';
 import { ReactiveFormsModule } from '@angular/forms';
 import { SharedModule } from './shared/shared.module';
 import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatToolbarModule } from "@angular/material";
+import { NavBarComponent } from './nav-bar/nav-bar.component';
 
 registerLocaleData(enIN);
 
@@ -33,7 +35,8 @@ registerLocaleData(enIN);
     AppComponent,
     LoginComponent,
     LogoutComponent,
-    HomeComponent
+    HomeComponent,
+    NavBarComponent
   ],
   imports: [
     BrowserModule,
@@ -41,16 +44,17 @@ registerLocaleData(enIN);
     BrowserAnimationsModule,
     FlexLayoutModule,
     HttpClientModule,
-    MatGridListModule,
-    MatCardModule,
-    MatMenuModule,
-    MatIconModule,
     MatButtonModule,
-    MatFormFieldModule,
-    MatDividerModule,
+    MatCardModule,
     MatDialogModule,
-    MatSnackBarModule,
+    MatDividerModule,
+    MatFormFieldModule,
+    MatGridListModule,
+    MatIconModule,
     MatInputModule,
+    MatMenuModule,
+    MatSnackBarModule,
+    MatToolbarModule,
     LayoutModule,
     ReactiveFormsModule,
     CoreModule,

bookie/src/app/home/home.component.html

@@ -1,10 +1,4 @@
 <div fxLayout="row wrap" fxLayoutGap="grid 20px">
-  <mat-card fxLayout="column" class="square-button" matRipple [routerLink]="['/', 'login']" *ngIf="!(user | async)">
-    <h3 class="item-name">
-      <mat-icon>account_box</mat-icon>
-      Login
-    </h3>
-  </mat-card>
   <mat-card fxLayout="column" class="square-button" matRipple *ngIf="auth.hasPermission('Guest Book')" [routerLink]="['/', 'guest-book']">
     <h3 class="item-name">Guest Book</h3>
   </mat-card>
@@ -74,10 +68,4 @@
   <mat-card fxLayout="column" class="square-button" matRipple *ngIf="auth.hasPermission('Users')" [routerLink]="['/', 'users']">
     <h3 class="item-name">Users</h3>
   </mat-card>
-  <mat-card fxLayout="column" class="square-button" matRipple [routerLink]="['/', 'logout']"
-            *ngIf="user | async as name">
-    <h3 class="item-name">
-      <mat-icon>account_box</mat-icon>
-      Logout {{name}}</h3>
-  </mat-card>
 </div>

bookie/src/app/home/home.component.ts

@@ -1,7 +1,5 @@
 import { Component, OnInit} from '@angular/core';
 import { AuthService} from '../auth/auth.service';
-import { Observable } from 'rxjs';
-import { map, share } from 'rxjs/operators';
 
 @Component({
   selector: 'app-home',
@@ -9,15 +7,10 @@ import { map, share } from 'rxjs/operators';
   styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {
-  public user: Observable<string>;
 
   constructor(public auth: AuthService) {
   }
 
   ngOnInit() {
-    this.user = this.auth.userObservable.pipe(
-      map (x => x.isAuthenticated ? x.name : null),
-      share()
-    );
   }
 }

bookie/src/app/nav-bar/nav-bar.component.css

@@ -0,0 +1,5 @@
+.fill-remaining-space {
+  /* This fills the remaining space, by using flexbox.
+     Every toolbar row uses a flexbox row layout. */
+  flex: 1 1 auto;
+}

bookie/src/app/nav-bar/nav-bar.component.html

@@ -0,0 +1,15 @@
+<mat-toolbar>
+  <a mat-button [routerLink]="['/']">
+    <mat-icon>home</mat-icon>
+    Point of Sale
+  </a>
+  <span class="fill-remaining-space"></span>
+  <button mat-button [routerLink]="['/', 'login']" *ngIf="!(user | async)">
+      <mat-icon>account_box</mat-icon>
+      Login
+  </button>
+  <button mat-button [routerLink]="['/', 'logout']" *ngIf="user | async as name">
+      <mat-icon>account_box</mat-icon>
+      Logout {{name}}
+  </button>
+</mat-toolbar>

bookie/src/app/nav-bar/nav-bar.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavBarComponent } from './nav-bar.component';
+
+describe('NavBarComponent', () => {
+  let component: NavBarComponent;
+  let fixture: ComponentFixture<NavBarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavBarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

bookie/src/app/nav-bar/nav-bar.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from "rxjs";
+import { map, share } from "rxjs/operators";
+import { AuthService } from "../auth/auth.service";
+
+@Component({
+  selector: 'app-nav-bar',
+  templateUrl: './nav-bar.component.html',
+  styleUrls: ['./nav-bar.component.css']
+})
+export class NavBarComponent implements OnInit {
+  public user: Observable<string>;
+
+  constructor(public auth: AuthService) {
+  }
+
+  ngOnInit() {
+    this.user = this.auth.userObservable.pipe(
+      map (x => x.isAuthenticated ? x.name : null),
+      share()
+    );
+  }
+
+}

bookie/src/app/sales/bills/bills.component.html

@@ -1,10 +1,6 @@
 <mat-card>
   <mat-card-title-group>
     <mat-card-title>Bill</mat-card-title>
-    <a mat-button [routerLink]="['/']">
-      <mat-icon>home</mat-icon>
-      Main Menu
-    </a>
   </mat-card-title-group>
   <mat-card-content>
     <table mat-table #table [dataSource]="dataSource" aria-label="Elements" class="mat-elevation-z8">