code review

openmrs · Oct 8, 2024 · cab9b91 · cab9b91
1 parent 259faab
commit cab9b91
Show file tree

Hide file tree

Showing 10 changed files with 170 additions and 101 deletions.
diff --git a/.../esm-patient-chart-app/src/clinical-views/components/clinical-views-summary.component.tsx b/.../esm-patient-chart-app/src/clinical-views/components/clinical-views-summary.component.tsx
@@ -0,0 +1,46 @@
+import React, { useMemo } from 'react';
+import { useConfig } from '@openmrs/esm-framework';
+import { getEncounterTileColumns } from '../../encounter-tile/utils/encounter-tile-config-builder';
+import {
+  MemoizedEncounterTile,
+  type EncounterTileColumn,
+} from '../../encounter-tile/components/encounter-tile.component';
+
+interface OverviewListProps {
+  patientUuid: string;
+}
+
+interface TileDefinition {
+  title: string;
+  columns: Array<EncounterTileColumn>;
+}
+
+const ClinicalViewsSummary: React.FC<OverviewListProps> = ({ patientUuid }) => {
+  const config = useConfig();
+  const tilesDefinitions = config.tilesDefinitions;
+
+  const tilesData = useMemo(
+    () =>
+      tilesDefinitions?.map((tile: any) => ({
+        title: tile.tileHeader,
+        columns: getEncounterTileColumns(tile),
+      })),
+    [tilesDefinitions],
+  );
+
+  return (
+    <>
+      {tilesData?.length > 0 &&
+        tilesData?.map((tile, index) => (
+          <MemoizedEncounterTile
+            key={index}
+            patientUuid={patientUuid}
+            columns={tile.columns}
+            headerTitle={tile.title}
+          />
+        ))}
+    </>
+  );
+};
+
+export default ClinicalViewsSummary;
diff --git a/...esm-patient-chart-app/src/clinical-views/components/patient-program-summary.component.tsx b/...esm-patient-chart-app/src/clinical-views/components/patient-program-summary.component.tsx
diff --git a/packages/esm-patient-chart-app/src/config-schema.ts b/packages/esm-patient-chart-app/src/config-schema.ts
@@ -133,6 +133,11 @@ export const esmPatientChartSchema = {
     _default: '/etl-latest/etl/patient/',
     _description: 'Custom URL to load resources required for showing recommended visit types',
   },
+  trueConceptUuid: {
+    _type: Type.String,
+    _description: 'Default concept uuid for true in forms',
+    _default: 'cf82933b-3f3f-45e7-a5ab-5d31aaee3da3',
+  },
 };
 
 export interface ChartConfig {
@@ -161,4 +166,5 @@ export interface ChartConfig {
     uuid: string;
   }>;
   visitDiagnosisConceptUuid: string;
+  trueConceptUuid: string;
 }
diff --git a/packages/esm-patient-chart-app/src/encounter-tile/components/encounter-tile.component.tsx b/packages/esm-patient-chart-app/src/encounter-tile/components/encounter-tile.component.tsx
@@ -15,7 +15,7 @@ export interface EncounterTileColumn {
 }
 export interface EncounterTileProps {
   patientUuid: string;
-  columns: Array<any>;
+  columns: Array<EncounterTileColumn>;
   headerTitle: string;
 }
 
@@ -24,23 +24,25 @@ export interface EncounterValuesTileProps {
   column: any;
 }
 
-export const EncounterTile: React.FC<EncounterTileProps> = ({ patientUuid, columns, headerTitle }) => {
+const EncounterTile: React.FC<EncounterTileProps> = ({ patientUuid, columns, headerTitle }) => {
   return (
-    // <>
-    <Tile className={styles.tile}>
-      <div className={styles.cardTitle}>
-        <h4 className={styles.title}> {headerTitle} </h4>
-      </div>
-      <Column className={styles.columnContainer}>
-        {columns.map((column, ind) => (
-          <EncounterValuesTile key={ind} patientUuid={patientUuid} column={column} />
-        ))}
-      </Column>
-    </Tile>
-    // </>
+    <div className={styles.tileContainer}>
+      <Tile className={styles.tile}>
+        <div className={styles.cardTitle}>
+          <h4 className={styles.title}> {headerTitle} </h4>
+        </div>
+        <Column className={styles.columnContainer}>
+          {columns.map((column, ind) => (
+            <EncounterValuesTile key={ind} patientUuid={patientUuid} column={column} />
+          ))}
+        </Column>
+      </Tile>
+    </div>
   );
 };
 
+export const MemoizedEncounterTile = React.memo(EncounterTile);
+
 export const EncounterValuesTile: React.FC<EncounterValuesTileProps> = ({ patientUuid, column }) => {
   const { lastEncounter, isLoading, error, isValidating } = useLastEncounter(patientUuid, column.encounterUuid);
 

diff --git a/packages/esm-patient-chart-app/src/encounter-tile/components/tile.scss b/packages/esm-patient-chart-app/src/encounter-tile/components/tile.scss
@@ -21,7 +21,6 @@
 }
 
 .tile {
-  height: 35%;
   padding: layout.$spacing-01 0 layout.$spacing-05 layout.$spacing-05;
   margin: layout.$spacing-03;
   border: solid 1px #e0e0e0;
@@ -91,3 +90,7 @@
   flex-direction: row;
   flex: 1;
 }
+
+.tileContainer {
+  height: fit-content;
+}
diff --git a/packages/esm-patient-chart-app/src/encounter-tile/hooks/useLastEncounter.ts b/packages/esm-patient-chart-app/src/encounter-tile/hooks/useLastEncounter.ts
@@ -16,6 +16,7 @@ export function useLastEncounter(patientUuid: string, encounterType: string) {
   const { data, error, isValidating } = useSWR<{ data: { results: Array<OpenmrsEncounter> } }, Error>(
     endpointUrl,
     openmrsFetch,
+    { dedupingInterval: 5000, refreshInterval: 0 },
   );
 
   return {

diff --git a/packages/esm-patient-chart-app/src/encounter-tile/utils/encounter-tile-config-builder.ts b/packages/esm-patient-chart-app/src/encounter-tile/utils/encounter-tile-config-builder.ts
@@ -49,45 +49,54 @@ export const getEncounterTileColumns = (tileDefinition: MenuCardProps) => {
     encounterUuid: column.encounterType,
     hasSummary: column.hasSummary || false,
     getObsValue: (encounter) => {
+      let obsValue;
+
       if (column.conceptMappings) {
         const concept = getConceptFromMappings(encounter, column.conceptMappings);
-        return getObsFromEncounter(
+        obsValue = getObsFromEncounter(
           encounter,
           concept,
           column.isDate,
           column.isTrueFalseConcept,
           column.type,
           column.fallbackConcepts,
         );
+      } else {
+        obsValue = getObsFromEncounter(encounter, column.concept, column.isDate);
       }
-      return getObsFromEncounter(encounter, column.concept, column.isDate);
+      return typeof obsValue === 'string' ? obsValue : obsValue?.name?.name || '--';
     },
     getSummaryObsValue: column.hasSummary
       ? (encounter) => {
+          let summaryValue;
+
           if (column.summaryConcept.secondaryConcept) {
             const primaryConceptType = getObsFromEncounter(encounter, column.summaryConcept.primaryConcept);
             if (primaryConceptType !== '--') {
-              return primaryConceptType;
+              summaryValue = primaryConceptType;
             } else {
-              return getObsFromEncounter(encounter, column.summaryConcept.secondaryConcept);
+              summaryValue = getObsFromEncounter(encounter, column.summaryConcept.secondaryConcept);
             }
-          }
-
-          if (column.summaryConcept.hasCalculatedDate) {
+          } else if (column.summaryConcept.hasCalculatedDate) {
             const primaryDate = getObsFromEncounter(
               encounter,
               column.summaryConcept.primaryConcept,
               column.summaryConcept.isDate,
             );
 
-            if (primaryDate !== '--') {
-              return calculateDateDifferenceInDate(primaryDate);
+            if (typeof primaryDate === 'string' && primaryDate !== '--') {
+              summaryValue = calculateDateDifferenceInDate(primaryDate);
             } else {
-              return '--';
+              summaryValue = '--';
             }
+          } else {
+            summaryValue = getObsFromEncounter(
+              encounter,
+              column.summaryConcept.primaryConcept,
+              column.summaryConcept.isDate,
+            );
           }
-
-          return getObsFromEncounter(encounter, column.summaryConcept.primaryConcept, column.summaryConcept.isDate);
+          return typeof summaryValue === 'string' ? summaryValue : summaryValue?.name?.name || '--';
         }
       : null,
   }));