Refactor menu panel

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;

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

@@ -1,14 +1,27 @@
-<div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async)}">
-  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-    <a class="navbar-brand" [routerLink]="['/']">Farm Maps <span *ngIf="routeLoading|async"><i class="fa fa-spinner fa-spin"></i></span></a>
-    <ul class="navbar-nav">
-      <li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/map']" class="nav-link"><span><i class="fa fa-globe" aria-hidden="true"></i> Map</span></a></li>
-      <li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer']" class="nav-link"><span><i class="fa fa-folder" aria-hidden="true"></i> Explorer</span></a></li>
-    </ul>
-    <router-outlet name="menu"></router-outlet>
-  </nav>
-  <div class="body">
-    <router-outlet></router-outlet>
-  </div>
-  <fm-resumable-file-upload></fm-resumable-file-upload>
-</div>
+<div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async)}">
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+    <a class="navbar-brand" [routerLink]="['/']">Farm Maps <span *ngIf="routeLoading|async"><i class="fa fa-spinner fa-spin"></i></span></a>
+    <ul class="navbar-nav">
+      <li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/map']" class="nav-link"><span><i class="fa fa-globe" aria-hidden="true"></i> Map</span></a></li>
+      <li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer']" class="nav-link"><span><i class="fa fa-folder" aria-hidden="true"></i> Explorer</span></a></li>
+    </ul>
+    <router-outlet name="menu"></router-outlet>
+  </nav>
+  <div class="body">
+    <router-outlet></router-outlet>
+  </div>
+  <fm-side-panel [visible]="menuVisible|async" class="menu">
+    <div class="container-fluid">
+      <div class="body">
+        <div class="d-flex flex-row">
+          <div class="mt-2 mb-2 flex-grow-1 logo"><router-outlet name="side-panel-logo"></router-outlet></div>
+          <div class="mt-2 mb-2 ml-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
+        </div>
+        <div class="d-flex flex-column cards"> 
+            <router-outlet name="side-panel-menu"></router-outlet>          
+        </div>      
+    </div>
+    </div>
+  </fm-side-panel>
+  <fm-resumable-file-upload></fm-resumable-file-upload>
+</div>

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<boolean>;
   public routeLoading: Observable<boolean>;
+  public menuVisible:Observable<boolean>;
 
   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());
+  }
 }
 

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<State>(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<State>(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);
+