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
AMPATH · Feb 5, 2024 · 412c24f · 412c24f
1 parent 7724e60
commit 412c24f
Show file tree

Hide file tree

Showing 10 changed files with 164 additions and 61 deletions.
diff --git a/...p/clinic-dashboard/general/pre-appointment-outreach/pre-appointment-outreach.component.ts b/...p/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
@@ -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
@@ -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}&currentView=${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}&currentView=${params.currentView}`
       )
       .pipe(
         catchError((err: any) => {

diff --git a/...-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-base/plhiv-ncd-v2-report-base.component.html b/...-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-base/plhiv-ncd-v2-report-base.component.html
@@ -6,7 +6,7 @@ <h4 class="component-title text-success">
   <span><i class="fa fa-spinner fa-spin"></i>Loading...</span>
 </div>
 
-<p-tabView>
+<p-tabView (onChange)="handleChange($event)">
   <div>
     <p-tabPanel header="Monthly" leftIcon="fa-calendar-o">
       <report-filters
@@ -20,7 +20,7 @@ <h4 class="component-title text-success">
     </p-tabPanel>
     <p-tabPanel header="Range" leftIcon="fa-calendar-o">
       <report-filters
-        [enabledControls]="'datesControl'"
+        [enabledControls]="enabledControls2"
         [(startDate)]="startDate"
         [(endDate)]="endDate"
         (generateReport)="generateReport()"

diff --git a/...re-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-base/plhiv-ncd-v2-report-base.component.ts b/...re-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-base/plhiv-ncd-v2-report-base.component.ts
@@ -16,29 +16,22 @@ export class PlhivNcdV2ReportBaseComponent implements OnInit {
   public selectedIndicators = [];
   public plhivNcdV2ReportSummaryData: any = [];
   public columnDefs: any = [];
-  public reportName = 'PLHIV_NCD_V2 Report';
+  public reportName = 'PLHIV_NCD_Report';
   public currentView = 'monthly';
   public currentViewBelow = 'pdf';
   public month: string;
-  public year: number;
-  public quarter: string;
-  public eDate: string;
-  public sDate: string;
 
   public statusError = false;
   public errorMessage = '';
   public showInfoMessage = false;
   public isLoading = false;
   public reportHead: any;
   public enabledControls = 'monthControl';
+  public enabledControls2 = 'datesControl';
   public pinnedBottomRowData: any = [];
   public _month: string;
-  public _year: string;
-  public _quarter: string;
-  public _sDate: string;
-  public _eDate: string;
   public isReleased = true;
-
+  public v: any = [0, 1];
   public _locationUuids: any = [];
   public get locationUuids(): Array<string> {
     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/...-v2-report/plhiv-ncd-v2-report-patient-list/plhiv-ncd-v2-report-patient-list.component.ts b/...-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/...e-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-view/plhiv-ncd-v2-report-view.component.css b/...e-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/...-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-view/plhiv-ncd-v2-report-view.component.html b/...-lib/plhiv-ncd-v2-report/plhiv-ncd-v2-report-view/plhiv-ncd-v2-report-view.component.html
@@ -1,22 +1,22 @@
 <div class="wrapper">
-  <div *ngIf="reportDetails" class="panel panel-info">
+  <div *ngIf="grid" class="panel panel-info">
     <div class="panel-heading" style="min-height: 50px !important">
       <strong class="text-primary">
         <span class="fa fa-file-pdf-o"> </span>
         {{ reportDetails.reportName }}
         <div class="btn-group pull-right">
           <button
             class="btn btn-primary"
-            (click)="downloadCSV()"
-            [disabled]="!gridOptions"
+            (click)="downloadPdf()"
+            [disabled]="grid.length < 0"
           >
-            <i class="fa fa-download"> </i> Export to CSV
+            <i class="fa fa-download"> </i> Download Pdf
           </button>
         </div>
       </strong>
     </div>
     <div>
-      <div class="row" *ngIf="reportDetails.displayTabularFilters">
+      <div class="row" *ngIf="grid.length > 0">
         <div class="col-md-5 col-sm-12 padding">
           <label for="">Search :</label>
           <div class="input-group">
@@ -50,12 +50,13 @@
         id="contentToConvert"
         class="panel-body table-content-class"
         style="background-color: #ffffff"
+        *ngIf="grid.length > 0"
       >
         <ng-container *ngFor="let grand of grid">
           <table>
             <colgroup>
-              <col [style.width.px]="indicatorHeaderwidth * 2" />
-              <col />
+              <col span="1" class="indicator-col-class" />
+              <col span="15" class="" />
             </colgroup>
             <thead class="header">
               <tr>