From 3ff1435415c21b21f08c0b3ddd7c2fda82e0add4 Mon Sep 17 00:00:00 2001 From: chibongho Date: Mon, 30 Sep 2024 13:02:04 -0400 Subject: [PATCH] (chore) O3-4011 - refactor patient banner to have patient identifiers component be reuseable (#1159) --- packages/framework/esm-framework/docs/API.md | 21 +++++++ .../docs/interfaces/StyleguideConfigObject.md | 23 +++++++- .../esm-styleguide/src/config-schema.ts | 13 +++++ .../src/patient-banner/index.ts | 1 + ...t-banner-patient-identifiers.component.tsx | 55 +++++++++++++++++++ .../patient-banner-patient-info.component.tsx | 43 ++------------- 6 files changed, 116 insertions(+), 40 deletions(-) create mode 100644 packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-identifiers.component.tsx diff --git a/packages/framework/esm-framework/docs/API.md b/packages/framework/esm-framework/docs/API.md index 0446d2244..79f6fdfb6 100644 --- 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 index 0ac47d674..0042c0f82 100644 --- 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 index 737383e52..f328eef09 100644 --- 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; + }; 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 index f66cce99e..54daf3437 100644 --- 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/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-identifiers.component.tsx b/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-identifiers.component.tsx new file mode 100644 index 000000000..0d1be34d5 --- /dev/null +++ b/packages/framework/esm-styleguide/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(); + const { primaryIdentifierCode } = usePrimaryIdentifierCode(); + const filteredIdentifiers = + identifier?.filter((identifier) => { + const code = identifier.type?.coding?.[0]?.code; + return code && !excludePatientIdentifierCodeTypes?.uuids.includes(code); + }) ?? []; + + return ( +
+ {filteredIdentifiers?.length + ? filteredIdentifiers.map(({ value, type }, index) => ( + +
{index > 0 && ·}
+ {type?.coding?.[0]?.code === primaryIdentifierCode ? ( +
+ {showIdentifierLabel && ( + + {type?.text}: + + )} + {value} +
+ ) : ( + + )} + + )) + : ''} +
+ ); +} + +export default PatientBannerPatientIdentifier; diff --git a/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx b/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx index d3f649c84..c75182860 100644 --- a/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx +++ b/packages/framework/esm-styleguide/src/patient-banner/patient-info/patient-banner-patient-info.component.tsx @@ -1,10 +1,10 @@ /** @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 { @@ -12,17 +12,9 @@ export interface PatientBannerPatientInfoProps { } 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 (
@@ -47,30 +39,7 @@ export function PatientBannerPatientInfo({ patient }: PatientBannerPatientInfoPr )}
-
- {filteredIdentifiers?.length - ? filteredIdentifiers.map(({ value, type }, index) => ( - -
{index > 0 && ·}
- {type?.coding?.[0]?.code === primaryIdentifierCode ? ( -
- - {type?.text}: - - {value} -
- ) : ( - - )} - - )) - : ''} -
+
);