@openmrs/esm-patient-programs-app 3.0.3 → 3.1.1-pre.1090

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-patient-programs-app",
-  "version": "3.0.3",
+  "version": "3.1.1-pre.1090",
   "license": "MPL-2.0",
   "description": "Patient programs microfrontend for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-patient-programs-app.js",
@@ -36,13 +36,14 @@
   "dependencies": {
     "@carbon/charts-react": "^0.49.4",
     "@carbon/icons-react": "^10.18.0",
-    "@openmrs/esm-patient-common-lib": "^3.0.3",
+    "@openmrs/esm-patient-common-lib": "^3.1.1-pre.1090",
     "carbon-components-react": "^7.25.0",
     "d3": "^7.0.3",
     "lodash-es": "^4.17.15"
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "3.x",
+    "@openmrs/esm-patient-common-lib": "3.x",
     "carbon-components": "10.x",
     "carbon-icons": "7.x",
     "dayjs": "1.x",
@@ -51,5 +52,5 @@
     "react-router-dom": "5.x",
     "rxjs": "6.x"
   },
-  "gitHead": "0613587d69c851115180b05633ff41c5db771a87"
+  "gitHead": "0e2864a46bd5ccf97dbb833c862eb38e6cdb5140"
 }

package/src/index.ts

@@ -8,10 +8,6 @@ const backendDependencies = {
   'webservices.rest': '^2.2.0',
 };
 
-const frontendDependencies = {
-  '@openmrs/esm-framework': process.env.FRAMEWORK_VERSION,
-};
-
 function setupOpenMRS() {
   const moduleName = '@openmrs/esm-patient-programs-app';
 
@@ -27,6 +23,7 @@ function setupOpenMRS() {
       {
         id: 'programs-overview-widget',
         slot: 'patient-chart-summary-dashboard-slot',
+        order: 0,
         load: getAsyncLifecycle(() => import('./programs/programs-overview.component'), options),
         meta: {
           columnSpan: 4,
@@ -43,6 +40,7 @@ function setupOpenMRS() {
       {
         id: 'programs-summary-dashboard',
         slot: 'patient-chart-dashboard-slot',
+        order: 10,
         load: getSyncLifecycle(createDashboardLink(dashboardMeta), options),
         meta: dashboardMeta,
       },
@@ -57,4 +55,4 @@ function setupOpenMRS() {
   };
 }
 
-export { backendDependencies, frontendDependencies, importTranslation, setupOpenMRS };
+export { backendDependencies, importTranslation, setupOpenMRS };

package/src/programs/programs-detailed-summary.component.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import dayjs from 'dayjs';
 import Add16 from '@carbon/icons-react/es/add/16';
+import filter from 'lodash-es/filter';
+import includes from 'lodash-es/includes';
+import map from 'lodash-es/map';
 import styles from './programs-detailed-summary.scss';
-import { EmptyState, ErrorState, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
+import { CardHeader, EmptyState, ErrorState, launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import { useTranslation } from 'react-i18next';
-import { useEnrollments } from './programs.resource';
+import { useAvailablePrograms, useEnrollments } from './programs.resource';
 import { useProgramsContext } from './programs.context';
 import {
   Button,
@@ -20,7 +23,9 @@ import {
   TableRow,
   DataTableHeader,
   DataTableRow,
+  InlineNotification,
 } from 'carbon-components-react';
+import { formatDate, formatDatetime } from '@openmrs/esm-framework';
 
 interface ProgramsDetailedSummaryProps {}
 
@@ -31,6 +36,11 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = () => {
   const headerTitle = t('carePrograms', 'Care Programs');
 
   const { data: enrolledPrograms, isError, isLoading, isValidating } = useEnrollments(patientUuid);
+  const { data: availablePrograms } = useAvailablePrograms();
+  const eligiblePrograms = filter(
+    availablePrograms,
+    (program) => !includes(map(enrolledPrograms, 'program.uuid'), program.uuid),
+  );
 
   const tableHeaders: Array<DataTableHeader> = React.useMemo(
     () => [
@@ -38,6 +48,10 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = () => {
         key: 'display',
         header: t('activePrograms', 'Active programs'),
       },
+      {
+        key: 'location',
+        header: t('location', 'Location'),
+      },
       {
         key: 'dateEnrolled',
         header: t('dateEnrolled', 'Date enrolled'),
@@ -55,9 +69,10 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = () => {
       return {
         id: program.uuid,
         display: program.display,
-        dateEnrolled: dayjs(program.dateEnrolled).format('MMM-YYYY'),
+        location: program.location?.display,
+        dateEnrolled: formatDatetime(new Date(program.dateEnrolled)),
         status: program.dateCompleted
-          ? `${t('completedOn', 'Completed On')} ${dayjs(program.dateCompleted).format('MMM-YYYY')}`
+          ? `${t('completedOn', 'Completed On')} ${formatDate(new Date(program.dateCompleted))}`
           : t('active', 'Active'),
       };
     });
@@ -70,14 +85,28 @@ const ProgramsDetailedSummary: React.FC<ProgramsDetailedSummaryProps> = () => {
   if (enrolledPrograms?.length) {
     return (
       <div className={styles.widgetCard}>
-        <div className={styles.programsHeader}>
-          <h4 className={`${styles.productiveHeading03} ${styles.text02}`}>{headerTitle}</h4>
+        <CardHeader title={headerTitle}>
           <span>{isValidating ? <InlineLoading /> : null}</span>
-          <Button kind="ghost" renderIcon={Add16} iconDescription="Add programs" onClick={launchProgramsForm}>
+          <Button
+            kind="ghost"
+            renderIcon={Add16}
+            iconDescription="Add programs"
+            onClick={launchProgramsForm}
+            disabled={availablePrograms?.length && eligiblePrograms?.length === 0}
+          >
             {t('add', 'Add')}
           </Button>
-        </div>
+        </CardHeader>
         <TableContainer>
+          {availablePrograms?.length && eligiblePrograms?.length === 0 && (
+            <InlineNotification
+              style={{ minWidth: '100%', margin: '0rem', padding: '0rem' }}
+              kind={'info'}
+              lowContrast={true}
+              subtitle={t('noEligibleEnrollments', 'There are no more programs left to enroll this patient in')}
+              title={t('fullyEnrolled', 'Enrolled in all programs')}
+            />
+          )}
           <DataTable rows={tableRows} headers={tableHeaders} isSortable={true} size="short">
             {({ rows, headers, getHeaderProps, getTableProps }) => (
               <Table {...getTableProps()} useZebraStyles>

package/src/programs/programs-detailed-summary.scss

@@ -6,19 +6,3 @@
 .widgetCard {
   border: 1px solid $ui-03;
 }
-
-.programsHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: $spacing-04 0 $spacing-04 $spacing-05;
-  background-color: $ui-background;
-}
-
-.programsHeader > h4:after {
-  content: "";
-  display: block;
-  width: 2rem;
-  padding-top: 0.188rem;
-  border-bottom: 0.375rem solid $brand-teal-01;
-}

package/src/programs/programs-detailed-summary.test.tsx

@@ -1,13 +1,33 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { openmrsFetch } from '@openmrs/esm-framework';
+import { formatDate, formatDatetime, openmrsFetch, usePagination } from '@openmrs/esm-framework';
 import { mockEnrolledProgramsResponse } from '../../../../__mocks__/programs.mock';
 import { swrRender, waitForLoadingToFinish } from '../../../../tools/test-helpers';
 import { launchPatientWorkspace } from '@openmrs/esm-patient-common-lib';
 import ProgramsDetailedSummary from './programs-detailed-summary.component';
+import dayjs from 'dayjs';
 
 const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+const mockUsePagination = usePagination as jest.Mock;
+const mockFormatDate = formatDate as jest.Mock;
+const mockFormatDateTime = formatDatetime as jest.Mock;
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+
+  return {
+    ...originalModule,
+    formatDate: jest.fn(),
+    formatDatetime: jest.fn(),
+    openmrsFetch: jest.fn(),
+    usePagination: jest.fn().mockImplementation(() => ({
+      currentPage: 1,
+      goTo: () => {},
+      results: [],
+    })),
+  };
+});
 
 jest.mock('@openmrs/esm-patient-common-lib', () => {
   const originalModule = jest.requireActual('@openmrs/esm-patient-common-lib');
@@ -56,6 +76,13 @@ describe('ProgramsDetailedSummary ', () => {
 
   it("renders a detailed tabular summary of the patient's program enrollments", async () => {
     mockOpenmrsFetch.mockReturnValueOnce({ data: { results: mockEnrolledProgramsResponse } });
+    mockUsePagination.mockImplementation(() => ({
+      currentPage: 1,
+      goTo: () => {},
+      results: mockEnrolledProgramsResponse.slice(0, 5),
+    }));
+    mockFormatDate.mockImplementation((dateTime) => dayjs(dateTime).format('MMM-YYYY'));
+    mockFormatDateTime.mockImplementation((dateTime) => dayjs(dateTime).format('DD-MMM-YYYY HH:mm'));
 
     renderProgramsOverview();
 

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

@@ -6,23 +6,21 @@ import includes from 'lodash-es/includes';
 import map from 'lodash-es/map';
 import styles from './programs-form.scss';
 import { useTranslation } from 'react-i18next';
+import { createErrorHandler, showNotification, showToast, useSessionUser, useLocations } from '@openmrs/esm-framework';
 import {
-  createErrorHandler,
-  detach,
-  showNotification,
-  showToast,
-  useSessionUser,
-  useLocations,
-} from '@openmrs/esm-framework';
-import { Button, DatePicker, DatePickerInput, Select, SelectItem, Form, FormGroup } from 'carbon-components-react';
+  Button,
+  DatePicker,
+  DatePickerInput,
+  Select,
+  SelectItem,
+  Form,
+  FormGroup,
+  ButtonSet,
+} from 'carbon-components-react';
 import { createProgramEnrollment, useAvailablePrograms, useEnrollments } from './programs.resource';
+import { DefaultWorkspaceProps } from '@openmrs/esm-patient-common-lib';
 
-interface ProgramsFormProps {
-  patientUuid: string;
-  isTablet: boolean;
-}
-
-const ProgramsForm: React.FC<ProgramsFormProps> = ({ patientUuid, isTablet }) => {
+const ProgramsForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace, patientUuid, isTablet }) => {
   const { t } = useTranslation();
   const session = useSessionUser();
   const availableLocations = useLocations();
@@ -44,8 +42,6 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({ patientUuid, isTablet }) =>
     setUserLocation(session?.sessionLocation?.uuid);
   }
 
-  const closeWorkspace = React.useCallback(() => detach('patient-chart-workspace-slot', 'programs-form-workspace'), []);
-
   const handleSubmit = React.useCallback(
     (event: SyntheticEvent<HTMLFormElement>) => {
       event.preventDefault();
@@ -95,89 +91,83 @@ const ProgramsForm: React.FC<ProgramsFormProps> = ({ patientUuid, isTablet }) =>
   );
 
   return (
-    <Form style={{ margin: '2rem' }} onSubmit={handleSubmit}>
-      <FormGroup style={{ width: '50%' }} legendText={t('program', 'Program')}>
-        <div className={styles.selectContainer}>
+    <Form className={styles.form} onSubmit={handleSubmit}>
+      <div className={styles.formContainer}>
+        <FormGroup style={{ width: '50%' }} legendText={t('program', 'Program')}>
+          <div className={styles.selectContainer}>
+            <Select
+              id="program"
+              invalidText={t('required', 'Required')}
+              labelText=""
+              light={isTablet}
+              onChange={(event) => setSelectedProgram(event.target.value)}
+            >
+              {!selectedProgram ? <SelectItem text={t('chooseProgram', 'Choose a program')} value="" /> : null}
+              {eligiblePrograms?.length > 0 &&
+                eligiblePrograms.map((program) => (
+                  <SelectItem key={program.uuid} text={program.display} value={program.uuid}>
+                    {program.display}
+                  </SelectItem>
+                ))}
+            </Select>
+          </div>
+        </FormGroup>
+        <FormGroup legendText={t('dateEnrolled', 'Date enrolled')}>
+          <DatePicker
+            id="enrollmentDate"
+            datePickerType="single"
+            dateFormat="d/m/Y"
+            light={isTablet}
+            maxDate={new Date().toISOString()}
+            placeholder="dd/mm/yyyy"
+            onChange={([date]) => setEnrollmentDate(date)}
+            value={enrollmentDate}
+          >
+            <DatePickerInput id="enrollmentDateInput" labelText="" />
+          </DatePicker>
+        </FormGroup>
+        <FormGroup legendText={t('dateCompleted', 'Date completed')}>
+          <DatePicker
+            id="completionDate"
+            datePickerType="single"
+            dateFormat="d/m/Y"
+            light={isTablet}
+            minDate={new Date(enrollmentDate).toISOString()}
+            maxDate={new Date().toISOString()}
+            placeholder="dd/mm/yyyy"
+            onChange={([date]) => setCompletionDate(date)}
+            value={completionDate}
+          >
+            <DatePickerInput id="completionDateInput" labelText="" />
+          </DatePicker>
+        </FormGroup>
+        <FormGroup style={{ width: '50%' }} legendText={t('enrollmentLocation', 'Enrollment location')}>
           <Select
-            id="program"
-            invalidText={t('required', 'Required')}
+            id="location"
+            invalidText="Required"
             labelText=""
             light={isTablet}
-            onChange={(event) => setSelectedProgram(event.target.value)}
+            onChange={(event) => setUserLocation(event.target.value)}
+            value={userLocation}
           >
-            {!selectedProgram ? <SelectItem text={t('chooseProgram', 'Choose a program')} value="" /> : null}
-            {eligiblePrograms?.length > 0 &&
-              eligiblePrograms.map((program) => (
-                <SelectItem key={program.uuid} text={program.display} value={program.uuid}>
-                  {program.display}
+            {!userLocation ? <SelectItem text={t('chooseLocation', 'Choose a location')} value="" /> : null}
+            {availableLocations?.length > 0 &&
+              availableLocations.map((location) => (
+                <SelectItem key={location.uuid} text={location.display} value={location.uuid}>
+                  {location.display}
                 </SelectItem>
               ))}
           </Select>
-        </div>
-        {availablePrograms?.length &&
-          eligiblePrograms?.length === 0 &&
-          showNotification({
-            title: t('error', 'Error'),
-            kind: 'error',
-            critical: true,
-            description: t('alreadyEnrolledText', 'This patient is already enrolled in all of the available programs'),
-          })}
-      </FormGroup>
-      <FormGroup legendText={t('dateEnrolled', 'Date enrolled')}>
-        <DatePicker
-          id="enrollmentDate"
-          datePickerType="single"
-          dateFormat="d/m/Y"
-          light={isTablet}
-          maxDate={new Date().toISOString()}
-          placeholder="dd/mm/yyyy"
-          onChange={([date]) => setEnrollmentDate(date)}
-          value={enrollmentDate}
-        >
-          <DatePickerInput id="enrollmentDateInput" labelText="" />
-        </DatePicker>
-      </FormGroup>
-      <FormGroup legendText={t('dateCompleted', 'Date completed')}>
-        <DatePicker
-          id="completionDate"
-          datePickerType="single"
-          dateFormat="d/m/Y"
-          light={isTablet}
-          minDate={new Date(enrollmentDate).toISOString()}
-          maxDate={new Date().toISOString()}
-          placeholder="dd/mm/yyyy"
-          onChange={([date]) => setCompletionDate(date)}
-          value={completionDate}
-        >
-          <DatePickerInput id="completionDateInput" labelText="" />
-        </DatePicker>
-      </FormGroup>
-      <FormGroup style={{ width: '50%' }} legendText={t('enrollmentLocation', 'Enrollment location')}>
-        <Select
-          id="location"
-          invalidText="Required"
-          labelText=""
-          light={isTablet}
-          onChange={(event) => setUserLocation(event.target.value)}
-          value={userLocation}
-        >
-          {!userLocation ? <SelectItem text={t('chooseLocation', 'Choose a location')} value="" /> : null}
-          {availableLocations?.length > 0 &&
-            availableLocations.map((location) => (
-              <SelectItem key={location.uuid} text={location.display} value={location.uuid}>
-                {location.display}
-              </SelectItem>
-            ))}
-        </Select>
-      </FormGroup>
-      <div style={{ marginTop: '1.625rem' }}>
-        <Button style={{ width: '50%' }} kind="secondary" type="button" onClick={closeWorkspace}>
+        </FormGroup>
+      </div>
+      <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+        <Button className={styles.button} kind="secondary" onClick={closeWorkspace}>
           {t('cancel', 'Cancel')}
         </Button>
-        <Button style={{ width: '50%' }} kind="primary" type="submit" disabled={!selectedProgram}>
-          {t('enroll', 'Enroll')}
+        <Button className={styles.button} kind="primary" disabled={!selectedProgram} type="submit">
+          {t('saveAndClose', 'Save and close')}
         </Button>
-      </div>
+      </ButtonSet>
     </Form>
   );
 };

package/src/programs/programs-form.scss

@@ -2,12 +2,6 @@
 @import "~carbon-components/src/globals/scss/vars";
 @import "~carbon-components/src/globals/scss/mixins";
 
-.alreadyEnrolledText {
-  @include carbon--type-style("body-short-01");
-  color: $text-02;
-  min-height: 1rem;
-}
-
 .selectContainer {
   display: flex;
   align-items: center;
@@ -17,4 +11,46 @@
   margin-left: 1rem;
   width: 2rem;
   min-height: 2.5rem;
+}
+
+
+.button {
+  height: 4rem;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.tablet {
+  padding: 1.5rem 1rem;
+  background-color: $ui-02;
+}
+
+.desktop {
+  padding: 0rem;
+}
+
+.formContainer {
+  margin: 1rem;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  .form {
+    height: calc(100vh - 6rem);
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .form {
+    height: calc(100vh - 3rem);
+  }
 }

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

@@ -4,14 +4,7 @@ import * as SWR from 'swr';
 import { throwError } from 'rxjs';
 import { of } from 'rxjs/internal/observable/of';
 import { fireEvent, render, screen } from '@testing-library/react';
-import {
-  createErrorHandler,
-  detach,
-  openmrsFetch,
-  showNotification,
-  showToast,
-  useLocations,
-} from '@openmrs/esm-framework';
+import { createErrorHandler, openmrsFetch, showNotification, showToast, useLocations } from '@openmrs/esm-framework';
 import { mockPatient } from '../../../../__mocks__/patient.mock';
 import {
   mockCareProgramsResponse,
@@ -24,15 +17,14 @@ import ProgramsForm from './programs-form.component';
 const testProps = {
   patientUuid: mockPatient.id,
   isTablet: false,
+  closeWorkspace: jest.fn(),
 };
 
 const mockCreateErrorHandler = createErrorHandler as jest.Mock;
 const mockCreateProgramEnrollment = createProgramEnrollment as jest.Mock;
-const mockDetach = detach as jest.Mock;
 const mockOpenmrsFetch = openmrsFetch as jest.Mock;
 const mockShowNotification = showNotification as jest.Mock;
 const mockShowToast = showToast as jest.Mock;
-const mockUseLocations = useLocations as jest.Mock;
 
 jest.mock('@openmrs/esm-framework', () => {
   const originalModule = jest.requireActual('@openmrs/esm-framework');
@@ -40,7 +32,6 @@ jest.mock('@openmrs/esm-framework', () => {
   return {
     ...originalModule,
     createErrorHandler: jest.fn(),
-    detach: jest.fn(),
     showNotification: jest.fn(),
     showToast: jest.fn(),
     useLocations: jest.fn().mockImplementation(() => mockLocationsResponse),
@@ -78,7 +69,7 @@ describe('ProgramsForm: ', () => {
     expect(screen.getByRole('option', { name: /Laboratory/i })).toBeInTheDocument();
 
     const cancelButton = screen.getByRole('button', { name: /cancel/i });
-    const enrollButton = screen.getByRole('button', { name: /enroll/i });
+    const enrollButton = screen.getByRole('button', { name: /save and close/i });
     expect(cancelButton).toBeInTheDocument();
     expect(enrollButton).toBeInTheDocument();
     expect(enrollButton).toBeDisabled();
@@ -90,8 +81,7 @@ describe('ProgramsForm: ', () => {
     const cancelButton = screen.getByRole('button', { name: /Cancel/i });
     fireEvent.click(cancelButton);
 
-    expect(mockDetach).toHaveBeenCalledTimes(1);
-    expect(mockDetach).toHaveBeenCalledWith('patient-chart-workspace-slot', 'programs-form-workspace');
+    expect(testProps.closeWorkspace).toHaveBeenCalledTimes(1);
   });
 
   it('renders a light background for date inputs in the tablet viewport ', () => {
@@ -116,7 +106,7 @@ describe('ProgramsForm: ', () => {
       renderProgramsForm();
 
       cancelButton = screen.getByRole('button', { name: /cancel/i });
-      enrollButton = screen.getByRole('button', { name: /enroll/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];