@kenyaemr/esm-care-panel-app 5.4.4-pre.43 → 5.4.4-pre.430

package/src/care-programs/program.workspace.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { useEffect, useState } from 'react';
 import styles from './care-programs.scss';
 import {
   Button,
@@ -12,7 +12,14 @@ import {
   TextInput,
 } from '@carbon/react';
 import { Controller, useForm } from 'react-hook-form';
-import { DefaultWorkspaceProps, ErrorState, LocationPicker, showSnackbar, useSession } from '@openmrs/esm-framework';
+import {
+  ErrorState,
+  LocationPicker,
+  showSnackbar,
+  useSession,
+  type Workspace2DefinitionProps,
+  Workspace2,
+} from '@openmrs/esm-framework';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useTranslation } from 'react-i18next';
 import {
@@ -24,20 +31,18 @@ import {
   useProgramDetail,
 } from './care-program.resource';
 
-type ProgramFormProps = DefaultWorkspaceProps & {
+type ProgramFormProps = {
   enrollment?: Enrollment;
   patientUuid: string;
   programUuid: string;
   onSubmitSuccess?: () => void;
 };
 
-const ProgramForm: FC<ProgramFormProps> = ({
-  patientUuid,
-  programUuid,
-  enrollment,
+const ProgramForm: React.FC<Workspace2DefinitionProps<ProgramFormProps, {}, {}>> = ({
+  workspaceProps: { patientUuid, programUuid, enrollment, onSubmitSuccess },
   closeWorkspace,
-  onSubmitSuccess,
 }) => {
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
   const getLocationUuid = () => {
     if (!enrollment?.location?.uuid && session?.sessionLocation?.uuid) {
       return session?.sessionLocation?.uuid;
@@ -78,6 +83,11 @@ const ProgramForm: FC<ProgramFormProps> = ({
       console.error(e);
     }
   };
+
+  useEffect(() => {
+    setHasUnsavedChanges(form.formState.isDirty);
+  }, [form.formState.isDirty, setHasUnsavedChanges]);
+
   if (isLoadingProgram) {
     return <InlineLoading />;
   }
@@ -85,96 +95,98 @@ const ProgramForm: FC<ProgramFormProps> = ({
     return <ErrorState headerTitle={t('error', 'Error')} error={programError} />;
   }
   return (
-    <form className={styles.form} onSubmit={form.handleSubmit(onSubmit)}>
-      <Stack gap={4} className={styles.grid}>
-        <Column>
-          <TextInput
-            readOnly
-            value={program?.name}
-            title={t('program', 'Program')}
-            id={'program'}
-            labelText={t('program', 'Program')}
-          />
-        </Column>
-        <Column>
-          <Controller
-            control={form.control}
-            name="dateEnrolled"
-            render={({ field, fieldState: { error } }) => (
-              <DatePicker
-                className={styles.datePickerInput}
-                dateFormat="d/m/Y"
-                datePickerType="single"
-                value={field.value}
-                onChange={(dates) => field.onChange(dates?.[0] ?? undefined)}
-                invalid={!!error?.message}
-                invalidText={error?.message}>
-                <DatePickerInput
-                  id={`startdate-input`}
+    <Workspace2 hasUnsavedChanges={hasUnsavedChanges} title={t('programForm', 'Program Form')}>
+      <form className={styles.form} onSubmit={form.handleSubmit(onSubmit)}>
+        <Stack gap={4} className={styles.grid}>
+          <Column>
+            <TextInput
+              readOnly
+              value={program?.name}
+              title={t('program', 'Program')}
+              id={'program'}
+              labelText={t('program', 'Program')}
+            />
+          </Column>
+          <Column>
+            <Controller
+              control={form.control}
+              name="dateEnrolled"
+              render={({ field, fieldState: { error } }) => (
+                <DatePicker
+                  className={styles.datePickerInput}
+                  dateFormat="d/m/Y"
+                  datePickerType="single"
+                  value={field.value}
+                  onChange={(dates) => field.onChange(dates?.[0] ?? undefined)}
                   invalid={!!error?.message}
-                  invalidText={error?.message}
-                  placeholder="mm/dd/yyyy"
-                  labelText={t('startDate', 'Start Date')}
-                  size="lg"
-                />
-              </DatePicker>
-            )}
-          />
-        </Column>
-        <Column>
-          <Controller
-            control={form.control}
-            name="dateCompleted"
-            render={({ field, fieldState: { error } }) => (
-              <DatePicker
-                className={styles.datePickerInput}
-                dateFormat="d/m/Y"
-                value={field.value}
-                datePickerType="single"
-                onChange={(dates) => field.onChange(dates?.[0] ?? undefined)}
-                invalid={!!error?.message}
-                invalidText={error?.message}>
-                <DatePickerInput
-                  id="endDate"
+                  invalidText={error?.message}>
+                  <DatePickerInput
+                    id={`startdate-input`}
+                    invalid={!!error?.message}
+                    invalidText={error?.message}
+                    placeholder="mm/dd/yyyy"
+                    labelText={t('startDate', 'Start Date')}
+                    size="lg"
+                  />
+                </DatePicker>
+              )}
+            />
+          </Column>
+          <Column>
+            <Controller
+              control={form.control}
+              name="dateCompleted"
+              render={({ field, fieldState: { error } }) => (
+                <DatePicker
+                  className={styles.datePickerInput}
+                  dateFormat="d/m/Y"
+                  value={field.value}
+                  datePickerType="single"
+                  onChange={(dates) => field.onChange(dates?.[0] ?? undefined)}
                   invalid={!!error?.message}
-                  invalidText={error?.message}
-                  placeholder="mm/dd/yyyy"
-                  labelText={t('endDate', 'End Date')}
-                  size="lg"
-                />
-              </DatePicker>
-            )}
-          />
-        </Column>
-        <Column>
-          <Controller
-            control={form.control}
-            name="location"
-            render={({ field: { value, onChange }, fieldState: { error } }) => (
-              <React.Fragment>
-                <FormLabel className={`${styles.locationLabel} cds--label`}>
-                  {t('enrollmentLocation', 'Enrollment location')}
-                </FormLabel>
-                <LocationPicker
-                  selectedLocationUuid={value}
-                  defaultLocationUuid={session?.sessionLocation?.uuid}
-                  locationTag="Login Location"
-                  onChange={(locationUuid) => onChange(locationUuid)}
-                />
-              </React.Fragment>
-            )}
-          />
-        </Column>
-      </Stack>
-      <ButtonSet className={styles.buttonSet}>
-        <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
-          {t('discard', 'Discard')}
-        </Button>
-        <Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>
-          {t('submit', 'Submit')}
-        </Button>
-      </ButtonSet>
-    </form>
+                  invalidText={error?.message}>
+                  <DatePickerInput
+                    id="endDate"
+                    invalid={!!error?.message}
+                    invalidText={error?.message}
+                    placeholder="mm/dd/yyyy"
+                    labelText={t('endDate', 'End Date')}
+                    size="lg"
+                  />
+                </DatePicker>
+              )}
+            />
+          </Column>
+          <Column>
+            <Controller
+              control={form.control}
+              name="location"
+              render={({ field: { value, onChange }, fieldState: { error } }) => (
+                <React.Fragment>
+                  <FormLabel className={`${styles.locationLabel} cds--label`}>
+                    {t('enrollmentLocation', 'Enrollment location')}
+                  </FormLabel>
+                  <LocationPicker
+                    selectedLocationUuid={value}
+                    defaultLocationUuid={session?.sessionLocation?.uuid}
+                    locationTag="Login Location"
+                    onChange={(locationUuid) => onChange(locationUuid)}
+                  />
+                </React.Fragment>
+              )}
+            />
+          </Column>
+        </Stack>
+        <ButtonSet className={styles.buttonSet}>
+          <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
+            {t('discard', 'Discard')}
+          </Button>
+          <Button className={styles.button} kind="primary" type="submit" disabled={form.formState.isSubmitting}>
+            {t('submit', 'Submit')}
+          </Button>
+        </ButtonSet>
+      </form>
+    </Workspace2>
   );
 };