From f5859d2371ae959f0cfdefa2d10fdc664403737e Mon Sep 17 00:00:00 2001 From: Chi Bong Ho Date: Mon, 4 Nov 2024 16:18:48 -0500 Subject: [PATCH] (fix) O3-4167 Ward App - separate 'Bed Swap' and 'Transfer' into 2 separate workspace action menu items --- ...ssign-bed-workspace-siderail.component.tsx | 22 ++++++ .../transfer-workspace-siderail.component.tsx | 16 ++-- packages/esm-ward-app/src/index.ts | 16 +++- packages/esm-ward-app/src/routes.json | 21 ++++- .../assign-bed-form.component.tsx} | 13 +-- .../assign-bed-form.scss} | 4 - .../assign-bed.workspace.tsx | 18 +++++ .../patient-transfer-swap.workspace.tsx | 48 ----------- .../patient-transfer-request.workspace.tsx | 2 +- ...atient-transfer-request-form.component.tsx | 2 +- .../patient-transfer/patient-transfer.scss | 79 +++++++++++++++++++ .../patient-transfer.workspace.tsx | 18 +++++ packages/esm-ward-app/translations/en.json | 5 +- 13 files changed, 177 insertions(+), 87 deletions(-) create mode 100644 packages/esm-ward-app/src/action-menu-buttons/assign-bed-workspace-siderail.component.tsx rename packages/esm-ward-app/src/ward-workspace/{patient-transfer-bed-swap/patient-bed-swap-form.component.tsx => assign-bed-workspace/assign-bed-form.component.tsx} (93%) rename packages/esm-ward-app/src/ward-workspace/{patient-transfer-bed-swap/patient-transfer-swap.scss => assign-bed-workspace/assign-bed-form.scss} (95%) create mode 100644 packages/esm-ward-app/src/ward-workspace/assign-bed-workspace/assign-bed.workspace.tsx delete mode 100644 packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.workspace.tsx rename packages/esm-ward-app/src/ward-workspace/{patient-transfer-bed-swap => patient-transfer}/patient-transfer-request-form.component.tsx (99%) create mode 100644 packages/esm-ward-app/src/ward-workspace/patient-transfer/patient-transfer.scss create mode 100644 packages/esm-ward-app/src/ward-workspace/patient-transfer/patient-transfer.workspace.tsx diff --git a/packages/esm-ward-app/src/action-menu-buttons/assign-bed-workspace-siderail.component.tsx b/packages/esm-ward-app/src/action-menu-buttons/assign-bed-workspace-siderail.component.tsx new file mode 100644 index 000000000..6d5f9be63 --- /dev/null +++ b/packages/esm-ward-app/src/action-menu-buttons/assign-bed-workspace-siderail.component.tsx @@ -0,0 +1,22 @@ +import { ActionMenuButton, HospitalBedIcon, launchWorkspace, useFeatureFlag } from '@openmrs/esm-framework'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +export default function AssignBedSiderailIcon() { + const { t } = useTranslation(); + const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module'); + const handler = () => { + launchWorkspace('bed-assignment-workspace'); + }; + return isBedManagementModuleInstalled ? ( + } + label={t('assignBed', 'Assign bed')} + iconDescription={t('assignBed', 'Assign Bed')} + handler={handler} + type="assign-bed-form" + /> + ) : ( + <> + ); +} diff --git a/packages/esm-ward-app/src/action-menu-buttons/transfer-workspace-siderail.component.tsx b/packages/esm-ward-app/src/action-menu-buttons/transfer-workspace-siderail.component.tsx index fa9a2bfd7..81c88da61 100644 --- a/packages/esm-ward-app/src/action-menu-buttons/transfer-workspace-siderail.component.tsx +++ b/packages/esm-ward-app/src/action-menu-buttons/transfer-workspace-siderail.component.tsx @@ -1,19 +1,13 @@ -import { - ActionMenuButton, - getGlobalStore, - launchWorkspace, - MovementIcon, - type DefaultWorkspaceProps, -} from '@openmrs/esm-framework'; +import { ActionMenuButton, launchWorkspace, MovementIcon, type DefaultWorkspaceProps } from '@openmrs/esm-framework'; import React from 'react'; import { useTranslation } from 'react-i18next'; -interface PatientTransferAndSwapSiderailIconProps extends DefaultWorkspaceProps {} +interface PatientTransferSiderailIconProps extends DefaultWorkspaceProps {} -export default function PatientTransferAndSwapSiderailIcon(additionalProps: PatientTransferAndSwapSiderailIconProps) { +export default function PatientTransferSiderailIcon(additionalProps: PatientTransferSiderailIconProps) { const { t } = useTranslation(); const handler = () => { - launchWorkspace('patient-transfer-swap-workspace'); + launchWorkspace('patient-transfer-workspace'); }; return ( ); } diff --git a/packages/esm-ward-app/src/index.ts b/packages/esm-ward-app/src/index.ts index d7a3da389..c7ea4978d 100644 --- a/packages/esm-ward-app/src/index.ts +++ b/packages/esm-ward-app/src/index.ts @@ -55,8 +55,8 @@ export const wardPatientNotesActionButtonExtension = getAsyncLifecycle( ); // t('transfers', 'Transfers') -export const patientTransferAndSwapWorkspace = getAsyncLifecycle( - () => import('./ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.workspace'), +export const patientTransferWorkspace = getAsyncLifecycle( + () => import('./ward-workspace/patient-transfer/patient-transfer.workspace'), options, ); @@ -66,7 +66,7 @@ export const patientDischargeWorkspace = getAsyncLifecycle( options, ); -export const patientTransferAndSwapWorkspaceSiderailIcon = getAsyncLifecycle( +export const patientTransferWorkspaceSiderailIcon = getAsyncLifecycle( () => import('./action-menu-buttons/transfer-workspace-siderail.component'), options, ); @@ -77,6 +77,12 @@ export const patientTransferRequestWorkspace = getAsyncLifecycle( options, ); +// t('assignBed', 'Assign bed') +export const assignBedWorkspace = getAsyncLifecycle( + () => import('./ward-workspace/assign-bed-workspace/assign-bed.workspace'), + options, +); + export const patientDischargeWorkspaceSideRailIcon = getAsyncLifecycle( () => import('./action-menu-buttons/discharge-workspace-siderail.component'), options, @@ -101,6 +107,10 @@ export const maternalWardView = getAsyncLifecycle( () => import('./ward-view/materal-ward/maternal-ward-view.component'), options, ); +export const assignBedWorkspaceSideRailIcon = getAsyncLifecycle( + () => import('./action-menu-buttons/assign-bed-workspace-siderail.component'), + options, +); export function startupApp() { registerBreadcrumbs([]); diff --git a/packages/esm-ward-app/src/routes.json b/packages/esm-ward-app/src/routes.json index 57c0ea538..20fca40b7 100644 --- a/packages/esm-ward-app/src/routes.json +++ b/packages/esm-ward-app/src/routes.json @@ -48,7 +48,12 @@ { "name": "transfer-swap-patient-siderail-button", "slot": "action-menu-ward-patient-items-slot", - "component": "patientTransferAndSwapWorkspaceSiderailIcon" + "component": "patientTransferWorkspaceSiderailIcon" + }, + { + "name": "assign-bed-workspace-siderail-button", + "component": "assignBedWorkspaceSideRailIcon", + "slot": "action-menu-ward-patient-items-slot" }, { "name": "patient-discharge-siderail-button", @@ -102,10 +107,10 @@ "sidebarFamily": "ward-patient" }, { - "name": "patient-transfer-swap-workspace", - "component": "patientTransferAndSwapWorkspace", + "name": "patient-transfer-workspace", + "component": "patientTransferWorkspace", "title": "transfers", - "type": "transfer-swap-bed-form", + "type": "transfer-form", "hasOwnSidebar": true, "sidebarFamily": "ward-patient" }, @@ -131,6 +136,14 @@ "hasOwnSidebar": true, "sidebarFamily": "ward-patient", "width": "wider" + }, + { + "name": "bed-assignment-workspace", + "component": "assignBedWorkspace", + "title": "assignBed", + "type": "ward-patient-discharge", + "hasOwnSidebar": true, + "sidebarFamily": "ward-patient" } ] } diff --git a/packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-bed-swap-form.component.tsx b/packages/esm-ward-app/src/ward-workspace/assign-bed-workspace/assign-bed-form.component.tsx similarity index 93% rename from packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-bed-swap-form.component.tsx rename to packages/esm-ward-app/src/ward-workspace/assign-bed-workspace/assign-bed-form.component.tsx index 1d4ac42ad..d50b5ff0a 100644 --- a/packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-bed-swap-form.component.tsx +++ b/packages/esm-ward-app/src/ward-workspace/assign-bed-workspace/assign-bed-form.component.tsx @@ -8,10 +8,10 @@ import { useTranslation } from 'react-i18next'; import { z } from 'zod'; import useEmrConfiguration from '../../hooks/useEmrConfiguration'; import useWardLocation from '../../hooks/useWardLocation'; -import type { BedLayout, WardPatientWorkspaceProps, WardViewContext } from '../../types'; +import type { WardPatientWorkspaceProps, WardViewContext } from '../../types'; import { assignPatientToBed, createEncounter, removePatientFromBed } from '../../ward.resource'; import BedSelector from '../bed-selector.component'; -import styles from './patient-transfer-swap.scss'; +import styles from './assign-bed-form.scss'; export default function PatientBedSwapForm({ promptBeforeClosing, @@ -52,15 +52,6 @@ export default function PatientBedSwapForm({ return () => promptBeforeClosing(null); }, [isDirty]); - const getBedInformation = useCallback( - (bed: BedLayout) => { - const patients = bed.patients.map((bedPatient) => bedPatient?.person?.preferredName?.display); - const bedNumber = bed.bedNumber; - return [bedNumber, ...(patients.length ? patients : [t('empty', 'Empty')])].join(' ยท '); - }, - [t], - ); - const beds = wardPatientGroupDetails?.bedLayouts ?? []; const onSubmit = useCallback( diff --git a/packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.scss b/packages/esm-ward-app/src/ward-workspace/assign-bed-workspace/assign-bed-form.scss similarity index 95% rename from packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.scss rename to packages/esm-ward-app/src/ward-workspace/assign-bed-workspace/assign-bed-form.scss index 98cfabd5b..eed0e763b 100644 --- a/packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.scss +++ b/packages/esm-ward-app/src/ward-workspace/assign-bed-workspace/assign-bed-form.scss @@ -17,10 +17,6 @@ color: #393939; } -.contentSwitcherWrapper { - padding: 0 layout.$spacing-05; -} - .patientWorkspaceBanner { margin-bottom: layout.$spacing-05; } diff --git a/packages/esm-ward-app/src/ward-workspace/assign-bed-workspace/assign-bed.workspace.tsx b/packages/esm-ward-app/src/ward-workspace/assign-bed-workspace/assign-bed.workspace.tsx new file mode 100644 index 000000000..a631a6abc --- /dev/null +++ b/packages/esm-ward-app/src/ward-workspace/assign-bed-workspace/assign-bed.workspace.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import type { WardPatientWorkspaceProps } from '../../types'; +import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component'; +import PatientBedSwapForm from './assign-bed-form.component'; +import styles from './assign-bed-form.scss'; + +export default function PatientTransferWorkspace(props: WardPatientWorkspaceProps) { + const { wardPatient } = props; + + return ( +
+
+ +
+
{wardPatient && }
+
+ ); +} diff --git a/packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.workspace.tsx b/packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.workspace.tsx deleted file mode 100644 index eacca9ea1..000000000 --- a/packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.workspace.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { ContentSwitcher, Switch } from '@carbon/react'; -import { useFeatureFlag } from '@openmrs/esm-framework'; -import React, { useState } from 'react'; -import { useTranslation } from 'react-i18next'; -import type { WardPatientWorkspaceProps } from '../../types'; -import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component'; -import PatientBedSwapForm from './patient-bed-swap-form.component'; -import PatientTransferForm from './patient-transfer-request-form.component'; -import styles from './patient-transfer-swap.scss'; - -const TransferSection = { - TRANSFER: 'transfer', - BED_SWAP: 'bed-swap', -} as const; - -type TransferSectionValues = (typeof TransferSection)[keyof typeof TransferSection]; - -export default function PatientTransferAndSwapWorkspace(props: WardPatientWorkspaceProps) { - const { t } = useTranslation(); - const [selectedSection, setSelectedSection] = useState(TransferSection.TRANSFER); - const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module'); - - return ( -
-
- -
- {isBedManagementModuleInstalled && ( -
-

{t('typeOfTransfer', 'Type of transfer')}

-
- setSelectedSection(name)}> - - - -
-
- )} -
- {selectedSection === TransferSection.TRANSFER ? ( - - ) : ( - - )} -
-
- ); -} diff --git a/packages/esm-ward-app/src/ward-workspace/patient-transfer-request-workspace/patient-transfer-request.workspace.tsx b/packages/esm-ward-app/src/ward-workspace/patient-transfer-request-workspace/patient-transfer-request.workspace.tsx index a5f45f98e..6f8a2d97d 100644 --- a/packages/esm-ward-app/src/ward-workspace/patient-transfer-request-workspace/patient-transfer-request.workspace.tsx +++ b/packages/esm-ward-app/src/ward-workspace/patient-transfer-request-workspace/patient-transfer-request.workspace.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import PatientTransferForm from '../patient-transfer-bed-swap/patient-transfer-request-form.component'; +import PatientTransferForm from '../patient-transfer/patient-transfer-request-form.component'; import { type WardPatientWorkspaceProps } from '../../types'; interface PatientTransferRequestFormProps extends WardPatientWorkspaceProps {} diff --git a/packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-request-form.component.tsx b/packages/esm-ward-app/src/ward-workspace/patient-transfer/patient-transfer-request-form.component.tsx similarity index 99% rename from packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-request-form.component.tsx rename to packages/esm-ward-app/src/ward-workspace/patient-transfer/patient-transfer-request-form.component.tsx index 9228dd01d..c3f89869c 100644 --- a/packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-request-form.component.tsx +++ b/packages/esm-ward-app/src/ward-workspace/patient-transfer/patient-transfer-request-form.component.tsx @@ -11,7 +11,7 @@ import useWardLocation from '../../hooks/useWardLocation'; import LocationSelector from '../../location-selector/location-selector.component'; import type { ObsPayload, WardPatientWorkspaceProps, WardViewContext } from '../../types'; import { createEncounter } from '../../ward.resource'; -import styles from './patient-transfer-swap.scss'; +import styles from './patient-transfer.scss'; export default function PatientTransferForm({ closeWorkspaceWithSavedChanges, diff --git a/packages/esm-ward-app/src/ward-workspace/patient-transfer/patient-transfer.scss b/packages/esm-ward-app/src/ward-workspace/patient-transfer/patient-transfer.scss new file mode 100644 index 000000000..eed0e763b --- /dev/null +++ b/packages/esm-ward-app/src/ward-workspace/patient-transfer/patient-transfer.scss @@ -0,0 +1,79 @@ +@use '@carbon/type'; +@use '@carbon/layout'; +@use '@openmrs/esm-styleguide/src/vars' as *; + +.flexWrapper { + height: 100%; + display: flex; + flex-direction: column; + color: #393939; +} + +.workspaceContent { + padding: layout.$spacing-05; + height: 100%; + display: flex; + flex-direction: column; + color: #393939; +} + +.patientWorkspaceBanner { + margin-bottom: layout.$spacing-05; +} + +.field { + margin-bottom: layout.$spacing-05; + & > h2 { + margin-bottom: layout.$spacing-03; + } +} + +.contentSwitcher { + margin-top: layout.$spacing-03; +} + +.workspaceForm { + flex: 1; +} + +.productiveHeading02 { + @include type.type-style('heading-compact-02'); +} + +.formContainer { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; +} + +.buttonSet { + display: flex; + align-items: center; + margin: 0 (-(layout.$spacing-05)) (-(layout.$spacing-05)) (-(layout.$spacing-05)); + + button { + max-width: unset !important; + width: 50% !important; + + > svg { + fill: currentColor !important; + } + } +} + +.radioButtonGroup { + margin-top: layout.$spacing-03; + fieldset { + flex-direction: column; + align-items: flex-start; + + :global(.cds--radio-button-wrapper) { + margin-bottom: layout.$spacing-04; + } + } +} + +.notifications { + margin-top: layout.$spacing-05; +} diff --git a/packages/esm-ward-app/src/ward-workspace/patient-transfer/patient-transfer.workspace.tsx b/packages/esm-ward-app/src/ward-workspace/patient-transfer/patient-transfer.workspace.tsx new file mode 100644 index 000000000..33d0c8c29 --- /dev/null +++ b/packages/esm-ward-app/src/ward-workspace/patient-transfer/patient-transfer.workspace.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import type { WardPatientWorkspaceProps } from '../../types'; +import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component'; +import PatientTransferForm from './patient-transfer-request-form.component'; +import styles from './patient-transfer.scss'; + +export default function PatientTransferWorkspace(props: WardPatientWorkspaceProps) { + const { wardPatient } = props; + + return ( +
+
+ +
+
{wardPatient && }
+
+ ); +} diff --git a/packages/esm-ward-app/translations/en.json b/packages/esm-ward-app/translations/en.json index 93f7765ca..75cfce211 100644 --- a/packages/esm-ward-app/translations/en.json +++ b/packages/esm-ward-app/translations/en.json @@ -5,8 +5,8 @@ "admit": "Admit", "admitPatient": "Admit patient", "admitting": "Admitting...", + "assignBed": "Assign bed", "bedShare": "Bed share", - "bedSwap": "Bed swap", "cancel": "Cancel", "capacity": "Capacity", "capacityMetricValue": "{{ metricValue }} %", @@ -16,7 +16,6 @@ "countItems_one": "{{count}} {{item}}", "countItems_other": "{{count}} {{item}}", "discharge": "Discharge", - "empty": "Empty", "emptyBed": "Empty bed", "emptyText": "Empty", "encounterDisplay": "{{encounterType}} {{encounterDate}}", @@ -83,12 +82,10 @@ "showingLocations_one": "{{start}}-{{end}} of {{count}} locations", "showingLocations_other": "{{start}}-{{end}} of {{count}} locations", "somePartsOfTheFormDidntLoad": "Some parts of the form didn't load", - "transfer": "Transfer", "transferElsewhere": "Transfer elsewhere", "transferRequest": "Transfer request", "transfers": "Transfers", "transferType": "Transfer type", - "typeOfTransfer": "Type of transfer", "unknown": "Unknown", "visitNoteSaved": "Patient note saved", "wardClinicalNotePlaceholder": "Write any notes here",