Fixup

packages/esm-ward-app/src/config-schema.ts

@@ -1,5 +1,4 @@
-import { type ConfigSchema, type PersonAddress, Type, validators } from '@openmrs/esm-framework';
-import { type PatientCardElementType, patientCardElementTypes } from './types';
+import { type ConfigSchema, Type, validators } from '@openmrs/esm-framework';
 
 export const defaultWardPatientCard: WardPatientCardDefinition = {
   id: 'default',
@@ -8,11 +7,7 @@ export const defaultWardPatientCard: WardPatientCardDefinition = {
   appliedTo: null,
 };
 
-export const builtInPatientCardElements: PatientCardElementType[] = [
-  'patient-age',
-  'time-on-ward',
-  'time-since-admission',
-];
+export const builtInPatientCardElements = ['patient-age', 'time-on-ward', 'time-since-admission'];
 
 export const addressFields = [
   'cityVillage',

packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-time-on-ward.tsx

@@ -1,12 +1,15 @@
 import { age } from '@openmrs/esm-framework';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { type Encounter } from '../../types';
 
 export interface WardPatientTimeOnWardProps {
-  encounterAssigningToCurrentInpatientLocation: 
+  encounterAssigningToCurrentInpatientLocation: Encounter;
 }
 
-const WardPatientTimeOnWard: React.FC<WardPatientTimeOnWardProps> = ({ encounterAssigningToCurrentInpatientLocation }) => {
+const WardPatientTimeOnWard: React.FC<WardPatientTimeOnWardProps> = ({
+  encounterAssigningToCurrentInpatientLocation,
+}) => {
   const { t } = useTranslation();
   if (encounterAssigningToCurrentInpatientLocation) {
     const timeOnWard = age(encounterAssigningToCurrentInpatientLocation.encounterDatetime);

packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-time-since-admission.tsx

@@ -1,12 +1,15 @@
 import { age } from '@openmrs/esm-framework';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { type Encounter } from '../../types';
 
 export interface WardPatientTimeSinceAdmissionProps {
-  firstAdmissionOrTransferEncounter:
+  firstAdmissionOrTransferEncounter: Encounter;
 }
 
-const WardPatientTimeSinceAdmission: React.FC<WardPatientTimeSinceAdmissionProps> = ({ firstAdmissionOrTransferEncounter }) => {
+const WardPatientTimeSinceAdmission: React.FC<WardPatientTimeSinceAdmissionProps> = ({
+  firstAdmissionOrTransferEncounter,
+}) => {
   const { t } = useTranslation();
   if (firstAdmissionOrTransferEncounter) {
     const timeSinceAdmission = age(firstAdmissionOrTransferEncounter.encounterDatetime);

packages/esm-ward-app/src/ward-patient-card/ward-patient-card-row.resources.tsx

@@ -1,11 +1,8 @@
 import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { InlineNotification } from '@carbon/react';
-import { useConfig } from '@openmrs/esm-framework';
-import {
-  defaultWardPatientCard,
-  type WardConfigObject,
-} from '../config-schema';
+import { type Patient, useConfig, type Visit } from '@openmrs/esm-framework';
+import { defaultWardPatientCard, type WardConfigObject } from '../config-schema';
 import useWardLocation from '../hooks/useWardLocation';
 import WardPatientAge from './row-elements/ward-patient-age';
 import WardPatientTimeOnWard from './row-elements/ward-patient-time-on-ward';
@@ -14,6 +11,7 @@ import WardPatientObs from './row-elements/ward-patient-obs';
 import WardPatientIdentifier from './row-elements/ward-patient-identifier';
 import WardPatientAddress from './row-elements/ward-patient-header-address';
 import type { WardPatientCardProps } from './ward-patient-card';
+import { type Encounter } from '../types';
 
 export function useCurrentWardCardConfig() {
   const { wardPatientCards } = useConfig<WardConfigObject>();
@@ -43,40 +41,48 @@ export function useCurrentWardCardConfig() {
   return currentWardCardConfig;
 }
 
-export interface WardPatientCardElementProps extends WardPatientCardProps {
+export interface WardPatientCardElementProps {
   elementId: string;
+  patient: Patient;
+  visit: Visit;
+  encounterAssigningToCurrentInpatientLocation: Encounter;
+  firstAdmissionOrTransferEncounter: Encounter;
 }
 
 export const WardPatientCardElement: React.FC<WardPatientCardElementProps> = ({
   elementId,
   patient,
   visit,
   encounterAssigningToCurrentInpatientLocation,
-  firstAdmissionOrTransferEncounter
+  firstAdmissionOrTransferEncounter,
 }) => {
   const { obsElementDefinitions, identifierElementDefinitions, addressElementDefinitions } =
     useConfig<WardConfigObject>().wardPatientCards;
   const { t } = useTranslation();
 
   switch (elementId) {
     case 'patient-age':
-      return <WardPatientAge patient={patient} />
+      return <WardPatientAge patient={patient} />;
     case 'time-on-ward': {
-      return <WardPatientTimeOnWard encounterAssigningToCurrentInpatientLocation={encounterAssigningToCurrentInpatientLocation} />
+      return (
+        <WardPatientTimeOnWard
+          encounterAssigningToCurrentInpatientLocation={encounterAssigningToCurrentInpatientLocation}
+        />
+      );
     }
     case 'time-since-admission': {
-      return <WardPatientTimeSinceAdmission firstAdmissionOrTransferEncounter={firstAdmissionOrTransferEncounter} />
+      return <WardPatientTimeSinceAdmission firstAdmissionOrTransferEncounter={firstAdmissionOrTransferEncounter} />;
     }
     default: {
       const obsConfig = obsElementDefinitions.find((elementDef) => elementDef.id === elementId);
       const idConfig = identifierElementDefinitions.find((elementDef) => elementDef.id === elementId);
       const addressConfig = addressElementDefinitions.find((elementDef) => elementDef.id === elementId);
       if (obsConfig) {
-        return <WardPatientObs patient={patient} visit={visit} config={obsConfig} />
+        return <WardPatientObs patient={patient} visit={visit} config={obsConfig} />;
       } else if (idConfig) {
-        return <WardPatientIdentifier patient={patient} config={idConfig} />
+        return <WardPatientIdentifier patient={patient} config={idConfig} />;
       } else if (addressConfig) {
-        return <WardPatientAddress patient={patient} config={addressConfig} />
+        return <WardPatientAddress patient={patient} config={addressConfig} />;
       } else {
         return (
           <InlineNotification kind="error">

packages/esm-ward-app/src/ward-patient-card/ward-patient-card.tsx

@@ -1,28 +1,34 @@
 import React, { useMemo } from 'react';
-import { Encounter, type Bed } from '../types';
+import { type Encounter, type Bed } from '../types';
 import { useCurrentWardCardConfig, WardPatientCardElement } from './ward-patient-card-row.resources';
 import styles from './ward-patient-card.scss';
 import { ExtensionSlot, getPatientName, launchWorkspace, type Patient, type Visit } from '@openmrs/esm-framework';
 import WardPatientName from './row-elements/ward-patient-name';
 import WardPatientBedNumber from './row-elements/ward-patient-bed-number';
 import classNames from 'classnames';
-import { WardPatientWorkspaceProps } from '../ward-patient-workspace/types';
+import { type WardPatientWorkspaceProps } from '../ward-patient-workspace/types';
 
 export interface WardPatientCardProps {
   patient: Patient;
   visit: Visit;
-  bed: Bed;
+  bed?: Bed;
   admitted: boolean;
   encounterAssigningToCurrentInpatientLocation: Encounter;
   firstAdmissionOrTransferEncounter: Encounter;
 }
 
-
 export interface WardPatientCardExtensionProps extends WardPatientCardProps {
   patientUuid: string;
 }
 
-const WardPatientCard: React.FC<WardPatientCardProps> = ({ patient, visit, bed, admitted, firstAdmissionOrTransferEncounter, encounterAssigningToCurrentInpatientLocation }) => {
+const WardPatientCard: React.FC<WardPatientCardProps> = ({
+  patient,
+  visit,
+  bed,
+  admitted,
+  firstAdmissionOrTransferEncounter,
+  encounterAssigningToCurrentInpatientLocation,
+}) => {
   const { id, headerRowElements, footerRowElements } = useCurrentWardCardConfig();
 
   const headerExtensionSlotName =
@@ -42,7 +48,7 @@ const WardPatientCard: React.FC<WardPatientCardProps> = ({ patient, visit, bed,
   return (
     <div className={styles.wardPatientCard}>
       <div className={classNames(styles.wardPatientCardRow, styles.wardPatientCardHeader)}>
-        <WardPatientBedNumber bed={bed} />
+        {bed ? <WardPatientBedNumber bed={bed} /> : null}
         <WardPatientName patient={patient} />
         {headerRowElements.map((elementId, i) => (
           <WardPatientCardElement
@@ -84,7 +90,7 @@ const WardPatientCard: React.FC<WardPatientCardProps> = ({ patient, visit, bed,
             bed,
             admitted,
             firstAdmissionOrTransferEncounter,
-            encounterAssigningToCurrentInpatientLocation
+            encounterAssigningToCurrentInpatientLocation,
           });
         }}>
         {/* Name will not be displayed; just there for a11y */}

packages/esm-ward-app/src/ward-workspace/admission-request-card.component.tsx

@@ -4,14 +4,22 @@ import { useCurrentWardCardConfig, WardPatientCardElement } from '../ward-patien
 import classNames from 'classnames';
 import WardPatientName from '../ward-patient-card/row-elements/ward-patient-name';
 import styles from './admission-request-card.scss';
+import { type Encounter } from '../types';
 
 interface AdmissionRequestCardProps {
   patient: Patient;
   visit: Visit;
+  firstAdmissionOrTransferEncounter: Encounter;
+  encounterAssigningToCurrentInpatientLocation: Encounter;
 }
 
-const AdmissionRequestCard: React.FC<AdmissionRequestCardProps> = ({ patient, visit }) => {
-  const { id, headerRowElements, footerRowElements } = useCurrentWardCardConfig();
+const AdmissionRequestCard: React.FC<AdmissionRequestCardProps> = ({
+  patient,
+  visit,
+  firstAdmissionOrTransferEncounter,
+  encounterAssigningToCurrentInpatientLocation,
+}) => {
+  const { id, headerRowElements } = useCurrentWardCardConfig();
 
   const extensionSlotName = id == 'default' ? 'ward-patient-card' : `ward-patient-card-${id}`;
 
@@ -33,6 +41,8 @@ const AdmissionRequestCard: React.FC<AdmissionRequestCardProps> = ({ patient, vi
             elementId={elementId}
             patient={patient}
             visit={visit}
+            firstAdmissionOrTransferEncounter={firstAdmissionOrTransferEncounter}
+            encounterAssigningToCurrentInpatientLocation={encounterAssigningToCurrentInpatientLocation}
           />
         ))}
       </div>

packages/esm-ward-app/src/ward-workspace/patient-banner/patient-banner.component.tsx

@@ -1,42 +1,29 @@
-import { useConfig } from '@openmrs/esm-framework';
-import React, { useMemo } from 'react';
-import { defaultPatientCardElementConfig, type WardConfigObject } from '../../config-schema';
-import useWardLocation from '../../hooks/useWardLocation';
-import type { PatientCardElementType, WardPatient } from '../../types';
-import { getPatientCardElementFromDefinition } from '../../ward-patient-card/ward-patient-card-row.resources';
+import React from 'react';
+import type { WardPatient } from '../../types';
+import {
+  useCurrentWardCardConfig,
+  WardPatientCardElement,
+} from '../../ward-patient-card/ward-patient-card-row.resources';
 import styles from './style.scss';
 
 const WardPatientWorkspaceBanner = (props: WardPatient) => {
-  const { location } = useWardLocation();
-  const { wardPatientCards } = useConfig<WardConfigObject>();
-  const { cardDefinitions } = wardPatientCards;
-  const {patient, bed, visit} = props;
-
-  // extract configured elements for the patient card header to use for the banner section
-  const bannerElements = useMemo(() => {
-    const cardDefinition = cardDefinitions.find((cardDef) => {
-      const appliedTo = cardDef.appliedTo;
-
-      return appliedTo == null || appliedTo.some((criteria) => criteria.location == location.uuid);
-    });
-
-    const headerRow = cardDefinition.rows.find((cardDef) => cardDef.rowType === 'header');
-
-    return headerRow.elements.map((elementType: PatientCardElementType) =>
-      getPatientCardElementFromDefinition({
-        id: elementType,
-        elementType,
-        config: defaultPatientCardElementConfig,
-      }),
-    );
-  }, [cardDefinitions]);
+  const { headerRowElements } = useCurrentWardCardConfig();
+  const { patient, bed, visit, firstAdmissionOrTransferEncounter, encounterAssigningToCurrentInpatientLocation } =
+    props;
 
   if (!(patient && bed && visit)) return null;
 
   return (
     <div className={styles.patientBanner}>
-      {bannerElements.map((BannerElement) => (
-        <BannerElement {...props} />
+      {headerRowElements.map((elementId, i) => (
+        <WardPatientCardElement
+          key={`ward-card-${patient.uuid}-header-${i}`}
+          elementId={elementId}
+          patient={patient}
+          visit={visit}
+          firstAdmissionOrTransferEncounter={firstAdmissionOrTransferEncounter}
+          encounterAssigningToCurrentInpatientLocation={encounterAssigningToCurrentInpatientLocation}
+        />
       ))}
     </div>
   );