@openmrs/esm-bed-management-app 9.2.1-pre.7327 → 9.2.1-pre.7339

package/src/bed-administration/form/bed-form.workspace.tsx

@@ -19,14 +19,15 @@ import {
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import {
-  type DefaultWorkspaceProps,
   getCoreTranslation,
   ResponsiveWrapper,
   showSnackbar,
   useLayoutType,
   useSession,
+  type Workspace2DefinitionProps,
+  Workspace2,
 } from '@openmrs/esm-framework';
-import { type BedPostPayload, type InitialData } from '../../types';
+import { type BedFormWorkspaceConfig, type BedPostPayload } from '../../types';
 import { useBedTags, useLocationsWithAdmissionTag } from '../../summary/summary.resource';
 import { editBed, saveBed, useBedType, useBedTagMappings } from './bed-form.resource';
 import styles from './bed-form.workspace.scss';
@@ -34,19 +35,9 @@ import styles from './bed-form.workspace.scss';
 const OCCUPANCY_STATUSES = ['AVAILABLE', 'OCCUPIED'] as const;
 type OccupancyStatus = (typeof OCCUPANCY_STATUSES)[number];
 
-type BedFormWorkspaceProps = DefaultWorkspaceProps & {
-  bed?: InitialData;
-  mutateBeds: () => void;
-  defaultLocation?: { display: string; uuid: string };
-};
-
-const BedFormWorkspace: React.FC<BedFormWorkspaceProps> = ({
+const BedFormWorkspace: React.FC<Workspace2DefinitionProps<BedFormWorkspaceConfig>> = ({
+  workspaceProps: { bed, mutateBeds, defaultLocation },
   closeWorkspace,
-  closeWorkspaceWithSavedChanges,
-  promptBeforeClosing,
-  bed,
-  mutateBeds,
-  defaultLocation,
 }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
@@ -159,10 +150,6 @@ const BedFormWorkspace: React.FC<BedFormWorkspaceProps> = ({
     }
   }, [bedTagMappings, getDefaultValues, isLoadingBedTags, isEditing, reset]);
 
-  useEffect(() => {
-    promptBeforeClosing(() => isDirty);
-  }, [isDirty, promptBeforeClosing]);
-
   const createBedPayload = (data: BedFormType) => ({
     ...(isEditing && { uuid: bed.uuid }),
     bedNumber: data.bedNumber,
@@ -193,7 +180,7 @@ const BedFormWorkspace: React.FC<BedFormWorkspaceProps> = ({
       });
 
       mutateBeds();
-      closeWorkspaceWithSavedChanges();
+      closeWorkspace({ discardUnsavedChanges: true });
     } catch (error: unknown) {
       const subtitle =
         error instanceof Error && error.message
@@ -210,211 +197,215 @@ const BedFormWorkspace: React.FC<BedFormWorkspaceProps> = ({
     }
   };
 
+  const title = isEditing ? t('editBed', 'Edit bed') : t('addBed', 'Add bed');
+
   return (
-    <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
-      <div className={styles.formContainer}>
-        <Stack gap={5}>
-          <ResponsiveWrapper>
-            <Controller
-              control={control}
-              name="bedNumber"
-              render={({ field }) => (
-                <TextInput
-                  helperText={t('bedNumberMaxCharsHelper', 'Maximum 10 characters')}
-                  id="bedNumber"
-                  invalid={!!errors.bedNumber?.message}
-                  invalidText={errors.bedNumber?.message}
-                  labelText={t('bedNumber', 'Bed number')}
-                  onChange={field.onChange}
-                  placeholder={t('bedNumberPlaceholder', 'e.g. CHA-201')}
-                  value={field.value}
-                />
-              )}
-            />
-          </ResponsiveWrapper>
-          <div className={styles.rowContainer}>
+    <Workspace2 title={title} hasUnsavedChanges={isDirty}>
+      <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+        <div className={styles.formContainer}>
+          <Stack gap={5}>
             <ResponsiveWrapper>
               <Controller
                 control={control}
-                name="bedRow"
+                name="bedNumber"
                 render={({ field }) => (
-                  <NumberInput
-                    hideSteppers
-                    id="bedRow"
-                    invalid={!!errors.bedRow?.message}
-                    invalidText={errors.bedRow?.message}
-                    label={t('bedRow', 'Bed row')}
-                    onChange={(e, { value }) => field.onChange(value.toString())}
+                  <TextInput
+                    helperText={t('bedNumberMaxCharsHelper', 'Maximum 10 characters')}
+                    id="bedNumber"
+                    invalid={!!errors.bedNumber?.message}
+                    invalidText={errors.bedNumber?.message}
+                    labelText={t('bedNumber', 'Bed number')}
+                    onChange={field.onChange}
+                    placeholder={t('bedNumberPlaceholder', 'e.g. CHA-201')}
                     value={field.value}
                   />
                 )}
               />
             </ResponsiveWrapper>
-          </div>
-          <div className={styles.rowContainer}>
+            <div className={styles.rowContainer}>
+              <ResponsiveWrapper>
+                <Controller
+                  control={control}
+                  name="bedRow"
+                  render={({ field }) => (
+                    <NumberInput
+                      hideSteppers
+                      id="bedRow"
+                      invalid={!!errors.bedRow?.message}
+                      invalidText={errors.bedRow?.message}
+                      label={t('bedRow', 'Bed row')}
+                      onChange={(e, { value }) => field.onChange(value.toString())}
+                      value={field.value}
+                    />
+                  )}
+                />
+              </ResponsiveWrapper>
+            </div>
+            <div className={styles.rowContainer}>
+              <ResponsiveWrapper>
+                <Controller
+                  control={control}
+                  name="bedColumn"
+                  render={({ field }) => (
+                    <NumberInput
+                      hideSteppers
+                      id="bedColumn"
+                      invalid={!!errors.bedColumn?.message}
+                      invalidText={errors.bedColumn?.message}
+                      label={t('bedColumn', 'Bed column')}
+                      onChange={(e, { value }) => field.onChange(value.toString())}
+                      value={field.value}
+                    />
+                  )}
+                />
+              </ResponsiveWrapper>
+            </div>
+
+            <ResponsiveWrapper>
+              <div className={styles.locationFieldContainer}>
+                <Controller
+                  control={control}
+                  name="location"
+                  render={({ field: { onChange, onBlur, value, ref } }) => (
+                    <ComboBox
+                      disabled={!hasLocations}
+                      id="location"
+                      invalid={!!errors.location?.message}
+                      invalidText={errors.location?.message}
+                      items={allLocations}
+                      itemToString={(location) => location?.display ?? ''}
+                      onBlur={onBlur}
+                      onChange={({ selectedItem }) => onChange(selectedItem)}
+                      placeholder={
+                        hasLocations
+                          ? t('selectLocation', 'Select a location')
+                          : t('noLocationsAvailable', 'No locations available')
+                      }
+                      ref={ref}
+                      selectedItem={value}
+                      titleText={t('location', 'Location')}
+                    />
+                  )}
+                />
+              </div>
+            </ResponsiveWrapper>
             <ResponsiveWrapper>
               <Controller
                 control={control}
-                name="bedColumn"
+                name="occupancyStatus"
                 render={({ field }) => (
-                  <NumberInput
-                    hideSteppers
-                    id="bedColumn"
-                    invalid={!!errors.bedColumn?.message}
-                    invalidText={errors.bedColumn?.message}
-                    label={t('bedColumn', 'Bed column')}
-                    onChange={(e, { value }) => field.onChange(value.toString())}
-                    value={field.value}
-                  />
+                  <Select
+                    id="occupancyStatus"
+                    invalid={!!errors.occupancyStatus?.message}
+                    invalidText={errors.occupancyStatus?.message}
+                    labelText={t('occupancyStatus', 'Occupancy status')}
+                    onChange={field.onChange}
+                    value={field.value}>
+                    <SelectItem text={t('selectOccupancyStatus', 'Select occupancy status')} value="" />
+                    {occupancyStatuses.map((status, index) => (
+                      <SelectItem
+                        key={`occupancy-${index}`}
+                        text={t(status.toLowerCase(), status)}
+                        value={status.toUpperCase()}
+                      />
+                    ))}
+                  </Select>
                 )}
               />
             </ResponsiveWrapper>
-          </div>
 
-          <ResponsiveWrapper>
-            <div className={styles.locationFieldContainer}>
+            <ResponsiveWrapper>
               <Controller
                 control={control}
-                name="location"
-                render={({ field: { onChange, onBlur, value, ref } }) => (
-                  <ComboBox
-                    disabled={!hasLocations}
-                    id="location"
-                    invalid={!!errors.location?.message}
-                    invalidText={errors.location?.message}
-                    items={allLocations}
-                    itemToString={(location) => location?.display ?? ''}
-                    onBlur={onBlur}
-                    onChange={({ selectedItem }) => onChange(selectedItem)}
-                    placeholder={
-                      hasLocations
-                        ? t('selectLocation', 'Select a location')
-                        : t('noLocationsAvailable', 'No locations available')
-                    }
-                    ref={ref}
-                    selectedItem={value}
-                    titleText={t('location', 'Location')}
-                  />
+                name="bedType"
+                render={({ field }) => (
+                  <Select
+                    disabled={!availableBedTypes.length}
+                    id="bedType"
+                    invalid={!!errors.bedType?.message}
+                    invalidText={errors.bedType?.message}
+                    labelText={t('bedType', 'Bed Type')}
+                    onChange={field.onChange}
+                    value={field.value}>
+                    <SelectItem text={t('selectBedType', 'Select bed type')} value="" />
+                    {availableBedTypes.map((bedType, index) => (
+                      <SelectItem key={`bedType-${index}`} text={bedType.name} value={bedType.name} />
+                    ))}
+                  </Select>
                 )}
               />
-            </div>
-          </ResponsiveWrapper>
-          <ResponsiveWrapper>
-            <Controller
-              control={control}
-              name="occupancyStatus"
-              render={({ field }) => (
-                <Select
-                  id="occupancyStatus"
-                  invalid={!!errors.occupancyStatus?.message}
-                  invalidText={errors.occupancyStatus?.message}
-                  labelText={t('occupancyStatus', 'Occupancy status')}
-                  onChange={field.onChange}
-                  value={field.value}>
-                  <SelectItem text={t('selectOccupancyStatus', 'Select occupancy status')} value="" />
-                  {occupancyStatuses.map((status, index) => (
-                    <SelectItem
-                      key={`occupancy-${index}`}
-                      text={t(status.toLowerCase(), status)}
-                      value={status.toUpperCase()}
-                    />
-                  ))}
-                </Select>
-              )}
-            />
-          </ResponsiveWrapper>
-
-          <ResponsiveWrapper>
-            <Controller
-              control={control}
-              name="bedType"
-              render={({ field }) => (
-                <Select
-                  disabled={!availableBedTypes.length}
-                  id="bedType"
-                  invalid={!!errors.bedType?.message}
-                  invalidText={errors.bedType?.message}
-                  labelText={t('bedType', 'Bed Type')}
-                  onChange={field.onChange}
-                  value={field.value}>
-                  <SelectItem text={t('selectBedType', 'Select bed type')} value="" />
-                  {availableBedTypes.map((bedType, index) => (
-                    <SelectItem key={`bedType-${index}`} text={bedType.name} value={bedType.name} />
-                  ))}
-                </Select>
-              )}
-            />
-          </ResponsiveWrapper>
+            </ResponsiveWrapper>
 
-          <ResponsiveWrapper>
-            <Controller
-              control={control}
-              name="bedTags"
-              render={({ field: { onChange, value } }) => {
-                const selectedItems = (value || [])
-                  .map((tag) => {
-                    const fullTag = availableBedTags.find((t) => t.uuid === tag.uuid || t.name === tag.name);
-                    return fullTag || tag;
-                  })
-                  .filter(Boolean);
+            <ResponsiveWrapper>
+              <Controller
+                control={control}
+                name="bedTags"
+                render={({ field: { onChange, value } }) => {
+                  const selectedItems = (value || [])
+                    .map((tag) => {
+                      const fullTag = availableBedTags.find((t) => t.uuid === tag.uuid || t.name === tag.name);
+                      return fullTag || tag;
+                    })
+                    .filter(Boolean);
 
-                return (
-                  <div>
-                    <MultiSelect
-                      disabled={!availableBedTags.length}
-                      id="bedTags"
-                      invalid={!!errors.bedTags?.message}
-                      invalidText={errors.bedTags?.message}
-                      items={availableBedTags}
-                      itemToString={(item) => item?.name ?? ''}
-                      label={t('selectBedTags', 'Select bed tags')}
-                      onChange={({ selectedItems }) => onChange(selectedItems)}
-                      selectedItems={selectedItems}
-                      titleText={t('bedTags', 'Bed Tags')}
-                    />
-                    {selectedItems && selectedItems.length > 0 && (
-                      <div className={styles.tagContainer}>
-                        {selectedItems.map((tag, index) => (
-                          <Tag
-                            key={tag.uuid || tag.id || index}
-                            type="blue"
-                            onClose={() => {
-                              const updatedTags = selectedItems.filter((_, i) => i !== index);
-                              onChange(updatedTags);
-                            }}>
-                            {tag.name}
-                          </Tag>
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                );
-              }}
-            />
-          </ResponsiveWrapper>
-        </Stack>
-      </div>
-      <ButtonSet
-        className={classNames({
-          [styles.tablet]: isTablet,
-          [styles.desktop]: !isTablet,
-        })}>
-        <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
-          {getCoreTranslation('cancel')}
-        </Button>
-        <Button
-          className={styles.button}
-          disabled={isSubmitting || !isDirty || !hasLocations}
-          kind="primary"
-          type="submit">
-          {isSubmitting ? (
-            <InlineLoading className={styles.spinner} description={t('saving', 'Saving') + '...'} />
-          ) : (
-            <span>{t('saveAndClose', 'Save & close')}</span>
-          )}
-        </Button>
-      </ButtonSet>
-    </Form>
+                  return (
+                    <div>
+                      <MultiSelect
+                        disabled={!availableBedTags.length}
+                        id="bedTags"
+                        invalid={!!errors.bedTags?.message}
+                        invalidText={errors.bedTags?.message}
+                        items={availableBedTags}
+                        itemToString={(item) => item?.name ?? ''}
+                        label={t('selectBedTags', 'Select bed tags')}
+                        onChange={({ selectedItems }) => onChange(selectedItems)}
+                        selectedItems={selectedItems}
+                        titleText={t('bedTags', 'Bed Tags')}
+                      />
+                      {selectedItems && selectedItems.length > 0 && (
+                        <div className={styles.tagContainer}>
+                          {selectedItems.map((tag, index) => (
+                            <Tag
+                              key={tag.uuid || tag.id || index}
+                              type="blue"
+                              onClose={() => {
+                                const updatedTags = selectedItems.filter((_, i) => i !== index);
+                                onChange(updatedTags);
+                              }}>
+                              {tag.name}
+                            </Tag>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  );
+                }}
+              />
+            </ResponsiveWrapper>
+          </Stack>
+        </div>
+        <ButtonSet
+          className={classNames({
+            [styles.tablet]: isTablet,
+            [styles.desktop]: !isTablet,
+          })}>
+          <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
+            {getCoreTranslation('cancel')}
+          </Button>
+          <Button
+            className={styles.button}
+            disabled={isSubmitting || !isDirty || !hasLocations}
+            kind="primary"
+            type="submit">
+            {isSubmitting ? (
+              <InlineLoading className={styles.spinner} description={t('saving', 'Saving') + '...'} />
+            ) : (
+              <span>{t('saveAndClose', 'Save & close')}</span>
+            )}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </Workspace2>
   );
 };
 

package/src/routes.json

@@ -64,12 +64,25 @@
       "component": "newBedTypeModal"
     }
   ],
-    "workspaces": [
+  "workspaceGroups2": [
     {
-       "name": "bed-form-workspace",
-       "title": "Add or edit bed",
-       "component": "bedFormWorkspace",
-       "type": "workspace"
+      "name": "bed-management-group",
+      "persistence": "closable"
+    }
+  ],
+  "workspaceWindows2": [
+    {
+      "name": "bed-management-window",
+      "group": "bed-management-group",
+      "canMaximize": true,
+      "width": "narrow"
+    }
+  ],
+  "workspaces2": [
+    {
+      "name": "bed-form-workspace",
+      "component": "bedFormWorkspace",
+      "window": "bed-management-window"
     }
   ]
 }

package/src/types.ts

@@ -202,3 +202,33 @@ export interface BedDetails extends Bed {
 }
 
 export type WorkspaceMode = 'add' | 'edit';
+
+export interface CloseWorkspaceOptions {
+  ignoreChanges?: boolean;
+  onWorkspaceClose?: () => void;
+}
+
+export interface BedWorkspaceData {
+  uuid: string;
+  bedNumber: string;
+  status: string;
+  row: number;
+  column: number;
+  bedType?: {
+    name: string;
+  };
+  location?: {
+    display: string;
+    uuid: string;
+  };
+  bedTags?: Array<{
+    uuid: string;
+    name: string;
+  }>;
+}
+
+export interface BedFormWorkspaceConfig {
+  bed?: BedWorkspaceData;
+  mutateBeds: () => void;
+  defaultLocation?: { display: string; uuid: string };
+}

package/src/ward-with-beds/ward-with-beds.component.tsx

@@ -17,7 +17,7 @@ import {
   Tag,
 } from '@carbon/react';
 import { ArrowLeft, Add } from '@carbon/react/icons';
-import { launchWorkspace, navigate, usePagination } from '@openmrs/esm-framework';
+import { launchWorkspace2, navigate, usePagination } from '@openmrs/esm-framework';
 import { useBedsForLocation, useLocationName } from '../summary/summary.resource';
 import { type Bed, type WorkspaceMode } from '../types';
 import Header from '../header/header.component';
@@ -85,8 +85,7 @@ const WardWithBeds: React.FC = () => {
   }, [paginatedData]);
 
   const handleLaunchBedFormWorkspace = (mode: WorkspaceMode, bed?: Bed) => {
-    launchWorkspace('bed-form-workspace', {
-      workspaceTitle: mode === 'add' ? t('addBed', 'Add bed') : t('editBed', 'Edit bed'),
+    launchWorkspace2('bed-form-workspace', {
       mutateBeds: mutate,
       defaultLocation: { display: name, uuid: location },
       ...(mode === 'edit' && bed ? { bed } : {}),