From 412c24f0fcd94a2e29f2cdee28bc9e21862cf367 Mon Sep 17 00:00:00 2001 From: henrykorir Date: Wed, 24 Jan 2024 11:54:03 +0300 Subject: [PATCH] POC-524-v2: Beautified the report UI and added report indicator filters POC-524-v2: Updated the report to be generated monthly and by filter POC-524-v2: Beautified the report UI and added report filters POC-544-v2: Added Report Filter by indicator POC-563:Added sms outcome and comments column (#1703) * added sms outcome column to pre-appoiment line list * POC-563: added sms outcome and comments column on pre-appointment linelist POC-635 : Patient relationship bug (#1706) * Patient relationship bug * Patient relationship bug --- .../pre-appointment-outreach.component.ts | 10 +++ .../plhiv-ncd-v2-report.component.ts | 16 ++++- .../etl-api/plhiv-ncd-v2-resource.service.ts | 4 +- .../plhiv-ncd-v2-report-base.component.html | 4 +- .../plhiv-ncd-v2-report-base.component.ts | 71 ++++++++++++------- ...iv-ncd-v2-report-patient-list.component.ts | 1 + .../plhiv-ncd-v2-report-view.component.css | 31 +++++++- .../plhiv-ncd-v2-report-view.component.html | 15 ++-- .../plhiv-ncd-v2-report-view.component.ts | 68 ++++++++++++------ .../locator-pretty-viewer.component.ts | 5 +- 10 files changed, 164 insertions(+), 61 deletions(-) diff --git a/src/app/clinic-dashboard/general/pre-appointment-outreach/pre-appointment-outreach.component.ts b/src/app/clinic-dashboard/general/pre-appointment-outreach/pre-appointment-outreach.component.ts index 776052c60..adc07d908 100644 --- a/src/app/clinic-dashboard/general/pre-appointment-outreach/pre-appointment-outreach.component.ts +++ b/src/app/clinic-dashboard/general/pre-appointment-outreach/pre-appointment-outreach.component.ts @@ -223,6 +223,16 @@ export class PreAppointmentOutreachComponent implements OnInit { width: 100, field: 'number_of_failed_phone_attempts' }, + { + headerName: 'Comments ', + width: 100, + field: 'comments' + }, + { + headerName: 'SMS outcome ', + width: 100, + field: 'sms_delivery_status' + }, { headerName: 'Contact Reached', width: 100, diff --git a/src/app/data-analytics-dashboard/hiv/plhiv-ncd-v2-report/plhiv-ncd-v2-report.component.ts b/src/app/data-analytics-dashboard/hiv/plhiv-ncd-v2-report/plhiv-ncd-v2-report.component.ts index 7eb5bc410..c7a037988 100644 --- a/src/app/data-analytics-dashboard/hiv/plhiv-ncd-v2-report/plhiv-ncd-v2-report.component.ts +++ b/src/app/data-analytics-dashboard/hiv/plhiv-ncd-v2-report/plhiv-ncd-v2-report.component.ts @@ -19,6 +19,7 @@ export class PlhivNcdV2ReportComponent extends PlhivNcdV2ReportBaseComponent implements OnInit { public enabledControls = 'monthControl,locationControl'; + public enabledControls2 = 'datesControl,locationControl'; constructor( public router: Router, public route: ActivatedRoute, @@ -40,7 +41,11 @@ export class PlhivNcdV2ReportComponent 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') + month: Moment(this._month).endOf('month').format('YYYY-MM-DD'), + startDate: Moment(this._startDate).format('YYYY-MM-DD'), + endDate: Moment(this._month).endOf('month').format('YYYY-MM-DD'), + reportName: this.reportName, + currentView: this.currentView }; super.generateReport(); super.showDraftReportAlert(this._month); @@ -52,7 +57,11 @@ export class PlhivNcdV2ReportComponent public storeParamsInUrl() { const state = { locationUuids: this.getSelectedLocations(this.locationUuids), - month: Moment(this._month).endOf('month').format('YYYY-MM-DD') + month: Moment(this._month).endOf('month').format('YYYY-MM-DD'), + startDate: Moment(this._startDate).format('YYYY-MM-DD'), + endDate: Moment(this._month).endOf('month').format('YYYY-MM-DD'), + reportName: this.reportName, + currentView: this.currentView }; const stateUrl = rison.encode(state); const path = this.router.parseUrl(this.location.path()); @@ -70,6 +79,9 @@ export class PlhivNcdV2ReportComponent const state = rison.decode(path.queryParams['state']); this.month = state.month; this.locationUuids = state.locations; + this.startDate = state.startDate; + this.endDate = state.endDate; + this.currentView = state.currentView; } if (path.queryParams['state']) { diff --git a/src/app/etl-api/plhiv-ncd-v2-resource.service.ts b/src/app/etl-api/plhiv-ncd-v2-resource.service.ts index 949d99204..996812066 100644 --- a/src/app/etl-api/plhiv-ncd-v2-resource.service.ts +++ b/src/app/etl-api/plhiv-ncd-v2-resource.service.ts @@ -21,7 +21,7 @@ export class PlhivNcdV2ResourceService { // tslint:disable-next-line: max-line-length return this.http .get( - `${this.url}plhiv-ncd-v2-monthly-report?endDate=${params.month}&locationUuids=${params.locationUuids}` + `${this.url}plhiv-ncd-v2-monthly-report?startDate=${params.startDate}&endDate=${params.month}&locationUuids=${params.locationUuids}¤tView=${params.currentView}` ) .pipe( catchError((err: any) => { @@ -41,7 +41,7 @@ export class PlhivNcdV2ResourceService { // tslint:disable-next-line: max-line-length return this.http .get( - `${this.url}plhiv-ncd-v2-monthly-report-patient-list?endDate=${params.month}&locationUuids=${params.locationUuids}&indicators=${params.indicators}` + `${this.url}plhiv-ncd-v2-monthly-report-patient-list?startDate=${params.startDate}&endDate=${params.month}&locationUuids=${params.locationUuids}&indicators=${params.indicators}¤tView=${params.currentView}` ) .pipe( catchError((err: any) => { diff --git a/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-base/plhiv-ncd-v2-report-base.component.html b/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-base/plhiv-ncd-v2-report-base.component.html index 1dab077a7..6392b7ccb 100644 --- a/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-base/plhiv-ncd-v2-report-base.component.html +++ b/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-base/plhiv-ncd-v2-report-base.component.html @@ -6,7 +6,7 @@

Loading... - +
{ return this._locationUuids; @@ -54,6 +47,24 @@ export class PlhivNcdV2ReportBaseComponent implements OnInit { this._locationUuids = locationUuids; } + public _startDate: Date = Moment().subtract(1, 'M').endOf('month').toDate(); + public get startDate(): Date { + return this._startDate; + } + + public set startDate(v: Date) { + this._startDate = v; + } + + public _endDate: Date = Moment().subtract(1, 'M').endOf('month').toDate(); + public get endDate(): Date { + return this._endDate; + } + + public set endDate(v: Date) { + this._endDate = v; + } + constructor( public router: Router, public route: ActivatedRoute, @@ -71,18 +82,27 @@ export class PlhivNcdV2ReportBaseComponent implements OnInit { }); } + public handleChange($event: any) { + this.plhivNcdV2ReportSummaryData = []; + this.columnDefs = []; + if ($event.index === 0) { + this.currentView = 'monthly'; + } else { + this.currentView = 'range'; + } + this._month = Moment().subtract(1, 'M').endOf('month').format('YYYY-MM-DD'); + this._startDate = Moment().subtract(1, 'M').endOf('month').toDate(); + this._endDate = Moment().subtract(1, 'M').endOf('month').toDate(); + } + ngOnInit() {} public onMonthChange(value): any { this._month = Moment(value).endOf('month').format('YYYY-MM-DD'); - } - - onYearSelected(year: string) { - this._year = year; - } - - onQuarterSelected(quarter: string) { - this._quarter = quarter; + this._endDate = new Date(Moment(value).endOf('month').format('YYYY-MM-DD')); + this._startDate = new Date( + Moment(value).endOf('month').format('YYYY-MM-DD') + ); } public generateReport(): any { @@ -96,12 +116,11 @@ export class PlhivNcdV2ReportBaseComponent implements OnInit { public storeParamsInUrl(param) { this.params = { locationUuids: param, - _month: Moment(this._month).endOf('month').format('YYYY-MM-DD'), month: Moment(this._month).endOf('month').format('YYYY-MM-DD'), - year: this._year, - quarter: this._quarter, + startDate: Moment(this._startDate).format('YYYY-MM-DD'), + endDate: Moment(this._month).endOf('month').format('YYYY-MM-DD'), reportName: this.reportName, - _date: Moment(this._month).format('DD-MM-YYYY') + currentView: this.currentView }; this.router.navigate([], { relativeTo: this.route, @@ -165,10 +184,12 @@ export class PlhivNcdV2ReportBaseComponent implements OnInit { queryParams: { indicators: $event.indicator, indicatorHeader: $event.headerName, - eDate: this._eDate, month: this._month, - locationUuids: $event.location, - currentView: this.currentView + startDate: Moment(this._startDate).format('YYYY-MM-DD'), + endDate: Moment(this._month).endOf('month').format('YYYY-MM-DD'), + reportName: this.reportName, + currentView: this.currentView, + locationUuids: $event.location } }); } diff --git a/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-patient-list/plhiv-ncd-v2-report-patient-list.component.ts b/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-patient-list/plhiv-ncd-v2-report-patient-list.component.ts index dae70e92e..1fc249f5f 100644 --- a/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-patient-list/plhiv-ncd-v2-report-patient-list.component.ts +++ b/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-patient-list/plhiv-ncd-v2-report-patient-list.component.ts @@ -30,6 +30,7 @@ export class PlhivNcdV2ReportPatientListComponent implements OnInit { ngOnInit() { this.route.queryParams.subscribe( (params) => { + console.log('params-p[ist: ', params); if (params && params.month) { this.params = params; this.selectedIndicator = params.indicatorHeader; diff --git a/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-view/plhiv-ncd-v2-report-view.component.css b/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-view/plhiv-ncd-v2-report-view.component.css index 4b9f71830..b56353251 100644 --- a/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-view/plhiv-ncd-v2-report-view.component.css +++ b/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-view/plhiv-ncd-v2-report-view.component.css @@ -16,7 +16,7 @@ table { td { padding: 10px; border: 1px solid #090909; - text-align: centre; + text-align: center; font-size: auto; } @@ -106,3 +106,32 @@ th { .bg-black { background-color: #272626; } + +.indicator-col-class { + width: 460px !important; + min-width: 460px !important; +} +.indicator-col-class > td { + text-align: left !important; + font-size: 16px !important; +} + +td:first-child { + text-align: left; +} + +tr:first-child { + text-align: center; +} +.data-left { + background-color: #2cc16a; +} + +@media all and (min-width: 768px) and (max-width: 1024px) { + .indicator-col-class { + font-size: 30px !important; + } +} + +@media all and (min-width: 480px) and (max-width: 768px) { +} diff --git a/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-view/plhiv-ncd-v2-report-view.component.html b/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-view/plhiv-ncd-v2-report-view.component.html index 31d0beee8..7eb7bd72e 100644 --- a/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-view/plhiv-ncd-v2-report-view.component.html +++ b/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-view/plhiv-ncd-v2-report-view.component.html @@ -1,5 +1,5 @@
-
+
@@ -7,16 +7,16 @@
-
+
@@ -50,12 +50,13 @@ id="contentToConvert" class="panel-body table-content-class" style="background-color: #ffffff" + *ngIf="grid.length > 0" > - - + + diff --git a/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-view/plhiv-ncd-v2-report-view.component.ts b/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-view/plhiv-ncd-v2-report-view.component.ts index de8cab828..ef40e6ca6 100644 --- a/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-view/plhiv-ncd-v2-report-view.component.ts +++ b/src/app/hiv-care-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-view/plhiv-ncd-v2-report-view.component.ts @@ -11,7 +11,8 @@ import * as pdfMake from 'pdfmake/build/pdfmake.js'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; import { PDFDocumentProxy } from 'pdfjs-dist'; import { Observable, Subject } from 'rxjs'; -import { first } from 'rxjs/operators'; +import { first, take } from 'rxjs/operators'; +import * as _ from 'lodash'; @Component({ selector: 'app-plhiv-ncd-v2-report-view', @@ -51,7 +52,7 @@ export class PlhivNcdV2ReportViewComponent implements OnInit, OnChanges { @Output() public CellSelection = new EventEmitter(); - constructor() {} + constructor(private domSanitizer: DomSanitizer) {} ngOnInit() { this.grid = []; @@ -72,6 +73,7 @@ export class PlhivNcdV2ReportViewComponent implements OnInit, OnChanges { return sections[index].indicators[2].indicator.length; } private processData(sections: Array, data: Array) { + this.headers = []; this.maxGridSpan = data.length; for (let i = 0; i < sections.length; i++) { const maxColSpan = this.calculateMaxColSpan(sections, i); @@ -82,6 +84,11 @@ export class PlhivNcdV2ReportViewComponent implements OnInit, OnChanges { value: sections[i].sectionTitle, children: [] }; + const header = { + label: sections[i].sectionTitle, + value: i + }; + this.headers.push(header); for (let j = 0; j < data.length; j++) { const location = data[j]['location_uuid']; let k = 0; @@ -323,9 +330,9 @@ export class PlhivNcdV2ReportViewComponent implements OnInit, OnChanges { } public searchIndicator() { - this.setColumns(this.sectionDefs); + this.processData(this.sectionDefs, this.sectionIndicatorsValues); if (this.selectedResult.length > 0) { - this.gridOptions.columnDefs.forEach((object) => { + this.grid.forEach((object) => { const make = { headerName: '', children: [] @@ -343,24 +350,24 @@ export class PlhivNcdV2ReportViewComponent implements OnInit, OnChanges { this.test.push(make); } }); - this.gridOptions.columnDefs = []; - this.gridOptions.columnDefs = this.test; + this.grid = []; + this.grid = this.test; this.test = []; } else { - this.setColumns(this.sectionDefs); + this.processData(this.sectionDefs, this.sectionIndicatorsValues); } } public selectedIndicators(cell) { - // this.setColumns(this.sectionDefs); - // const value = []; - // if (this.selectedIndicatorsList.length) { - // this.selectedIndicatorsList.forEach((indicator) => { - // value.push(this.gridOptions.columnDefs[indicator]); - // }); - // this.gridOptions.columnDefs = value; - // } else { - // this.setColumns(this.sectionDefs); - // } + this.processData(this.sectionDefs, this.sectionIndicatorsValues); + const value = []; + if (this.selectedIndicatorsList.length) { + this.selectedIndicatorsList.forEach((indicator) => { + value.push(this.grid[indicator]); + }); + this.grid = value; + } else { + this.processData(this.sectionDefs, this.sectionIndicatorsValues); + } } public downloadCSV() { const title = this.reportHeader; @@ -453,6 +460,26 @@ export class PlhivNcdV2ReportViewComponent implements OnInit, OnChanges { document.body.removeChild(link); } + public downloadPdf() { + this.pdfvalue = this.bodyValues(); + this.generatePdf() + .pipe(take(1)) + .subscribe( + (pdf) => { + this.pdfSrc = pdf.pdfSrc; + this.pdfMakeProxy = pdf.pdfProxy; + this.securedUrl = this.domSanitizer.bypassSecurityTrustResourceUrl( + this.pdfSrc + ); + this.isBusy = false; + this.downloadPdfView(); + }, + (err) => { + this.errorFlag = true; + this.isBusy = false; + } + ); + } public generatePdf(): Observable { const width: any = ['*', '*']; this.sectionIndicatorsValues.forEach(() => { @@ -554,10 +581,10 @@ export class PlhivNcdV2ReportViewComponent implements OnInit, OnChanges { public bodyValues() { const body = []; // let span = 0; - this.gridOptions.columnDefs.forEach((columnDefs) => { + this.grid.forEach((columnDefs) => { const head = []; const part = { - text: columnDefs.headerName, + text: columnDefs.value, style: 'tableHeader', fillColor: '#337ab7', colSpan: this.sectionIndicatorsValues.length + this.pdfWidth, @@ -573,7 +600,7 @@ export class PlhivNcdV2ReportViewComponent implements OnInit, OnChanges { alignment: 'left' }; sec.push(test); - col.value.forEach((element) => { + col.children.forEach((element) => { const value = { text: element.value, style: 'subheader', @@ -591,6 +618,7 @@ export class PlhivNcdV2ReportViewComponent implements OnInit, OnChanges { body.push(sec); }); }); + console.log('body==> ', body); return body; } diff --git a/src/app/patient-dashboard/common/formentry/locator-pretty-viewer/locator-pretty-viewer.component.ts b/src/app/patient-dashboard/common/formentry/locator-pretty-viewer/locator-pretty-viewer.component.ts index ff1eaaf41..1e95dc6ea 100644 --- a/src/app/patient-dashboard/common/formentry/locator-pretty-viewer/locator-pretty-viewer.component.ts +++ b/src/app/patient-dashboard/common/formentry/locator-pretty-viewer/locator-pretty-viewer.component.ts @@ -31,7 +31,6 @@ export class LocatorPrettyViewerComponent implements OnInit { } } this.mappedAttributes = this.generateMappings(this.data); - console.log('mappedAttributes', this.mappedAttributes); } generateMappings(data: any) { @@ -46,7 +45,9 @@ export class LocatorPrettyViewerComponent implements OnInit { for (const item of data[type]) { if (type === 'obs' && item.concept.name.display) { mappings[type][item.concept.name.display] = - item.value.display || item.value; + item.value && item.value.display + ? item.value.display + : item.value || null; } else if (type === 'attributes' && item.display) { const parts = item.display.split('='); if (parts.length === 2) {