(feat) O3-3245: Add workspace to create transfer request for patients…

… in the admission queue (#1289)

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

@@ -220,4 +220,4 @@ export interface WardPatientCardDefinition {
      */
     location: string;
   }>;
-}
+}

packages/esm-ward-app/src/index.ts

@@ -84,6 +84,12 @@ export const patientTransferAndSwapWorkspaceSiderailIcon = getAsyncLifecycle(
   options,
 );
 
+// t('transferRequest', 'Transfer request')
+export const patientTransferRequestWorkspace = getAsyncLifecycle(
+  () => import('./ward-workspace/patient-transfer-request-workspace/patient-transfer-request.workspace'),
+  options,
+);
+
 export const patientDischargeWorkspaceSideRailIcon = getAsyncLifecycle(
   () => import('./action-menu-buttons/discharge-workspace-siderail.component'),
   options,

packages/esm-ward-app/src/routes.json

@@ -99,6 +99,12 @@
       "hasOwnSidebar": true,
       "sidebarFamily": "ward-patient"
     },
+    {
+      "name": "patient-transfer-request-workspace",
+      "component": "patientTransferRequestWorkspace",
+      "title": "transferRequest",
+      "type": "transfer-request-form"
+    },
     {
       "name": "patient-discharge-workspace",
       "component": "patientDischargeWorkspace",

packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-coded-obs-tags.tsx

@@ -38,10 +38,7 @@ const WardPatientCodedObsTags: React.FC<WardPatientCodedObsTagsProps> = ({ confi
       return matchVisit || visit == null; // TODO: remove visit == null hack when server API supports returning visit
     });
 
-    const summaryLabelToDisplay =
-      summaryLabel != null
-        ? t(summaryLabel)
-        : obsToDisplay?.[0]?.concept?.display;
+    const summaryLabelToDisplay = summaryLabel != null ? t(summaryLabel) : obsToDisplay?.[0]?.concept?.display;
 
     const obsNodes = obsToDisplay?.map((o) => {
       const { display, uuid } = o.value as OpenmrsResource;
@@ -78,4 +75,4 @@ const WardPatientCodedObsTags: React.FC<WardPatientCodedObsTagsProps> = ({ confi
   }
 };
 
-export default WardPatientCodedObsTags;
+export default WardPatientCodedObsTags;

packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-identifier.tsx

@@ -40,8 +40,7 @@ const WardPatientIdentifier: React.FC<WardPatientIdentifierProps> = ({ config: c
   );
   patientIdentifiers.sort(identifierCompareFunction);
   const patientIdentifier = patientIdentifiers[0];
-  const labelToDisplay =
-    label != null ? t(label) : patientIdentifier?.identifierType?.name;
+  const labelToDisplay = label != null ? t(label) : patientIdentifier?.identifierType?.name;
   return (
     <div>
       {labelToDisplay ? <Tag>{t('identifierTypelabel', '{{label}}:', { label: labelToDisplay })}</Tag> : <></>}
@@ -50,4 +49,4 @@ const WardPatientIdentifier: React.FC<WardPatientIdentifierProps> = ({ config: c
   );
 };
 
-export default WardPatientIdentifier;
+export default WardPatientIdentifier;

packages/esm-ward-app/src/ward-patient-card/row-elements/ward-patient-obs.tsx

@@ -32,8 +32,7 @@ const WardPatientObs: React.FC<WardPatientObsProps> = ({ config, patient, visit
       })
       ?.slice(0, limit == 0 ? Number.MAX_VALUE : limit);
 
-    const labelToDisplay =
-      label != null ? t(label) : obsToDisplay?.[0]?.concept?.display;
+    const labelToDisplay = label != null ? t(label) : obsToDisplay?.[0]?.concept?.display;
 
     const obsNodes = obsToDisplay?.map((o) => {
       const { value } = o;
@@ -56,4 +55,4 @@ const WardPatientObs: React.FC<WardPatientObsProps> = ({ config, patient, visit
   }
 };
 
-export default WardPatientObs;
+export default WardPatientObs;

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

@@ -2,21 +2,29 @@ import { Button } from '@carbon/react';
 import { ArrowRightIcon, launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { WardPatientCard } from '../../types';
+import type { WardPatientWorkspaceProps, WardPatientCard } from '../../types';
 import type { AdmitPatientFormWorkspaceProps } from '../admit-patient-form-workspace/types';
 import styles from './admission-request-card.scss';
 
-const AdmissionRequestCardActions: WardPatientCard = ({ patient, inpatientRequest }) => {
+const AdmissionRequestCardActions: WardPatientCard = (wardPatient) => {
+  const { patient, inpatientRequest } = wardPatient;
   const { dispositionType } = inpatientRequest;
   const { t } = useTranslation();
   const responsiveSize = useLayoutType() === 'tablet' ? 'lg' : 'md';
   const launchPatientAdmissionForm = useCallback(
     () => launchWorkspace<AdmitPatientFormWorkspaceProps>('admit-patient-form-workspace', { patient, dispositionType }),
     [],
   );
+
+  const launchPatientTransferForm = useCallback(() => {
+    launchWorkspace<WardPatientWorkspaceProps>('patient-transfer-request-workspace', {
+      wardPatient,
+    });
+  }, [wardPatient]);
+
   return (
     <div className={styles.admissionRequestActionBar}>
-      <Button kind="ghost" size={responsiveSize}>
+      <Button kind="ghost" size={responsiveSize} onClick={launchPatientTransferForm}>
         {t('transferElsewhere', 'Transfer elsewhere')}
       </Button>
       <Button kind="ghost" renderIcon={ArrowRightIcon} size={responsiveSize} onClick={launchPatientAdmissionForm}>

packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-bed-swap-form.component.tsx

@@ -21,6 +21,7 @@ import {
   RadioButtonGroup,
   RadioButtonSkeleton,
 } from '@carbon/react';
+import classNames from 'classnames';
 
 export default function PatientBedSwapForm({
   promptBeforeClosing,
@@ -148,7 +149,9 @@ export default function PatientBedSwapForm({
   }, []);
 
   return (
-    <Form onSubmit={handleSubmit(onSubmit, onError)} className={styles.formContainer}>
+    <Form
+      onSubmit={handleSubmit(onSubmit, onError)}
+      className={classNames(styles.formContainer, styles.workspaceContent)}>
       <div>
         {errorFetchingEmrConfiguration && (
           <div className={styles.formError}>

packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-request-form.component.tsx

@@ -12,6 +12,7 @@ import { createEncounter } from '../../ward.resource';
 import useWardLocation from '../../hooks/useWardLocation';
 import type { ObsPayload, WardPatientWorkspaceProps } from '../../types';
 import { useInpatientRequest } from '../../hooks/useInpatientRequest';
+import classNames from 'classnames';
 import { Button, ButtonSet, Form, InlineNotification, RadioButton, RadioButtonGroup, TextArea } from '@carbon/react';
 
 export default function PatientTransferForm({
@@ -154,7 +155,9 @@ export default function PatientTransferForm({
   }, []);
 
   return (
-    <Form onSubmit={handleSubmit(onSubmit, onError)} className={styles.formContainer}>
+    <Form
+      onSubmit={handleSubmit(onSubmit, onError)}
+      className={classNames(styles.formContainer, styles.workspaceContent)}>
       <div>
         {errorFetchingEmrConfiguration && (
           <div className={styles.formError}>

packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.scss

@@ -2,6 +2,13 @@
 @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%;
@@ -10,8 +17,12 @@
   color: #393939;
 }
 
+.contentSwitcherWrapper {
+  padding: 0 layout.$spacing-05;
+}
+
 .patientWorkspaceBanner {
-  margin: (-(layout.$spacing-05)) (-(layout.$spacing-05)) layout.$spacing-05 (-(layout.$spacing-05));
+  margin-bottom: layout.$spacing-05;
 }
 
 .field {
@@ -26,7 +37,6 @@
 }
 
 .workspaceForm {
-  margin-top: layout.$spacing-05;
   flex: 1;
 }
 

packages/esm-ward-app/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.workspace.tsx

@@ -21,12 +21,12 @@ export default function PatientTransferAndSwapWorkspace(props: WardPatientWorksp
   const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
 
   return (
-    <div className={styles.workspaceContent}>
+    <div className={styles.flexWrapper}>
       <div className={styles.patientWorkspaceBanner}>
         <WardPatientWorkspaceBanner {...props?.wardPatient} />
       </div>
       {isBedManagementModuleInstalled && (
-        <div>
+        <div className={styles.contentSwitcherWrapper}>
           <h2 className={styles.productiveHeading02}>{t('typeOfTransfer', 'Type of transfer')}</h2>
           <div className={styles.contentSwitcher}>
             <ContentSwitcher onChange={({ name }) => setSelectedSection(name)}>

packages/esm-ward-app/src/ward-workspace/patient-transfer-request-workspace/patient-transfer-request.workspace.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import PatientTransferForm from '../patient-transfer-bed-swap/patient-transfer-request-form.component';
+import { type WardPatientWorkspaceProps } from '../../types';
+
+interface PatientTransferRequestFormProps extends WardPatientWorkspaceProps {}
+
+const PatientTransferRequestForm: React.FC<PatientTransferRequestFormProps> = (props) => {
+  return <PatientTransferForm {...props} />;
+};
+
+export default PatientTransferRequestForm;

packages/esm-ward-app/translations/en.json

@@ -65,6 +65,7 @@
   "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",