Merge branch 'main' of https://github.com/openmrs/openmrs-esm-patient…

…-management into fix/metrics
openmrs · Sep 18, 2024 · bc68943 · bc68943
2 parents d2bb04d + 6822458
commit bc68943
Show file tree

Hide file tree

Showing 16 changed files with 137 additions and 239 deletions.
diff --git a/.husky/pre-push b/.husky/pre-push
@@ -3,4 +3,4 @@
 
 set -e  # die on error
 
-# yarn verify
+yarn verify
diff --git a/packages/esm-ward-app/src/hooks/useMotherAndChildren.ts b/packages/esm-ward-app/src/hooks/useMotherAndChildren.ts
@@ -1,10 +1,4 @@
-import {
-  makeUrl,
-  restBaseUrl,
-  useOpenmrsFetchAll,
-  useOpenmrsInfinite,
-  useOpenmrsPagination,
-} from '@openmrs/esm-framework';
+import { makeUrl, restBaseUrl, useOpenmrsFetchAll } from '@openmrs/esm-framework';
 import { type MotherAndChildren } from '../types';
 
 export interface MothersAndChildrenSearchCriteria {
@@ -44,7 +38,7 @@ export function useMotherAndChildren(
     requireChildBornDuringMothersActiveVisit?.toString() ?? 'false',
   );
   rep && url.searchParams.append('v', rep);
-  return useOpenmrsPagination<MotherAndChildren>(fetch ? url : null, 50);
+  return useOpenmrsFetchAll<MotherAndChildren>(fetch ? url : null);
 }
 
 function makeUrlUrl(path: string) {

diff --git a/packages/esm-ward-app/src/hooks/useWardPatientGrouping.ts b/packages/esm-ward-app/src/hooks/useWardPatientGrouping.ts
@@ -14,13 +14,15 @@ export function useWardPatientGrouping() {
   const { inpatientRequests } = inpatientRequestResponse;
 
   const groupings = useMemo(() => {
-    if(!admissionLocationResponse.isLoading && !inpatientAdmissionResponse.isLoading && !inpatientRequestResponse.isLoading) {
-      return createAndGetWardPatientGrouping(inpatientAdmissions, admissionLocation, inpatientRequests);
-    } else {
-      return {};
-    }
-  }, [admissionLocation, inpatientAdmissions]) as ReturnType<typeof createAndGetWardPatientGrouping>;
-
+    const isDataLoaded=!admissionLocationResponse.isLoading && !inpatientAdmissionResponse.isLoading && !inpatientRequestResponse.isLoading;
+     if(isDataLoaded) {
+      return {...createAndGetWardPatientGrouping(inpatientAdmissions, admissionLocation, inpatientRequests),isDataLoading:false}
+     } else {
+       return {
+        isDataLoading:true
+       };
+     }
+  }, [admissionLocation, inpatientAdmissions]) as (ReturnType<typeof createAndGetWardPatientGrouping> & {isDataLoading:boolean});
   return {
     ...groupings,
     admissionLocationResponse,

diff --git a/packages/esm-ward-app/src/ward-patient-card/card-rows/mother-child-row.extension.tsx b/packages/esm-ward-app/src/ward-patient-card/card-rows/mother-child-row.extension.tsx
@@ -52,7 +52,7 @@ const MotherChildRowExtension: WardPatientCard = ({ patient }) => {
 
   if (isLoadingChildrenData || isLoadingMotherData) {
     return (
-      <div className={wardPatientCardStyles.wardPatientCardRow}>
+      <div className={classNames(styles.motherOrBabyRow, wardPatientCardStyles.wardPatientCardRow)}>
         <WardPatientSkeletonText />
       </div>
     );

diff --git a/packages/esm-ward-app/src/ward-patient-card/card-rows/mother-child-row.scss b/packages/esm-ward-app/src/ward-patient-card/card-rows/mother-child-row.scss
@@ -14,7 +14,6 @@
 .motherOrBabyIcon {
   padding: layout.$spacing-02;
   border-radius: 50%;
-  fill: $ui-03;
   background-color: $grey-2;
   margin-right: layout.$spacing-03;
 }
diff --git a/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-coded-obs-tags.tsx b/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-coded-obs-tags.tsx
@@ -1,12 +1,13 @@
 import { Tag } from '@carbon/react';
 import { type OpenmrsResource, type Patient, type Visit } from '@openmrs/esm-framework';
-import React from 'react';
+import React, { type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { type ColoredObsTagsCardRowConfigObject } from '../../config-schema-extension-colored-obs-tags';
 import { useObs } from '../../hooks/useObs';
 import styles from '../ward-patient-card.scss';
 import WardPatientSkeletonText from './ward-pateint-skeleton-text';
-import { obsCustomRepresentation, useConceptToTagColorMap } from './ward-patient-obs.resource';
+import { getObsEncounterString, obsCustomRepresentation, useConceptToTagColorMap } from './ward-patient-obs.resource';
+import WardPatientResponsiveTooltip from './ward-patient-responsive-tooltip';
 
 interface WardPatientCodedObsTagsProps {
   config: ColoredObsTagsCardRowConfigObject;
@@ -44,31 +45,47 @@ const WardPatientCodedObsTags: React.FC<WardPatientCodedObsTagsProps> = ({ confi
 
     const summaryLabelToDisplay = summaryLabel != null ? t(summaryLabel) : obsToDisplay?.[0]?.concept?.display;
 
-    const obsNodes = obsToDisplay?.map((o) => {
-      const { display, uuid } = o.value as OpenmrsResource;
+    // for each obs configured to be displayed with a color, we create a tag for it
+    // for other obs not configured, we create a single summary tag for all of them.
+    const summaryTagTooltipText: ReactNode[] = [];
+    const coloredOpsTags = obsToDisplay
+      ?.map((o) => {
+        const { display, uuid } = o.value as OpenmrsResource;
 
-      const color = conceptToTagColorMap?.get(uuid);
-      if (color) {
-        return (
-          <Tag type={color} key={`ward-coded-obs-tag-${o.uuid}`}>
-            {display}
-          </Tag>
-        );
-      } else {
-        return null;
-      }
-    });
+        const color = conceptToTagColorMap?.get(uuid);
+        if (color) {
+          return (
+            <WardPatientResponsiveTooltip tooltipContent={getObsEncounterString(o, t)}>
+              <Tag type={color} key={`ward-coded-obs-tag-${o.uuid}`}>
+                {display}
+              </Tag>
+            </WardPatientResponsiveTooltip>
+          );
+        } else {
+          summaryTagTooltipText.push(
+            <div key={uuid}>
+              {display} ({getObsEncounterString(o, t)})
+            </div>,
+          );
+          return null;
+        }
+      })
+      .filter((o) => o != null);
 
-    const obsWithNoTagCount = obsNodes.filter((o) => o == null).length;
-    if (obsNodes?.length > 0 || obsWithNoTagCount > 0) {
+    if (coloredOpsTags?.length > 0 || summaryTagTooltipText.length > 0) {
       return (
         <div className={styles.wardPatientCardRow}>
           <span className={styles.wardPatientObsLabel}>
-            {obsNodes}
-            {obsWithNoTagCount > 0 ? (
-              <Tag type={summaryLabelColor}>
-                {t('countItems', '{{count}} {{item}}', { count: obsWithNoTagCount, item: summaryLabelToDisplay })}
-              </Tag>
+            {coloredOpsTags}
+            {summaryTagTooltipText.length > 0 ? (
+              <WardPatientResponsiveTooltip tooltipContent={summaryTagTooltipText}>
+                <Tag type={summaryLabelColor}>
+                  {t('countItems', '{{count}} {{item}}', {
+                    count: summaryTagTooltipText.length,
+                    item: summaryLabelToDisplay,
+                  })}
+                </Tag>
+              </WardPatientResponsiveTooltip>
             ) : null}
           </span>
         </div>

diff --git a/...ages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-coded-obs-tags.tsx.orig b/...ages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-coded-obs-tags.tsx.orig
diff --git a/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-obs.resource.ts b/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-obs.resource.ts
@@ -1,11 +1,13 @@
 import { restBaseUrl, useOpenmrsFetchAll, type Concept } from '@openmrs/esm-framework';
 import { type TagConfigObject } from '../../config-schema-extension-colored-obs-tags';
+import { type Observation } from '../../types';
+import { type TFunction } from 'i18next';
 
 // prettier-ignore
 export const obsCustomRepresentation = 
   'custom:(uuid,display,obsDatetime,value,' + 
     'concept:(uuid,display),' + 
-    'encounter:(uuid,display,' + 
+    'encounter:(uuid,display,encounterType,encounterDatetime,' + 
       'visit:(uuid,display)))';
 
 //  get the setMembers of a concept set
@@ -44,3 +46,11 @@ export function useConceptToTagColorMap(tags: Array<TagConfigObject>) {
 
   return conceptToTagColorMap;
 }
+
+export function getObsEncounterString(obs: Observation, t: TFunction) {
+  return t('encounterDisplay', '{{encounterType}} {{encounterDate}}', {
+    encounterType: obs.encounter.encounterType.display,
+    encounterDate: new Date(obs.encounter.encounterDatetime).toLocaleDateString(),
+    interpolation: { escapeValue: false },
+  });
+}
diff --git a/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-obs.tsx b/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-obs.tsx
@@ -1,12 +1,13 @@
-import { SkeletonText } from '@carbon/react';
-import { type OpenmrsResource, type Patient, translateFrom, type Visit } from '@openmrs/esm-framework';
+import { SkeletonText, Toggletip, ToggletipButton, ToggletipContent } from '@carbon/react';
+import { Information } from '@carbon/react/icons';
+import { type OpenmrsResource, type Patient, type Visit } from '@openmrs/esm-framework';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { type ObsElementDefinition } from '../../config-schema';
 import { useObs } from '../../hooks/useObs';
 import styles from '../ward-patient-card.scss';
-import { moduleName } from '../../constant';
-import { obsCustomRepresentation } from './ward-patient-obs.resource';
+import { getObsEncounterString, obsCustomRepresentation } from './ward-patient-obs.resource';
+import WardPatientResponsiveTooltip from './ward-patient-responsive-tooltip';
 
 export interface WardPatientObsProps {
   config: ObsElementDefinition;
@@ -37,7 +38,13 @@ const WardPatientObs: React.FC<WardPatientObsProps> = ({ config, patient, visit
     const obsNodes = obsToDisplay?.map((o) => {
       const { value } = o;
       const display: any = (value as OpenmrsResource)?.display ?? o.value;
-      return <span key={o.uuid}> {display} </span>;
+
+      const tooltipContent = getObsEncounterString(o, t);
+      return (
+        <WardPatientResponsiveTooltip key={o.uuid} tooltipContent={tooltipContent}>
+          <span title={tooltipContent}>{display} </span>
+        </WardPatientResponsiveTooltip>
+      );
     });
 
     if (obsNodes?.length > 0) {

diff --git a/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-responsive-tooltip.tsx b/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-responsive-tooltip.tsx
@@ -0,0 +1,32 @@
+import { Toggletip, ToggletipButton, ToggletipContent, Tooltip } from '@carbon/react';
+import { isDesktop, useLayoutType } from '@openmrs/esm-framework';
+import React, { type ReactNode } from 'react';
+import styles from '../ward-patient-card.scss';
+
+interface WardPatientResponsiveTooltipProps {
+  children: ReactNode;
+  tooltipContent: ReactNode;
+}
+
+/**
+ * This component acts as a Tooltip on desktop and a Toggletip on mobile.
+ */
+const WardPatientResponsiveTooltip: React.FC<WardPatientResponsiveTooltipProps> = ({ children, tooltipContent }) => {
+  const layout = useLayoutType();
+  if (isDesktop(layout)) {
+    return (
+      <Tooltip description={tooltipContent} className={styles.responsiveTooltip}>
+        {children}
+      </Tooltip>
+    );
+  } else {
+    return (
+      <Toggletip className={styles.responsiveTooltip}>
+        <ToggletipButton>{children}</ToggletipButton>
+        <ToggletipContent>{tooltipContent}</ToggletipContent>
+      </Toggletip>
+    );
+  }
+};
+
+export default WardPatientResponsiveTooltip;
diff --git a/packages/esm-ward-app/src/ward-patient-card/ward-patient-card.scss b/packages/esm-ward-app/src/ward-patient-card/ward-patient-card.scss
@@ -70,6 +70,7 @@
 
 .wardPatientCardExtensionSlot {
   display: none;
+  width: 100%;
 
   &:has(div:not(:empty)) {
     display: block;
@@ -157,6 +158,13 @@
   padding-right: layout.$spacing-02;
 }
 
+.responsiveTooltip {
+  z-index: 2;
+  & :global(.cds--tag) {
+    border: 0;
+  }
+}
+
 .dotSeparatedChildren {
   display: flex;
   flex-wrap: wrap;

diff --git a/packages/esm-ward-app/src/ward-view-header/ward-metrics.component.tsx b/packages/esm-ward-app/src/ward-view-header/ward-metrics.component.tsx
@@ -20,7 +20,7 @@ const WardMetrics = () => {
   const {t} = useTranslation();
   const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
   const wardPatientGroup = useAppContext<WardPatientGroupDetails>('ward-patients-group');
-
+  const isMetricsDataLoading=wardPatientGroup?.isDataLoading ?? true;
   if (error) {
     showNotification({
       kind: 'error',
@@ -37,7 +37,7 @@ const WardMetrics = () => {
             <WardMetric
               metricName={t(`metrics.names.${wardMetric.name}`,wardMetric.defaultTranslation)}
               metricValue={t(`metrics.values.${wardMetric.name}`,wardMetricValues[wardMetric.key],{metricValue:wardMetricValues[wardMetric.key]})}
-              isLoading={!!isLoading}
+              isLoading={!!isLoading || isMetricsDataLoading}
               key={wardMetric.key}
             />
           );
@@ -48,8 +48,8 @@ const WardMetrics = () => {
       {isBedManagementModuleInstalled && (
         <WardMetric
           metricName={t(`metrics.names.pendingOut`,"Pending Out")}
-          metricValue={error ? '--' : wardPatientGroup?.wardPatientPendingCount.toString() ?? '--'}
-          isLoading={!wardPatientGroup}
+          metricValue={error ? '--' : wardPatientGroup?.wardPatientPendingCount?.toString() ?? '--'}
+          isLoading={isMetricsDataLoading}
           key="pending"
         />
       )}