diff --git a/projects/common-map/src/fm-map/components/map/map.component.ts b/projects/common-map/src/fm-map/components/map/map.component.ts index 6bcdf9c..1ab4af7 100644 --- a/projects/common-map/src/fm-map/components/map/map.component.ts +++ b/projects/common-map/src/fm-map/components/map/map.component.ts @@ -59,6 +59,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { private itemTypeSub: Subscription; private mapStateSub: Subscription; private queryStateSub: Subscription; + private querySub: Subscription; public parentCode$: Observable =this.store.select(mapReducers.selectGetParentCode); public panelVisible$: Observable = this.store.select(mapReducers.selectGetPanelVisible); public panelCollapsed$: Observable = this.store.select(mapReducers.selectGetPanelCollapsed); @@ -92,7 +93,47 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { private geolocationService: GeolocationService, private zone: NgZone, private deviceorientationService:DeviceOrientationService) { - + this.querySub = this.query$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{ + if(queryState) { + let newQueryState = tassign(mapReducers.initialQueryState); + let initial = this.serializeService.serialize(newQueryState) == this.serializeService.serialize(queryState); + if(setStateCount>1 && !initial) { + console.debug(`Do Query ${setStateCount}`); + let urlparts=[]; + if (queryState.itemCode && queryState.itemCode != "") { + if(queryState.itemType && queryState.itemType!= "") { + let itemType = this.itemTypeService.itemTypes[queryState.itemType]; + if (itemType && itemType.viewer && itemType.viewer == "edit_in_editor" && itemType.editor) { + urlparts.push('/editor'); + urlparts.push(itemType.editor); + urlparts.push('item'); + urlparts.push(queryState.itemCode); + } + } + } else { + newQueryState= queryState; + } + if(urlparts.length==0 ) { + newQueryState.itemCode = queryState.itemCode; + this.replaceUrl(mapState,newQueryState,false); + } else { + this.router.navigate(urlparts); + } + } + } + }); + this.mapStateSub = this.mapState$.pipe(withLatestFrom(this.queryState$),withLatestFrom(this.setStateCount$)).subscribe(([[mapState,queryState],setStateCount]) =>{ + if(setStateCount>0) { + console.debug(`Mapstate ${setStateCount}`); + this.replaceUrl(mapState,queryState,true); + } + }); + this.queryStateSub = this.queryState$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{ + if(setStateCount>0) { + console.debug(`Querystate ${setStateCount}`); + this.replaceUrl(mapState,queryState,true); + } + }) } @HostListener('document:keyup', ['$event']) @@ -132,44 +173,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { this.store.dispatch(new mapActions.Clear()); this.selectedFeatures$.next({x:0,y:0,features:[]}); this.selectedFeatures$.next(null); - this.query$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{ - console.debug(`Do Query ${setStateCount}`); - if(setStateCount>1) { - let newQueryState = tassign(mapReducers.initialQueryState); - let urlparts=[]; - if (queryState.itemCode && queryState.itemCode != "") { - if(queryState.itemType && queryState.itemType!= "") { - let itemType = this.itemTypeService.itemTypes[queryState.itemType]; - if (itemType && itemType.viewer && itemType.viewer == "edit_in_editor" && itemType.editor) { - urlparts.push('/editor'); - urlparts.push(itemType.editor); - urlparts.push('item'); - urlparts.push(queryState.itemCode); - } - } - } else { - newQueryState= queryState; - } - if(urlparts.length==0 ) { - newQueryState.itemCode = queryState.itemCode; - this.replaceUrl(mapState,newQueryState,false); - } else { - this.router.navigate(urlparts); - } - } - }); - this.mapState$.pipe(withLatestFrom(this.queryState$),withLatestFrom(this.setStateCount$)).subscribe(([[mapState,queryState],setStateCount]) =>{ - console.debug(`Mapstate ${setStateCount}`); - if(setStateCount>0) { - this.replaceUrl(mapState,queryState,true); - } - }); - this.queryState$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{ - console.debug(`Querystate ${setStateCount}`); - if(setStateCount>0) { - this.replaceUrl(mapState,queryState,true); - } - }) + } initCustomStyles() { @@ -213,11 +217,13 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { let queryState = params.get("queryState"); newQueryState = tassign(mapReducers.initialQueryState); if (queryState != "") { - newQueryState = this.serializeService.deserialize(queryState); + newQueryState = this.serializeService.deserialize(queryState); queryState = this.serializeService.serialize(newQueryState); } queryStateChanged = this.serializeService.serialize(lastQueryState) != queryState; } + console.debug(newQueryState); + console.debug(queryStateChanged?"Changed":""); let t =0; if(setStateCount==0) t=600; setTimeout(() => { @@ -272,6 +278,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { if(mapState.baseLayerCode!="") { parts.push(mapState.baseLayerCode); parts.push( this.serializeService.serialize(queryState)); + console.debug("Replace url",mapState,queryState,replace); this.router.navigate(parts, { replaceUrl: replace,relativeTo:this.route.parent }); } } @@ -341,8 +348,10 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit { } ngOnDestroy() { - this.paramSub.unsubscribe(); + if (this.paramSub) this.paramSub.unsubscribe(); if (this.itemTypeSub) this.itemTypeSub.unsubscribe(); if (this.mapStateSub) this.mapStateSub.unsubscribe(); - if (this.queryStateSub) this.queryStateSub.unsubscribe(); } + if (this.queryStateSub) this.queryStateSub.unsubscribe(); + if (this.querySub) this.querySub.unsubscribe(); + } } diff --git a/projects/common-map/src/fm-map/effects/map.effects.ts b/projects/common-map/src/fm-map/effects/map.effects.ts index e9efd4d..a0207e0 100644 --- a/projects/common-map/src/fm-map/effects/map.effects.ts +++ b/projects/common-map/src/fm-map/effects/map.effects.ts @@ -129,7 +129,7 @@ export class MapEffects { ), catchError(error => of(new commonActions.Fail(error)))); } else { - newAction= of(new commonActions.Escape(true,false)); + return []; } return newAction; })); @@ -251,27 +251,39 @@ export class MapEffects { @Effect() setQueryState$: Observable = this.actions$.pipe( ofType(mapActions.SETQUERYSTATE), - switchMap((action: mapActions.SetQueryState) => { - var newAction:Action; - if (action.queryState.itemCode && action.queryState.itemCode != "") { - newAction= new mapActions.SelectItem(action.queryState.itemCode); + withLatestFrom(this.store$.select(mapReducers.selectGetInSearch)), + switchMap(([action,inSearch]) => { + if(!inSearch) { + let a = action as mapActions.SetQueryState; + var newAction:Action; + if (a.queryState.itemCode && a.queryState.itemCode != "") { + newAction= new mapActions.SelectItem(a.queryState.itemCode); + } else { + newAction= new mapActions.StartSearch(a.queryState); + } + return of(newAction); } else { - newAction= new mapActions.StartSearch(action.queryState); + return []; } - return of(newAction); })); @Effect() setState$: Observable = this.actions$.pipe( ofType(mapActions.SETSTATE), - switchMap((action: mapActions.SetState) => { - var newAction:Action; - if (action.queryState.itemCode && action.queryState.itemCode != "") { - newAction= new mapActions.SelectItem(action.queryState.itemCode); + withLatestFrom(this.store$.select(mapReducers.selectGetInSearch)), + switchMap(([action,inSearch]) => { + if(!inSearch) { + let a = action as mapActions.SetQueryState; + var newAction:Action; + if (a.queryState.itemCode && a.queryState.itemCode != "") { + newAction= new mapActions.SelectItem(a.queryState.itemCode); + } else { + newAction= new mapActions.StartSearch(a.queryState); + } + return of(newAction); } else { - newAction= new mapActions.StartSearch(action.queryState); + return []; } - return of(newAction); })); constructor(private actions$: Actions, private store$: Store, private folderService$: FolderService, private itemService$: ItemService,private featureIconService$:FeatureIconService,private itemTypeService$:ItemTypeService) { diff --git a/projects/common-map/src/fm-map/reducers/map.reducer.ts b/projects/common-map/src/fm-map/reducers/map.reducer.ts index 538f695..15ccad4 100644 --- a/projects/common-map/src/fm-map/reducers/map.reducer.ts +++ b/projects/common-map/src/fm-map/reducers/map.reducer.ts @@ -56,7 +56,8 @@ export interface State { selectedOverlayLayer: IItemLayer, styles:IStyles, showLayerSwitcher:boolean, - setStateCount:number + setStateCount:number, + inSearch:boolean } export const initialState: State = { @@ -73,7 +74,7 @@ export const initialState: State = { }, viewExtent:[], queryState: tassign(initialQueryState), - query: tassign(initialQueryState), + query: null, parentCode: null, features: [], panelVisible: false, @@ -92,7 +93,8 @@ export const initialState: State = { selectedItemLayer: null, styles: {}, showLayerSwitcher: false, - setStateCount: 0 + setStateCount: 0, + inSearch:false } export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State { @@ -138,7 +140,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo } return tassign(state, { features: a.features, - extent:extent + extent:extent, + inSearch:false }); } case mapActions.SELECTFEATURE: { @@ -147,11 +150,15 @@ export function reducer(state = initialState, action: mapActions.Actions | commo selectedFeature: state.selectedItem?state.selectedFeature: a.feature }); } - case mapActions.SELECTITEM: { + case mapActions.SELECTITEM: { + let a = action as mapActions.SelectItem; + let itemCode = state.selectedItem ? state.selectedItem.code : ""; + let inSearch = (a.itemCode != itemCode || state.setStateCount == 1) return tassign(state, { selectedItem: null, selectedItemLayer: null, - features:[] + features:[], + inSearch:inSearch }); } case mapActions.SELECTITEMSUCCESS: { @@ -164,6 +171,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo itemLayer = new TemporalItemLayer(a.item); } return tassign(state, { + inSearch:false, selectedItem: a.item, selectedItemLayer: itemLayer, panelVisible: a.item != null, @@ -255,17 +263,21 @@ export function reducer(state = initialState, action: mapActions.Actions | commo } case mapActions.STARTSEARCH: { let a = action as mapActions.StartSearch; + let panelVisible = a.queryState.itemCode!=null ||a.queryState.itemType!=null||a.queryState.parentCode!=null; return tassign(state, { selectedItem: null, features:[], selectedItemLayer:null, - queryState: tassign(a.queryState), - searchCollapsed: false, - panelVisible: true, - clearEnabled: true, - searchMinified: true, + searchCollapsed: !panelVisible, + panelVisible: panelVisible, + clearEnabled: panelVisible, + searchMinified: panelVisible, + inSearch:panelVisible }); } + case commonActions.FAIL:{ + return tassign(state,{inSearch:false}); + } case mapActions.DOQUERY: { let a = action as mapActions.DoQuery; return tassign(state, { @@ -455,7 +467,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo let a = action as mapActions.ShowLayerSwitcher; return tassign(state,{showLayerSwitcher:a.show}); } - case mapActions.CLEAR:{ + + case commonActions.INITUSER: { return tassign(state,{setStateCount:0,features:[],selectedFeature:null,selectedItem:null}); } default: { @@ -487,6 +500,7 @@ export const getPeriod = (state:State) => state.period; export const getStyles = (state:State) => state.styles; export const getShowLayerSwitcher = (state:State) => state.showLayerSwitcher; export const getSetStateCount = (state:State) => state.setStateCount; +export const getInSearch = (state:State) => state.inSearch; export const selectMapState = createFeatureSelector(MODULE_NAME); export const selectGetMapState= createSelector(selectMapState, getMapState); @@ -512,5 +526,6 @@ export const selectGetPeriod = createSelector(selectMapState, getPeriod); export const selectGetStyles = createSelector(selectMapState, getStyles); export const selectGetShowLayerSwitcher = createSelector(selectMapState,getShowLayerSwitcher); export const selectgetSetStateCount = createSelector(selectMapState,getSetStateCount); +export const selectGetInSearch = createSelector(selectMapState,getInSearch); diff --git a/src/app/app.module.ts b/src/app/app.module.ts index fd010c3..b1e3921 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,7 +11,7 @@ import { AppCommonMapModule} from '@farmmaps/common-map'; import {AppRootComponent} from './app.component'; -import {StoreModule, Store} from '@ngrx/store'; +import {StoreModule, ActionReducer,MetaReducer} from '@ngrx/store'; import {EffectsModule, EffectSources} from '@ngrx/effects'; import { StoreRouterConnectingModule} from '@ngrx/router-store'; @@ -48,6 +48,18 @@ export function provideBootstrapEffects(effects: Type[]) { ]; } +// console.log all actions +export function debug(reducer: ActionReducer): ActionReducer { + return function(state, action) { + console.debug('-- State', state); + console.debug('-- Action', action); + + return reducer(state, action); + }; +} + +export const metaReducers: MetaReducer[] = [debug]; + @NgModule({ declarations: [ AppRootComponent, @@ -61,7 +73,7 @@ export function provideBootstrapEffects(effects: Type[]) { AppCommonServiceModule.forRoot(), AppCommonMapModule.forRoot(), BrowserModule, - StoreModule.forRoot({},{runtimeChecks: { // TODO fix this should all be true + StoreModule.forRoot({},{metaReducers,runtimeChecks: { // TODO fix this should all be true strictStateImmutability: false, strictActionImmutability: false, strictStateSerializability: false,