Issue #RRHE-48 Customized configurable filters for VAM

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

@@ -121,6 +121,9 @@
               <mat-datepicker #picker></mat-datepicker>
             </mat-form-field>            
           </div>
+          <ng-container *ngFor="let filter of pdFilters">
+            <app-pd-filters [pdFilter]="filter" (filterChanged)="filterChanged($event)"></app-pd-filters>
+          </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.ts

@@ -94,6 +94,29 @@ export class DatasetsComponent implements OnInit, OnDestroy {
   maxStartDate: any; //Start date - has to be one day less than end date
   displayFilters:any = {};
   loadash = _;
+  pdFilters = [{
+    'label':'Minimum no. of tasks in the project',
+    'placeholder':'Minimum no. of tasks in the project',
+    'controlType':'number',
+    'reference':'minTaskNumber',
+    'defaultValue':'5',
+  },
+  {
+    'label':'Minimum no. of task evidence',
+    'placeholder':'Minimum no. of task evidence',
+    'controlType':'number',
+    'reference':'minTaskEvidence',
+    'defaultValue':'2',
+  },
+  {
+    'label':'Minimum no. of project evidence',
+    'placeholder':'Minimum no. of project evidence',
+    'controlType':'number',
+    'reference':'minProjectEvidence',
+    'defaultValue':'1',
+  }
+]
+  configuredFilters:any = {}
   constructor(
     activatedRoute: ActivatedRoute,
     public layoutService: LayoutService,
@@ -545,6 +568,22 @@ export class DatasetsComponent implements OnInit, OnDestroy {
   reportChanged(selectedReportData) {
     this.selectedReport = selectedReportData;
   }
+
+  filterChanged($event){
+    //this event will conatain data emitted by pd-filter method and will have only one property thus there will be only one key and value
+    let reference:string| unknown = Object.keys($event);
+    let value:number | unknown = Object.values($event);
+    this.configuredFilters[`${reference[0]}`] = value[0]-1;
+    // if(this.reportForm.contains(`${reference[0]}`)){
+    //   let updateControl = {};
+    //   updateControl[`${reference[0]}`] = value[0]-1
+    //   this.reportForm.patchValue(updateControl);
+    // }else{
+    //   this.reportForm.addControl(`${reference[0]}`, new FormControl(value[0]-1))
+    // }
+    console.log('from event emitter',Object.keys($event),Object.values($event))
+    console.log('configuredFilters',this.configuredFilters)
+  }
   addFilters() {
     let filterKeysObj = {
       program_id: _.get(this.reportForm, 'controls.programName.value'),
@@ -552,7 +591,8 @@ export class DatasetsComponent implements OnInit, OnDestroy {
       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 => {

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

+<form class="d-flex flex-dr" [formGroup]="pdFiltersFormGroup">
+  <!-- <ng-container *ngFor="let filter of pdFilters"> -->
+    <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"
+            [placeholder]="pdFilter.placeholder"
+            [value]="pdFilter.defaultValue"
+            (input)="inputChange()"
+          />
+        </mat-form-field>
+      </ng-container>
+    </div>
+  <!-- </ng-container> -->
+</form>

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

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PdFiltersComponent } from './pd-filters.component';
+
+describe('PdFiltersComponent', () => {
+  let component: PdFiltersComponent;
+  let fixture: ComponentFixture<PdFiltersComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PdFiltersComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PdFiltersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

+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",
+  styleUrls: ["./pd-filters.component.scss"],
+})
+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)
+    console.log('filter group values',this.pdFiltersFormGroup.value)
+  }
+}