@openmrs/esm-patient-programs-app 3.0.3-pre.982 → 3.0.3-pre.989

package/dist/openmrs-esm-patient-programs-app.js.buildmanifest.json

@@ -1,31 +1,5 @@
 {
   "chunks": [
-    {
-      "rendered": true,
-      "initial": false,
-      "entry": false,
-      "recorded": false,
-      "reason": "split chunk (cache group: defaultVendors)",
-      "size": 522814,
-      "sizes": {
-        "javascript": 522814
-      },
-      "names": [],
-      "idHints": [
-        "vendors"
-      ],
-      "runtime": [
-        "@openmrs/esm-patient-programs-app"
-      ],
-      "files": [
-        "7.js"
-      ],
-      "auxiliaryFiles": [
-        "7.js.map"
-      ],
-      "hash": "896356fc82fcbdfee79d",
-      "childrenByOrder": {}
-    },
     {
       "rendered": true,
       "initial": false,
@@ -174,6 +148,32 @@
       "hash": "84ba0c225e2af33c6f0e",
       "childrenByOrder": {}
     },
+    {
+      "rendered": true,
+      "initial": false,
+      "entry": false,
+      "recorded": false,
+      "reason": "split chunk (cache group: defaultVendors)",
+      "size": 524360,
+      "sizes": {
+        "javascript": 524360
+      },
+      "names": [],
+      "idHints": [
+        "vendors"
+      ],
+      "runtime": [
+        "@openmrs/esm-patient-programs-app"
+      ],
+      "files": [
+        "364.js"
+      ],
+      "auxiliaryFiles": [
+        "364.js.map"
+      ],
+      "hash": "8dad4aae8fbb88c63be9",
+      "childrenByOrder": {}
+    },
     {
       "rendered": true,
       "initial": false,
@@ -276,9 +276,9 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 899,
+      "size": 913,
       "sizes": {
-        "javascript": 899
+        "javascript": 913
       },
       "names": [],
       "idHints": [],
@@ -289,7 +289,7 @@
         "574.js"
       ],
       "auxiliaryFiles": [],
-      "hash": "f395bedd5fb4a16d6410",
+      "hash": "cb2ae0c9c8c513441c4a",
       "childrenByOrder": {}
     },
     {
@@ -313,7 +313,7 @@
       "auxiliaryFiles": [
         "600.js.map"
       ],
-      "hash": "4910dbcf375981ca621f",
+      "hash": "f68d891ae55afc20fdac",
       "childrenByOrder": {}
     },
     {
@@ -602,10 +602,10 @@
       "initial": false,
       "entry": false,
       "recorded": false,
-      "size": 143859,
+      "size": 145286,
       "sizes": {
         "consume-shared": 42,
-        "javascript": 143817
+        "javascript": 145244
       },
       "names": [],
       "idHints": [],
@@ -618,7 +618,7 @@
       "auxiliaryFiles": [
         "968.js.map"
       ],
-      "hash": "49354f89d484f59f9d3b",
+      "hash": "44de75c3dae4aff71545",
       "childrenByOrder": {}
     },
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-patient-programs-app",
-  "version": "3.0.3-pre.982",
+  "version": "3.0.3-pre.989",
   "license": "MPL-2.0",
   "description": "Patient programs microfrontend for the OpenMRS SPA",
   "browser": "dist/openmrs-esm-patient-programs-app.js",
@@ -36,7 +36,7 @@
   "dependencies": {
     "@carbon/charts-react": "^0.49.4",
     "@carbon/icons-react": "^10.18.0",
-    "@openmrs/esm-patient-common-lib": "^3.0.3-pre.982",
+    "@openmrs/esm-patient-common-lib": "^3.0.3-pre.989",
     "carbon-components-react": "^7.25.0",
     "d3": "^7.0.3",
     "lodash-es": "^4.17.15"
@@ -52,5 +52,5 @@
     "react-router-dom": "5.x",
     "rxjs": "6.x"
   },
-  "gitHead": "0ce05b8a3305a2db0e83781c08ec3693fc3d7401"
+  "gitHead": "ce549812ba62659696377942550648b4cded915e"
 }

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

@@ -14,7 +14,16 @@ import {
   useSessionUser,
   useLocations,
 } from '@openmrs/esm-framework';
-import { Button, DatePicker, DatePickerInput, Select, SelectItem, Form, FormGroup } from 'carbon-components-react';
+import {
+  Button,
+  DatePicker,
+  DatePickerInput,
+  Select,
+  SelectItem,
+  Form,
+  FormGroup,
+  ButtonSet,
+} from 'carbon-components-react';
 import { createProgramEnrollment, useAvailablePrograms, useEnrollments } from './programs.resource';
 
 interface ProgramsFormProps {
@@ -95,81 +104,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>
-      </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

@@ -78,7 +78,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();
@@ -116,7 +116,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];

package/translations/en.json

@@ -10,7 +10,6 @@
   "dateCompleted": "Date completed",
   "dateEnrolled": "Date enrolled",
   "editProgram": "Edit program",
-  "enroll": "Enroll",
   "enrolledAt": "Enrolled at",
   "enrolledOn": "Enrolled on",
   "enrollmentLocation": "Enrollment location",
@@ -24,6 +23,7 @@
   "programEnrollmentSaveError": "Error saving program enrollment",
   "programs": "programs",
   "required": "Required",
+  "saveAndClose": "Save and close",
   "seeAll": "See all",
   "status": "Status"
 }