@openmrs/esm-ward-app 9.2.1-pre.6635 → 9.2.1-pre.6637

package/src/ward-workspace/patient-transfer-bed-swap/patient-admit-or-transfer-request-form.component.tsx

@@ -1,6 +1,8 @@
 import {
   Button,
   ButtonSet,
+  Checkbox,
+  CheckboxGroup,
   Form,
   InlineNotification,
   RadioButton,
@@ -15,11 +17,12 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import useWardLocation from '../../hooks/useWardLocation';
 import LocationSelector from '../../location-selector/location-selector.component';
 import type { ObsPayload, WardPatientWorkspaceProps, WardViewContext } from '../../types';
 import { useCreateEncounter } from '../../ward.resource';
 import styles from './patient-transfer-swap.scss';
+import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name.component';
+import WardPatientIdentifier from '../../ward-patient-card/row-elements/ward-patient-identifier.component';
 
 /**
  * Form to fill out for:
@@ -31,6 +34,7 @@ export default function PatientAdmitOrTransferForm({
   closeWorkspaceWithSavedChanges,
   wardPatient,
   promptBeforeClosing,
+  relatedTransferPatients,
 }: WardPatientWorkspaceProps) {
   const { t } = useTranslation();
   const { patient, inpatientRequest, visit } = wardPatient ?? {};
@@ -44,6 +48,7 @@ export default function PatientAdmitOrTransferForm({
   );
   const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
   const currentAdmission = wardPatientGroupDetails?.inpatientAdmissionsByPatientUuid?.get(patient?.uuid);
+  const [selectedRelatedPatient, setCheckedRelatedPatient] = useState<string[]>([]);
 
   const zodSchema = useMemo(
     () =>
@@ -112,12 +117,28 @@ export default function PatientAdmitOrTransferForm({
         });
       }
 
-      createEncounter(patient, emrConfiguration.transferRequestEncounterType, visit?.uuid, [
-        {
-          concept: emrConfiguration.dispositionDescriptor.dispositionSetConcept.uuid,
-          groupMembers: obs,
-        },
-      ])
+      const wardPatientsToTransfer = [
+        wardPatient,
+        ...relatedTransferPatients.filter((rp) => selectedRelatedPatient.includes(rp.patient.uuid)),
+      ];
+
+      Promise.all(
+        wardPatientsToTransfer.map(async (wardPatientToTransfer) => {
+          const { patient: patientToTransfer, visit: patientToTransferVisit } = wardPatientToTransfer;
+
+          return createEncounter(
+            patientToTransfer,
+            emrConfiguration.transferRequestEncounterType,
+            patientToTransferVisit?.uuid,
+            [
+              {
+                concept: emrConfiguration.dispositionDescriptor.dispositionSetConcept.uuid,
+                groupMembers: obs,
+              },
+            ],
+          );
+        }),
+      )
         .then(() => {
           showSnackbar({
             title: t('patientTransferRequestCreated', 'Patient transfer request created'),
@@ -142,10 +163,11 @@ export default function PatientAdmitOrTransferForm({
       createEncounter,
       dispositionsWithTypeTransfer,
       emrConfiguration,
-      patient,
       t,
       wardPatientGroupDetails,
-      visit?.uuid,
+      selectedRelatedPatient,
+      relatedTransferPatients,
+      wardPatient,
     ],
   );
 
@@ -195,6 +217,32 @@ export default function PatientAdmitOrTransferForm({
             title={t('patientCurrentlyNotAdmitted', 'Patient currently not admitted')}
           />
         )}
+        {relatedTransferPatients?.length > 0 && (
+          <div>
+            <CheckboxGroup legendText={t('alsoTransfer', 'Also transfer:')}>
+              {relatedTransferPatients?.map(({ patient: relatedPatient }) => (
+                <Checkbox
+                  checked={selectedRelatedPatient.includes(relatedPatient.uuid)}
+                  className={styles.checkbox}
+                  id={relatedPatient.uuid}
+                  key={'also-transfer-' + relatedPatient.uuid}
+                  labelText={
+                    <div className={styles.relatedPatientTransferSwapOption}>
+                      <WardPatientName patient={relatedPatient} />
+                      <WardPatientIdentifier id="patient-identifier" patient={relatedPatient} />
+                    </div>
+                  }
+                  onChange={(_, { checked, id }) => {
+                    const currentValue = selectedRelatedPatient;
+                    setCheckedRelatedPatient(
+                      checked ? [...currentValue, id] : currentValue.filter((item) => item !== id),
+                    );
+                  }}
+                />
+              ))}
+            </CheckboxGroup>
+          </div>
+        )}
         <div className={styles.field}>
           <h2 className={styles.productiveHeading02}>{t('selectALocation', 'Select a location')}</h2>
           <Controller

package/src/ward-workspace/patient-transfer-bed-swap/patient-bed-swap-form.component.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, ButtonSet, Form, InlineNotification } from '@carbon/react';
+import { Button, ButtonSet, Form, InlineNotification , CheckboxGroup , Checkbox , Stack } from '@carbon/react';
 import classNames from 'classnames';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Controller, useForm } from 'react-hook-form';
@@ -10,11 +10,14 @@ import type { WardPatientWorkspaceProps, WardViewContext } from '../../types';
 import { assignPatientToBed, useCreateEncounter, removePatientFromBed } from '../../ward.resource';
 import BedSelector from '../bed-selector.component';
 import styles from './patient-transfer-swap.scss';
+import WardPatientIdentifier from '../../ward-patient-card/row-elements/ward-patient-identifier.component';
+import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name.component';
 
 export default function PatientBedSwapForm({
   promptBeforeClosing,
   closeWorkspaceWithSavedChanges,
   wardPatient,
+  relatedTransferPatients,
 }: WardPatientWorkspaceProps) {
   const { patient, visit } = wardPatient;
   const { t } = useTranslation();
@@ -24,6 +27,7 @@ export default function PatientBedSwapForm({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
   const { isLoading } = wardPatientGroupDetails?.admissionLocationResponse ?? {};
+  const [selectedRelatedPatient, setCheckedRelatedPatient] = useState<string[]>([]);
 
   const zodSchema = useMemo(
     () =>
@@ -56,27 +60,40 @@ export default function PatientBedSwapForm({
       const bedSelected = beds.find((bed) => bed.bedId === values.bedId);
       setIsSubmitting(true);
       setShowErrorNotifications(false);
-      createEncounter(patient, emrConfiguration.bedAssignmentEncounterType, visit.uuid)
-        .then(async (response) => {
+      const wardPatientsToSwap = [
+        wardPatient,
+        ...relatedTransferPatients.filter((rp) => selectedRelatedPatient.includes(rp.patient.uuid)),
+      ];
+
+      Promise.all(
+        wardPatientsToSwap.map(async (wardPatientToSwap) => {
+          const { patient: patientToSwap, visit: patientToSwapVisit } = wardPatientToSwap;
+
+          const response = await createEncounter(
+            patientToSwap,
+            emrConfiguration.bedAssignmentEncounterType,
+            patientToSwapVisit.uuid,
+          );
           if (response.ok) {
             if (bedSelected) {
-              return assignPatientToBed(values.bedId, patient.uuid, response.data.uuid);
+              return assignPatientToBed(values.bedId, patientToSwap.uuid, response.data.uuid);
             } else {
               // get the bed that the patient is currently assigned to
               const bedAssignedToPatient = beds.find((bed) =>
-                bed.patients.some((bedPatient) => bedPatient.uuid == patient.uuid),
+                bed.patients.some((bedPatient) => bedPatient.uuid == patientToSwap.uuid),
               );
               if (bedAssignedToPatient) {
-                return removePatientFromBed(bedAssignedToPatient.bedId, patient.uuid);
+                return removePatientFromBed(bedAssignedToPatient.bedId, patientToSwap.uuid);
               } else {
                 // no-op
                 return Promise.resolve({ ok: true });
               }
             }
           }
-        })
-        .then((response) => {
-          if (response && response?.ok) {
+        }),
+      )
+        .then((responses) => {
+          if (responses.every((response) => response?.ok)) {
             if (bedSelected) {
               showSnackbar({
                 kind: 'success',
@@ -118,7 +135,9 @@ export default function PatientBedSwapForm({
       t,
       wardPatientGroupDetails,
       closeWorkspaceWithSavedChanges,
-      visit.uuid,
+      selectedRelatedPatient,
+      relatedTransferPatients,
+      wardPatient,
     ],
   );
 
@@ -131,7 +150,7 @@ export default function PatientBedSwapForm({
     <Form
       onSubmit={handleSubmit(onSubmit, onError)}
       className={classNames(styles.formContainer, styles.workspaceContent)}>
-      <div>
+      <Stack gap={4}>
         {errorFetchingEmrConfiguration && (
           <div className={styles.formError}>
             <InlineNotification
@@ -146,22 +165,51 @@ export default function PatientBedSwapForm({
             />
           </div>
         )}
-        <h2 className={styles.productiveHeading02}>{t('selectABed', 'Select a bed')}</h2>
-        <Controller
-          name="bedId"
-          control={control}
-          render={({ field: { onChange, value }, fieldState: { error } }) => (
-            <BedSelector
-              beds={beds}
-              isLoadingBeds={isLoading}
-              currentPatient={patient}
-              selectedBedId={value}
-              error={error}
-              control={control}
-              onChange={onChange}
-            />
-          )}
-        />
+        {relatedTransferPatients?.length > 0 && (
+          <div>
+            <CheckboxGroup legendText={t('alsoSwap', 'Also swap:')}>
+              {relatedTransferPatients?.map(({ patient: relatedPatient }) => (
+                <div key={'also-swap-' + relatedPatient.uuid}>
+                  <Checkbox
+                    checked={selectedRelatedPatient.includes(relatedPatient.uuid)}
+                    className={styles.checkbox}
+                    id={relatedPatient.uuid}
+                    labelText={
+                      <div className={styles.relatedPatientTransferSwapOption}>
+                        <WardPatientName patient={relatedPatient} />
+                        <WardPatientIdentifier id="patient-identifier" patient={relatedPatient} />
+                      </div>
+                    }
+                    onChange={(_, { checked, id }) => {
+                      const currentValue = selectedRelatedPatient;
+                      setCheckedRelatedPatient(
+                        checked ? [...currentValue, id] : currentValue.filter((item) => item !== id),
+                      );
+                    }}
+                  />
+                </div>
+              ))}
+            </CheckboxGroup>
+          </div>
+        )}
+        <div className={styles.field}>
+          <h2 className={styles.productiveHeading02}>{t('selectABed', 'Select a bed')}</h2>
+          <Controller
+            name="bedId"
+            control={control}
+            render={({ field: { onChange, value }, fieldState: { error } }) => (
+              <BedSelector
+                beds={beds}
+                isLoadingBeds={isLoading}
+                currentPatient={patient}
+                selectedBedId={value}
+                error={error}
+                control={control}
+                onChange={onChange}
+              />
+            )}
+          />
+        </div>
         {showErrorNotifications && (
           <div className={styles.notifications}>
             {Object.values(errors).map((error) => (
@@ -169,7 +217,7 @@ export default function PatientBedSwapForm({
             ))}
           </div>
         )}
-      </div>
+      </Stack>
       <ButtonSet className={styles.buttonSet}>
         <Button size="xl" kind="secondary" onClick={closeWorkspaceWithSavedChanges}>
           {t('cancel', 'Cancel')}

package/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.scss

@@ -85,3 +85,9 @@
 .notifications {
   margin-top: layout.$spacing-05;
 }
+
+.relatedPatientTransferSwapOption {
+  display: flex;
+  flex-wrap: wrap;
+  gap: layout.$spacing-05;
+}

package/src/ward-workspace/patient-transfer-bed-swap/patient-transfer-swap.workspace.tsx

@@ -15,6 +15,10 @@ const TransferSection = {
 
 type TransferSectionValues = (typeof TransferSection)[keyof typeof TransferSection];
 
+/**
+ * This workspace opens the form to either transfer a patient to a different ward location
+ * or to change their currently assigned bed
+ */
 export default function PatientTransferAndSwapWorkspace(props: WardPatientWorkspaceProps) {
   const { t } = useTranslation();
   const [selectedSection, setSelectedSection] = useState<TransferSectionValues>(TransferSection.TRANSFER);

package/translations/en.json

@@ -7,6 +7,8 @@
   "admitElsewhere": "Admit elsewhere",
   "admitPatient": "Admit patient",
   "admitting": "Admitting...",
+  "alsoSwap": "Also swap:",
+  "alsoTransfer": "Also transfer:",
   "backToSearchResults": "Back to search results",
   "bedShare": "Bed share",
   "bedSwap": "Bed swap",