From f991c2252501c7479c30580c969b4e634fe047b1 Mon Sep 17 00:00:00 2001
From: 5Amogh <amoghavarsh@navadhiti.com>
Date: Tue, 11 Oct 2022 19:37:39 +0530
Subject: [PATCH] Issue #RRHE-48 Customized configurable filters for VAM
---
.../program-datasets.component.html | 3 ++
.../program-datasets.component.ts | 42 ++++++++++++++++++-
.../program-dashboard.module.ts | 8 +++-
.../pd-filters/pd-filters.component.html | 22 ++++++++++
.../pd-filters/pd-filters.component.scss | 0
.../pd-filters/pd-filters.component.spec.ts | 25 +++++++++++
.../shared/pd-filters/pd-filters.component.ts | 33 +++++++++++++++
7 files changed, 131 insertions(+), 2 deletions(-)
create mode 100644 src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.html
create mode 100644 src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.scss
create mode 100644 src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.spec.ts
create mode 100644 src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.ts
diff --git a/src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.html b/src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.html
index 173fa6ff6c..ad08e64e26 100644
--- a/src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.html
+++ b/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">
diff --git a/src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.ts b/src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.ts
index 8448cdeced..792bb8f8b3 100644
--- a/src/app/client/src/app/modules/program-dashboard/components/program-datasets/program-datasets.component.ts
+++ b/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 => {
diff --git a/src/app/client/src/app/modules/program-dashboard/program-dashboard.module.ts b/src/app/client/src/app/modules/program-dashboard/program-dashboard.module.ts
index a60e3acafd..ed597ee679 100644
--- a/src/app/client/src/app/modules/program-dashboard/program-dashboard.module.ts
+++ b/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,
diff --git a/src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.html b/src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.html
new file mode 100644
index 0000000000..37808aa6b5
--- /dev/null
+++ b/src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.html
@@ -0,0 +1,22 @@
+<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>
diff --git a/src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.scss b/src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.spec.ts b/src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.spec.ts
new file mode 100644
index 0000000000..333e228c58
--- /dev/null
+++ b/src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.spec.ts
@@ -0,0 +1,25 @@
+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();
+ });
+});
diff --git a/src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.ts b/src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.ts
new file mode 100644
index 0000000000..f708b3bde4
--- /dev/null
+++ b/src/app/client/src/app/modules/program-dashboard/shared/pd-filters/pd-filters.component.ts
@@ -0,0 +1,33 @@
+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)
+ }
+}
--
GitLab