Refactor map for menu removal

projects/common-map/package.json

@@ -15,6 +15,6 @@
     "@ngrx/router-store": "^8.2",
     "@ngrx/store": "^8.2",
     "tassign": "^1.0.0",
-    "@farmmaps/common": ">=0.0.1-prerelease.102 <0.0.1"
+    "@farmmaps/common": ">=0.0.1-prerelease.109 <0.0.1"
   }
 }

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

@@ -21,7 +21,6 @@ export const ADDFEATURESUCCESS = '[Map] AddFeatureSuccess';
 export const UPDATEFEATURESUCCESS = '[Map] UpdateFeatureSuccess';
 export const EXPANDSEARCH = '[Map] ExpandSearch';
 export const COLLAPSESEARCH = '[Map] CollapseSearch';
-export const TOGGLEMENU = '[Map] ToggleMenu';
 export const SETEXTENT = '[Map] SetExtent';
 export const SETQUERYSTATE = '[Map] SetQueryState';
 export const SETTIMESPAN = '[Map] SetTimeSpan';
@@ -121,12 +120,6 @@ export class CollapseSearch implements Action {
   constructor() { }
 }
 
-export class ToggleMenu implements Action {
-  readonly type = TOGGLEMENU;
-
-  constructor() { }
-}
-
 export class SetExtent implements Action {
   readonly type = SETEXTENT;
 
@@ -223,7 +216,6 @@ export type Actions = SetMapState
   | UpdateFeatureSuccess
   | ExpandSearch
   | CollapseSearch
-  | ToggleMenu
   | SetExtent
   | SetQueryState
   | SetTimeSpan

projects/common-map/src/fm-map/components/map/map.component.html

@@ -13,7 +13,6 @@
   searchMinified:searchMinified$|async,
   selectedItem:selectedItem$|async,
   queryState:queryState$|async,
-  menuVisible:menuVisible$|async,
   searchCollapsed:searchCollapsed$|async,
   clearEnabled:clearEnabled$|async,
   period:period$|async,
@@ -64,19 +63,6 @@
       </div>
     </div>
   </fm-side-panel>
-  <fm-side-panel [visible]="state.menuVisible" 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>
 </ng-container>
 
 

projects/common-map/src/fm-map/components/map/map.component.scss

@@ -117,10 +117,6 @@ timespan.menuVisible {
   transition: height 0.5s;
 }
 
-:host ::ng-deep .menu .side-panel {
-  z-index: 100;
-  background-color: rgb(245,245,245);
-}
 
 @media screen and (min-width:44rem) {
   .panel-top {

projects/common-map/src/fm-map/components/map/map.component.ts

@@ -138,7 +138,6 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     this.clearEnabled$ = this.store.select(mapReducers.selectGetClearEnabled);
     this.searchCollapsed$ = this.store.select(mapReducers.selectGetSearchCollapsed);
     this.searchMinified$ = this.store.select(mapReducers.selectGetSearchMinified);
-    this.menuVisible$ = this.store.select(mapReducers.selectGetMenuVisible);
     this.openedModalName$ = this.store.select(commonReducers.selectOpenedModalName);
     this.query$ = this.store.select(mapReducers.selectGetQuery);
     this.extent$ = this.store.select(mapReducers.selectGetExtent);
@@ -213,7 +212,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   }
 
   handleToggleMenu(event) {
-    this.store.dispatch(new mapActions.ToggleMenu());
+    this.store.dispatch(new commonActions.ToggleMenu());
   }
 
   handleToggleBaseLayers(event:MouseEvent) {

projects/common-map/src/fm-map/effects/map.effects.ts

@@ -104,7 +104,7 @@ export class MapEffects {
     ofType(mapActions.STARTSEARCHSUCCESS),
     mergeMap((action: mapActions.StartSearchSuccess) => {
       if (action.query.bboxFilter) {
-        return [];
+        return [new commonActions.SetMenuVisible(false)];
       } else { 
       var extent = createEmpty();
 
@@ -114,7 +114,7 @@ export class MapEffects {
         }
       }
       //return [];
-      return of(new mapActions.SetExtent(extent));
+      return [new mapActions.SetExtent(extent),new commonActions.SetMenuVisible(false)];
     }
     }));
 

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

@@ -45,7 +45,6 @@ export interface State {
   clearEnabled: boolean,
   searchCollapsed: boolean,
   searchMinified: boolean, 
-  menuVisible: boolean,
   extent: number[],
   baseLayers: Array<IItemLayer>
   overlayLayers: Array<IItemLayer>,
@@ -79,7 +78,6 @@ export const initialState: State = {
   clearEnabled: false,
   searchCollapsed: true,
   searchMinified:false,
-  menuVisible: true,
   extent: null,
   baseLayers: [],
   overlayLayers: [],
@@ -165,8 +163,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
         selectedItemLayer:null,
         queryState: tassign(a.queryState),
         searchCollapsed: false,
-        searchMinified: true,
-        menuVisible:false
+        searchMinified: true
       });
     }
     case mapActions.DOQUERY: {
@@ -181,7 +178,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       return tassign(state, {
         panelVisible: true,
         selectedFeature: a.feature,
-        menuVisible: false,
         extent: a.feature.getGeometry().getExtent(),
         searchCollapsed: false,
         clearEnabled:true,
@@ -207,9 +203,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
     case mapActions.COLLAPSESEARCH: {
       return tassign(state, { searchCollapsed: state.panelVisible ? false: true});
     }
-    case mapActions.TOGGLEMENU: {
-      return tassign(state, { menuVisible: !state.menuVisible });
-    }
     case mapActions.SETEXTENT: {
       let a = action as mapActions.SetExtent;    
       return tassign(state, { extent: a.extent });
@@ -310,7 +303,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
           clearEnabled: false,
           searchCollapsed: true,
           searchMinified: false,
-          menuVisible:false,
           features: [],
           query:initialState.query
         });
@@ -335,7 +327,6 @@ export const getQueryState = (state: State) => state.queryState;
 export const getClearEnabled = (state: State) => state.clearEnabled;
 export const getSearchCollapsed = (state: State) => state.searchCollapsed;
 export const getSearchMinified = (state: State) => state.searchMinified;
-export const getMenuVisible = (state: State) => state.menuVisible;
 export const getExtent = (state: State) => state.extent;
 export const getOverlayLayers = (state: State) => state.overlayLayers;
 export const getBaseLayers = (state: State) => state.baseLayers;
@@ -358,7 +349,6 @@ export const selectGetQueryState = createSelector(selectMapState, getQueryState)
 export const selectGetClearEnabled = createSelector(selectMapState, getClearEnabled);
 export const selectGetSearchCollapsed = createSelector(selectMapState, getSearchCollapsed);
 export const selectGetSearchMinified = createSelector(selectMapState, getSearchMinified);
-export const selectGetMenuVisible = createSelector(selectMapState, getMenuVisible);
 export const selectGetExtent = createSelector(selectMapState, getExtent);
 export const selectGetOverlayLayers = createSelector(selectMapState, getOverlayLayers);
 export const selectGetBaseLayers = createSelector(selectMapState, getBaseLayers);