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

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

@@ -1,7 +1,5 @@
 import { type ConfigSchema, Type, validators } from '@openmrs/esm-framework';
 
-export const builtInPatientCardElements = ['patient-age', 'time-on-ward', 'time-since-admission', 'patient-location'];
-
 export const addressFields = [
   'cityVillage',
   'stateProvince',
@@ -118,23 +116,21 @@ export const configSchema: ConfigSchema = {
     patientIdentifier: {
       _type: Type.Array,
       _description: `Configures patient identifier to display. An unconfigured element displays the preferred identifier.`,
-      _default: [],
+      _default: [
+        {
+          id: 'patient-identifier',
+          showIdentifierLabel: false,
+        },
+      ],
       _elements: {
         id: {
           _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.',
-          _default: null,
+            'If true, the identifier type (eg: "OpenMRS ID") is shown along with the identifier itself. Defaults to false',
         },
       },
     },
@@ -294,8 +290,7 @@ export interface ObsElementConfig {
 
 export interface IdentifierElementConfig {
   id: string;
-  identifierTypeUuid: string;
-  label?: string;
+  showIdentifierLabel: boolean;
 }
 
 export interface PatientAddressElementConfig {

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/row-elements/ward-patient-identifier.tsx

@@ -1,52 +1,29 @@
+import { type Patient, type PatientIdentifier, PatientBannerPatientIdentifier } from '@openmrs/esm-framework';
 import React from 'react';
-import { type IdentifierElementConfig } 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';
 import { useElementConfig } from '../../ward-view/ward-view.resource';
 
-/** Sort the identifiers by preferred first. The identifier with value of true
- * takes precedence over false. If both identifiers have same preferred value,
- * sort them by most recently created or changed. */
-const identifierCompareFunction = (pi1: PatientIdentifier, pi2: PatientIdentifier) => {
-  let comp = (pi2.preferred ? 1 : 0) - (pi1.preferred ? 1 : 0);
-
-  if (comp == 0) {
-    const date1 = pi1.auditInfo.dateChanged ?? pi1.auditInfo.dateCreated;
-    const date2 = pi2.auditInfo.dateChanged ?? pi2.auditInfo.dateCreated;
-    comp = date2.localeCompare(date1);
-  }
-  return comp;
-};
-
 export interface WardPatientIdentifierProps {
   patient: Patient;
   id?: string;
 }
 
-const defaultConfig: IdentifierElementConfig = {
-  id: 'patient-identifier',
-  identifierTypeUuid: null,
-};
-
 const WardPatientIdentifier: React.FC<WardPatientIdentifierProps> = ({ id, patient }) => {
-  const { t } = useTranslation();
-  const config = useElementConfig('patientIdentifier', id) ?? defaultConfig;
+  const config = useElementConfig('patientIdentifier', id);
+
+  const fhirIdentifiers: fhir.Identifier[] = patient.identifiers.map((identifier: PatientIdentifier) => ({
+    value: identifier.identifier,
+    type: {
+      text: identifier.identifierType.name,
+      coding: [
+        {
+          code: identifier.identifierType.uuid,
+        },
+      ],
+    },
+  }));
 
-  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>
+    <PatientBannerPatientIdentifier identifier={fhirIdentifiers} showIdentifierLabel={config?.showIdentifierLabel} />
   );
 };
 

packages/esm-ward-app/src/ward-view/default-ward/default-ward-patient-card-header.component.tsx

@@ -18,7 +18,7 @@ const DefaultWardPatientCardHeader: WardPatientCardType = (wardPatient) => {
     <div className={classNames(styles.wardPatientCardRow, styles.wardPatientCardHeader)}>
       {bed ? <WardPatientBedNumber bed={bed} /> : null}
       <WardPatientName patient={patient} />
-      <WardPatientIdentifier patient={patient} />
+      <WardPatientIdentifier id="patient-identifier" patient={patient} />
       <WardPatientGender patient={patient} />
       <WardPatientAge patient={patient} />
       <WardPatientTimeSinceAdmission firstAdmissionOrTransferEncounter={firstAdmissionOrTransferEncounter} />

packages/esm-ward-app/src/ward-view/materal-ward/maternal-ward-patient-card-header.component.tsx

@@ -18,7 +18,7 @@ const MaternalWardPatientCardHeader: WardPatientCardType = (wardPatient) => {
     <div className={classNames(styles.wardPatientCardRow, styles.wardPatientCardHeader)}>
       {bed ? <WardPatientBedNumber bed={bed} /> : null}
       <WardPatientName patient={patient} />
-      <WardPatientIdentifier patient={patient} />
+      <WardPatientIdentifier id="patient-identifier" patient={patient} />
       <WardPatientAge patient={patient} />
       <WardPatientAddress id={'patient-address'} patient={patient} />
       <WardPatientObs id={'admission-reason'} patient={patient} visit={visit} />

packages/esm-ward-app/src/ward-view/ward-view.scss

@@ -22,6 +22,7 @@
     display: block;
     column-width: 280px;
     overflow-x: auto;
+    height: calc(100% - 4rem);
 
     > div {
       break-inside: avoid;

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

@@ -17,7 +17,7 @@ const AdmissionRequestCardHeader: WardPatientCardType = (wardPatient) => {
     <div className={styles.admissionRequestCardHeaderContainer}>
       <div className={styles.admissionRequestCardHeader}>
         <WardPatientName patient={patient} />
-        <WardPatientIdentifier patient={patient} />
+        <WardPatientIdentifier id="patient-identifier" patient={patient} />
         <WardPatientGender patient={patient} />
         <WardPatientAge patient={patient} />
       </div>