(feat)O3-4206-Add ability to view patient diagnoses and active conditions

src/diagnoses/diagnoses.component.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { usePatientDiagnosis } from './diagnoses.resource';
+import { InlineLoading, InlineNotification, Tile, Tag } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+type PatientDiagnosesProps = {
+  patientUuid: string;
+  encounterUuid: string;
+};
+
+const PatientDiagnoses: React.FC<PatientDiagnosesProps> = ({ encounterUuid, patientUuid }) => {
+  const { diagnoses, isLoading, error } = usePatientDiagnosis(encounterUuid);
+  const { t } = useTranslation();
+
+  if (isLoading)
+    return (
+      <InlineLoading
+        iconDescription="Loading"
+        description={t('loadingDiagnoses', 'Loading Diagnoses ...')}
+        status="active"
+      />
+    );
+
+  if (error)
+    return <InlineNotification kind="error" subtitle={t('diagnosesError', 'Error loading diagnoses')} lowContrast />;
+  return (
+    <Tile>
+      <strong>
+        {t('diagnoses', 'Diagnoses')} {diagnoses.length ? `(${diagnoses.length})` : ''}
+      </strong>
+      <br />
+      {diagnoses.length ? (
+        <>
+          {diagnoses.map(({ text }, index) => (
+            <Tag key={index}>{text}</Tag>
+          ))}
+        </>
+      ) : (
+        <>{t('noDiagnoses', 'No diagnoses found')}</>
+      )}
+    </Tile>
+  );
+};
+
+export default PatientDiagnoses;

src/diagnoses/diagnoses.resource.ts

@@ -0,0 +1,30 @@
+import { type FetchResponse, openmrsFetch, restBaseUrl, type Visit } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+
+export const usePatientDiagnosis = (encounterUuid: string) => {
+  const customRepresentation =
+    'custom:(uuid,display,visit:(uuid,patient,encounters:(uuid,diagnoses:(uuid,display,certainty,diagnosis:(coded:(uuid,display))),encounterDatetime,encounterType:(uuid,display),encounterProviders:(uuid,display,provider:(uuid,person:(uuid,display)))),location:(uuid,name,display),visitType:(uuid,name,display),startDatetime,stopDatetime))';
+  const url = `${restBaseUrl}/encounter/${encounterUuid}?v=${customRepresentation}`;
+
+  const { data, error, isLoading } = useSWR<FetchResponse<{ visit: Visit }>>(url, openmrsFetch);
+
+  const diagnoses = useMemo(() => {
+    return (
+      data?.data?.visit?.encounters?.flatMap(
+        (encounter) =>
+          encounter.diagnoses.map((diagnosis) => ({
+            id: diagnosis.diagnosis.coded.uuid,
+            text: diagnosis.display,
+            certainty: diagnosis.certainty,
+          })) || [],
+      ) || []
+    );
+  }, [data]);
+
+  const confirmedDiagnoses = useMemo(() => {
+    return diagnoses.filter((diagnosis) => diagnosis.certainty === 'CONFIRMED');
+  }, [diagnoses]);
+
+  return { error, isLoading, diagnoses: confirmedDiagnoses as Array<{ id: string; text: string; certainty: string }> };
+};

src/index.ts

@@ -4,6 +4,7 @@ import dispensingComponent from './dispensing.component';
 import dispensingLinkComponent from './dispensing-link.component';
 import dispensingDashboardComponent from './dashboard/dispensing-dashboard.component';
 import dispensingLinkHomepageComponent from './dashboard/dispensing-dashboard-link.component';
+import PatientDiagnoses from './diagnoses/diagnoses.component';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -20,6 +21,8 @@ export const dispensingLink = getSyncLifecycle(dispensingLinkComponent, options)
 
 export const dispensingDashboard = getSyncLifecycle(dispensingDashboardComponent, options);
 
+export const patientDiagnoses = getSyncLifecycle(PatientDiagnoses, options);
+
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }

src/prescriptions/prescription-details.component.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DataTableSkeleton, Tag, Tile } from '@carbon/react';
 import { WarningFilled } from '@carbon/react/icons';
-import { type PatientUuid, useConfig, UserHasAccess } from '@openmrs/esm-framework';
+import { ExtensionSlot, type PatientUuid, useConfig, UserHasAccess } from '@openmrs/esm-framework';
 import { type PharmacyConfig } from '../config-schema';
 import { type AllergyIntolerance, type MedicationRequest, MedicationRequestCombinedStatus } from '../types';
 import { computeMedicationRequestCombinedStatus, getConceptCodingDisplay } from '../utils';
@@ -67,6 +67,11 @@ const PrescriptionDetails: React.FC<{
   return (
     <div className={styles.prescriptionContainer}>
       {isAllergiesLoading && <DataTableSkeleton role="progressbar" />}
+      <ExtensionSlot
+        style={{ width: '100%' }}
+        name="prescription-diagnoses-slot"
+        state={{ patientUuid, encounterUuid }}
+      />
       {!isAllergiesLoading && (
         <Tile className={styles.allergiesTile}>
           <div className={styles.allergiesContent}>

src/routes.json

@@ -19,6 +19,13 @@
       "online": true,
       "offline": true
     },
+    {
+      "name": "patient-diagnoses",
+      "slot": "prescription-diagnoses-slot",
+      "component": "patientDiagnoses",
+      "online": true,
+      "offline": true
+    },
     {
       "name": "dispensing-dashboard",
       "slot": "dispensing-dashboard-slot",