From c19936400abbf1a4008294a5644391f059a2e6d5 Mon Sep 17 00:00:00 2001 From: Usama Idriss Kakumba <53287480+usamaidrsk@users.noreply.github.com> Date: Thu, 15 Aug 2024 17:09:03 +0300 Subject: [PATCH] (feat) O3-3223: Add configurable element to include alerts on pending items to patient card (#1218) * (feat) - O3-3222 - ward app - add patient card element to include risk factor obs within the current visit * rename codedObs to codedObsTags * remove orders * feat: add pending inpatient request * fix: fix alert message * fix: use layout spacing * rename WardPatientPendingTransfer --------- Co-authored-by: Chi Bong Ho --- .../src/hooks/useInpatientAdmission.ts | 9 +++-- packages/esm-ward-app/src/types/index.ts | 4 ++ .../ward-patient-pending-transfer.tsx | 38 +++++++++++++++++++ .../ward-patient-card.component.tsx | 8 ++++ .../ward-patient-card/ward-patient-card.scss | 24 ++++++++++++ .../src/ward-view/ward-view.component.tsx | 6 +-- 6 files changed, 82 insertions(+), 7 deletions(-) create mode 100644 packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-pending-transfer.tsx diff --git a/packages/esm-ward-app/src/hooks/useInpatientAdmission.ts b/packages/esm-ward-app/src/hooks/useInpatientAdmission.ts index 1122aa706..db247fa98 100644 --- a/packages/esm-ward-app/src/hooks/useInpatientAdmission.ts +++ b/packages/esm-ward-app/src/hooks/useInpatientAdmission.ts @@ -9,10 +9,11 @@ export function useInpatientAdmission() { // prettier-ignore const customRepresentation = 'custom:(visit,' + - 'patient:(uuid,identifiers,voided,' + - 'person:(uuid,display,gender,age,birthdate,birthtime,preferredName,preferredAddress,dead,deathDate)),' + - 'encounterAssigningToCurrentInpatientLocation:(encounterDatetime),' + - 'firstAdmissionOrTransferEncounter:(encounterDatetime),' + + 'patient:(uuid,identifiers,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)),' + + 'firstAdmissionOrTransferEncounter:(encounterDatetime),' + ')'; const { data, ...rest } = useSWR, Error>( location diff --git a/packages/esm-ward-app/src/types/index.ts b/packages/esm-ward-app/src/types/index.ts index 66d3f86ee..99ca7b1ea 100644 --- a/packages/esm-ward-app/src/types/index.ts +++ b/packages/esm-ward-app/src/types/index.ts @@ -40,6 +40,7 @@ export type WardPatient = { */ inpatientRequest: InpatientRequest; }; + export interface WardPatientWorkspaceProps extends DefaultWorkspaceProps { wardPatient: WardPatient; } @@ -134,6 +135,9 @@ export interface InpatientAdmission { // the first encounter of the visit that is of encounterType "Admission" or "Transfer", // regardless of the admission location firstAdmissionOrTransferEncounter: Encounter; + + // the current in patient request + currentInpatientRequest: InpatientRequest; } // TODO: Move these types to esm-core diff --git a/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-pending-transfer.tsx b/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-pending-transfer.tsx new file mode 100644 index 000000000..d2bc199de --- /dev/null +++ b/packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-pending-transfer.tsx @@ -0,0 +1,38 @@ +import React, { useMemo } from 'react'; +import { Movement } from '@carbon/react/icons'; +import styles from '../ward-patient-card.scss'; +import { useTranslation } from 'react-i18next'; +import { type WardPatient } from '../../types'; + +export interface WardPatientTransferProps { + wardPatient: WardPatient; +} + +const WardPatientPendingTransfer: React.FC = ({ wardPatient }) => { + const { t } = useTranslation(); + + const { dispositionType, dispositionLocation } = wardPatient?.inpatientRequest; + const message = useMemo(() => { + if (dispositionType === 'TRANSFER') { + if (dispositionLocation) { + return t('transferToDispositionLocation', 'Transfer to {{location}}', { location: dispositionLocation.name }); + } + return t('pendingTransfer', 'Pending Transfer'); + } + if (dispositionType === 'DISCHARGE') { + return t('pendingDischarge', 'Pending Discharge'); + } + return ''; + }, [dispositionType, dispositionLocation]); + + if (!(dispositionType === 'TRANSFER' || dispositionType === 'DISCHARGE')) return null; + + return ( +
+ + {message} +
+ ); +}; + +export default WardPatientPendingTransfer; diff --git a/packages/esm-ward-app/src/ward-patient-card/ward-patient-card.component.tsx b/packages/esm-ward-app/src/ward-patient-card/ward-patient-card.component.tsx index 647fbd747..07c30fbc6 100644 --- a/packages/esm-ward-app/src/ward-patient-card/ward-patient-card.component.tsx +++ b/packages/esm-ward-app/src/ward-patient-card/ward-patient-card.component.tsx @@ -1,12 +1,14 @@ import { ExtensionSlot, getPatientName, launchWorkspace } from '@openmrs/esm-framework'; import classNames from 'classnames'; import React from 'react'; +import { Hourglass } from '@carbon/react/icons'; import { useCurrentWardCardConfig } from '../hooks/useCurrentWardCardConfig'; import { type WardPatientCard, type WardPatientWorkspaceProps } from '../types'; import WardPatientBedNumber from './row-elements/ward-patient-bed-number'; import WardPatientName from './row-elements/ward-patient-name'; import { WardPatientCardElement } from './ward-patient-card-element.component'; import styles from './ward-patient-card.scss'; +import WardPatientPendingTransfer from './row-elements/ward-patient-pending-transfer'; const WardPatientCard: WardPatientCard = (wardPatient) => { const { patient, bed } = wardPatient; @@ -32,6 +34,12 @@ const WardPatientCard: WardPatientCard = (wardPatient) => { ))} + {wardPatient?.inpatientRequest ? ( +
+ : + +
+ ) : null} { const wardPatients: WardPatient[] = patients.map((patient): WardPatient => { const inpatientAdmission = inpatientAdmissionsByPatientUuid.get(patient.uuid); if (inpatientAdmission) { - const { patient, visit } = inpatientAdmission; - return { patient, visit, bed, inpatientAdmission, inpatientRequest: null }; + const { patient, visit, currentInpatientRequest } = inpatientAdmission; + return { patient, visit, bed, inpatientAdmission, inpatientRequest: currentInpatientRequest || null }; } else { // for some reason this patient is in a bed but not in the list of admitted patients, so we need to use the patient data from the bed endpoint return {