From c1c0bd259642f5e5aee70c8a761500baa9796a71 Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
Date: Fri, 12 Jun 2020 12:24:08 +0200
Subject: [PATCH] Add start of user/account menu

---
 projects/common/src/fm/common.module.ts       |  8 ++++--
 .../src/fm/components/app/app.component.html  |  3 +++
 .../src/fm/components/app/app.component.scss  |  6 +++++
 .../src/fm/components/app/app.component.ts    |  3 +++
 .../user-menu/user-menu.component.html        |  3 +++
 .../user-menu/user-menu.component.scss        | 10 ++++++++
 .../user-menu/user-menu.component.spec.ts     | 25 +++++++++++++++++++
 .../user-menu/user-menu.component.ts          | 21 ++++++++++++++++
 8 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 projects/common/src/fm/components/user-menu/user-menu.component.html
 create mode 100644 projects/common/src/fm/components/user-menu/user-menu.component.scss
 create mode 100644 projects/common/src/fm/components/user-menu/user-menu.component.spec.ts
 create mode 100644 projects/common/src/fm/components/user-menu/user-menu.component.ts

diff --git a/projects/common/src/fm/common.module.ts b/projects/common/src/fm/common.module.ts
index 34909e7..9d4fc1c 100644
--- a/projects/common/src/fm/common.module.ts
+++ b/projects/common/src/fm/common.module.ts
@@ -31,6 +31,7 @@ import { TimespanComponent } from './components/timespan/timespan.component';
 import { TagInputComponent } from './components/tag-input/tag-input.component';
 import { MenuBackgroundComponent } from './components/menu-background/menu-background.component';
 import { HasPackageDirective} from './components/has-package/has-package.directive';
+import { UserMenuComponent} from './components/user-menu/user-menu.component';
 import { Alert } from './enumerations/alert.enum';
 import { IEventMessage } from './models/event.message';
 import { IItem, Item } from './models/item';
@@ -60,6 +61,7 @@ export {
   SidePanelComponent,
   TimespanComponent,
   TagInputComponent,
+  UserMenuComponent,
   HasPackageDirective,
   Alert,
   IEventMessage,
@@ -109,7 +111,8 @@ export {
     TagInputComponent,
     SessionClearedComponent,
     MenuBackgroundComponent,
-    HasPackageDirective
+    HasPackageDirective,
+    UserMenuComponent
   ],
   exports: [
     NgbModule,
@@ -127,7 +130,8 @@ export {
     TagInputComponent,
     SessionClearedComponent,
     MenuBackgroundComponent,
-    HasPackageDirective
+    HasPackageDirective,
+    UserMenuComponent
   ]
 })
 export class AppCommonModule {
diff --git a/projects/common/src/fm/components/app/app.component.html b/projects/common/src/fm/components/app/app.component.html
index 8d83e0e..a580cb1 100644
--- a/projects/common/src/fm/components/app/app.component.html
+++ b/projects/common/src/fm/components/app/app.component.html
@@ -23,4 +23,7 @@
   <ng-container *ngIf="showUploadProgress">
     <fm-resumable-file-upload></fm-resumable-file-upload>
   </ng-container>  
+  <div class="user-menu">
+    <fm-user-menu [user]="user|async"></fm-user-menu>
+  </div>
 </div>
diff --git a/projects/common/src/fm/components/app/app.component.scss b/projects/common/src/fm/components/app/app.component.scss
index 25bca4c..53cadc5 100644
--- a/projects/common/src/fm/components/app/app.component.scss
+++ b/projects/common/src/fm/components/app/app.component.scss
@@ -76,3 +76,9 @@ body { background: #f1f1f1; line-height: 18px; user-select:none;}
 .logo {
   margin-left: 1rem;
 }
+
+.user-menu {
+  position: absolute;
+  top:1em;
+  right:1em;
+}
diff --git a/projects/common/src/fm/components/app/app.component.ts b/projects/common/src/fm/components/app/app.component.ts
index df42be7..88b4e55 100644
--- a/projects/common/src/fm/components/app/app.component.ts
+++ b/projects/common/src/fm/components/app/app.component.ts
@@ -3,6 +3,7 @@ import { Router, NavigationStart, NavigationEnd, RouteConfigLoadStart, RouteConf
 import { Meta, Title, MetaDefinition } from '@angular/platform-browser';import { DOCUMENT } from "@angular/common";
 import { Subscription ,  Observable } from 'rxjs';
 import { Store, Action } from '@ngrx/store';
+import { IUser } from '../../models/user';
 
 //AppCommon
 import { IEventMessage } from '../../models/event.message';
@@ -34,6 +35,7 @@ export class AppComponent implements OnInit, OnDestroy {
   public fullScreen: Observable<boolean>;
   public routeLoading: Observable<boolean>;
   public menuVisible: Observable<boolean>;
+  public user:Observable<IUser>;
   @Input() showUploadProgress: boolean =true;
 
   constructor(
@@ -88,6 +90,7 @@ export class AppComponent implements OnInit, OnDestroy {
     this.fullScreen = this.store.select(appReducers.selectGetFullScreen);
     this.routeLoading = this.store.select(appReducers.selectGetRouteLoading);
     this.menuVisible = this.store.select(appReducers.SelectGetMenuVisible);
+    this.user = this.store.select(appReducers.SelectGetUser);
     this.InstallRouteEventHandler();
     this.InstallEventServiceEventHandler();
   }
diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.html b/projects/common/src/fm/components/user-menu/user-menu.component.html
new file mode 100644
index 0000000..45f2612
--- /dev/null
+++ b/projects/common/src/fm/components/user-menu/user-menu.component.html
@@ -0,0 +1,3 @@
+<div *ngIf="user">
+    <span class="rounded-circle menu-button" [title]="user.name">{{getLetter()}}</span>
+</div>
diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.scss b/projects/common/src/fm/components/user-menu/user-menu.component.scss
new file mode 100644
index 0000000..6ea726b
--- /dev/null
+++ b/projects/common/src/fm/components/user-menu/user-menu.component.scss
@@ -0,0 +1,10 @@
+.menu-button {
+    background-color: purple;
+    color:white;
+    display: inline-block;
+    width: 2.5em;
+    height: 2.5em;
+    line-height: 2.5em;
+    text-align: center;
+    font-size: 1rem;
+}
\ No newline at end of file
diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.spec.ts b/projects/common/src/fm/components/user-menu/user-menu.component.spec.ts
new file mode 100644
index 0000000..f270ab8
--- /dev/null
+++ b/projects/common/src/fm/components/user-menu/user-menu.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserMenuComponent } from './user-menu.component';
+
+describe('UserMenuComponent', () => {
+  let component: UserMenuComponent;
+  let fixture: ComponentFixture<UserMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UserMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UserMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.ts b/projects/common/src/fm/components/user-menu/user-menu.component.ts
new file mode 100644
index 0000000..ddbbbce
--- /dev/null
+++ b/projects/common/src/fm/components/user-menu/user-menu.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit,Input } from '@angular/core';
+import { IUser } from '../../models/user';
+
+@Component({
+  selector: 'fm-user-menu',
+  templateUrl: './user-menu.component.html',
+  styleUrls: ['./user-menu.component.scss']
+})
+export class UserMenuComponent implements OnInit {
+
+  @Input() user:IUser;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  getLetter():string {
+      return this.user.name ? this.user.name.substr(0,1).toUpperCase():"";
+  }
+}