MM-230 Use common panel to display search results and include # of co-ops filtered

DEVELOPMENT.md

@@ -43,7 +43,7 @@ mykomap's repository:
 Install the prerequisites
 
 	apt install php php-curl rsync # On Debian
-	npm run install
+	npm install
 
 Run the development web server in the background (do this in a separate console):
 

src/map-app/app/map-ui.ts

@@ -8,7 +8,7 @@ import { EventBus } from "../eventbus";
 import "./map"; // Seems to be needed to prod the leaflet CSS into loading.
 import { SidebarPresenter } from "./presenter/sidebar";
 import { PhraseBook } from "../localisations";
-import { toString as _toString } from '../utils';
+import { toString as _toString, canDisplayExpandedSidebar } from '../utils';
 import { Action, AppState, PropEquality, StateManager, TextSearch } from "./state-manager";
 import { StateChange } from "../undo-stack";
 import { Dictionary } from "../common-types";
@@ -48,7 +48,8 @@ export class MapUI {
       });
     };
 
-    EventBus.Directory.initiativeClicked.sub(initiative => this.onInitiativeClickedInSidebar(initiative));
+    EventBus.Map.initiativeClicked.sub(initiative => this.onInitiativeClicked(initiative));
+    EventBus.Map.clearFiltersAndSearch.sub(() => this.clearFiltersAndSearch());
   }
 
   // This inspects the config and constructs an appropriate set of
@@ -113,8 +114,8 @@ export class MapUI {
     this.stateManager.clearPropFilter(filterName);
   }
 
-  resetSearch(): void {
-    this.stateManager.reset();
+  clearFiltersAndSearch(): void {
+    this.stateManager.clearFiltersAndSearch();
   }
 
   /// Returns a list of property values matching the given filter
@@ -131,36 +132,38 @@ export class MapUI {
       throw new Error(`an attempt to add a filter on an unknown propery name '${propName}'`);
 
     const isMulti = propDef.type === 'multi';
-    if (value === undefined)
+    if (value === undefined) {
       this.stateManager.clearPropFilter(propName);
-    else
+    } else {
       this.stateManager.propFilter(new PropEquality(propName, value, isMulti));
+    }
+
+    if (canDisplayExpandedSidebar()) // on smaller screens, wait until user clicks Apply Filters
+      EventBus.Sidebar.showInitiativeList.pub();
   }
 
   isSelected(initiative: Initiative): boolean {
-    // Currently unimplemented - I can see an sea-initiative-active class
-    // being applied if a test was true, but it makes no sense in the current
-    // context AFAICT. The test was:
-    // initiative === this.contextStack.current()?.initiatives[0]
-
-    // The main thing is seemed to do is highlight an initiative (or
-    // initiatives) in the directory pop-out list of initiatives in a
-    // category.
-
-    // For now, just return false always. We may re-implement this later.
-    return false; 
+    const selectedInitiatives = this.mapPresenter?.getSelectedInitiatives() ?? [];
+    return  selectedInitiatives.includes(initiative);
   }
 
   toggleSelectInitiative(initiative: Initiative) {
-    // Currently unimplemented.
+    const selectedInitiatives = this.mapPresenter?.getSelectedInitiatives() ?? [];
 
-    // EventBus.Markers.needToShowLatestSelection.pub(lastContent.initiatives);
+    if (selectedInitiatives.includes(initiative)) {
+      EventBus.Markers.needToShowLatestSelection.pub(selectedInitiatives.filter(i => i !== initiative));
+    } else {
+      EventBus.Markers.needToShowLatestSelection.pub([...selectedInitiatives, initiative]);
+    }
   }
 
-
   performSearch(text: string) {
     console.log("Search submitted: [" + text + "]");
     this.stateManager.textSearch(new TextSearch(text));
+
+    if (canDisplayExpandedSidebar()) {// on smaller screens, wait until user clicks Apply Filters
+      EventBus.Sidebar.showInitiativeList.pub();
+    }
   }
 
   // Text to show in the search box
@@ -182,26 +185,40 @@ export class MapUI {
   }
 
   private refreshSidebar() {
-    this.getSidebarPresenter(this).then((presenter) => presenter.changeSidebar());
+    this.getSidebarPresenter(this).then((presenter) => {
+      presenter.changeSidebar();
+    });
   }
 
-
-
-  private notifyMapNeedsToNeedsToBeZoomedAndPannedOneInitiative(initiative: Initiative) {
-    const data = EventBus.Map.mkSelectAndZoomData([initiative]);
-    EventBus.Map.needsToBeZoomedAndPanned.pub(data);
+  private notifyMapNeedsToNeedsToSelectAndZoomOnInitiative(initiative: Initiative) {
+    const maxZoom = this.config.getMaxZoomOnOne();
+    const defaultPos = this.config.getDefaultLatLng();
+
+    const data = EventBus.Map.mkSelectAndZoomData([initiative], { maxZoom, defaultPos });
+    EventBus.Map.selectAndZoomOnInitiative.pub(data);
   }
 
-  private onInitiativeClickedInSidebar(initiative?: Initiative) {
-    if (!initiative)
-      return;
+  private onInitiativeClicked(initiative?: Initiative) {
+    console.log('Clicked', initiative);
 
-    //this.parent.mapui.stateManager.append(new SearchResults([initiative]));
-    //console.log(this.parent.mapui.stateManager.current());
+    if (initiative) {
+      // Move the window to the right position first
+      this.notifyMapNeedsToNeedsToSelectAndZoomOnInitiative(initiative);
+      this.refreshSidebar();
+      // Populate the sidebar and highlight the intiative in the directory
+      this.getSidebarPresenter(this).then((presenter) => {
+        presenter.populateInitiativeSidebar(
+          initiative,
+          this.markers.getInitiativeContent(initiative) ?? ''
+        );
+      });
+    }
+    else {
+      // User has deselected
+      EventBus.Markers.needToShowLatestSelection.pub([]);
+    }
 
-    this.notifyMapNeedsToNeedsToBeZoomedAndPannedOneInitiative(initiative);
     this.refreshSidebar();
-    EventBus.Initiative.searchedInitiativeClicked.pub(initiative);
   }
 
   currentItem() {

src/map-app/app/presenter/map.ts

@@ -8,7 +8,7 @@ import { MapUI } from '../map-ui';
 
 export class MapPresenter extends BasePresenter {
   readonly view: MapView;
-  private previouslySelected: Initiative[] = [];
+  private currentlySelected: Initiative[] = [];
 
   constructor(readonly mapUI: MapUI) {
     super();
@@ -35,7 +35,7 @@ export class MapPresenter extends BasePresenter {
     EventBus.Initiatives.loadStarted.sub(() => this.onInitiativeLoadMessage());
     EventBus.Initiatives.loadFailed.sub(error => this.onInitiativeLoadMessage(error));
 
-    EventBus.Markers.needToShowLatestSelection.sub(initiative => this.onMarkersNeedToShowLatestSelection(initiative));
+    EventBus.Markers.needToShowLatestSelection.sub(initiatives => this.onMarkersNeedToShowLatestSelection(initiatives));
     EventBus.Map.needsToBeZoomedAndPanned.sub(data => this.onMapNeedsToBeZoomedAndPanned(data));
     EventBus.Map.needToShowInitiativeTooltip.sub(initiative => this.onNeedToShowInitiativeTooltip(initiative));
     EventBus.Map.needToHideInitiativeTooltip.sub(initiative => this.onNeedToHideInitiativeTooltip(initiative));
@@ -49,7 +49,7 @@ export class MapPresenter extends BasePresenter {
   }
 
   onInitiativeClicked() {
-    EventBus.Directory.initiativeClicked.pub(undefined);
+    EventBus.Map.initiativeClicked.pub(undefined);
   }
 
   onLoad() {
@@ -96,11 +96,11 @@ export class MapPresenter extends BasePresenter {
   }
 
   onMarkersNeedToShowLatestSelection(selected: Initiative[]) {
-    this.previouslySelected.forEach((initiative) => {
+    this.currentlySelected.forEach((initiative) => {
       this.mapUI.markers.setUnselected(initiative);
     });
 
-    this.previouslySelected = selected;
+    this.currentlySelected = selected;
 
     //zoom in and then select 
     selected.forEach((initiative) => {
@@ -144,4 +144,7 @@ export class MapPresenter extends BasePresenter {
     this.view.selectAndZoomOnInitiative(data);
   }
 
+  getSelectedInitiatives(): Initiative[] {
+    return this.currentlySelected;
+  }
 }

src/map-app/app/presenter/sidebar.ts

@@ -1,6 +1,7 @@
 import { Dictionary } from '../../common-types';
 import { EventBus } from '../../eventbus';
 import { MapUI } from '../map-ui';
+import { Initiative } from '../model/initiative';
 import { SidebarView } from '../view/sidebar';
 import { BasePresenter } from './base';
 import { AboutSidebarPresenter } from './sidebar/about';
@@ -63,7 +64,7 @@ export class SidebarPresenter extends BasePresenter {
     if (name !== undefined) {
       // If name is set, change the current sidebar and then refresh
       this.sidebarName = name;
-      this.children[this.sidebarName]?.refreshView();
+      this.children[this.sidebarName]?.refreshView(true);
     }
     else {
       // Just refresh the currently showing sidebar.
@@ -76,11 +77,13 @@ export class SidebarPresenter extends BasePresenter {
           return; // No sidebars? Can't do anything.
       }
 
-      this.children[this.sidebarName]?.refreshView();
+      this.children[this.sidebarName]?.refreshView(false);
     }
   }
 
   showSidebar() {
+    // Refresh the view before showing
+    this.children[this.sidebarName ?? 'undefined']?.refreshView(true);
     this.view.showSidebar();
   }
 
@@ -97,6 +100,14 @@ export class SidebarPresenter extends BasePresenter {
     this.view.hideInitiativeSidebar();
   }
 
+  populateInitiativeSidebar(initiative: Initiative, initiativeContent: string) {
+    this.view.populateInitiativeSidebar(initiative, initiativeContent);
+  }
+
+  showInitiativeList() {
+    this.view.showInitiativeList();
+  }
+
   hideInitiativeList() {
     this.view.hideInitiativeList();
   }
@@ -112,7 +123,7 @@ export class SidebarPresenter extends BasePresenter {
     });
     EventBus.Sidebar.showDirectory.sub(() => {
       this.changeSidebar("directory");
-      this.view.showInitiativeList();
+      this.showSidebar();
     });
     EventBus.Sidebar.showDatasets.sub(() => {
       this.changeSidebar("datasets");
@@ -121,8 +132,12 @@ export class SidebarPresenter extends BasePresenter {
     EventBus.Sidebar.showSidebar.sub(() => this.showSidebar());
     EventBus.Sidebar.hideSidebar.sub(() => this.hideSidebar());
     EventBus.Sidebar.hideInitiativeSidebar.sub(() => this.hideInitiativeSidebar());
+    EventBus.Sidebar.showInitiativeList.sub(() => this.showInitiativeList());
     EventBus.Sidebar.hideInitiativeList.sub(() => this.hideInitiativeList());
-    EventBus.Initiatives.reset.sub(() => this.changeSidebar());
+    EventBus.Initiatives.reset.sub(() => {
+      this.changeSidebar();
+      this.hideInitiativeList();
+    });
     EventBus.Initiatives.loadComplete.sub(() => this.changeSidebar());
   }
 

src/map-app/app/presenter/sidebar/base.ts

@@ -2,6 +2,8 @@ import { EventBus } from '../../../eventbus';
 import { BasePresenter }from '../base';
 import { BaseSidebarView } from '../../view/sidebar/base';
 import { SidebarPresenter } from '../sidebar';
+import { Initiative } from '../../model/initiative';
+import { canDisplayExpandedSidebar } from '../../../utils';
 
 export interface NavigationCallback {
   disabled: boolean;
@@ -16,10 +18,16 @@ export abstract class BaseSidebarPresenter extends BasePresenter {
     super();
   }
 
-  // If the sidebar wants to do something more than to get its view to refresh when the history buttons have been used, then
-  // it should override this definition with its own:
-  historyButtonsUsed(): void {    
-    this.view.refresh();
+  /**
+   * If the sidebar wants to do something more than to get its view to refresh when the history
+   * buttons have been used, then it should override this definition with its own.
+   */
+  historyButtonsUsed(): void {
+    this.view.refresh(false);
+
+    // Show the results pane again, since there have been changes
+    if (canDisplayExpandedSidebar()) // on smaller screens, wait until user clicks Apply Filters
+      EventBus.Sidebar.showInitiativeList.pub();
   }
 
   deselectInitiatives(): void {
@@ -48,9 +56,26 @@ export abstract class BaseSidebarPresenter extends BasePresenter {
     this.historyButtonsUsed();
   }
 
-  /// Refreshes the view
-  refreshView() {
-    this.view.refresh();
+  /**
+   * Refreshes the sidebar view
+   * 
+   * @param changed true if we changed to this sidebar, false if it was already showing and we're
+   * just refreshing it.
+   */
+  refreshView(changed: boolean) {
+    this.view.refresh(changed);
+  }
+
+  onInitiativeClicked(initiative: Initiative): void {
+    EventBus.Map.initiativeClicked.pub(initiative);
+  }
+
+  onInitiativeMouseoverInSidebar(initiative: Initiative): void {
+    EventBus.Map.needToShowInitiativeTooltip.pub(initiative);
+  }
+
+  onInitiativeMouseoutInSidebar(initiative: Initiative): void {
+    EventBus.Map.needToHideInitiativeTooltip.pub(initiative);
   }
 }