diff --git a/src/app/hiv-care-lib/hiv-care-lib.module.ts b/src/app/hiv-care-lib/hiv-care-lib.module.ts index a8c45d4f9..549a3771f 100644 --- a/src/app/hiv-care-lib/hiv-care-lib.module.ts +++ b/src/app/hiv-care-lib/hiv-care-lib.module.ts @@ -148,6 +148,7 @@ import { AhdMonthlyReportPatientlistComponent } from './ahd-monthly-report/ahd-m import { PlhivNcdV2ReportBaseComponent } from './plhiv-ncd-v2-report/plhiv-ncd-v2-report-base/plhiv-ncd-v2-report-base.component'; import { PlhivNcdV2ReportPatientListComponent } from './plhiv-ncd-v2-report/plhiv-ncd-v2-report-patient-list/plhiv-ncd-v2-report-patient-list.component'; import { PlhivNcdV2ReportViewComponent } from './plhiv-ncd-v2-report/plhiv-ncd-v2-report-view/plhiv-ncd-v2-report-view.component'; +import { Moh731AirComponent } from './moh-731-report/moh-731-air.components'; @NgModule({ imports: [ @@ -184,6 +185,7 @@ import { PlhivNcdV2ReportViewComponent } from './plhiv-ncd-v2-report/plhiv-ncd-v exports: [ Moh731TabularComponent, Moh731PatientListComponent, + Moh731AirComponent, Moh731ReportFiltersComponent, DateTimePickerModule, EtlApi, @@ -258,6 +260,7 @@ import { PlhivNcdV2ReportViewComponent } from './plhiv-ncd-v2-report/plhiv-ncd-v Moh731PatientListComponent, Moh731ReportBaseComponent, Moh731ReportFiltersComponent, + Moh731AirComponent, MOHReportComponent, HivSummaryIndicatorBaseComponent, HivSummaryTabularComponent, diff --git a/src/app/hiv-care-lib/moh-731-report/moh-731-air.component.css b/src/app/hiv-care-lib/moh-731-report/moh-731-air.component.css new file mode 100644 index 000000000..a0f759707 --- /dev/null +++ b/src/app/hiv-care-lib/moh-731-report/moh-731-air.component.css @@ -0,0 +1,109 @@ +/* moh-731-air.component.scss */ +.panel { + margin: 20px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); +} + +.panel-heading { + background-color: #f5f5f5; + border-color: #ddd; + + .panel-title { + margin-top: 7px; + + .date-range { + font-size: 12px; + color: #777; + margin-left: 10px; + } + } +} + +.table { + margin-bottom: 0; + + th.sortable { + cursor: pointer; + user-select: none; + + &:hover { + background-color: #f5f5f5; + } + + .glyphicon { + font-size: 12px; + margin-left: 5px; + color: #777; + } + } +} + +.label { + display: inline-block; + min-width: 60px; + padding: 5px 10px; + border-radius: 3px; + text-align: center; +} + +.sortable { + cursor: pointer; +} + +.label-success { + background-color: #5cb85c; + color: white; +} + +.label-warning { + background-color: #f0ad4e; + color: white; +} + +.label-danger { + background-color: #d9534f; + color: white; +} + +.label-default { + background-color: #777; + color: white; +} + +.loader { + padding: 20px; + text-align: center; + color: #666; + + .fa-spinner { + margin-right: 10px; + } +} + +.clickable { + cursor: pointer; + + &:hover { + background-color: #f5f5f5; + } +} + +.released-indicator { + color: #5cb85c; + + .fa-check-circle { + margin-right: 5px; + } +} + +@media (max-width: 768px) { + .panel-heading { + .panel-title { + margin-bottom: 10px; + } + + .input-group { + margin-top: 10px; + } + } +} diff --git a/src/app/hiv-care-lib/moh-731-report/moh-731-air.component.html b/src/app/hiv-care-lib/moh-731-report/moh-731-air.component.html new file mode 100644 index 000000000..30115c358 --- /dev/null +++ b/src/app/hiv-care-lib/moh-731-report/moh-731-air.component.html @@ -0,0 +1,122 @@ + +
+
+ +
+
+
+
+

+ AIR View + + ({{ startDate | date }} - {{ endDate | date }}) + +

+
+
+
+ + + + +
+
+
+
+ +
+ +
+ Loading air data... +
+ + +
+ + + + + + + + + + + + + + + +
+ {{ def.label }} + +
+ {{ item[def.name] }} + + {{ item[def.name] }} + + + + + + Synced + + +
+ No data found +
+
+
+ +
+
+
Showing {{ filterData().length }} entries
+
+ + Released + +
+
+
+
diff --git a/src/app/hiv-care-lib/moh-731-report/moh-731-air.components.ts b/src/app/hiv-care-lib/moh-731-report/moh-731-air.components.ts new file mode 100644 index 000000000..472df6765 --- /dev/null +++ b/src/app/hiv-care-lib/moh-731-report/moh-731-air.components.ts @@ -0,0 +1,126 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; + +interface TableData { + name: string; + age: number; + city: string; + status: string; +} + +@Component({ + selector: 'moh-731-air', + templateUrl: './moh-731-air.component.html', + styleUrls: ['./moh-731-air.component.css'] +}) +export class Moh731AirComponent implements OnInit { + @Input() rowData: any[] = []; + @Input() combinedData: any[] = []; + @Input() sectionDefs: any[] = []; + @Input() startDate: Date; + @Input() endDate: Date; + @Input() isReleased: boolean; + @Output() indicatorSelected = new EventEmitter(); + + sortField = 'name'; + sortDirection: 'asc' | 'desc' = 'asc'; + currentPage = 1; + itemsPerPage = 10; + searchTerm = ''; + isLoading = false; + filteredData: any[] = []; + + ngOnInit() { + this.processData(); + } + + public processDataToKHIS() { + console.log('process air data', this.combinedData); + } + + processData() { + this.isLoading = true; + try { + if (this.rowData && this.sectionDefs) { + this.filteredData = [...this.rowData]; + } + } catch (error) { + console.error('Error processing data:', error); + } finally { + this.isLoading = false; + } + } + + filterData(): any[] { + let filtered = [...this.filteredData]; + + // Apply search filter if searchTerm exists + if (this.searchTerm) { + const searchLower = this.searchTerm.toLowerCase(); + filtered = filtered.filter((item) => { + return this.sectionDefs.some((def) => { + const value = item[def.name]; + return value && value.toString().toLowerCase().includes(searchLower); + }); + }); + } + + // Apply sorting + filtered.sort((a, b) => { + const aValue = a[this.sortField]; + const bValue = b[this.sortField]; + + if (typeof aValue === 'string') { + const comparison = aValue.localeCompare(bValue); + return this.sortDirection === 'asc' ? comparison : -comparison; + } else { + const comparison = aValue - bValue; + return this.sortDirection === 'asc' ? comparison : -comparison; + } + }); + + return filtered; + } + + sortBy(field: string) { + if (this.sortField === field) { + this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc'; + } else { + this.sortField = field; + this.sortDirection = 'asc'; + } + } + + getSortIcon(field: string): string { + if (this.sortField !== field) { + return 'fa fa-sort'; + } + return this.sortDirection === 'asc' ? 'fa fa-sort-asc' : 'fa fa-sort-desc'; + } + + getStatusClass(status: string): string { + switch (status ? status.toLowerCase() : '') { + case 'synced': + return 'label-success'; + case 'pending': + return 'label-warning'; + case 'error': + return 'label-danger'; + default: + return 'label-default'; + } + } + + retrySync(item: TableData) { + // Add logic to retry syncing + console.log('Retry sync for:', item); + } + + resolveError(item: TableData) { + // Add logic to resolve the error + console.log('Resolve error for:', item); + } + + onIndicatorClick(indicator: any) { + this.indicatorSelected.emit(indicator); + } +} diff --git a/src/app/hiv-care-lib/moh-731-report/moh-731-report-base.component.html b/src/app/hiv-care-lib/moh-731-report/moh-731-report-base.component.html index a45f7977e..66ff8c65a 100644 --- a/src/app/hiv-care-lib/moh-731-report/moh-731-report-base.component.html +++ b/src/app/hiv-care-lib/moh-731-report/moh-731-report-base.component.html @@ -67,7 +67,32 @@

[startDate]="startDate" [endDate]="endDate" [isReleased]="isReleased" + (combinedDataEmitted)="handleCombinedData($event)" > + + + + + diff --git a/src/app/hiv-care-lib/moh-731-report/moh-731-report-base.component.ts b/src/app/hiv-care-lib/moh-731-report/moh-731-report-base.component.ts index 77acac409..021bbcaef 100644 --- a/src/app/hiv-care-lib/moh-731-report/moh-731-report-base.component.ts +++ b/src/app/hiv-care-lib/moh-731-report/moh-731-report-base.component.ts @@ -6,6 +6,13 @@ import { Router, ActivatedRoute, Params } from '@angular/router'; import * as Moment from 'moment'; import * as _ from 'lodash'; +interface TableData { + month: string; + year: number; + facility: string; + status: string; +} + import { Moh731ResourceService } from '../../etl-api/moh-731-resource.service'; @Component({ @@ -17,15 +24,19 @@ export class Moh731ReportBaseComponent implements OnInit { @ViewChild('mohPdf') public pdfView: any; public data = []; + // public airData = []; public sectionsDef = []; public statusError = false; public isReleased = true; + public combinedData: any[]; + public showLocationsControl = false; public showIsAggregateControl = false; public showPatientList = false; public showTabularView = true; + public showAIRView = true; public showPatientListLoader = false; public isLoadingReport = false; public showInfoMessage = false; @@ -97,6 +108,47 @@ export class Moh731ReportBaseComponent implements OnInit { this._isAggregated = v; } + public airData: any[] = [ + { + month: 'January', + year: 202403, + facility: 'MTRH Module 1', + status: 'synced' + }, + { + month: 'February', + year: 202403, + facility: 'MTRH Module 2', + status: 'pending' + }, + { + month: 'March', + year: 202403, + facility: 'MTRH Module 3', + status: 'inactive' + }, + { month: 'April', year: 202403, facility: 'Pionner', status: 'synced' }, + { month: 'May', year: 202403, facility: 'Mosoriot', status: 'pending' }, + { month: 'June', year: 202403, facility: 'MTRH Rafiki', status: 'error' }, + { month: 'July', year: 202403, facility: 'Tranzoia', status: 'synced' }, + { + month: 'August', + year: 202403, + facility: 'Pionneer district', + status: 'pending' + }, + { month: 'September', year: 202403, facility: 'Iten', status: 'error' }, + { month: 'October', year: 202403, facility: 'Iten mnch', status: 'synced' } + ]; + + public airSectionsDef = [ + { name: 'month', label: 'Month' }, + { name: 'year', label: 'Year' }, + { name: 'facility', label: 'Facility' }, + { name: 'status', label: 'Status', type: 'status' }, + { name: 'action', label: 'Action', type: 'action' } + ]; + constructor( public moh731Resource: Moh731ResourceService, public route: ActivatedRoute, @@ -146,6 +198,12 @@ export class Moh731ReportBaseComponent implements OnInit { ); } + public handleCombinedData(data: any[]) { + setTimeout(() => { + this.combinedData = data; + }); + } + public onIndicatorSelected(indicator: any) { this.currentIndicator = ''; setTimeout(() => { @@ -170,6 +228,7 @@ export class Moh731ReportBaseComponent implements OnInit { this.currentIndicator ) { this.showTabularView = false; + this.showAIRView = false; this.showPatientListLoader = true; const params = { startDate: this.toDateString(this.startDate), @@ -190,6 +249,7 @@ export class Moh731ReportBaseComponent implements OnInit { public toggleMohTables() { this.showPatientList = false; this.showTabularView = true; + this.showAIRView = true; this.showPatientListLoader = false; this.currentIndicator = ''; this.patientListLocationUuids = []; @@ -211,6 +271,10 @@ export class Moh731ReportBaseComponent implements OnInit { if (event.index === 1) { this.currentView = 'tabular'; } + + if (event.index === 2) { + this.currentView = 'air'; + } } private getSelectedLocations(locationUuids: any): string { diff --git a/src/app/hiv-care-lib/moh-731-report/moh-731-tabular.component.ts b/src/app/hiv-care-lib/moh-731-report/moh-731-tabular.component.ts index 7ef3ad13d..014f78d12 100644 --- a/src/app/hiv-care-lib/moh-731-report/moh-731-tabular.component.ts +++ b/src/app/hiv-care-lib/moh-731-report/moh-731-tabular.component.ts @@ -5,6 +5,7 @@ import { Input, Output, ViewChild, + AfterViewInit, EventEmitter } from '@angular/core'; import { ColDef, ColGroupDef } from 'ag-grid'; @@ -16,7 +17,7 @@ import { KhisAirModuleResourceService } from 'src/app/etl-api/khis-air-resource. templateUrl: 'moh-731-tabular.component.html' // changeDetection: ChangeDetectionStrategy.OnPush }) -export class Moh731TabularComponent implements OnInit { +export class Moh731TabularComponent implements OnInit, AfterViewInit { public gridOptions: any = { columnDefs: [] }; @@ -28,6 +29,9 @@ export class Moh731TabularComponent implements OnInit { @Input('rowData') public data: Array = []; + @Output() combinedDataEmitted = new EventEmitter(); + public airData = []; + @Input('startDate') public startDate: any; @@ -58,6 +62,10 @@ export class Moh731TabularComponent implements OnInit { this.setCellSelection(); } + public ngAfterViewInit() { + this.getCombinedData(); + } + public setColumns(sectionsData: Array) { const defs = []; defs.push({ @@ -136,18 +144,22 @@ export class Moh731TabularComponent implements OnInit { // } }; }); - - this.khisAirModuleResourceService - .postMOH731ExtractedData(combinedData) - .subscribe( - (response: any) => { - console.log('API Response:', response); - // Handle successful response here - }, - (error: any) => { - console.error('API Error:', error); - } - ); + this.combinedDataEmitted.emit(combinedData); + this.airData.push(combinedData); + + return combinedData; + + // this.khisAirModuleResourceService + // .postMOH731ExtractedData(combinedData) + // .subscribe( + // (response: any) => { + // console.log('API Response:', response); + // // Handle successful response here + // }, + // (error: any) => { + // console.error('API Error:', error); + // } + // ); } } }