chore(#9231): filter target aggregate data using sidebar filter (#9267)

Author: Benmuiruri

webapp/src/ts/components/filters/analytics-filter/analytics-filter.component.ts

@@ -139,6 +139,7 @@ export class AnalyticsFilterComponent implements AfterContentInit, AfterContentC
     this.isOpen = !this.isOpen;
     this.globalActions.setSidebarFilter({ isOpen: this.isOpen });
     if (this.isOpen) {
+      // Counting every time the user opens the sidebar filter in analytics_targets_aggregrate tab.
       this.telemetryService.record('sidebar_filter:analytics:target_aggregates:open');
     }
   }

webapp/src/ts/modules/analytics/analytics-target-aggregates-detail.component.ts

@@ -2,6 +2,7 @@ import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { combineLatest, Subscription, Subject } from 'rxjs';
 import { Store } from '@ngrx/store';
+import { isEqual } from 'lodash-es';
 
 import { Selectors } from '@mm-selectors/index';
 import { TargetAggregatesActions } from '@mm-actions/target-aggregates';
@@ -19,6 +20,8 @@ export class AnalyticsTargetAggregatesDetailComponent implements OnInit, OnDestr
   subscriptions: Subscription = new Subscription();
   selected: any = null;
   error: any = null;
+  private prevAggregateId;
+  private prevAggregates;
   private aggregates = null;
   private viewInited = new Subject();
 
@@ -64,12 +67,19 @@ export class AnalyticsTargetAggregatesDetailComponent implements OnInit, OnDestr
       this.route.params,
       this.viewInited,
       this.store.select(Selectors.getTargetAggregatesLoaded),
-    ).subscribe(([params, inited, loaded]) => {
+      this.store.select(Selectors.getTargetAggregates),
+    ).subscribe(([params, inited, loaded, aggregates]) => {
       if (loaded && inited && params) {
         setTimeout(() => {
           // two birds with one stone
           // both this component and the parent (analytics-target-aggregates) need to be updated
-          this.getAggregatesDetail(params.id);
+          const aggregatesChanged = !isEqual(this.prevAggregates, aggregates);
+
+          if (params.id !== this.prevAggregateId || aggregatesChanged) {
+            this.prevAggregateId = params.id;
+            this.prevAggregates = aggregates;
+            this.getAggregatesDetail(params.id);
+          }
         });
       }
     });

webapp/src/ts/modules/analytics/analytics-target-aggregates-sidebar-filter.component.html

@@ -24,7 +24,8 @@
                     name="facility"
                     [value]="facility._id"
                     class="filter-option-radio"
-                    [(ngModel)]="selectedFacilityId">
+                    [(ngModel)]="selectedFacilityId"
+                    (change)="fetchAggregateTargets(facility._id)">
                   <span class="filter-option-label">{{ facility.name }}</span>
                 </label>
               </div>

webapp/src/ts/modules/analytics/analytics-target-aggregates-sidebar-filter.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { Store } from '@ngrx/store';
 
@@ -14,6 +14,7 @@ import { UserSettingsService } from '@mm-services/user-settings.service';
 })
 export class AnalyticsTargetAggregatesSidebarFilterComponent implements OnInit, OnDestroy {
 
+  @Output() facilitySelected = new EventEmitter<string>();
   private globalActions;
   subscriptions: Subscription = new Subscription();
   error;
@@ -44,6 +45,7 @@ export class AnalyticsTargetAggregatesSidebarFilterComponent implements OnInit,
   }
 
   ngOnDestroy() {
+    this.globalActions.clearSidebarFilter();
     this.subscriptions.unsubscribe();
   }
 
@@ -91,4 +93,8 @@ export class AnalyticsTargetAggregatesSidebarFilterComponent implements OnInit,
       this.facilityFilterLabel = FACILITY;
     }
   }
+
+  fetchAggregateTargets(facilityId) {
+    this.facilitySelected.emit(facilityId);
+  }
 }

webapp/src/ts/modules/analytics/analytics-target-aggregates.component.html

@@ -30,7 +30,10 @@
     <div class="item-content" [ngClass]="{ 'col-sm-6': isSidebarFilterOpen, 'col-sm-8': !isSidebarFilterOpen }">
       <router-outlet></router-outlet>
     </div>
-    <mm-analytics-target-aggregates-sidebar-filter class="col-sm-3 sidebar-filter-wrapper" *ngIf="useSidebarFilter">
+    <mm-analytics-target-aggregates-sidebar-filter
+      class="col-sm-3 sidebar-filter-wrapper"
+      *ngIf="useSidebarFilter"
+      (facilitySelected)="getTargetAggregates($event)">
     </mm-analytics-target-aggregates-sidebar-filter>
   </div>
 </div>

webapp/src/ts/modules/analytics/analytics-target-aggregates.component.ts

@@ -2,9 +2,9 @@ import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { combineLatest, Subscription } from 'rxjs';
 
+import { Selectors } from '@mm-selectors/index';
 import { TargetAggregatesActions } from '@mm-actions/target-aggregates';
 import { TargetAggregatesService } from '@mm-services/target-aggregates.service';
-import { Selectors } from '@mm-selectors/index';
 import { PerformanceService } from '@mm-services/performance.service';
 import { AnalyticsTargetAggregatesSidebarFilterComponent }
   from './analytics-target-aggregates-sidebar-filter.component';
@@ -36,7 +36,7 @@ export class AnalyticsTargetAggregatesComponent implements OnInit, OnDestroy {
     this.targetAggregatesActions = new TargetAggregatesActions(store);
   }
 
-  ngOnInit(): void {
+  async ngOnInit(): Promise<void> {
     this.trackPerformance = this.performanceService.track();
     this.subscribeToStore();
     this.subscribeSidebarFilter();
@@ -68,7 +68,7 @@ export class AnalyticsTargetAggregatesComponent implements OnInit, OnDestroy {
     this.subscriptions.add(selectorsSubscription);
   }
 
-  private getTargetAggregates() {
+  getTargetAggregates(userFacilityId?) {
     return this.targetAggregatesService
       .isEnabled()
       .then(enabled => {
@@ -78,7 +78,7 @@ export class AnalyticsTargetAggregatesComponent implements OnInit, OnDestroy {
           return;
         }
 
-        return this.targetAggregatesService.getAggregates();
+        return this.targetAggregatesService.getAggregates(userFacilityId);
       })
       .then(aggregates => {
         this.targetAggregatesActions.setTargetAggregates(aggregates);

webapp/src/ts/services/target-aggregates.service.ts

@@ -236,20 +236,25 @@ export class TargetAggregatesService {
     return Array.isArray(facility_id) ? facility_id : [ facility_id ];
   }
 
-  private async getHomePlace() {
+  private async getHomePlace(facilityId?) {
+    if (facilityId) {
+      const places = await this.getDataRecordsService.get([facilityId]);
+      return places?.[0];
+    }
+
     const facilityIds = await this.getUserFacilityIds();
     if (!facilityIds?.length) {
       return;
     }
     const places = await this.getDataRecordsService.get(facilityIds);
-    return places?.length ? places[0] : undefined;
+    return places?.[0];
   }
 
-  private getSupervisedContacts() {
+  private getSupervisedContacts(facilityId?) {
     const alphabeticalSort = (a, b) => String(a.name).localeCompare(String(b.name));
 
     return this
-      .getHomePlace()
+      .getHomePlace(facilityId)
       .then(homePlaceSummary => {
         if (!homePlaceSummary) {
           const message = 'Your user does not have an associated contact, or does not have access to the ' +
@@ -289,11 +294,11 @@ export class TargetAggregatesService {
     return !facilityIds || facilityIds.length > 0;
   }
 
-  getAggregates() {
-    return this.ngZone.runOutsideAngular(() => this._getAggregates());
+  getAggregates(facilityId?) {
+    return this.ngZone.runOutsideAngular(() => this._getAggregates(facilityId));
   }
 
-  private _getAggregates() {
+  private _getAggregates(facilityId?) {
     return this.settingsService
       .get()
       .then(settings => {
@@ -305,7 +310,7 @@ export class TargetAggregatesService {
 
         return Promise
           .all([
-            this.getSupervisedContacts(),
+            this.getSupervisedContacts(facilityId),
             this.fetchLatestTargetDocs(settings)
           ])
           .then(([ contacts, latestTargetDocs ]) => this.aggregateTargets(latestTargetDocs, contacts, targetsConfig));

webapp/src/ts/services/user-settings.service.ts

@@ -71,7 +71,7 @@ export class UserSettingsService {
       });
   }
 
-  async getUserFacility(): Promise<string[]> {
+  async getUserFacility() {
     return this
       .get()
       .then((userSettings: UserSettings) => {

webapp/tests/karma/ts/modules/analytics/analytics-target-aggregates-detail.component.spec.ts

@@ -2,7 +2,7 @@ import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angul
 import { RouterTestingModule } from '@angular/router/testing';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateFakeLoader, TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
-import { provideMockStore } from '@ngrx/store/testing';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
 import { Subject } from 'rxjs';
 import sinon from 'sinon';
 import { expect } from 'chai';
@@ -23,6 +23,7 @@ describe('AnalyticsTargetAggregatesDetailComponent', () => {
   let targetAggregatesActions;
   let globalActions;
   let route;
+  let store;
 
   beforeEach(waitForAsync(() => {
     targetAggregatesService = {
@@ -64,10 +65,12 @@ describe('AnalyticsTargetAggregatesDetailComponent', () => {
         component = fixture.componentInstance;
         translateService = TestBed.inject(TranslateService);
         fixture.detectChanges();
+        store = TestBed.inject(MockStore);
       });
   }));
 
   afterEach(() => {
+    store.resetSelectors();
     sinon.restore();
   });
 
@@ -144,4 +147,59 @@ describe('AnalyticsTargetAggregatesDetailComponent', () => {
     expect(translateService.instant.callCount).to.equal(1);
     expect(translateService.instant.args[0]).to.deep.equal(['analytics.target.aggregates', undefined]);
   }));
+
+  it('should update title when aggregrates change', fakeAsync(() => {
+    sinon.reset();
+    targetAggregatesService.getAggregateDetails.returns({
+      an: 'aggregate',
+      translation_key: 'the_title',
+      heading: 'the translated title'
+    });
+    translateService.instant = sinon.stub().returns('target aggregate');
+
+    route.params.next({ id: 'target1' });
+    tick();
+
+    expect(targetAggregatesService.getAggregateDetails.callCount).to.equal(1);
+    expect(targetAggregatesService.getAggregateDetails.args[0]).to.deep.equal(['target1', ['aggregates']]);
+    expect(globalActions.setShowContent.callCount).to.equal(1);
+    expect(globalActions.setShowContent.args[0][0]).to.equal(true);
+    expect(globalActions.setTitle.callCount).to.equal(1);
+    expect(globalActions.setTitle.args[0][0]).to.equal('target aggregate');
+    expect(targetAggregatesActions.setSelectedTargetAggregate.callCount).to.equal(1);
+    expect(targetAggregatesActions.setSelectedTargetAggregate.args[0][0]).to.deep.equal({
+      an: 'aggregate',
+      translation_key: 'the_title',
+      heading: 'the translated title',
+    });
+    expect(translateService.instant.callCount).to.equal(1);
+    expect(translateService.instant.args[0]).to.deep.equal(['analytics.target.aggregates', undefined]);
+
+    // Selecting a different user's facility which triggers changes to the aggregates
+    const newAggregates = ['new aggregate 1', 'new aggregate 2'];
+    store.overrideSelector(Selectors.getTargetAggregates, newAggregates);
+    store.refreshState();
+
+    targetAggregatesService.getAggregateDetails.returns({
+      an: 'aggregate1_updated',
+      translation_key: 'title1_updated',
+      heading: 'translated title 1 updated'
+    });
+    translateService.instant = sinon.stub().returns('target aggregate 1 updated');
+
+    tick();
+
+    expect(targetAggregatesService.getAggregateDetails.callCount).to.equal(2);
+    expect(targetAggregatesService.getAggregateDetails.args[1]).to.deep.equal(['target1', newAggregates]);
+    expect(globalActions.setShowContent.callCount).to.equal(2);
+    expect(globalActions.setShowContent.args[1][0]).to.equal(true);
+    expect(globalActions.setTitle.callCount).to.equal(2);
+    expect(globalActions.setTitle.args[1][0]).to.equal('target aggregate 1 updated');
+    expect(targetAggregatesActions.setSelectedTargetAggregate.callCount).to.equal(2);
+    expect(targetAggregatesActions.setSelectedTargetAggregate.args[1][0]).to.deep.equal({
+      an: 'aggregate1_updated',
+      translation_key: 'title1_updated',
+      heading: 'translated title 1 updated',
+    });
+  }));
 });

webapp/tests/karma/ts/modules/analytics/analytics-target-aggregates-sidebar-filter-component.spec.ts

@@ -35,6 +35,7 @@ describe('Analytics Target Aggregate Sidebar Filter Component', () => {
     };
     globalActions = {
       setSidebarFilter: sinon.stub(GlobalActions.prototype, 'setSidebarFilter'),
+      clearSidebarFilter: sinon.stub(GlobalActions.prototype, 'clearSidebarFilter'),
     };
 
     const mockedSelectors = [
@@ -77,6 +78,12 @@ describe('Analytics Target Aggregate Sidebar Filter Component', () => {
     expect(component.error).to.be.undefined;
   }));
 
+  it('should clear sidebar filter in the store on component destroy', () => {
+    component.ngOnDestroy();
+
+    expect(globalActions.clearSidebarFilter.calledOnce).to.be.true;
+  });
+
   it('should toggle sidebar filter', () => {
     component.toggleSidebarFilter();
     component.toggleSidebarFilter();

webapp/tests/karma/ts/modules/analytics/analytics-target-aggregates.component.spec.ts

@@ -148,5 +148,39 @@ describe('Analytics Target Aggregates Component', () => {
     expect(targetAggregatesActions.setTargetAggregatesError.callCount).to.equal(0);
     expect(targetAggregatesActions.setTargetAggregates.callCount).to.equal(1);
     expect(targetAggregatesActions.setTargetAggregates.args[0][0]).to.deep.equal(['some aggregates']);
+    expect(targetAggregatesService.getAggregates.callCount).to.equal(1);
+  }));
+
+  it('should set different aggregates when updateAggregateTargets is called with a new facility', fakeAsync(() => {
+    sinon.reset();
+    targetAggregatesService.isEnabled.resolves(true);
+    targetAggregatesService.getAggregates.resolves(['some aggregates']);
+
+    component.ngOnInit();
+    tick();
+
+    expect(targetAggregatesService.isEnabled.callCount).to.equal(1);
+    expect(targetAggregatesService.getAggregates.callCount).to.equal(1);
+    expect(component.loading).to.equal(false);
+    expect(component.enabled).to.equal(true);
+    expect(targetAggregatesActions.setTargetAggregatesError.callCount).to.equal(0);
+    expect(targetAggregatesActions.setTargetAggregates.callCount).to.equal(1);
+    expect(targetAggregatesActions.setTargetAggregates.args[0][0]).to.deep.equal(['some aggregates']);
+    expect(targetAggregatesService.getAggregates.callCount).to.equal(1);
+
+    targetAggregatesActions.setTargetAggregates.resetHistory();
+    targetAggregatesService.getAggregates.resetHistory();
+
+    const facilityTwoAggregates = ['new aggregates'];
+    targetAggregatesService.getAggregates.withArgs('facility_2').resolves(facilityTwoAggregates);
+
+    // Fetch aggregates for user's second facility
+    component.getTargetAggregates('facility_2');
+    tick();
+
+    expect(targetAggregatesService.getAggregates.callCount).to.equal(1);
+    expect(targetAggregatesService.getAggregates.calledWith('facility_2')).to.be.true;
+    expect(targetAggregatesActions.setTargetAggregates.callCount).to.equal(1);
+    expect(targetAggregatesActions.setTargetAggregates.args[0][0]).to.deep.equal(facilityTwoAggregates);
   }));
 });

webapp/tests/karma/ts/services/target-aggregates.service.spec.ts

@@ -488,6 +488,45 @@ describe('TargetAggregatesService', () => {
       expect(getDataRecordsService.get.args[0]).to.deep.equal([[ 'home' ]]);
     });
 
+    it('should call getAggregates with provided facilityId when fetching aggregates', async () => {
+      const facilityId = 'facility123';
+      const config = { tasks: { targets: { items: [{ id: 'target', aggregate: true, type: 'count' }] } } };
+      settingsService.get.resolves(config);
+
+      userSettingsService.get.resolves({ facility_id: 'home' });
+      getDataRecordsService.get.resolves([]);
+      getDataRecordsService.get.withArgs([facilityId]).resolves([{ _id: facilityId, name: 'Test Facility' }]);
+      contactTypesService.getTypeId.returns('district');
+      contactTypesService.getChildren.resolves([{ id: 'health_center' }]);
+      searchService.search.resolves([]);
+
+      dbService.allDocs.resolves({ rows: [] });
+
+      uhcSettingsService.getMonthStartDate.returns(12);
+      calendarIntervalService.getCurrent.returns({
+        start: moment('2019-05-12').valueOf(),
+        end: moment('2019-06-11').valueOf(),
+      });
+
+      const result = await service.getAggregates(facilityId);
+
+      expect(result.length).to.equal(1);
+      expect(result[0].id).to.equal('target');
+
+      expect(getDataRecordsService.get.callCount).to.equal(2);
+      expect(getDataRecordsService.get.args[0]).to.deep.equal([[facilityId]]);
+      expect(dbService.allDocs.callCount).to.equal(1);
+      expect(dbService.allDocs.args[0]).to.deep.equal([{
+        start_key: 'target~2019-06~',
+        end_key: 'target~2019-06~\ufff0',
+        include_docs: true
+      }]);
+      expect(uhcSettingsService.getMonthStartDate.callCount).to.equal(1);
+      expect(uhcSettingsService.getMonthStartDate.args[0]).to.deep.equal([config]);
+      expect(calendarIntervalService.getCurrent.callCount).to.equal(1);
+      expect(calendarIntervalService.getCurrent.args[0]).to.deep.equal([12]);
+    });
+
     it('should fetch correct latest target docs', async () => {
       const config = { tasks: { targets: { items: [{ id: 'target', aggregate: true, type: 'count' }] } }};
       settingsService.get.resolves(config);