[prep]: Initial prep monthly report

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

src/app/data-analytics-dashboard/hiv/data-analytics-hiv.module.ts

@@ -35,6 +35,7 @@ import { DataAnalyticsMonthlyReportComponent } from './monthly-reports-dashboard
 import { DataAnalyticsHivGainsAndLossesComponent } from './hiv-monthly-gains-and-losses/data-analytics-hiv-gains-and-losses.component';
 import { ContactTestingComponent } from './contact-testing/contact-testing/contact-testing.component';
 import { DialogModule } from 'primeng/primeng';
+import { PrepMonthlyReportPatientListComponent } from 'src/app/hiv-care-lib/prep-report/monthly/prep-monthly-patient-list/prep-monthly-report-patient-list.component';
 import { TxReportsDashboardComponent } from './tx-reports-dashboard/tx-reports-dashboard.component';
 import { TxMlReportComponent } from './tx-ml-report/tx-ml-report.component';
 import { TxNewReportComponent } from './datim-reports/tx-new-report/tx-new-report.component';
@@ -80,6 +81,7 @@ import { TxRttReportComponent } from './datim-reports/tx-rtt-report.component';
     HivSummaryMonthlyIndicatorsComponent,
     SurgeReportComponent,
     PrepReportComponent,
+    PrepMonthlyReportPatientListComponent,
     MOH412HIVDataAnalyticsComponent,
     MOH412HIVDataAnalyticsPatientListComponent,
     IPTReportComponent,

src/app/data-analytics-dashboard/hiv/data-analytics-hiv.routes.ts

@@ -40,6 +40,8 @@ import { ContactTestingComponent } from './contact-testing/contact-testing/conta
 import { FamilyTestingContactComponent } from 'src/app/hiv-care-lib/family-testing/family-testing-contact-list.component';
 import { AddContactTraceComponent } from 'src/app/hiv-care-lib/family-testing/contact-trace/add-contact-trace.component';
 import { EditContactTraceComponent } from 'src/app/hiv-care-lib/family-testing/contact-trace/edit-contact-trace.component';
+import { PrepMonthlyReportComponent } from './prep-report/prep-monthly-report.component';
+import { PrepMonthlyReportPatientListComponent } from 'src/app/hiv-care-lib/prep-report/monthly/prep-monthly-patient-list/prep-monthly-report-patient-list.component';
 import { TxReportsDashboardComponent } from './tx-reports-dashboard/tx-reports-dashboard.component';
 import { TxMlReportComponent } from './tx-ml-report/tx-ml-report.component';
 import { TxMlReportPatientListComponent } from 'src/app/hiv-care-lib/tx-ml-report/tx-ml-report-patient-list/tx-ml-report-patient-list.component';
@@ -51,6 +53,7 @@ import { TxMmdReportPatientListComponent } from 'src/app/hiv-care-lib/tx-mmd-rep
 import { TxMmdReportComponent } from './datim-reports/tx-mmd-report.component';
 import { TxRttReportComponent } from './datim-reports/tx-rtt-report.component';
 import { TxRttReportPatientListComponent } from 'src/app/hiv-care-lib/tx-rtt-report/tx-rtt-report-patient-list/tx-rtt-report-patient-list.component';
+
 const routes: Routes = [
   {
     path: 'clinic-flow',
@@ -198,6 +201,19 @@ const routes: Routes = [
           }
         ]
       },
+      {
+        path: 'prep-monthly-report',
+        children: [
+          {
+            path: '',
+            component: PrepMonthlyReportComponent
+          },
+          {
+            path: 'patient-list',
+            component: PrepMonthlyReportPatientListComponent
+          }
+        ]
+      },
       {
         path: 'moh-412-report',
         children: [

src/app/data-analytics-dashboard/hiv/monthly-reports-dashboard/data-analytics-monthly-reports.component.ts

@@ -16,11 +16,17 @@ export class DataAnalyticsMonthlyReportComponent implements OnInit {
   ngOnInit() {
     this.dashboards = [
       {
-        title: 'PrEP Monthly Report',
+        title: 'PrEP Monthly Report (deprecated)',
         description: '',
         url: 'prep-report',
         icon: 'fa'
       },
+      {
+        title: 'New PrEP Monthly Report',
+        description: '',
+        url: 'prep-monthly-report',
+        icon: 'fa'
+      },
       {
         title: 'TB Treatment Therapy report',
         description: '',

src/app/data-analytics-dashboard/hiv/prep-report/prep-monthly-report.component.ts

@@ -0,0 +1,94 @@
+import { Router, ActivatedRoute } from '@angular/router';
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { take } from 'rxjs/operators';
+import * as rison from 'rison-node';
+import * as Moment from 'moment';
+
+import { DataAnalyticsDashboardService } from '../../services/data-analytics-dashboard.services';
+import { PrepMonthlyReportBaseComponent } from 'src/app/hiv-care-lib/prep-report/monthly/prep-monthly-base/prep-monthly-base.component';
+import { PrepMonthlyResourceService } from 'src/app/etl-api/prep-monthly-resource.service';
+
+@Component({
+  selector: 'prep-monthly-report-base',
+  templateUrl:
+    './../../../hiv-care-lib/prep-report/monthly/prep-monthly-base/prep-monthly-base.component.html'
+})
+export class PrepMonthlyReportComponent
+  extends PrepMonthlyReportBaseComponent
+  implements OnInit {
+  public enabledControls = 'monthControl,locationControl';
+
+  constructor(
+    public router: Router,
+    public route: ActivatedRoute,
+    public prepMonthlyResourceService: PrepMonthlyResourceService,
+    private dataAnalyticsDashboardService: DataAnalyticsDashboardService,
+    private location: Location
+  ) {
+    super(router, route, prepMonthlyResourceService);
+  }
+
+  public ngOnInit() {
+    this.loadReportParamsFromUrl();
+  }
+
+  public generateReport() {
+    this.setSelectedLocation();
+    this.storeParamsInUrl();
+
+    if (Array.isArray(this._locationUuids) && this._locationUuids.length > 0) {
+      this.params = {
+        locationUuids: this.getSelectedLocations(this._locationUuids),
+        month: Moment(this._month).endOf('month').format('YYYY-MM-DD')
+      };
+      super.getPrepMonthlyAggReport(this.params);
+      super.showDraftReportAlert(this._month);
+    } else {
+      this.errorMessage = 'Locations are required!';
+    }
+  }
+
+  public storeParamsInUrl() {
+    const state = {
+      locationUuids: this.getSelectedLocations(this._locationUuids),
+      month: Moment(this._month).endOf('month').format('YYYY-MM-DD')
+    };
+    const stateUrl = rison.encode(state);
+    const path = this.router.parseUrl(this.location.path());
+    path.queryParams = {
+      state: stateUrl
+    };
+
+    this.location.replaceState(path.toString());
+  }
+
+  public loadReportParamsFromUrl() {
+    const path = this.router.parseUrl(this.location.path());
+
+    if (path.queryParams['state']) {
+      const state = rison.decode(path.queryParams['state']);
+      this.month = state.month;
+      this.locationUuids = state.locations;
+    }
+
+    if (path.queryParams['state']) {
+      this.generateReport();
+    }
+  }
+
+  public setSelectedLocation() {
+    this.dataAnalyticsDashboardService
+      .getSelectedLocations()
+      .pipe(take(1))
+      .subscribe((data) => {
+        if (data) {
+          this.locationUuids = data.locations;
+        }
+      });
+  }
+
+  private getSelectedLocations(locationUuids: Array<any>): string {
+    return locationUuids.map((location) => location.value).join(',');
+  }
+}

src/app/etl-api/prep-monthly-resource.service.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { RouterTestingModule } from '@angular/router/testing';
+import { routes } from '../clinic-dashboard/clinic-dashboard.routes';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ClinicDashboardComponent } from '../clinic-dashboard/clinic-dashboard.component';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { AppSettingsService } from '../app-settings/app-settings.service';
+import { LocalStorageService } from '../utils/local-storage.service';
+import { PrepMonthlyResourceService } from './prep-monthly-resource.service';
+
+describe('PrepMonthlyResourceService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        PrepMonthlyResourceService,
+        AppSettingsService,
+        LocalStorageService
+      ],
+      declarations: [ClinicDashboardComponent],
+      imports: [
+        RouterTestingModule.withRoutes(routes),
+        HttpClientTestingModule
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    });
+  });
+
+  it('should be created', inject(
+    [PrepMonthlyResourceService],
+    (service: PrepMonthlyResourceService) => {
+      expect(service).toBeTruthy();
+    }
+  ));
+});

src/app/etl-api/prep-monthly-resource.service.ts

@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import { AppSettingsService } from '../app-settings/app-settings.service';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { catchError, map } from 'rxjs/operators';
+@Injectable({
+  providedIn: 'root'
+})
+export class PrepMonthlyResourceService {
+  public get url(): string {
+    return this.appSettingsService.getEtlRestbaseurl().trim();
+  }
+  constructor(
+    public http: HttpClient,
+    public appSettingsService: AppSettingsService
+  ) {}
+  public getPrepMonthlyAggReport(params: any): Observable<any> {
+    // tslint:disable-next-line: max-line-length
+    return this.http
+      .get(
+        `${this.url}prep-monthly-report?endDate=${params.month}&locationUuids=${params.locationUuids}`
+      )
+      .pipe(
+        catchError((err: any) => {
+          const error: any = err;
+          const errorObj = {
+            error: error.status,
+            message: error.statusText
+          };
+          return Observable.of(errorObj);
+        }),
+        map((response: Response) => {
+          return response;
+        })
+      );
+  }
+  public getPrepMonthlyPatientList(params: any): Observable<any> {
+    // tslint:disable-next-line: max-line-length
+    return this.http
+      .get(
+        `${this.url}prep-monthly-report-patient-list?&endDate=${params.month}&locationUuids=${params.locationUuids}&indicators=${params.indicators}`
+      )
+      .pipe(
+        catchError((err: any) => {
+          const error: any = err;
+          const errorObj = {
+            error: error.status,
+            message: error.statusText
+          };
+          return Observable.of(errorObj);
+        }),
+        map((response: Response) => {
+          return response;
+        })
+      );
+  }
+}

src/app/hiv-care-lib/hiv-care-lib.module.ts

@@ -122,6 +122,10 @@ import { Covid19ReportComponent } from './covid-19-report/covid-19-report.compon
 import { Covid19ReportFiltersComponent } from './covid-19-report/covid-19-report-filters/covid-19-report-filters.component';
 import { Covid19ReportPatientListComponent } from './covid-19-report/covid-19-report-patient-list/covid-19-report-patient-list.component';
 import { Covid19TabularViewComponent } from './covid-19-report/covid-19-tabular-view/covid-19-tabular-view.component';
+import { PrepMonthlyResourceService } from '../etl-api/prep-monthly-resource.service';
+import { PrepMonthlyReportComponent } from '../data-analytics-dashboard/hiv/prep-report/prep-monthly-report.component';
+import { PrepMonthlyReportBaseComponent } from './prep-report/monthly/prep-monthly-base/prep-monthly-base.component';
+import { PrepMonthlyReportViewComponent } from './prep-report/monthly/prep-monthly-report-view/prep-monthly-report-view.component';
 import { TxMlReportBaseComponent } from './tx-ml-report/tx-ml-report-base/tx-ml-report-base.component';
 import { TxMlReportPatientListComponent } from './tx-ml-report/tx-ml-report-patient-list/tx-ml-report-patient-list.component';
 import { TxMlReportViewComponent } from './tx-ml-report/tx-ml-report-view/tx-ml-report-view.component';
@@ -228,6 +232,7 @@ import { TxRttReportPatientListComponent } from './tx-rtt-report/tx-rtt-report-p
     Covid19ReportFiltersComponent,
     Covid19ReportPatientListComponent,
     Covid19TabularViewComponent,
+    PrepMonthlyReportViewComponent,
     TxMlReportViewComponent
   ],
   declarations: [
@@ -301,6 +306,9 @@ import { TxRttReportPatientListComponent } from './tx-rtt-report/tx-rtt-report-p
     Covid19ReportFiltersComponent,
     Covid19ReportPatientListComponent,
     Covid19TabularViewComponent,
+    PrepMonthlyReportComponent,
+    PrepMonthlyReportBaseComponent,
+    PrepMonthlyReportViewComponent,
     TxMlReportBaseComponent,
     TxMlReportPatientListComponent,
     TxMlReportViewComponent,
@@ -315,6 +323,7 @@ import { TxRttReportPatientListComponent } from './tx-rtt-report/tx-rtt-report-p
   ],
   providers: [
     MOHReportService,
+    PrepMonthlyResourceService,
     LocationResourceService,
     ClinicalSummaryVisualizationService,
     RetentionReportResourceService,

src/app/hiv-care-lib/prep-report/monthly/prep-monthly-base/prep-monthly-base.component.html

@@ -0,0 +1,53 @@
+<h4 class="component-title text-success">
+  <span class="fa fa-table"></span>PrEP Monthly Report
+</h4>
+
+<div class="loader" *ngIf="isLoading">
+  <span><i class="fa fa-spinner fa-spin"></i>Loading...</span>
+</div>
+
+<p-tabView>
+  <div>
+    <p-tabPanel header="Monthly" leftIcon="fa-calendar-o">
+      <report-filters
+        [enabledControls]="enabledControls"
+        [monthString]="_month"
+        (onMonthChange)="onMonthChange($event)"
+        [reportName]="reportName"
+        (generateReport)="generateReport()"
+      >
+      </report-filters>
+    </p-tabPanel>
+  </div>
+</p-tabView>
+
+<div class="alert alert-danger fade in" *ngIf="showInfoMessage">
+  <a href="#" class="close" data-dismiss="alert">&times;</a>
+  <h4 *ngIf="!statusError">
+    <strong><span class="glyphicon glyphicon-warning-sign"></span> </strong> An
+    error occurred while trying to load the report. Please try again.
+  </h4>
+  <p>
+    <small>{{ errorMessage }}</small>
+  </p>
+</div>
+<div *ngIf="!isReleased" class="alert alert-warning">
+  <strong>Viewing a Draft Version of the Report for the chosen month. </strong>
+  This report is likely to change without warning.
+</div>
+<div>
+  <p-tabView>
+    <p-tabPanel
+      header="Report View"
+      leftIcon="fa-file-pdf-o"
+      [selected]="currentViewBelow === 'pdf'"
+    >
+      <app-prep-monthly-report-view
+        [SummaryData]="prepReportSummaryData"
+        [sectionDefs]="columnDefs"
+        (indicatorSelected)="indicatorSelected($event)"
+        [reportDetails]="params"
+      ></app-prep-monthly-report-view>
+    </p-tabPanel>
+  </p-tabView>
+</div>

src/app/hiv-care-lib/prep-report/monthly/prep-monthly-base/prep-monthly-base.component.spec.ts

@@ -0,0 +1,23 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { PrepMonthlyReportBaseComponent } from './prep-monthly-base.component';
+
+describe('PrepMonthlyReportBaseComponent', () => {
+  let component: PrepMonthlyReportBaseComponent;
+  let fixture: ComponentFixture<PrepMonthlyReportBaseComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [PrepMonthlyReportBaseComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PrepMonthlyReportBaseComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});