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;
 
@@ -213,6 +215,12 @@ export class UploadedFileClick implements Action {
   constructor(public itemCode:string) { }
 }
 
+export class ToggleMenu implements Action {
+  readonly type = TOGGLEMENU;
+
+  constructor() { }
+}
+  
 
 export type Actions = OpenModal
   | InitRoot
@@ -240,4 +248,5 @@ export type Actions = OpenModal
   | TaskStartEvent
   | TaskEndEvent
   | TaskErrorEvent
-  | DeviceUpdateEvent;
+  | DeviceUpdateEvent
+  | ToggleMenu;

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

@@ -10,5 +10,18 @@
   <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

@@ -14,7 +14,8 @@ export interface State {
   itemTypes: IItemTypes,
   user:IUser,
   fullScreen: boolean,
-  routeLoading:boolean
+  routeLoading:boolean,
+  menuVisible: boolean,
 }
 
 export const initialState: State = {
@@ -24,7 +25,8 @@ export const initialState: State = {
   itemTypes: {},
   user:null,
   fullScreen: true,
-  routeLoading: false
+  routeLoading: false,
+  menuVisible: true
 }
 
 export function reducer(state = initialState, action: appCommonActions.Actions ): State {
@@ -70,6 +72,9 @@ export function reducer(state = initialState, action: appCommonActions.Actions )
         routeLoading: false
       });
     }
+    case appCommonActions.TOGGLEMENU: {
+      return tassign(state, { menuVisible: !state.menuVisible });
+    }
     default: {
       return state;
     }
@@ -82,6 +87,7 @@ 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);
@@ -92,4 +98,5 @@ export const selectGetItemTypes = createSelector(selectAppCommonState, getItemTy
 export const selectGetRootItems = createSelector(selectAppCommonState, getRootItems);
 export const selectGetFullScreen = createSelector(selectAppCommonState, getFullScreen);
 export const selectGetRouteLoading = createSelector(selectAppCommonState, getRouteLoading);
+export const SelectGetMenuVisible = createSelector(selectAppCommonState,getMenuVisible);