(fix) O3-4011 - Ward App - make styling for patient card's patient id…

package.json

@@ -84,5 +84,8 @@
     "*.{ts,tsx}": "eslint --cache --fix --max-warnings 0",
     "*.{css,scss,ts,tsx}": "prettier --cache --write --list-different"
   },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]",
+  "resolutions": {
+    "@openmrs/esm-styleguide": "portal:/home/cbho/workspace/openmrs-esm-core/packages/framework/esm-styleguide"
+  }
 }

packages/esm-ward-app/src/config-schema-mother-child-row.ts

@@ -1,26 +1,11 @@
 import { Type } from '@openmrs/esm-framework';
 
 export const motherChildRowConfigSchema = {
-  maternalLocations: {
+  rowElements: {
     _type: Type.Array,
-    _description: 'Defines obs display elements that can be included in the card header or footer.',
-    _default: [],
+    _description: `IDs of patient card elements to appear in the mother child row. These can be built-in, or custom ones can be defined in patientCardElementDefinitions.`,
     _elements: {
-      id: {
-        _type: Type.UUID,
-        _description: 'The unique identifier for this ward location',
-      },
-    }
+      _type: Type.String,
+    },
   },
-  childLocations: {
-    _type: Type.Array,
-    _description: 'Defines obs display elements that can be included in the card header or footer.',
-    _default: [],
-    _elements: {
-      id: {
-        _type: Type.UUID,
-        _description: 'The unique identifier for this ward location',
-      },
-    }
-  }
 };

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

@@ -92,16 +92,10 @@ export const configSchema: ConfigSchema = {
           _type: Type.String,
           _description: 'The unique identifier for this patient card element',
         },
-        identifierTypeUuid: {
-          _type: Type.UUID,
-          _description:
-            'The UUID of the identifier type to display. If not provided, defaults to the preferred identifier.',
-          _default: null,
-        },
-        label: {
-          _type: Type.String,
+        showIdentifierLabel: {
+          _type: Type.Boolean,
           _description:
-            'the custom label or i18n key to the translated label to display for patient identifier. If not provided, defaults to the patient-identifier name.',
+            'If true, the identifier type (eg: "OpenMRS ID") is shown along with the identifier itself. Defaults to false',
           _default: null,
         },
       },
@@ -212,8 +206,7 @@ export interface ObsElementDefinition {
 
 export interface IdentifierElementDefinition {
   id: string;
-  identifierTypeUuid: string;
-  label?: string;
+  showIdentifierLabel: boolean;
 }
 
 export interface AddressElementDefinition {

packages/esm-ward-app/src/hooks/useInpatientAdmission.ts

@@ -8,7 +8,7 @@ export function useInpatientAdmission() {
   // prettier-ignore
   const customRepresentation =
     'custom:(visit,' +
-    'patient:(uuid,identifiers,voided,' +
+    'patient:(uuid,identifiers:(uuid,display,identifier,identifierType),voided,' +
     'person:(uuid,display,gender,age,birthdate,birthtime,preferredName,preferredAddress,dead,deathDate)),' +
     'encounterAssigningToCurrentInpatientLocation:(encounterDatetime),' +
     'currentInpatientRequest:(dispositionLocation,dispositionType,disposition:(uuid,display),dispositionEncounter:(uuid,display),dispositionObsGroup:(uuid,display),visit:(uuid),patient:(uuid)),' +

packages/esm-ward-app/src/ward-patient-card/card-rows/mother-child-row.extension.tsx

@@ -1,5 +1,5 @@
 import { InlineNotification } from '@carbon/react';
-import { BabyIcon, MotherIcon } from '@openmrs/esm-framework';
+import { BabyIcon, MotherIcon, useConfig } from '@openmrs/esm-framework';
 import classNames from 'classnames';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -12,6 +12,7 @@ import WardPatientLocation from '../row-elements/ward-patient-location';
 import WardPatientName from '../row-elements/ward-patient-name';
 import wardPatientCardStyles from '../ward-patient-card.scss';
 import styles from './mother-child-row.scss';
+import { WardPatientCardElement } from '../ward-patient-card-element.component';
 
 const motherAndChildrenRep =
   'custom:(childAdmission,mother:(person,identifiers:full,uuid),child:(person,identifiers:full,uuid),motherAdmission)';
@@ -22,8 +23,11 @@ const motherAndChildrenRep =
  * @param param0
  * @returns
  */
-const MotherChildRowExtension: WardPatientCard = ({ patient }) => {
+const MotherChildRowExtension: WardPatientCard = (wardPatient) => {
   const { t } = useTranslation();
+  const config = useConfig<{ rowElements: Array<string> }>();
+  const { rowElements } = config;
+  const { patient } = wardPatient;
 
   const getChildrenRequestParams: MothersAndChildrenSearchCriteria = {
     mothers: [patient.uuid],
@@ -96,9 +100,17 @@ const MotherChildRowExtension: WardPatientCard = ({ patient }) => {
             </div>
             <div className={wardPatientCardStyles.dotSeparatedChildren}>
               <WardPatientName patient={patientB} />
-              <WardPatientIdentifier patient={patientB} />
-              <WardPatientAge patient={patientB} />
-              <WardPatientLocation inpatientAdmission={patientBAdmission} />
+              {rowElements?.map((elementId, i) => (
+                <WardPatientCardElement
+                  key={`ward-card-${patient.uuid}-mother-child-row-${i}`}
+                  elementId={elementId}
+                  patient={patientB}
+                  visit={patientBAdmission.visit}
+                  inpatientAdmission={patientBAdmission}
+                  inpatientRequest={null}
+                  bed={null}
+                />
+              ))}
             </div>
           </div>
         );

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

@@ -1,9 +1,6 @@
+import { type Patient, type PatientIdentifier, PatientBannerPatientIdentifier } from '@openmrs/esm-framework';
 import React from 'react';
 import { type IdentifierElementDefinition } from '../../config-schema';
-import { Tag } from '@carbon/react';
-import { type Patient, translateFrom, type PatientIdentifier } from '@openmrs/esm-framework';
-import { moduleName } from '../../constant';
-import { useTranslation } from 'react-i18next';
 
 /** Sort the identifiers by preferred first. The identifier with value of true
  * takes precedence over false. If both identifiers have same preferred value,
@@ -25,28 +22,21 @@ export interface WardPatientIdentifierProps {
   config?: IdentifierElementDefinition;
 }
 
-const defaultConfig: IdentifierElementDefinition = {
-  id: 'patient-identifier',
-  identifierTypeUuid: null,
-};
+const WardPatientIdentifier: React.FC<WardPatientIdentifierProps> = ({ config, patient }) => {
+
+  const fhirIdentifiers : fhir.Identifier[] = patient.identifiers.map((identifier: PatientIdentifier) => ({
+    value: identifier.identifier,
+    type: {
+      text: identifier.identifierType.name,
+      coding: [
+        {
+          code: identifier.identifierType.uuid
+        }
+      ]
+    }
+  }));
 
-const WardPatientIdentifier: React.FC<WardPatientIdentifierProps> = ({ config: configProp, patient }) => {
-  const { t } = useTranslation();
-  const config = configProp ?? defaultConfig;
-  const { identifierTypeUuid, label } = config;
-  const patientIdentifiers = patient.identifiers.filter(
-    (patientIdentifier: PatientIdentifier) =>
-      identifierTypeUuid == null || patientIdentifier.identifierType?.uuid === identifierTypeUuid,
-  );
-  patientIdentifiers.sort(identifierCompareFunction);
-  const patientIdentifier = patientIdentifiers[0];
-  const labelToDisplay = label != null ? t(label) : patientIdentifier?.identifierType?.name;
-  return (
-    <div>
-      {labelToDisplay ? <Tag>{t('identifierTypelabel', '{{label}}:', { label: labelToDisplay })}</Tag> : <></>}
-      <span>{patientIdentifier?.identifier}</span>
-    </div>
-  );
+  return <PatientBannerPatientIdentifier identifier={fhirIdentifiers} showIdentifierLabel={config?.showIdentifierLabel}/>
 };
 
 export default WardPatientIdentifier;

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

@@ -11,6 +11,7 @@ import WardPatientObs from './row-elements/ward-patient-obs';
 import WardPatientTimeOnWard from './row-elements/ward-patient-time-on-ward';
 import WardPatientTimeSinceAdmission from './row-elements/ward-patient-time-since-admission';
 import WardPatientLocation from './row-elements/ward-patient-location';
+import { moduleName } from '../constant';
 
 export interface WardPatientCardElementProps extends WardPatient {
   elementId: string;
@@ -23,7 +24,7 @@ export const WardPatientCardElement: React.FC<WardPatientCardElementProps> = ({
   inpatientAdmission,
 }) => {
   const { obsElementDefinitions, identifierElementDefinitions, addressElementDefinitions } =
-    useConfig<WardConfigObject>().wardPatientCards;
+    useConfig<WardConfigObject>({ externalModuleName: moduleName }).wardPatientCards;
   const { t } = useTranslation();
   const { encounterAssigningToCurrentInpatientLocation, firstAdmissionOrTransferEncounter } = inpatientAdmission ?? {};
 

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

@@ -172,12 +172,10 @@
 
 .dotSeparatedChildren {
   display: flex;
+  align-items: center;
   flex-wrap: wrap;
 
   > div:not(div:first-of-type):not(:empty) {
-    display: flex;
-    align-items: center;
-
     &::before {
       content: '·';
       padding: 0 layout.$spacing-02;

yarn.lock

@@ -3187,9 +3187,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@openmrs/esm-styleguide@npm:5.8.2-pre.2301":
-  version: 5.8.2-pre.2301
-  resolution: "@openmrs/esm-styleguide@npm:5.8.2-pre.2301"
+"@openmrs/esm-styleguide@portal:/home/cbho/workspace/openmrs-esm-core/packages/framework/esm-styleguide::locator=%40openmrs%2Fesm-patient-management%40workspace%3A.":
+  version: 0.0.0-use.local
+  resolution: "@openmrs/esm-styleguide@portal:/home/cbho/workspace/openmrs-esm-core/packages/framework/esm-styleguide::locator=%40openmrs%2Fesm-patient-management%40workspace%3A."
   dependencies:
     "@carbon/charts": "npm:^1.12.0"
     "@carbon/react": "npm:~1.37.0"
@@ -3213,9 +3213,8 @@ __metadata:
     react-dom: 18.x
     react-i18next: 11.x
     rxjs: 6.x
-  checksum: 10/98fdfd406d450672113cc148a15e9f43643f55afd7d13a0d1e5be6de83f595b8c151efe99f0594b87b80da016a097e4cf11e3bc32a67e6262030ba9f081da3a0
   languageName: node
-  linkType: hard
+  linkType: soft
 
 "@openmrs/esm-translations@npm:5.8.2-pre.2301":
   version: 5.8.2-pre.2301