(chore) O3-4011 - refactor patient banner to have patient identifiers…

… component be reuseable (#1159)
openmrs · Sep 30, 2024 · 3ff1435 · 3ff1435
1 parent 779d8c9
commit 3ff1435
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 40 deletions.
diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md
@@ -213,6 +213,7 @@
 - [CustomOverflowMenu](API.md#customoverflowmenu)
 - [PatientBannerActionsMenu](API.md#patientbanneractionsmenu)
 - [PatientBannerContactDetails](API.md#patientbannercontactdetails)
+- [PatientBannerPatientIdentifier](API.md#patientbannerpatientidentifier)
 - [PatientBannerPatientInfo](API.md#patientbannerpatientinfo)
 - [PatientBannerToggleContactDetailsButton](API.md#patientbannertogglecontactdetailsbutton)
 - [PatientPhoto](API.md#patientphoto)
@@ -6699,6 +6700,26 @@ ___
 
 ___
 
+### PatientBannerPatientIdentifier
+
+▸ **PatientBannerPatientIdentifier**(`__namedParameters`): `Element`
+
+#### Parameters
+
+| Name | Type |
+| :------ | :------ |
+| `__namedParameters` | `PatientBannerPatientIdentifierProps` |
+
+#### Returns
+
+`Element`
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-identifiers.component.tsx:13](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-identifiers.component.tsx#L13)
+
+___
+
 ### PatientBannerPatientInfo
 
 ▸ **PatientBannerPatientInfo**(`__namedParameters`): `Element`

diff --git a/packages/framework/esm-framework/docs/interfaces/StyleguideConfigObject.md b/packages/framework/esm-framework/docs/interfaces/StyleguideConfigObject.md
@@ -9,6 +9,7 @@
 - [Brand color #1](StyleguideConfigObject.md#brand color #1)
 - [Brand color #2](StyleguideConfigObject.md#brand color #2)
 - [Brand color #3](StyleguideConfigObject.md#brand color #3)
+- [excludePatientIdentifierCodeTypes](StyleguideConfigObject.md#excludepatientidentifiercodetypes)
 - [implementationName](StyleguideConfigObject.md#implementationname)
 - [patientPhotoConceptUuid](StyleguideConfigObject.md#patientphotoconceptuuid)
 - [preferredCalendar](StyleguideConfigObject.md#preferredcalendar)
@@ -45,13 +46,29 @@ ___
 
 ___
 
+### excludePatientIdentifierCodeTypes
+
+• **excludePatientIdentifierCodeTypes**: `Object`
+
+#### Type declaration
+
+| Name | Type |
+| :------ | :------ |
+| `uuids` | `string`[] |
+
+#### Defined in
+
+[packages/framework/esm-styleguide/src/config-schema.ts:7](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/config-schema.ts#L7)
+
+___
+
 ### implementationName
 
 • **implementationName**: `string`
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/config-schema.ts:7](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/config-schema.ts#L7)
+[packages/framework/esm-styleguide/src/config-schema.ts:10](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/config-schema.ts#L10)
 
 ___
 
@@ -61,7 +78,7 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/config-schema.ts:8](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/config-schema.ts#L8)
+[packages/framework/esm-styleguide/src/config-schema.ts:11](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/config-schema.ts#L11)
 
 ___
 
@@ -75,4 +92,4 @@ ___
 
 #### Defined in
 
-[packages/framework/esm-styleguide/src/config-schema.ts:9](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/config-schema.ts#L9)
+[packages/framework/esm-styleguide/src/config-schema.ts:12](https://github.com/openmrs/openmrs-esm-core/blob/main/packages/framework/esm-styleguide/src/config-schema.ts#L12)
diff --git a/packages/framework/esm-styleguide/src/config-schema.ts b/packages/framework/esm-styleguide/src/config-schema.ts
@@ -4,6 +4,9 @@ export interface StyleguideConfigObject {
   'Brand color #1': string;
   'Brand color #2': string;
   'Brand color #3': string;
+  excludePatientIdentifierCodeTypes: {
+    uuids: Array<string>;
+  };
   implementationName: string;
   patientPhotoConceptUuid: string;
   preferredCalendar: {
@@ -24,6 +27,16 @@ export const esmStyleGuideSchema = {
     _default: '#007d79',
     _type: Type.String,
   },
+  excludePatientIdentifierCodeTypes: {
+    uuids: {
+      _type: Type.Array,
+      _description: 'List of UUIDs of patient identifier types to exclude from rendering in the patient banner',
+      _default: [],
+      _elements: {
+        _type: Type.UUID,
+      },
+    },
+  },
   implementationName: {
     _type: Type.String,
     _description: 'A name of the place (or authority) where all possible locations a user can choose are located.',

diff --git a/packages/framework/esm-styleguide/src/patient-banner/index.ts b/packages/framework/esm-styleguide/src/patient-banner/index.ts
@@ -1,4 +1,5 @@
 export * from './patient-info/patient-banner-patient-info.component';
+export * from './patient-info/patient-banner-patient-identifiers.component';
 export * from './actions-menu/patient-banner-actions-menu.component';
 export * from './contact-details/patient-banner-toggle-contact-details-button.component';
 export * from './contact-details/patient-banner-contact-details.component';
diff --git a/...yleguide/src/patient-banner/patient-info/patient-banner-patient-identifiers.component.tsx b/...yleguide/src/patient-banner/patient-info/patient-banner-patient-identifiers.component.tsx
@@ -0,0 +1,55 @@
+/** @module @category UI */
+import { Tag } from '@carbon/react';
+import { useConfig, usePrimaryIdentifierCode } from '@openmrs/esm-react-utils';
+import React from 'react';
+import styles from './patient-banner-patient-info.module.scss';
+import { type StyleguideConfigObject } from '../../config-schema';
+
+interface PatientBannerPatientIdentifierProps {
+  identifier: fhir.Identifier[] | undefined;
+  showIdentifierLabel: boolean;
+}
+
+export function PatientBannerPatientIdentifier({
+  identifier,
+  showIdentifierLabel,
+}: PatientBannerPatientIdentifierProps) {
+  const { excludePatientIdentifierCodeTypes } = useConfig<StyleguideConfigObject>();
+  const { primaryIdentifierCode } = usePrimaryIdentifierCode();
+  const filteredIdentifiers =
+    identifier?.filter((identifier) => {
+      const code = identifier.type?.coding?.[0]?.code;
+      return code && !excludePatientIdentifierCodeTypes?.uuids.includes(code);
+    }) ?? [];
+
+  return (
+    <div className={styles.identifiers}>
+      {filteredIdentifiers?.length
+        ? filteredIdentifiers.map(({ value, type }, index) => (
+            <span key={value} className={styles.identifierTag}>
+              <div>{index > 0 && <span className={styles.separator}>&middot;</span>}</div>
+              {type?.coding?.[0]?.code === primaryIdentifierCode ? (
+                <div className={styles.primaryIdentifier}>
+                  {showIdentifierLabel && (
+                    <Tag type="gray" title={type?.text}>
+                      {type?.text}:
+                    </Tag>
+                  )}
+                  <span>{value}</span>
+                </div>
+              ) : (
+                <label htmlFor="identifier" className={styles.secondaryIdentifier}>
+                  {showIdentifierLabel && <span className={styles.label}>{type?.text}: </span>}
+                  <span id="identifier" className={styles.identifier}>
+                    {value}
+                  </span>
+                </label>
+              )}
+            </span>
+          ))
+        : ''}
+    </div>
+  );
+}
+
+export default PatientBannerPatientIdentifier;
diff --git a/.../esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx b/.../esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx
@@ -1,28 +1,20 @@
 /** @module @category UI */
-import React from 'react';
-import classNames from 'classnames';
-import { Tag } from '@carbon/react';
-import { age, formatDate, parseDate } from '@openmrs/esm-utils';
+import { ExtensionSlot } from '@openmrs/esm-react-utils';
 import { getCoreTranslation } from '@openmrs/esm-translations';
-import { ExtensionSlot, useConfig, usePrimaryIdentifierCode } from '@openmrs/esm-react-utils';
+import { age, formatDate, parseDate } from '@openmrs/esm-utils';
+import classNames from 'classnames';
+import React from 'react';
+import PatientBannerPatientIdentifier from './patient-banner-patient-identifiers.component';
 import styles from './patient-banner-patient-info.module.scss';
 
 export interface PatientBannerPatientInfoProps {
   patient: fhir.Patient;
 }
 
 export function PatientBannerPatientInfo({ patient }: PatientBannerPatientInfoProps) {
-  const { excludePatientIdentifierCodeTypes } = useConfig();
-  const { primaryIdentifierCode } = usePrimaryIdentifierCode();
-
   const name = `${patient?.name?.[0]?.given?.join(' ')} ${patient?.name?.[0].family}`;
   const gender = patient?.gender && getGender(patient.gender);
 
-  const filteredIdentifiers =
-    patient?.identifier?.filter(
-      (identifier) => !excludePatientIdentifierCodeTypes?.uuids.includes(identifier.type?.coding?.[0]?.code),
-    ) ?? [];
-
   return (
     <div className={styles.patientInfo}>
       <div className={classNames(styles.row, styles.patientNameRow)}>
@@ -47,30 +39,7 @@ export function PatientBannerPatientInfo({ patient }: PatientBannerPatientInfoPr
         )}
       </div>
       <div className={styles.row}>
-        <div className={styles.identifiers}>
-          {filteredIdentifiers?.length
-            ? filteredIdentifiers.map(({ value, type }, index) => (
-                <span key={value} className={styles.identifierTag}>
-                  <div>{index > 0 && <span className={styles.separator}>&middot;</span>}</div>
-                  {type?.coding?.[0]?.code === primaryIdentifierCode ? (
-                    <div className={styles.primaryIdentifier}>
-                      <Tag type="gray" title={type?.text}>
-                        {type?.text}:
-                      </Tag>
-                      <span>{value}</span>
-                    </div>
-                  ) : (
-                    <label htmlFor="identifier" className={styles.secondaryIdentifier}>
-                      <span className={styles.label}>{type?.text}: </span>
-                      <span id="identifier" className={styles.identifier}>
-                        {value}
-                      </span>
-                    </label>
-                  )}
-                </span>
-              ))
-            : ''}
-        </div>
+        <PatientBannerPatientIdentifier identifier={patient.identifier} showIdentifierLabel={true} />
       </div>
     </div>
   );