Merge pull request #8330 from 5Amogh/RRHE-48

Issue #RRHE-48 feat:Customized configurable filters for filtered task detail report type

src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.html

@@ -121,6 +121,12 @@ <h4 class="textbook__title sb-color-primary font-weight-bold mt-8 ml-24" >{{reso
               <mat-datepicker #picker></mat-datepicker>
             </mat-form-field>            
           </div>
+          <ng-container *ngIf="pdFilters.length">
+            <ng-container *ngFor="let filter of pdFilters">
+              <app-pd-filters [pdFilter]="filter" (filterChanged)="pdFilterChanged($event)"></app-pd-filters>
+            </ng-container>
+          </ng-container>
+
           <div class="d-flex flex-dc ml-auto mt-12">
             <button type="button" class="sb-field sb-btn sb-btn-normal sb-btn-primary reset-filter flex-as-flex-end" (click)="resetFilter()">{{resourceService?.frmelmnts?.btn?.resetFilters}}</button>
             <mat-form-field *ngIf="!noResult && (tabIndex == 1)" appearance="fill" class="sb-mat__dropdown custom_mat_dd">

src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.spec.ts

@@ -524,6 +524,19 @@ describe('DatasetsComponent', () => {
     expect(component.reportChanged).toHaveBeenCalled();
   });
 
+  it('should update the selected report data for Filtered task detail report ', () => {
+    jest.spyOn(component,'reportChanged');
+    component.reportChanged(mockData.selectedReportWithConfigurableFilters)
+    expect(component.selectedReport).toBe(mockData.selectedReportWithConfigurableFilters);
+    expect(component.reportChanged).toHaveBeenCalled();
+  });
+
+  it('should call pdFilterChanged method', () => {
+    jest.spyOn(component,'pdFilterChanged');
+    component.pdFilterChanged({task_count:5});
+    expect(component.pdFilterChanged).toHaveBeenCalledWith({task_count:5});
+  });
+
   it('should request the csv', () => {
     jest.spyOn(component,'csvRequest');
     jest.spyOn(component,'submitRequest');

src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.ts

@@ -13,6 +13,12 @@ import * as moment from 'moment';
 import html2canvas from 'html2canvas';
 import * as jspdf from 'jspdf';
 const PRE_DEFINED_PARAMETERS = ['$slug', 'hawk-eye'];
+export interface ConfigFilter{
+    label: string,
+    controlType: string,
+    reference: string,
+    defaultValue: number
+}
 @Component({
   selector: 'app-datasets',
   templateUrl: './program-datasets.component.html',
@@ -94,6 +100,8 @@ export class DatasetsComponent implements OnInit, OnDestroy {
   maxStartDate: any; //Start date - has to be one day less than end date
   displayFilters:any = {};
   loadash = _;
+  pdFilters:ConfigFilter[] = [];
+  configuredFilters:any = {}
   constructor(
     activatedRoute: ActivatedRoute,
     public layoutService: LayoutService,
@@ -249,6 +257,7 @@ export class DatasetsComponent implements OnInit, OnDestroy {
     this.solutions = [];
     this.reportTypes = [];
     this.onDemandReportData = [];
+    this.resetConfigFilters();
     this.getSolutionList(program[0]);
     this.displayFilters['Program'] = [program[0].name]
     this.reportForm.controls.programName.setValue($event.value);
@@ -261,6 +270,7 @@ export class DatasetsComponent implements OnInit, OnDestroy {
     this.noResult = false;
     this.districts = []
     this.organisations = [];
+    this.resetConfigFilters();
     this.globalDistrict = this.globalOrg = undefined;
     if (this.programSelected && this.reportForm.value && this.reportForm.value['solution']) {
       const solution = this.solutions.filter(data => {
@@ -517,6 +527,7 @@ export class DatasetsComponent implements OnInit, OnDestroy {
     this.showPopUpModal = true;
     this.globalDistrict = this.globalOrg = undefined;
     this.timeRangeInit();
+    this.resetConfigFilters();
   }
 
   loadReports() {
@@ -543,18 +554,43 @@ export class DatasetsComponent implements OnInit, OnDestroy {
   }
 
   reportChanged(selectedReportData) {
+    this.resetConfigFilters();
     this.selectedReport = selectedReportData;
+    if(this.selectedReport.configurableFilters){
+      this.pdFilters = this.selectedReport.uiFilters;
+      this.pdFilters.map(filter => {
+        this.configuredFilters[filter['reference']] = filter['defaultValue'] as number -1
+      })
+    }
   }
+
+  resetConfigFilters(){
+    this.pdFilters = [];
+    this.configuredFilters = {};
+  }
+
+  pdFilterChanged($event){
+    const [reference, value]= [Object.keys($event),Object.values($event)] ;
+    if([0,null].includes(value[0] as number) || value[0] < 0){
+      this.configuredFilters[reference[0]] = undefined;
+    }else{
+      this.configuredFilters[reference[0]] = value[0] as number -1;
+    }
+  }
+
   addFilters() {
     let filterKeysObj = {
       program_id: _.get(this.reportForm, 'controls.programName.value'),
       solution_id: _.get(this.reportForm, 'controls.solution.value'),
       programId: _.get(this.reportForm, 'controls.programName.value'),
       solutionId: _.get(this.reportForm, 'controls.solution.value'),
       district_externalId: _.get(this.reportForm, 'controls.districtName.value') || undefined,
-      organisation_id: _.get(this.reportForm, 'controls.organisationName.value') || undefined
+      organisation_id: _.get(this.reportForm, 'controls.organisationName.value') || undefined,
+      ...this.configuredFilters
     }
+
     let keys = Object.keys(filterKeysObj);
+
     this.selectedReport['filters'].map(data => {
       keys.filter(key => {
         return data.dimension == key && (data.value = filterKeysObj[key]);

src/app/client/src/app/modules/program-dashboard/program-dashboard.module.ts

@@ -25,6 +25,9 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { SbBignumberComponent } from './shared/sb-bignumber/sb-bignumber.component';
 import { SbTableComponent } from './shared/sb-table/sb-table.component';
 import { MomentDateAdapter } from '@angular/material-moment-adapter';
+import { PdFiltersComponent } from './shared/pd-filters/pd-filters.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 const TIME_RANGE_DATE_FORMAT = {
   parse: {
@@ -45,7 +48,8 @@ const TIME_RANGE_DATE_FORMAT = {
   SbChartComponent,
   FilterChartPipe,
   SbBignumberComponent,
-  SbTableComponent
+  SbTableComponent,
+  PdFiltersComponent
   ],
   imports: [
     CommonModule,
@@ -56,6 +60,8 @@ const TIME_RANGE_DATE_FORMAT = {
     TelemetryModule,
     FormsModule,
     ReactiveFormsModule,
+    MatFormFieldModule,
+    MatInputModule,
     programDashboardRoutingModule,
     MatCheckboxModule,
     MatTabsModule,

src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.html

@@ -0,0 +1,19 @@
+<form class="d-flex flex-dr" [formGroup]="pdFiltersFormGroup">
+    <div class="d-flex flex-dc">
+      <label>{{ pdFilter.label }}</label>
+      <ng-container *ngIf="pdFilter.controlType === 'number'">
+        <mat-form-field
+          appearance="fill"
+          class="sb-mat__dropdown custom_mat_dd"
+        >
+          <input
+            matInput
+            type="number"
+            [formControlName]="pdFilter.reference"
+            [value]="pdFilter.defaultValue"
+            (input)="inputChange()"
+          />
+        </mat-form-field>
+      </ng-container>
+    </div>
+</form>

src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.spec.ts

@@ -0,0 +1,49 @@
+import { FormBuilder } from "@angular/forms";
+import { PdFiltersComponent } from "./pd-filters.component";
+
+describe("PdFiltersComponent", () => {
+  let component: PdFiltersComponent;
+  let formBuilder;
+
+  beforeAll(() => {
+    component = new PdFiltersComponent(formBuilder);
+    component.pdFilter = {
+          "label": "Minimum no. of tasks in the project",
+          "controlType": "number",
+          "reference": "task_count",
+          "defaultValue": 5
+      }
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should call ngOnInit',() => {
+    jest.spyOn(component,'ngOnInit');
+    component.fb = new FormBuilder;
+    component.ngOnInit();
+    expect(component.ngOnInit).toHaveBeenCalled()
+  });
+
+  it('should generate form',() => {
+    jest.spyOn(component,'generateForm');
+    component.fb = new FormBuilder;
+    component.generateForm();
+    expect(component.generateForm).toHaveBeenCalled()
+  });
+
+  it('should call inputChange method', () => {
+    jest.spyOn(component,'inputChange');
+    component.pdFiltersFormGroup.patchValue({
+      task_count:5
+    });
+    component.inputChange();
+    expect(component.inputChange).toHaveBeenCalled();
+  });
+
+});

src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.ts

@@ -0,0 +1,31 @@
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { FormBuilder, FormGroup } from "@angular/forms";
+import * as _ from "lodash-es";
+
+@Component({
+  selector: "app-pd-filters",
+  templateUrl: "./pd-filters.component.html"
+})
+export class PdFiltersComponent implements OnInit {
+  @Input() pdFilter: any;
+  @Output() filterChanged = new EventEmitter();
+  pdFiltersFormGroup: FormGroup;
+
+  constructor(public fb: FormBuilder) {}
+
+  ngOnInit(): void {
+    this.generateForm();
+  }
+
+  generateForm() {
+    this.pdFiltersFormGroup = this.fb.group({});
+    this.pdFiltersFormGroup.addControl(
+      _.get(this.pdFilter, "reference"),
+      this.fb.control("")
+    );
+  }
+
+  inputChange() {
+    this.filterChanged.emit(this.pdFiltersFormGroup.value);
+  }
+}