POC-475c (#1720)

* suggested traker changes * added patient tracker * POC-475: added patient tracker * Viral Load and Treatment Changes Tracker * interface * ahd-events * ahd-events * ahd-summary * ahd-summary * ahd-events * ahd-events * ahd-events * ahd-events * ahd-events * ahd-summary * ahd-summary * ahd-events * ahd events * POC-475: added AHD component to summary * suggested traker changes * added patient tracker * POC-475: added an array * isheiactive * suggested traker changes * POC-475: added patient tracker * uniquedates * display dates * start and end dates * UI * conditional rendering * POC-475: modified columns under patient tracker modified columns under patient tracker * Update package-lock.json * Update hiv-summary-historical.component.html --------- Co-authored-by: Faith Kamau <[email protected]> Co-authored-by: Alfred Mutai <[email protected]>
AMPATH · Feb 15, 2024 · 7dd85a0 · 7dd85a0
1 parent 753a241
commit 7dd85a0
Show file tree

Hide file tree

Showing 13 changed files with 458 additions and 17 deletions.
diff --git a/...app/patient-dashboard/hiv/hiv-summary/ahd-events-summary/ahd-events-summary.component.css b/...app/patient-dashboard/hiv/hiv-summary/ahd-events-summary/ahd-events-summary.component.css
@@ -0,0 +1,23 @@
+/* .header {
+    display: flex;
+    justify-content: space-between;
+} */
+/* 
+table tbody tr,
+table thead tr{
+    display: flex;
+    flex-direction: row;
+    
+} */
+table tbody tr td,
+table thead tr th {
+  width: 50%;
+}
+
+/* table tbody tr td{
+    background-color: blue;
+} */
+
+/* .ahd {
+    max-width: 100%;
+} */
diff --git a/...pp/patient-dashboard/hiv/hiv-summary/ahd-events-summary/ahd-events-summary.component.html b/...pp/patient-dashboard/hiv/hiv-summary/ahd-events-summary/ahd-events-summary.component.html
@@ -0,0 +1,134 @@
+<div>
+  <div>
+    <table
+      class="table table-hover table-striped table-responsive"
+      *ngIf="tbStartdates.length > 0 || tbEnddates[0] != null"
+    >
+      <thead>
+        <tr>
+          <th>TB Treatment Start Date</th>
+          <th>TB Treatment End Date</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td *ngFor="let startDate of tbStartdates">
+            {{ startDate | date: 'dd-MM-yyyy' }}
+          </td>
+          <td *ngFor="let endDate of tbEnddates">
+            {{ endDate | date: 'dd-MM-yyyy' }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <table
+      class="table table-hover table-striped table-responsive"
+      *ngIf="
+        cryptococallStartDates[0] != null || cryptococallEndDates[0] != null
+      "
+    >
+      <thead>
+        <tr>
+          <th>Cryptococcal Treatment Start Date :</th>
+          <th>Cryptococcal Treatment End Date :</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td *ngFor="let startDate of cryptococallStartDates">
+            {{ startDate | date: 'dd-MM-yyyy' }}
+          </td>
+          <td *ngFor="let endDate of cryptococallEndDates">
+            {{ endDate | date: 'dd-MM-yyyy' }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <table
+      class="table table-hover table-striped table-responsive"
+      *ngIf="pcpStartDates[0] != null || pcpEndDates[0] != null"
+    >
+      <thead>
+        <tr>
+          <th>PCP Treatment Start Date</th>
+          <th>PCP Treatment End Date</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td *ngFor="let startDate of pcpStartDates">
+            {{ startDate | date: 'dd-MM-yyyy' }}
+          </td>
+          <td *ngFor="let endDate of pcpEndDates">
+            {{ endDate | date: 'dd-MM-yyyy' }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <table
+      class="table table-hover table-striped table-responsive"
+      *ngIf="
+        toxoplasmosisStartDates[0] != null || toxoplasmosisEndDates[0] != null
+      "
+    >
+      <thead>
+        <tr>
+          <th>Toxoplasmosis Treatment Start Date</th>
+          <th>Toxoplasmosis Treatment End Date</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td *ngFor="let startDate of toxoplasmosisStartDates">
+            {{ startDate | date: 'dd-MM-yyyy' }}
+          </td>
+          <td *ngFor="let startDate of toxoplasmosisEndDates">
+            {{ endDate | date: 'dd-MM-yyyy' }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+
+    <table
+      class="table table-hover table-striped table-responsive"
+      *ngIf="kaposisStartDates[0] != null || kaposisEndDates[0] != null"
+    >
+      <thead>
+        <tr>
+          <th>Kaposis Sarcoma Treatment Start Date</th>
+          <th>Kaposis Sarcoma Treatment End Date</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td *ngFor="let startDate of kaposisStartDates">
+            {{ startDate | date: 'dd-MM-yyyy' }}
+          </td>
+          <td *ngFor="let startDate of kaposisEndDates">
+            {{ endDate | date: 'dd-MM-yyyy' }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <div
+    *ngIf="
+      kaposisStartDates[0] == null &&
+      kaposisEndDates[0] == null &&
+      toxoplasmosisStartDates[0] == null &&
+      toxoplasmosisEndDates[0] == null &&
+      tbStartdates.length == 0 &&
+      tbEnddates[0] == null &&
+      pcpStartDates[0] == null &&
+      pcpEndDates[0] == null &&
+      cryptococallStartDates[0] == null &&
+      cryptococallEndDates[0] == null
+    "
+  >
+    <p class="mx-8">NO AHD SUMMARY DATA!</p>
+  </div>
+</div>
diff --git a/...patient-dashboard/hiv/hiv-summary/ahd-events-summary/ahd-events-summary.component.spec.ts b/...patient-dashboard/hiv/hiv-summary/ahd-events-summary/ahd-events-summary.component.spec.ts
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AhdEventsSummaryComponent } from './ahd-events-summary.component';
+
+describe('AhdEventsSummaryComponent', () => {
+  let component: AhdEventsSummaryComponent;
+  let fixture: ComponentFixture<AhdEventsSummaryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [AhdEventsSummaryComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AhdEventsSummaryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/patient-dashboard/hiv/hiv-summary/ahd-events-summary/ahd-events-summary.component.ts b/src/app/patient-dashboard/hiv/hiv-summary/ahd-events-summary/ahd-events-summary.component.ts
@@ -0,0 +1,174 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { HivSummaryService } from '../hiv-summary.service';
+import { PatientService } from 'src/app/patient-dashboard/services/patient.service';
+import { Patient } from 'src/app/models/patient.model';
+import { Subscription } from 'rxjs';
+import * as _ from 'lodash';
+
+@Component({
+  selector: 'app-ahd-events-summary',
+  templateUrl: './ahd-events-summary.component.html',
+  styleUrls: ['./ahd-events-summary.component.css']
+})
+export class AhdEventsSummaryComponent implements OnInit, OnDestroy {
+  public patientUuid: any;
+  public patient: Patient;
+  isHEIActive = false;
+  public hasError = false;
+  public dataLoaded = false;
+  public toxoplasmosisStartDates: any = [];
+  public toxoplasmosisEndDates: any = [];
+  public kaposisStartDates: any = [];
+  public kaposisEndDates: any = [];
+  public pcpStartDates: any = [];
+  public pcpEndDates: any = [];
+  public tbStartdates: any = [];
+  public tbEnddates: any = [];
+  public cryptococallStartDates: any = [];
+  public cryptococallEndDates: any = [];
+  public ahdSummary: any = [];
+  public ahd: any;
+  public subscription: Subscription[] = [];
+  public errors: any = [];
+  public loadingAhdSummary = false;
+  public isLoading: boolean;
+
+  constructor(
+    private patientService: PatientService,
+    private hivSummaryService: HivSummaryService,
+    private datePipe: DatePipe
+  ) {}
+
+  public ngOnInit() {
+    this.loadPatient();
+  }
+
+  public ngOnDestroy() {
+    this.subscription.forEach((sub) => {
+      sub.unsubscribe();
+    });
+  }
+
+  public loadPatient() {
+    this.loadingAhdSummary = true;
+    const patientSub = this.patientService.currentlyLoadedPatient.subscribe(
+      (patient) => {
+        if (patient) {
+          this.patient = patient;
+          this.patientUuid = this.patient.person.uuid;
+          this.getPatientHivSummary(this.patientUuid);
+        }
+        this.loadingAhdSummary = false;
+      },
+      (err) => {
+        this.loadingAhdSummary = true;
+        this.errors.push({
+          id: 'patient',
+          message: 'error fetching patient'
+        });
+      }
+    );
+    this.subscription.push(patientSub);
+  }
+
+  public getPatientHivSummary(patientUuid) {
+    const summary = this.hivSummaryService
+      .getHivSummary(patientUuid, 0, 1, false, this.isHEIActive)
+      .subscribe((data) => {
+        // this.tbStartdates = [];
+        if (data) {
+          console.log('tb-history: ', data);
+          if (data.length > 0) {
+            for (const result in data) {
+              if (data.hasOwnProperty(result)) {
+                const hivsum = data[result];
+                console.log('hivsum.tb_tx_start_date: ', hivsum);
+                if (
+                  hivsum.tb_tx_start_date !== null &&
+                  !this.tbStartdates.includes(hivsum.tb_tx_start_date)
+                ) {
+                  this.tbStartdates = [
+                    ...this.tbStartdates,
+                    hivsum.tb_tx_start_date
+                  ];
+                }
+
+                if (!this.tbEnddates.includes(hivsum.tb_tx_end_date)) {
+                  this.tbEnddates.push(hivsum.tb_tx_end_date);
+                }
+
+                if (
+                  !this.cryptococallStartDates.includes(
+                    hivsum.cm_treatment_start_date
+                  )
+                ) {
+                  this.cryptococallStartDates.push(
+                    hivsum.cm_treatment_start_date
+                  );
+                }
+
+                if (
+                  !this.cryptococallEndDates.includes(
+                    hivsum.cm_treatment_end_date
+                  )
+                ) {
+                  this.cryptococallEndDates.push(hivsum.cm_treatment_end_date);
+                }
+
+                if (
+                  !this.pcpStartDates.includes(
+                    hivsum.pcp_prophylaxis_start_date
+                  )
+                ) {
+                  this.pcpStartDates.push(hivsum.pcp_prophylaxis_start_date);
+                }
+
+                if (
+                  !this.pcpEndDates.includes(hivsum.pcp_prophylaxis_end_date)
+                ) {
+                  this.pcpEndDates.push(hivsum.pcp_prophylaxis_end_date);
+                }
+
+                if (
+                  !this.toxoplasmosisStartDates.includes(
+                    hivsum.toxoplasmosis_start_date
+                  )
+                ) {
+                  this.toxoplasmosisStartDates.push(
+                    hivsum.toxoplasmosis_start_date
+                  );
+                }
+
+                if (
+                  !this.toxoplasmosisEndDates.includes(
+                    hivsum.toxoplasmosis_end_date
+                  )
+                ) {
+                  this.toxoplasmosisEndDates.push(
+                    hivsum.toxoplasmosis_end_date
+                  );
+                }
+
+                if (
+                  !this.kaposisStartDates.includes(hivsum.kaposis_start_date)
+                ) {
+                  this.kaposisStartDates.push(hivsum.kaposis_start_date);
+                }
+
+                if (!this.kaposisEndDates.includes(hivsum.kaposis_end_date)) {
+                  this.kaposisEndDates.push(hivsum.kaposis_end_date);
+                }
+              }
+            }
+          }
+          console.log('stx: ', this.tbStartdates);
+          console.log('tbend: ', this.tbEnddates);
+          this.isLoading = false;
+        } else {
+          this.dataLoaded = true;
+        }
+      });
+    this.subscription.push(summary);
+  }
+}