From e077aa34dfed3f46e761035c26bf1a24bf5f000d Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 7 Jan 2020 16:33:56 +0100 Subject: [PATCH] Refactor menu panel --- .../src/fm/actions/app-common.actions.ts | 11 +- .../src/fm/components/app/app.component.html | 41 ++-- .../src/fm/components/app/app.component.ts | 6 + .../src/fm/reducers/app-common.reducer.ts | 197 +++++++++--------- 4 files changed, 145 insertions(+), 110 deletions(-) diff --git a/projects/common/src/fm/actions/app-common.actions.ts b/projects/common/src/fm/actions/app-common.actions.ts index d3579f9..cb7f844 100644 --- a/projects/common/src/fm/actions/app-common.actions.ts +++ b/projects/common/src/fm/actions/app-common.actions.ts @@ -46,6 +46,8 @@ export const FAIL = '[AppCommon] Fail'; export const UPLOADEDFILECLICK = '[AppCommon] UploadedFileClick'; +export const TOGGLEMENU = '[AppCommon] ToggleMenu'; + export class InitUser implements Action { readonly type = INITUSER; @@ -212,6 +214,12 @@ export class UploadedFileClick implements Action { readonly type = UPLOADEDFILECLICK; constructor(public itemCode:string) { } } + +export class ToggleMenu implements Action { + readonly type = TOGGLEMENU; + + constructor() { } +} export type Actions = OpenModal @@ -240,4 +248,5 @@ export type Actions = OpenModal | TaskStartEvent | TaskEndEvent | TaskErrorEvent - | DeviceUpdateEvent; + | DeviceUpdateEvent + | ToggleMenu; diff --git a/projects/common/src/fm/components/app/app.component.html b/projects/common/src/fm/components/app/app.component.html index 8667157..1072e29 100644 --- a/projects/common/src/fm/components/app/app.component.html +++ b/projects/common/src/fm/components/app/app.component.html @@ -1,14 +1,27 @@ -
- -
- -
- -
+
+ +
+ +
+ +
+
+
+ +
+
+
+ +
+
+
+ + +
diff --git a/projects/common/src/fm/components/app/app.component.ts b/projects/common/src/fm/components/app/app.component.ts index b862849..2ea7e97 100644 --- a/projects/common/src/fm/components/app/app.component.ts +++ b/projects/common/src/fm/components/app/app.component.ts @@ -36,6 +36,7 @@ export class AppComponent implements OnInit, OnDestroy { public fileDroptarget: any; public fullScreen: Observable; public routeLoading: Observable; + public menuVisible:Observable; constructor( private router: Router, @@ -88,6 +89,7 @@ export class AppComponent implements OnInit, OnDestroy { ngOnInit() { this.fullScreen = this.store.select(appReducers.selectGetFullScreen); this.routeLoading = this.store.select(appReducers.selectGetRouteLoading); + this.menuVisible = this.store.select(appReducers.SelectGetMenuVisible); this.InstallRouteEventHandler(); this.InstallEventServiceEventHandler(); } @@ -129,5 +131,9 @@ export class AppComponent implements OnInit, OnDestroy { handleClick(event: MouseEvent) { this.store.dispatch(new commonActions.Escape(false,true)); } + + handleToggleMenu(event) { + this.store.dispatch(new commonActions.ToggleMenu()); + } } diff --git a/projects/common/src/fm/reducers/app-common.reducer.ts b/projects/common/src/fm/reducers/app-common.reducer.ts index 835a580..4c3c89b 100644 --- a/projects/common/src/fm/reducers/app-common.reducer.ts +++ b/projects/common/src/fm/reducers/app-common.reducer.ts @@ -1,95 +1,102 @@ -import { tassign } from 'tassign'; -import { IItemTypes} from '../models/item.types'; -import { IListItem } from '../models/list.item'; -import { IUser } from '../models/user'; -import * as appCommonActions from '../actions/app-common.actions'; -import { createSelector, createFeatureSelector, ActionReducerMap } from '@ngrx/store'; - -import { MODULE_NAME } from '../module-name'; - -export interface State { - openedModalName: string, - initialized: boolean, - rootItems: IListItem[], - itemTypes: IItemTypes, - user:IUser, - fullScreen: boolean, - routeLoading:boolean -} - -export const initialState: State = { - openedModalName: null, - initialized: false, - rootItems: [], - itemTypes: {}, - user:null, - fullScreen: true, - routeLoading: false -} - -export function reducer(state = initialState, action: appCommonActions.Actions ): State { - switch (action.type) { - case appCommonActions.INITUSERSUCCESS: { - let a = action as appCommonActions.InitUserSuccess; - return tassign(state, { user: a.user }); - } - case appCommonActions.INITROOTSUCCESS: { - let a = action as appCommonActions.InitRootSuccess; - return tassign(state, { rootItems:a.items}); - } - case appCommonActions.OPENMODAL: { - return tassign(state, { openedModalName: action.modalName }); - } - case appCommonActions.CLOSEMODAL: { - return tassign(state, { openedModalName: null }); - } - case appCommonActions.INITIALIZED: { - return tassign(state, { initialized: true }); - } - case appCommonActions.LOADITEMTYPESSUCCESS: { - let a = action as appCommonActions.LoadItemTypesSuccess; - return tassign(state, { itemTypes: a.itemTypes }); - } - case appCommonActions.FULLSCREEN: { - return tassign(state, { - fullScreen:true - }); - } - case appCommonActions.SHOWNAVBAR: { - return tassign(state, { - fullScreen: false - }); - } - case appCommonActions.STARTROUTELOADING: { - return tassign(state, { - routeLoading: true - }); - } - case appCommonActions.ENDROUTELOADING: { - return tassign(state, { - routeLoading: false - }); - } - default: { - return state; - } - } -} - -export const getOpenedModalName = (state: State) => state.openedModalName; -export const getInitialized = (state: State) => state.initialized; -export const getItemTypes = (state: State) => state.itemTypes; -export const getRootItems = (state: State) => state.rootItems; -export const getFullScreen = (state: State) => state.fullScreen; -export const getRouteLoading = (state: State) => state.routeLoading; - - -export const selectAppCommonState = createFeatureSelector(MODULE_NAME); - -export const selectOpenedModalName = createSelector(selectAppCommonState, getOpenedModalName); -export const selectGetInitialized = createSelector(selectAppCommonState, getInitialized); -export const selectGetItemTypes = createSelector(selectAppCommonState, getItemTypes); -export const selectGetRootItems = createSelector(selectAppCommonState, getRootItems); -export const selectGetFullScreen = createSelector(selectAppCommonState, getFullScreen); -export const selectGetRouteLoading = createSelector(selectAppCommonState, getRouteLoading); - +import { tassign } from 'tassign'; +import { IItemTypes} from '../models/item.types'; +import { IListItem } from '../models/list.item'; +import { IUser } from '../models/user'; +import * as appCommonActions from '../actions/app-common.actions'; +import { createSelector, createFeatureSelector, ActionReducerMap } from '@ngrx/store'; + +import { MODULE_NAME } from '../module-name'; + +export interface State { + openedModalName: string, + initialized: boolean, + rootItems: IListItem[], + itemTypes: IItemTypes, + user:IUser, + fullScreen: boolean, + routeLoading:boolean, + menuVisible: boolean, +} + +export const initialState: State = { + openedModalName: null, + initialized: false, + rootItems: [], + itemTypes: {}, + user:null, + fullScreen: true, + routeLoading: false, + menuVisible: true +} + +export function reducer(state = initialState, action: appCommonActions.Actions ): State { + switch (action.type) { + case appCommonActions.INITUSERSUCCESS: { + let a = action as appCommonActions.InitUserSuccess; + return tassign(state, { user: a.user }); + } + case appCommonActions.INITROOTSUCCESS: { + let a = action as appCommonActions.InitRootSuccess; + return tassign(state, { rootItems:a.items}); + } + case appCommonActions.OPENMODAL: { + return tassign(state, { openedModalName: action.modalName }); + } + case appCommonActions.CLOSEMODAL: { + return tassign(state, { openedModalName: null }); + } + case appCommonActions.INITIALIZED: { + return tassign(state, { initialized: true }); + } + case appCommonActions.LOADITEMTYPESSUCCESS: { + let a = action as appCommonActions.LoadItemTypesSuccess; + return tassign(state, { itemTypes: a.itemTypes }); + } + case appCommonActions.FULLSCREEN: { + return tassign(state, { + fullScreen:true + }); + } + case appCommonActions.SHOWNAVBAR: { + return tassign(state, { + fullScreen: false + }); + } + case appCommonActions.STARTROUTELOADING: { + return tassign(state, { + routeLoading: true + }); + } + case appCommonActions.ENDROUTELOADING: { + return tassign(state, { + routeLoading: false + }); + } + case appCommonActions.TOGGLEMENU: { + return tassign(state, { menuVisible: !state.menuVisible }); + } + default: { + return state; + } + } +} + +export const getOpenedModalName = (state: State) => state.openedModalName; +export const getInitialized = (state: State) => state.initialized; +export const getItemTypes = (state: State) => state.itemTypes; +export const getRootItems = (state: State) => state.rootItems; +export const getFullScreen = (state: State) => state.fullScreen; +export const getRouteLoading = (state: State) => state.routeLoading; +export const getMenuVisible = (state: State) => state.menuVisible; + + +export const selectAppCommonState = createFeatureSelector(MODULE_NAME); + +export const selectOpenedModalName = createSelector(selectAppCommonState, getOpenedModalName); +export const selectGetInitialized = createSelector(selectAppCommonState, getInitialized); +export const selectGetItemTypes = createSelector(selectAppCommonState, getItemTypes); +export const selectGetRootItems = createSelector(selectAppCommonState, getRootItems); +export const selectGetFullScreen = createSelector(selectAppCommonState, getFullScreen); +export const selectGetRouteLoading = createSelector(selectAppCommonState, getRouteLoading); +export const SelectGetMenuVisible = createSelector(selectAppCommonState,getMenuVisible); +