@kenyaemr/esm-ward-app 8.1.1-pre.123 → 8.1.1-pre.124

package/src/ward-workspace/admit-patient-form-workspace/admit-patient-form.workspace.tsx

@@ -1,18 +1,24 @@
-import { Button, ButtonSet, Column, Dropdown, DropdownSkeleton, Form, InlineNotification, Row } from '@carbon/react';
+import { Button, ButtonSet, Column, Form, InlineNotification, Row } from '@carbon/react';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { showSnackbar, useAppContext, useFeatureFlag, useSession } from '@openmrs/esm-framework';
+import { showSnackbar, useAppContext } from '@openmrs/esm-framework';
 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 useEmrConfiguration from '../../hooks/useEmrConfiguration';
+import { useAssignedBedByPatient } from '../../hooks/useAssignedBedByPatient';
 import useWardLocation from '../../hooks/useWardLocation';
-import type { BedLayout, WardViewContext } from '../../types';
-import { assignPatientToBed, createEncounter, removePatientFromBed } from '../../ward.resource';
+import type { WardViewContext } from '../../types';
+import { assignPatientToBed, removePatientFromBed, useAdmitPatient } from '../../ward.resource';
+import BedSelector from '../bed-selector.component';
 import styles from './admit-patient-form.scss';
 import type { AdmitPatientFormWorkspaceProps } from './types';
-import { useAssignedBedByPatient } from '../../hooks/useAssignedBedByPatient';
 
+/**
+ * This form gets rendered when the user clicks "admit patient" in
+ * the patient card in the admission requests workspace, but only when
+ * the bed management module is installed. It asks to (optionally) select
+ * a bed to assign to patient
+ */
 const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
   patient,
   dispositionType,
@@ -22,34 +28,23 @@ const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
 }) => {
   const { t } = useTranslation();
   const { location } = useWardLocation();
-  const { currentProvider } = useSession();
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
+  const { admitPatient, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useAdmitPatient();
   const [showErrorNotifications, setShowErrorNotifications] = useState(false);
   const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
-  const { isLoading, mutate: mutateAdmissionLocation } = wardPatientGroupDetails?.admissionLocationResponse ?? {};
-  const { mutate: mutateInpatientRequest } = wardPatientGroupDetails?.inpatientRequestResponse ?? {};
-  const { mutate: mutateInpatientAdmission } = wardPatientGroupDetails?.inpatientAdmissionResponse ?? {};
+  const { isLoading } = wardPatientGroupDetails?.admissionLocationResponse ?? {};
+
   const { data: bedsAssignedToPatient, isLoading: isLoadingBedsAssignedToPatient } = useAssignedBedByPatient(
     patient.uuid,
   );
   const beds = isLoading ? [] : wardPatientGroupDetails?.bedLayouts ?? [];
-  const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
-  const getBedRepresentation = useCallback((bedLayout: BedLayout) => {
-    const bedNumber = bedLayout.bedNumber;
-    const patients =
-      bedLayout.patients.length === 0
-        ? [t('emptyText', 'Empty')]
-        : bedLayout.patients.map((patient) => patient?.person?.preferredName?.display);
-    return [bedNumber, ...patients].join(' · ');
-  }, []);
 
   const zodSchema = useMemo(
     () =>
       z.object({
         bedId: z.number().optional(),
       }),
-    [isBedManagementModuleInstalled, beds],
+    [beds],
   );
 
   type FormValues = z.infer<typeof zodSchema>;
@@ -58,8 +53,6 @@ const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
     control,
     formState: { errors, isDirty },
     handleSubmit,
-    getValues,
-    watch,
   } = useForm<FormValues>({
     resolver: zodResolver(zodSchema),
   });
@@ -68,114 +61,77 @@ const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
     promptBeforeClosing(() => isDirty);
   }, [isDirty]);
 
-  const onSubmit = useCallback(
-    (values: FormValues) => {
-      setShowErrorNotifications(false);
-      setIsSubmitting(true);
-      const bedSelected = beds.find((bed) => bed.bedId === values.bedId);
-      createEncounter({
-        patient: patient.uuid,
-        encounterType:
-          dispositionType === 'ADMIT'
-            ? emrConfiguration.admissionEncounterType.uuid
-            : dispositionType === 'TRANSFER'
-              ? emrConfiguration.transferWithinHospitalEncounterType.uuid
-              : null,
-        location: location?.uuid,
-        encounterProviders: [
-          {
-            provider: currentProvider?.uuid,
-            encounterRole: emrConfiguration.clinicianEncounterRole.uuid,
-          },
-        ],
-        obs: [],
-      })
-        .then(
-          async (response) => {
-            if (response.ok) {
-              if (bedSelected) {
-                return assignPatientToBed(values.bedId, patient.uuid, response.data.uuid);
-              } else {
-                const assignedBedId = bedsAssignedToPatient?.data?.results?.[0]?.bedId;
-                if (assignedBedId) {
-                  return removePatientFromBed(assignedBedId, patient.uuid);
-                }
-                return response;
+  const onSubmit = (values: FormValues) => {
+    setShowErrorNotifications(false);
+    setIsSubmitting(true);
+    const bedSelected = beds.find((bed) => bed.bedId === values.bedId);
+    admitPatient(patient, dispositionType)
+      .then(
+        async (response) => {
+          if (response.ok) {
+            if (bedSelected) {
+              return assignPatientToBed(values.bedId, patient.uuid, response.data.uuid);
+            } else {
+              const assignedBedId = bedsAssignedToPatient?.data?.results?.[0]?.bedId;
+              if (assignedBedId) {
+                return removePatientFromBed(assignedBedId, patient.uuid);
               }
+              return response;
             }
-          },
-          (err: Error) => {
-            showSnackbar({
-              kind: 'error',
-              title: t('errorCreatingEncounter', 'Failed to admit patient', {
-                encounterType:
-                  dispositionType === 'ADMIT'
-                    ? emrConfiguration.admissionEncounterType.display
-                    : emrConfiguration.transferWithinHospitalEncounterType.display,
-              }),
-              subtitle: err.message,
-            });
-          },
-        )
-        .then(
-          (response) => {
-            if (response && response?.ok) {
-              if (bedSelected) {
-                showSnackbar({
-                  kind: 'success',
-                  title: t('patientAdmittedSuccessfully', 'Patient admitted successfully'),
-                  subtitle: t(
-                    'patientAdmittedSuccessfullySubtitle',
-                    '{{patientName}} has been successfully admitted and assigned to bed {{bedNumber}}',
-                    {
-                      patientName: patient.person.preferredName.display,
-                      bedNumber: bedSelected.bedNumber,
-                    },
-                  ),
-                });
-              } else {
-                showSnackbar({
-                  kind: 'success',
-                  title: t('patientAdmittedSuccessfully', 'Patient admitted successfully'),
-                  subtitle: t('patientAdmittedWoBed', 'Patient admitted successfully to {{location}}', {
-                    location: location?.display,
-                  }),
-                });
-              }
+          }
+        },
+        (err: Error) => {
+          showSnackbar({
+            kind: 'error',
+            title: t('errorCreatingEncounter', 'Failed to admit patient'),
+            subtitle: err.message,
+          });
+        },
+      )
+      .then(
+        (response) => {
+          if (response && response?.ok) {
+            if (bedSelected) {
+              showSnackbar({
+                kind: 'success',
+                title: t('patientAdmittedSuccessfully', 'Patient admitted successfully'),
+                subtitle: t(
+                  'patientAdmittedSuccessfullySubtitle',
+                  '{{patientName}} has been successfully admitted and assigned to bed {{bedNumber}}',
+                  {
+                    patientName: patient.person.preferredName.display,
+                    bedNumber: bedSelected.bedNumber,
+                  },
+                ),
+              });
+            } else {
+              showSnackbar({
+                kind: 'success',
+                title: t('patientAdmittedSuccessfully', 'Patient admitted successfully'),
+                subtitle: t('patientAdmittedWoBed', 'Patient admitted successfully to {{location}}', {
+                  location: location?.display,
+                }),
+              });
             }
-          },
-          () => {
-            showSnackbar({
-              kind: 'warning',
-              title: t('patientAdmittedSuccessfully', 'Patient admitted successfully'),
-              subtitle: t(
-                'patientAdmittedButBedNotAssigned',
-                'Patient admitted successfully but fail to assign bed to patient',
-              ),
-            });
-          },
-        )
-        .finally(() => {
-          setIsSubmitting(false);
-          mutateAdmissionLocation();
-          mutateInpatientRequest();
-          mutateInpatientAdmission();
-          closeWorkspaceWithSavedChanges();
-        });
-    },
-    [
-      beds,
-      patient,
-      emrConfiguration,
-      location,
-      closeWorkspaceWithSavedChanges,
-      dispositionType,
-      currentProvider,
-      mutateAdmissionLocation,
-      mutateInpatientRequest,
-      mutateInpatientAdmission,
-    ],
-  );
+          }
+        },
+        () => {
+          showSnackbar({
+            kind: 'warning',
+            title: t('patientAdmittedSuccessfully', 'Patient admitted successfully'),
+            subtitle: t(
+              'patientAdmittedButBedNotAssigned',
+              'Patient admitted successfully but fail to assign bed to patient',
+            ),
+          });
+        },
+      )
+      .finally(() => {
+        setIsSubmitting(false);
+        wardPatientGroupDetails?.mutate?.();
+        closeWorkspaceWithSavedChanges();
+      });
+  };
 
   const onError = useCallback((values) => {
     setShowErrorNotifications(true);
@@ -186,71 +142,27 @@ const AdmitPatientFormWorkspace: React.FC<AdmitPatientFormWorkspaceProps> = ({
   return (
     <Form control={control} className={styles.form} onSubmit={handleSubmit(onSubmit, onError)}>
       <div className={styles.formContent}>
-        {errorFetchingEmrConfiguration && (
-          <div className={styles.formError}>
-            <InlineNotification
-              kind="error"
-              title={t('somePartsOfTheFormDidntLoad', "Some parts of the form didn't load")}
-              subtitle={t(
-                'fetchingEmrConfigurationFailed',
-                'Fetching EMR configuration failed. Try refreshing the page or contact your system administrator.',
-              )}
-              lowContrast
-              hideCloseButton
-            />
-          </div>
-        )}
         <Row>
           <Column>
             <h2 className={styles.productiveHeading02}>{t('selectABed', 'Select a bed')}</h2>
             <div className={styles.bedSelectionDropdown}>
-              {isBedManagementModuleInstalled ? (
-                isLoading ? (
-                  <DropdownSkeleton />
-                ) : beds.length ? (
-                  <Controller
-                    control={control}
-                    name="bedId"
-                    render={({ field: { onChange }, fieldState: { error } }) => {
-                      const selectedItem = beds.find((bed) => bed.bedId === getValues()?.bedId);
-                      return (
-                        <Dropdown
-                          id="default"
-                          titleText=""
-                          helperText=""
-                          label={!selectedItem && t('chooseAnOption', 'Choose an option')}
-                          items={beds}
-                          itemToString={getBedRepresentation}
-                          selectedItem={selectedItem}
-                          onChange={({ selectedItem }: { selectedItem: BedLayout }) => onChange(selectedItem.bedId)}
-                          invalid={!!error}
-                          invalidText={error?.message}
-                        />
-                      );
-                    }}
-                  />
-                ) : (
-                  <InlineNotification
-                    kind="error"
-                    title={t('noBedsConfiguredForLocation', 'No beds configured for {{location}} location', {
-                      location: location?.display,
-                    })}
-                    lowContrast
-                    hideCloseButton
-                  />
-                )
-              ) : (
-                <InlineNotification
-                  kind="info"
-                  title={t('unableToSelectBeds', 'Unable to select beds')}
-                  subtitle={t(
-                    'bedManagementModuleNotInstalled',
-                    'Bed management module is not present to allow bed selection',
-                  )}
-                  lowContrast
-                  hideCloseButton
-                />
-              )}
+              <Controller
+                control={control}
+                name="bedId"
+                render={({ field: { onChange, value }, fieldState: { error } }) => {
+                  return (
+                    <BedSelector
+                      beds={beds}
+                      isLoadingBeds={isLoading}
+                      currentPatient={patient}
+                      selectedBedId={value}
+                      error={error}
+                      control={control}
+                      onChange={onChange}
+                    />
+                  );
+                }}
+              />
             </div>
           </Column>
         </Row>

package/src/ward-workspace/bed-selector.component.tsx

@@ -0,0 +1,119 @@
+import { Dropdown, InlineNotification, RadioButton, RadioButtonGroup, RadioButtonSkeleton } from '@carbon/react';
+import { type Patient } from '@openmrs/esm-framework';
+import React from 'react';
+import { type Control, type FieldError } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import useWardLocation from '../hooks/useWardLocation';
+import { type BedLayout } from '../types';
+import styles from './bed-selector.scss';
+
+interface BedSelectorProps {
+  beds: BedLayout[];
+  isLoadingBeds: boolean;
+  currentPatient: Patient;
+  selectedBedId: number;
+  error: FieldError;
+  onChange(bedId: number);
+  control: Control<{ bedId?: number }, any, { bedId?: number }>;
+  minBedCountToUseDropdown?: number;
+}
+
+interface BedDropdownItem {
+  bedId: number;
+  label: string;
+  disabled: boolean;
+}
+
+const BedSelector: React.FC<BedSelectorProps> = ({
+  selectedBedId,
+  beds,
+  isLoadingBeds,
+  error,
+  onChange,
+  currentPatient,
+  control,
+  minBedCountToUseDropdown = 16,
+}) => {
+  const { location } = useWardLocation();
+  const { t } = useTranslation();
+
+  const getBedRepresentation = (bedLayout: BedLayout) => {
+    const bedNumber = bedLayout.bedNumber;
+    const patients =
+      bedLayout.patients.length === 0
+        ? [t('emptyText', 'Empty')]
+        : bedLayout.patients.map((patient) => patient?.person?.preferredName?.display);
+    return [bedNumber, ...patients].join(' · ');
+  };
+
+  const bedDropdownItems: BedDropdownItem[] = [
+    { bedId: 0, label: t('noBed', 'No bed'), disabled: false },
+    ...beds.map((bed) => {
+      const isPatientAssignedToBed = bed.patients.some((bedPatient) => bedPatient.uuid === currentPatient.uuid);
+      return { bedId: bed.bedId, label: getBedRepresentation(bed), disabled: isPatientAssignedToBed };
+    }),
+  ];
+  const selectedItem = bedDropdownItems.find((bed) => bed.bedId === selectedBedId);
+
+  const useDropdown = beds.length >= minBedCountToUseDropdown;
+
+  if (isLoadingBeds) {
+    return (
+      <RadioButtonGroup className={styles.radioButtonGroup} name="bedId">
+        <RadioButtonSkeleton />
+        <RadioButtonSkeleton />
+        <RadioButtonSkeleton />
+      </RadioButtonGroup>
+    );
+  }
+  if (!beds.length) {
+    return (
+      <InlineNotification
+        kind="error"
+        title={t('noBedsConfiguredForLocation', 'No beds configured for {{location}} location', {
+          location: location?.display,
+        })}
+        lowContrast
+        hideCloseButton
+      />
+    );
+  }
+  if (useDropdown) {
+    return (
+      <Dropdown
+        id="default"
+        titleText=""
+        helperText=""
+        label={!selectedItem && t('chooseAnOption', 'Choose an option')}
+        items={bedDropdownItems}
+        itemToString={(bedDropdownItem: BedDropdownItem) => bedDropdownItem.label}
+        selectedItem={selectedItem}
+        onChange={({ selectedItem }: { selectedItem: BedLayout }) => onChange(selectedItem.bedId)}
+        invalid={!!error}
+        invalidText={error?.message}
+      />
+    );
+  } else {
+    return (
+      <RadioButtonGroup
+        name="bedId"
+        className={styles.radioButtonGroup}
+        onChange={onChange}
+        invalid={!!error}
+        invalidText={error?.message}>
+        {bedDropdownItems.map(({ bedId, label, disabled }) => (
+          <RadioButton
+            key={bedId}
+            labelText={label}
+            control={control}
+            value={bedId}
+            checked={bedId === selectedBedId}
+            disabled={disabled}
+          />
+        ))}
+      </RadioButtonGroup>
+    );
+  }
+};
+
+export default BedSelector;

package/src/ward-workspace/bed-selector.scss

@@ -0,0 +1,15 @@
+@use '@carbon/type';
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.radioButtonGroup {
+  margin-top: layout.$spacing-03;
+  fieldset {
+    flex-direction: column;
+    align-items: flex-start;
+
+    :global(.cds--radio-button-wrapper) {
+      margin-bottom: layout.$spacing-04;
+    }
+  }
+}

package/src/ward-workspace/patient-discharge/patient-discharge.workspace.tsx

@@ -5,7 +5,7 @@ import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import useEmrConfiguration from '../../hooks/useEmrConfiguration';
 import useWardLocation from '../../hooks/useWardLocation';
-import { type WardViewContext, type WardPatientWorkspaceProps } from '../../types';
+import { type WardPatientWorkspaceProps, type WardViewContext } from '../../types';
 import { createEncounter, removePatientFromBed } from '../../ward.resource';
 import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component';
 import styles from './patient-discharge.scss';
@@ -17,10 +17,7 @@ export default function PatientDischargeWorkspace(props: WardPatientWorkspacePro
   const { currentProvider } = useSession();
   const { location } = useWardLocation();
   const { emrConfiguration, isLoadingEmrConfiguration, errorFetchingEmrConfiguration } = useEmrConfiguration();
-  const {wardPatientGroupDetails} = useAppContext<WardViewContext>('ward-view-context') ?? {};
-  const { mutate: mutateAdmissionLocation } = wardPatientGroupDetails?.admissionLocationResponse ?? {};
-  const { mutate: mutateInpatientRequest } = wardPatientGroupDetails?.inpatientRequestResponse ?? {};
-  const { mutate: mutateInpatientAdmission } = wardPatientGroupDetails?.inpatientAdmissionResponse ?? {};
+  const { wardPatientGroupDetails } = useAppContext<WardViewContext>('ward-view-context') ?? {};
 
   const submitDischarge = useCallback(() => {
     setIsSubmitting(true);
@@ -63,9 +60,7 @@ export default function PatientDischargeWorkspace(props: WardPatientWorkspacePro
       .finally(() => {
         setIsSubmitting(false);
         closeWorkspaceWithSavedChanges();
-        mutateAdmissionLocation();
-        mutateInpatientRequest();
-        mutateInpatientAdmission();
+        wardPatientGroupDetails.mutate();
       });
   }, [
     currentProvider,
@@ -73,9 +68,7 @@ export default function PatientDischargeWorkspace(props: WardPatientWorkspacePro
     emrConfiguration,
     wardPatient?.patient?.uuid,
     wardPatient?.bed?.uuid,
-    mutateAdmissionLocation,
-    mutateInpatientRequest,
-    mutateInpatientAdmission,
+    wardPatientGroupDetails,
   ]);
 
   if (!wardPatientGroupDetails) return <></>;