@openmrs/esm-patient-programs-app 3.2.1-pre.89 → 4.0.1-pre.221

package/src/programs/programs-form.component.tsx

@@ -1,10 +1,10 @@
 import React, { SyntheticEvent } from 'react';
+import { useTranslation } from 'react-i18next';
 import dayjs from 'dayjs';
 import filter from 'lodash-es/filter';
 import includes from 'lodash-es/includes';
 import map from 'lodash-es/map';
 import { useSWRConfig } from 'swr';
-import { useTranslation } from 'react-i18next';
 import {
   createErrorHandler,
   showNotification,
@@ -12,27 +12,34 @@ import {
   useSession,
   useLocations,
   useLayoutType,
+  parseDate,
 } from '@openmrs/esm-framework';
 import {
   Button,
+  ButtonSet,
   DatePicker,
   DatePickerInput,
-  Select,
-  SelectItem,
   Form,
   FormGroup,
-  ButtonSet,
-} from 'carbon-components-react';
+  Select,
+  SelectItem,
+  Stack,
+} from '@carbon/react';
 import {
   createProgramEnrollment,
   useAvailablePrograms,
   useEnrollments,
   customRepresentation,
+  updateProgramEnrollment,
 } from './programs.resource';
 import { DefaultWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 import styles from './programs-form.scss';
 
-const ProgramsForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patientUuid }) => {
+interface ProgramsFormProps extends DefaultWorkspaceProps {
+  programEnrollmentId?: string;
+}
+
+const ProgramsForm: React.FC<ProgramsFormProps> = ({ closeWorkspace, patientUuid, programEnrollmentId }) => {
   const { t } = useTranslation();
   const isTablet = useLayoutType() === 'tablet';
   const session = useSession();
@@ -41,16 +48,25 @@ const ProgramsForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patient
 
   const { data: availablePrograms } = useAvailablePrograms();
   const { data: enrollments } = useEnrollments(patientUuid);
+  const currentEnrollment = programEnrollmentId && enrollments.filter((e) => e.uuid == programEnrollmentId)[0];
+  const currentProgram = currentEnrollment
+    ? {
+        display: currentEnrollment.program.name,
+        ...currentEnrollment.program,
+      }
+    : null;
 
-  const eligiblePrograms = filter(
-    availablePrograms,
-    (program) => !includes(map(enrollments, 'program.uuid'), program.uuid),
+  const eligiblePrograms = currentProgram
+    ? [currentProgram]
+    : filter(availablePrograms, (program) => !includes(map(enrollments, 'program.uuid'), program.uuid));
+  const [completionDate, setCompletionDate] = React.useState<Date>(
+    currentEnrollment?.dateCompleted ? parseDate(currentEnrollment.dateCompleted) : null,
   );
-
-  const [completionDate, setCompletionDate] = React.useState(null);
-  const [enrollmentDate, setEnrollmentDate] = React.useState(new Date());
-  const [selectedProgram, setSelectedProgram] = React.useState<string>('');
-  const [userLocation, setUserLocation] = React.useState('');
+  const [enrollmentDate, setEnrollmentDate] = React.useState<Date>(
+    currentEnrollment?.dateEnrolled ? parseDate(currentEnrollment.dateEnrolled) : new Date(),
+  );
+  const [selectedProgram, setSelectedProgram] = React.useState<string>(currentEnrollment?.program.uuid ?? '');
+  const [userLocation, setUserLocation] = React.useState<string>(currentEnrollment?.location.uuid ?? '');
 
   if (!userLocation && session?.sessionLocation?.uuid) {
     setUserLocation(session?.sessionLocation?.uuid);
@@ -71,43 +87,83 @@ const ProgramsForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patient
       };
 
       const abortController = new AbortController();
-      const sub = createProgramEnrollment(payload, abortController).subscribe(
-        (response) => {
-          if (response.status === 201) {
-            closeWorkspace();
-
-            showToast({
-              critical: true,
-              kind: 'success',
-              description: t('enrollmentNowVisible', 'It is now visible on the Programs page'),
-              title: t('enrollmentSaved', 'Program enrollment saved'),
-            });
-
-            mutate(`/ws/rest/v1/programenrollment?patient=${patientUuid}&v=${customRepresentation}`);
-          }
-        },
-        (err) => {
-          createErrorHandler();
-
-          showNotification({
-            title: t('programEnrollmentSaveError', 'Error saving program enrollment'),
-            kind: 'error',
-            critical: true,
-            description: err?.message,
-          });
-        },
-      );
+      const sub = currentEnrollment
+        ? updateProgramEnrollment(currentEnrollment.uuid, payload, abortController).subscribe(
+            (response) => {
+              if (response.status === 200) {
+                closeWorkspace();
+
+                showToast({
+                  critical: true,
+                  kind: 'success',
+                  description: t(
+                    'enrollmentUpdatesNowVisible',
+                    'Changes to the program are now visible in the Programs table',
+                  ),
+                  title: t('enrollmentUpdated', 'Program enrollment updated'),
+                });
+
+                mutate(`/ws/rest/v1/programenrollment?patient=${patientUuid}&v=${customRepresentation}`);
+              }
+            },
+            (err) => {
+              createErrorHandler();
+
+              showNotification({
+                title: t('programEnrollmentSaveError', 'Error saving program enrollment'),
+                kind: 'error',
+                critical: true,
+                description: err?.message,
+              });
+            },
+          )
+        : createProgramEnrollment(payload, abortController).subscribe(
+            (response) => {
+              if (response.status === 201) {
+                closeWorkspace();
+
+                showToast({
+                  critical: true,
+                  kind: 'success',
+                  description: t('enrollmentNowVisible', 'It is now visible in the Programs table'),
+                  title: t('enrollmentSaved', 'Program enrollment saved'),
+                });
+
+                mutate(`/ws/rest/v1/programenrollment?patient=${patientUuid}&v=${customRepresentation}`);
+              }
+            },
+            (err) => {
+              createErrorHandler();
+
+              showNotification({
+                title: t('programEnrollmentSaveError', 'Error saving program enrollment'),
+                kind: 'error',
+                critical: true,
+                description: err?.message,
+              });
+            },
+          );
       return () => {
         sub.unsubscribe();
       };
     },
-    [closeWorkspace, completionDate, enrollmentDate, mutate, patientUuid, selectedProgram, t, userLocation],
+    [
+      closeWorkspace,
+      completionDate,
+      enrollmentDate,
+      mutate,
+      patientUuid,
+      selectedProgram,
+      t,
+      userLocation,
+      currentEnrollment,
+    ],
   );
 
   return (
     <Form className={styles.form} onSubmit={handleSubmit}>
-      <div className={styles.formContainer}>
-        <FormGroup style={{ width: '50%' }} legendText={t('program', 'Program')}>
+      <Stack className={styles.formContainer} gap={7}>
+        <FormGroup style={{ maxWidth: '50%' }} legendText={t('programName', 'Program name')}>
           <div className={styles.selectContainer}>
             <Select
               id="program"
@@ -126,7 +182,7 @@ const ProgramsForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patient
             </Select>
           </div>
         </FormGroup>
-        <FormGroup legendText={t('dateEnrolled', 'Date enrolled')}>
+        <FormGroup style={{ maxWidth: '50%' }} legendText={t('dateEnrolled', 'Date enrolled')}>
           <DatePicker
             id="enrollmentDate"
             datePickerType="single"
@@ -140,7 +196,7 @@ const ProgramsForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patient
             <DatePickerInput id="enrollmentDateInput" labelText="" />
           </DatePicker>
         </FormGroup>
-        <FormGroup legendText={t('dateCompleted', 'Date completed')}>
+        <FormGroup style={{ width: '50%' }} legendText={t('dateCompleted', 'Date completed')}>
           <DatePicker
             id="completionDate"
             datePickerType="single"
@@ -173,7 +229,7 @@ const ProgramsForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patient
               ))}
           </Select>
         </FormGroup>
-      </div>
+      </Stack>
       <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
         <Button className={styles.button} kind="secondary" onClick={() => closeWorkspace()}>
           {t('cancel', 'Cancel')}

package/src/programs/programs-form.scss

@@ -1,11 +1,4 @@
-@import "~@openmrs/esm-styleguide/src/vars";
-@import "~carbon-components/src/globals/scss/vars";
-@import "~carbon-components/src/globals/scss/mixins";
-
-.selectContainer {
-  display: flex;
-  align-items: center;
-}
+@import '~@openmrs/esm-styleguide/src/vars';
 
 .loading {
   margin-left: 1rem;
@@ -13,7 +6,6 @@
   min-height: 2.5rem;
 }
 
-
 .button {
   height: 4rem;
   display: flex;

package/src/programs/programs-form.test.tsx

@@ -1,18 +1,20 @@
 import React from 'react';
 import { throwError } from 'rxjs';
 import { of } from 'rxjs/internal/observable/of';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { createErrorHandler, openmrsFetch, showNotification, showToast, useLayoutType } from '@openmrs/esm-framework';
+import { createErrorHandler, openmrsFetch, showNotification, showToast } from '@openmrs/esm-framework';
 import { mockPatient } from '../../../../__mocks__/patient.mock';
 import {
   mockCareProgramsResponse,
   mockEnrolledProgramsResponse,
   mockLocationsResponse,
 } from '../../../../__mocks__/programs.mock';
-import { createProgramEnrollment } from './programs.resource';
+import { createProgramEnrollment, updateProgramEnrollment } from './programs.resource';
 import ProgramsForm from './programs-form.component';
 
+jest.setTimeout(20000);
+
 const testProps = {
   closeWorkspace: jest.fn(),
   patientUuid: mockPatient.id,
@@ -21,10 +23,10 @@ const testProps = {
 
 const mockCreateErrorHandler = createErrorHandler as jest.Mock;
 const mockCreateProgramEnrollment = createProgramEnrollment as jest.Mock;
+const mockUpdateProgramEnrollment = updateProgramEnrollment as jest.Mock;
 const mockOpenmrsFetch = openmrsFetch as jest.Mock;
 const mockShowNotification = showNotification as jest.Mock;
 const mockShowToast = showToast as jest.Mock;
-const mockUseLayoutType = useLayoutType as jest.Mock;
 
 jest.mock('@openmrs/esm-framework', () => {
   const originalModule = jest.requireActual('@openmrs/esm-framework');
@@ -44,142 +46,143 @@ jest.mock('./programs.resource', () => {
   return {
     ...originalModule,
     createProgramEnrollment: jest.fn(),
+    updateProgramEnrollment: jest.fn(),
   };
 });
 
-describe('ProgramsForm: ', () => {
-  beforeEach(() => {
+describe('ProgramsForm', () => {
+  it('renders a success toast notification upon successfully recording a program enrollment', async () => {
+    const user = userEvent.setup();
+
+    const inpatientWardUuid = 'b1a8b05e-3542-4037-bbd3-998ee9c40574';
+    const oncologyScreeningProgramUuid = '11b129ca-a5e7-4025-84bf-b92a173e20de';
+
     mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockCareProgramsResponse } });
     mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockEnrolledProgramsResponse } });
-  });
+    mockCreateProgramEnrollment.mockReturnValueOnce(of({ status: 201, statusText: 'Created' }));
 
-  it('renders the programs form with all the relevant fields and values', async () => {
     renderProgramsForm();
 
-    await screen.findByRole('group', { name: /Program/i });
-    expect(screen.getByRole('group', { name: /Date enrolled/i })).toBeInTheDocument();
-    expect(screen.getByRole('group', { name: /Date completed/i })).toBeInTheDocument();
-    expect(screen.getByRole('group', { name: /Enrollment location/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /Choose a program/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /Oncology Screening and Diagnosis/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /Choose a location/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /Amani Hospital/i })).toBeInTheDocument();
+    const enrollButton = screen.getByRole('button', { name: /save and close/i });
+    const enrollmentDateInput = screen.getAllByRole('textbox', { name: '' })[0];
+    const selectLocationInput = screen.getAllByRole('combobox', { name: '' })[1];
+    const selectProgramInput = screen.getAllByRole('combobox', { name: '' })[0];
+
+    await waitFor(() => user.type(enrollmentDateInput, '2020-05-05'));
+    await waitFor(() => user.selectOptions(selectProgramInput, [oncologyScreeningProgramUuid]));
+    await waitFor(() => user.selectOptions(selectLocationInput, [inpatientWardUuid]));
+
     expect(screen.getByRole('option', { name: /Inpatient Ward/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /Isolation Ward/i })).toBeInTheDocument();
-    expect(screen.getByRole('option', { name: /Laboratory/i })).toBeInTheDocument();
 
-    const cancelButton = screen.getByRole('button', { name: /cancel/i });
-    const enrollButton = screen.getByRole('button', { name: /save and close/i });
-    expect(cancelButton).toBeInTheDocument();
-    expect(enrollButton).toBeInTheDocument();
-    expect(enrollButton).toBeDisabled();
+    await waitFor(() => user.click(enrollButton));
+
+    expect(mockCreateProgramEnrollment).toHaveBeenCalledTimes(1);
+    expect(mockCreateProgramEnrollment).toHaveBeenCalledWith(
+      expect.objectContaining({
+        dateCompleted: null,
+        location: inpatientWardUuid,
+        patient: mockPatient.id,
+        program: oncologyScreeningProgramUuid,
+      }),
+      new AbortController(),
+    );
+
+    expect(mockShowToast).toHaveBeenCalledTimes(1);
+    expect(mockShowToast).toHaveBeenCalledWith({
+      critical: true,
+      description: 'It is now visible in the Programs table',
+      kind: 'success',
+      title: 'Program enrollment saved',
+    });
   });
 
-  it('closes the form and the workspace when the cancel button is clicked', () => {
-    renderProgramsForm();
+  it('updates a program enrollment', async () => {
+    const user = userEvent.setup();
 
-    const cancelButton = screen.getByRole('button', { name: /Cancel/i });
-    userEvent.click(cancelButton);
+    renderProgramsForm(mockEnrolledProgramsResponse[0].uuid);
 
-    expect(testProps.closeWorkspace).toHaveBeenCalledTimes(1);
-  });
+    const enrollButton = screen.getByRole('button', { name: /save and close/i });
+    const dateCompletedGroup = screen.getByRole('group', { name: /Date completed/i });
+    const dateCompletedInput = within(dateCompletedGroup).getByRole('textbox');
 
-  it('renders a light background for date inputs in the tablet viewport ', () => {
-    mockUseLayoutType.mockReturnValueOnce('tablet').mockReturnValueOnce('tablet');
+    mockUpdateProgramEnrollment.mockReturnValueOnce(of({ status: 200, statusText: 'OK' }));
 
-    renderProgramsForm();
+    await waitFor(() => user.type(dateCompletedInput, '05/05/2020'));
 
-    expect(screen.getAllByPlaceholderText('dd/mm/yyyy')[0]).toHaveClass('bx--date-picker--light', { exact: false });
-    expect(screen.getAllByPlaceholderText('dd/mm/yyyy')[1]).toHaveClass('bx--date-picker--light', { exact: false });
+    expect(dateCompletedInput).toHaveValue('05/05/2020');
+
+    await waitFor(() => user.tab());
+
+    expect(enrollButton).not.toBeDisabled();
+
+    await waitFor(() => user.click(enrollButton));
+
+    expect(mockUpdateProgramEnrollment).toHaveBeenCalledTimes(1);
+    expect(mockUpdateProgramEnrollment).toHaveBeenCalledWith(
+      mockEnrolledProgramsResponse[0].uuid,
+      expect.objectContaining({
+        dateEnrolled: '2020-01-16T00:00:00+00:00',
+        dateCompleted: '2020-05-05T00:00:00+00:00',
+        location: mockEnrolledProgramsResponse[0].location.uuid,
+        patient: mockPatient.id,
+        program: mockEnrolledProgramsResponse[0].program.uuid,
+      }),
+      new AbortController(),
+    );
+
+    expect(mockShowToast).toHaveBeenCalledWith(
+      expect.objectContaining({
+        critical: true,
+        description: 'Changes to the program are now visible in the Programs table',
+        kind: 'success',
+        title: 'Program enrollment updated',
+      }),
+    );
   });
 
-  describe('Form submission: ', () => {
+  it('renders an error notification if there was a problem recording a program enrollment', async () => {
+    const user = userEvent.setup();
+
     const inpatientWardUuid = 'b1a8b05e-3542-4037-bbd3-998ee9c40574';
     const oncologyScreeningProgramUuid = '11b129ca-a5e7-4025-84bf-b92a173e20de';
-    let cancelButton: HTMLElement;
-    let enrollButton: HTMLElement;
-    let enrollmentDateInput: HTMLElement;
-    let selectLocationInput: HTMLElement;
-    let selectProgramInput: HTMLElement;
-
-    beforeEach(() => {
-      renderProgramsForm();
-
-      cancelButton = screen.getByRole('button', { name: /cancel/i });
-      enrollButton = screen.getByRole('button', { name: /save and close/i });
-      enrollmentDateInput = screen.getAllByRole('textbox', { name: '' })[0];
-      selectLocationInput = screen.getAllByRole('combobox', { name: '' })[1];
-      selectProgramInput = screen.getAllByRole('combobox', { name: '' })[0];
-    });
 
-    it('renders a success toast notification upon successfully recording a program enrollment', async () => {
-      mockCreateProgramEnrollment.mockReturnValueOnce(of({ status: 201, statusText: 'Created' }));
-
-      userEvent.selectOptions(selectProgramInput, [oncologyScreeningProgramUuid]);
-      userEvent.selectOptions(selectLocationInput, [inpatientWardUuid]);
-      userEvent.type(enrollmentDateInput, '2020-05-05');
-
-      expect(screen.getByDisplayValue('Oncology Screening and Diagnosis')).toBeInTheDocument();
-      expect(screen.getByDisplayValue('Inpatient Ward')).toBeInTheDocument();
-      expect(enrollButton).not.toBeDisabled();
-
-      await waitFor(() => userEvent.click(enrollButton));
-
-      expect(mockCreateProgramEnrollment).toHaveBeenCalledTimes(1);
-      expect(mockCreateProgramEnrollment).toHaveBeenCalledWith(
-        expect.objectContaining({
-          dateCompleted: null,
-          location: inpatientWardUuid,
-          patient: mockPatient.id,
-          program: oncologyScreeningProgramUuid,
-        }),
-        new AbortController(),
-      );
-
-      expect(mockShowToast).toHaveBeenCalledTimes(1);
-      expect(mockShowToast).toHaveBeenCalledWith(
-        expect.objectContaining({
-          critical: true,
-          description: 'It is now visible on the Programs page',
-          kind: 'success',
-          title: 'Program enrollment saved',
-        }),
-      );
-    });
+    const error = {
+      message: 'Internal Server Error',
+      response: {
+        status: 500,
+        statusText: 'Internal Server Error',
+      },
+    };
 
-    xit('renders an error notification if there was a problem recording a program enrollment', async () => {
-      const error = {
-        message: 'Internal Server Error',
-        response: {
-          status: 500,
-          statusText: 'Internal Server Error',
-        },
-      };
+    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockCareProgramsResponse } });
+    mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockEnrolledProgramsResponse } });
+    mockCreateProgramEnrollment.mockReturnValueOnce(throwError(error));
 
-      mockCreateProgramEnrollment.mockReturnValueOnce(throwError(error));
+    renderProgramsForm();
 
-      userEvent.selectOptions(selectProgramInput, [oncologyScreeningProgramUuid]);
-      userEvent.selectOptions(selectLocationInput, [inpatientWardUuid]);
-      userEvent.type(enrollmentDateInput, '2020-05-05');
+    const enrollButton = screen.getByRole('button', { name: /save and close/i });
+    const enrollmentDateInput = screen.getAllByRole('textbox', { name: '' })[0];
+    const selectLocationInput = screen.getAllByRole('combobox', { name: '' })[1];
+    const selectProgramInput = screen.getAllByRole('combobox', { name: '' })[0];
 
-      expect(screen.getByDisplayValue('Oncology Screening and Diagnosis')).toBeInTheDocument();
-      expect(screen.getByDisplayValue('2020-05-05')).toBeInTheDocument();
-      expect(screen.getByDisplayValue('Inpatient Ward')).toBeInTheDocument();
-      expect(enrollButton).not.toBeDisabled();
+    await waitFor(() => user.type(enrollmentDateInput, '2020-05-05'));
+    await waitFor(() => user.selectOptions(selectProgramInput, [oncologyScreeningProgramUuid]));
+    await waitFor(() => user.selectOptions(selectLocationInput, [inpatientWardUuid]));
 
-      userEvent.click(enrollButton);
+    expect(enrollButton).not.toBeDisabled();
 
-      expect(mockCreateErrorHandler).toHaveBeenCalledTimes(1);
-      expect(mockShowNotification).toHaveBeenCalledWith({
-        critical: true,
-        description: 'Internal Server Error',
-        kind: 'error',
-        title: 'Error saving program enrollment',
-      });
+    await waitFor(() => user.click(enrollButton));
+
+    expect(mockCreateErrorHandler).toHaveBeenCalledTimes(1);
+    expect(mockShowNotification).toHaveBeenCalledWith({
+      critical: true,
+      description: 'Internal Server Error',
+      kind: 'error',
+      title: 'Error saving program enrollment',
     });
   });
 });
 
-function renderProgramsForm() {
-  render(<ProgramsForm {...testProps} />);
+function renderProgramsForm(programEnrollmentUuidToEdit?: string) {
+  render(<ProgramsForm {...testProps} programEnrollmentId={programEnrollmentUuidToEdit} />);
 }