Implement toggleaccountmenu action

projects/common/src/fm/actions/app-common.actions.ts

@@ -52,6 +52,8 @@ export const UPLOADEDFILECLICK = '[AppCommon] UploadedFileClick';
 
 export const TOGGLEMENU = '[AppCommon] ToggleMenu';
 
+export const TOGGLEACCOUNTMENU = '[AppCommon] ToggleAccountMenu';
+
 export const SETMENUVISIBLE = '[AppCommon] SetMenuVisible';
 
 export class InitUser implements Action {
@@ -227,6 +229,12 @@ export class ToggleMenu implements Action {
   constructor() { }
 }
 
+export class ToggleAccountMenu implements Action {
+  readonly type = TOGGLEACCOUNTMENU;
+
+  constructor() { }
+}
+
 export class SetMenuVisible implements Action {
   readonly type = SETMENUVISIBLE;
 
@@ -262,5 +270,6 @@ export type Actions = OpenModal
   | DeviceUpdateEvent
   | ToggleMenu
   | SetMenuVisible
-  | InitUserPackagesSuccess;
+  | InitUserPackagesSuccess
+  | ToggleAccountMenu;
 

projects/common/src/fm/components/app/app.component.html

@@ -24,6 +24,6 @@
     <fm-resumable-file-upload></fm-resumable-file-upload>
   </ng-container>  
   <div class="user-menu">
-    <fm-user-menu [user]="user|async"></fm-user-menu>
+    <fm-user-menu [user]="user|async" [showMenu]="accountMenuVisible|async"></fm-user-menu>
   </div>
 </div>

projects/common/src/fm/components/app/app.component.ts

@@ -35,6 +35,7 @@ export class AppComponent implements OnInit, OnDestroy {
   public fullScreen: Observable<boolean>;
   public routeLoading: Observable<boolean>;
   public menuVisible: Observable<boolean>;
+  public accountMenuVisible: Observable<boolean>;
   public user:Observable<IUser>;
   @Input() showUploadProgress: boolean =true;
 
@@ -90,6 +91,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.accountMenuVisible = this.store.select(appReducers.SelectGetAccountMenuVisible);
     this.user = this.store.select(appReducers.SelectGetUser);
     this.InstallRouteEventHandler();
     this.InstallEventServiceEventHandler();

projects/common/src/fm/components/user-menu/user-menu.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="user">
     <div (click)="toggle($event)" class="rounded-circle menu-button" [title]="user.name">
         <span>{{getLetter()}}</span>
-        <div *ngIf="showMenu" class="card">           
+        <div  [ngClass]="{'hidden':!showMenu}" class="card">           
             <div class="card-body">
                 <div class="username">{{user.name}}</div>
                 <div><a href="#" (click)="logout($event)" i18n>logout</a></div>

projects/common/src/fm/components/user-menu/user-menu.component.scss

@@ -31,4 +31,8 @@ div.menu-button > span {
 
 .card-body {
     text-align: left;
+}
+
+.hidden {
+    display: none;
 }

projects/common/src/fm/components/user-menu/user-menu.component.ts

@@ -1,6 +1,9 @@
 import { Component, OnInit,Input } from '@angular/core';
 import { OAuthService} from 'angular-oauth2-oidc'
 import { IUser } from '../../models/user';
+import {Store} from '@ngrx/store';
+import * as appReducers from '../../reducers/app-common.reducer';
+import * as appActions from '../../actions/app-common.actions';
 
 @Component({
   selector: 'fm-user-menu',
@@ -10,9 +13,9 @@ import { IUser } from '../../models/user';
 export class UserMenuComponent implements OnInit {
 
   @Input() user:IUser;
-  public showMenu:boolean = false
+  @Input() showMenu:boolean;
 
-  constructor(private oauthService:OAuthService) { }
+  constructor(private oauthService:OAuthService, private store: Store<appReducers.State>) { }
 
   ngOnInit(): void {
   }
@@ -26,15 +29,9 @@ export class UserMenuComponent implements OnInit {
     this.oauthService.logOut();
   }
 
-  hide(event:MouseEvent) {
-    this.showMenu = false;
-  }
-
-  show(event:MouseEvent) {
-    this.showMenu=true;
-  }
 
   toggle(event:MouseEvent) {
-    this.showMenu=!this.showMenu;
-  }
+    event.stopPropagation();
+    this.store.dispatch(new appActions.ToggleAccountMenu());
+  } 
 }

projects/common/src/fm/reducers/app-common.reducer.ts

@@ -18,6 +18,7 @@ export interface State {
   routeLoading:boolean,
   menuVisible: boolean,
   userPackages: IPackages,
+  accountMenuVisible: boolean
 }
 
 export const initialState: State = {
@@ -29,7 +30,8 @@ export const initialState: State = {
   fullScreen: true,
   routeLoading: false,
   menuVisible: false,
-  userPackages: {}
+  userPackages: {},
+  accountMenuVisible: false
 }
 
 export function reducer(state = initialState, action: appCommonActions.Actions ): State {
@@ -85,8 +87,11 @@ export function reducer(state = initialState, action: appCommonActions.Actions )
     case appCommonActions.TOGGLEMENU: {
       return tassign(state, { menuVisible: !state.menuVisible });
     }
+    case appCommonActions.TOGGLEACCOUNTMENU: {
+      return tassign(state, { accountMenuVisible: !state.accountMenuVisible });
+    }
     case appCommonActions.ESCAPE: {
-      return tassign(state, { menuVisible: false });
+      return tassign(state, { menuVisible: false,accountMenuVisible:false });
     }
     case appCommonActions.SETMENUVISIBLE: {
       let a = action as appCommonActions.SetMenuVisible;
@@ -116,6 +121,7 @@ export const getRouteLoading = (state: State) => state.routeLoading;
 export const getMenuVisible = (state: State) => state.menuVisible;
 export const getUser = (state: State) => state.user;
 export const getUserPackages = (state: State) => state.userPackages;
+export const getAccountMenuVisible = (state: State) => state.accountMenuVisible;
 
 export const selectAppCommonState = createFeatureSelector<State>(MODULE_NAME);
 
@@ -128,4 +134,5 @@ export const selectGetRouteLoading = createSelector(selectAppCommonState, getRou
 export const SelectGetMenuVisible = createSelector(selectAppCommonState,getMenuVisible);
 export const SelectGetUser = createSelector(selectAppCommonState,getUser);
 export const SelectGetUserPackages = createSelector(selectAppCommonState,getUserPackages);
+export const SelectGetAccountMenuVisible = createSelector(selectAppCommonState,getAccountMenuVisible);