From ace4a6b364e44296bd051b4a274edf64a088da37 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Wed, 24 Jun 2020 15:07:11 +0200 Subject: [PATCH] Implement toggleaccountmenu action --- .../src/fm/actions/app-common.actions.ts | 11 ++++++++++- .../src/fm/components/app/app.component.html | 2 +- .../src/fm/components/app/app.component.ts | 2 ++ .../user-menu/user-menu.component.html | 2 +- .../user-menu/user-menu.component.scss | 4 ++++ .../user-menu/user-menu.component.ts | 19 ++++++++----------- .../src/fm/reducers/app-common.reducer.ts | 11 +++++++++-- 7 files changed, 35 insertions(+), 16 deletions(-) diff --git a/projects/common/src/fm/actions/app-common.actions.ts b/projects/common/src/fm/actions/app-common.actions.ts index 963ef5c..bee18cd 100644 --- a/projects/common/src/fm/actions/app-common.actions.ts +++ b/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; diff --git a/projects/common/src/fm/components/app/app.component.html b/projects/common/src/fm/components/app/app.component.html index a580cb1..ee20526 100644 --- a/projects/common/src/fm/components/app/app.component.html +++ b/projects/common/src/fm/components/app/app.component.html @@ -24,6 +24,6 @@
- +
diff --git a/projects/common/src/fm/components/app/app.component.ts b/projects/common/src/fm/components/app/app.component.ts index 88b4e55..6d58b6a 100644 --- a/projects/common/src/fm/components/app/app.component.ts +++ b/projects/common/src/fm/components/app/app.component.ts @@ -35,6 +35,7 @@ export class AppComponent implements OnInit, OnDestroy { public fullScreen: Observable; public routeLoading: Observable; public menuVisible: Observable; + public accountMenuVisible: Observable; public user:Observable; @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(); 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 index 266fbb7..4d45d8f 100644 --- a/projects/common/src/fm/components/user-menu/user-menu.component.html +++ b/projects/common/src/fm/components/user-menu/user-menu.component.html @@ -1,7 +1,7 @@
{{getLetter()}} -
+
{{user.name}}
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 index 9c51c10..b3897b0 100644 --- a/projects/common/src/fm/components/user-menu/user-menu.component.scss +++ b/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; } \ No newline at end of file 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 index 6729774..99d7d92 100644 --- a/projects/common/src/fm/components/user-menu/user-menu.component.ts +++ b/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) { } 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()); + } } diff --git a/projects/common/src/fm/reducers/app-common.reducer.ts b/projects/common/src/fm/reducers/app-common.reducer.ts index de1f378..3ad64ca 100644 --- a/projects/common/src/fm/reducers/app-common.reducer.ts +++ b/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(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);