@openmrs/esm-fast-data-entry-app 1.0.1-pre.99 → 1.1.0

package/src/context/GroupFormWorkflowReducer.ts

@@ -1,24 +1,22 @@
-import { navigate } from "@openmrs/esm-framework";
-import { initialWorkflowState } from "./FormWorkflowContext";
+import { navigate } from '@openmrs/esm-framework';
+import { initialWorkflowState } from './FormWorkflowContext';
+import { v4 as uuid } from 'uuid';
 
-export const fdeGroupWorkflowStorageVersion = "1.0.5";
-export const fdeGroupWorkflowStorageName =
-  "openmrs:fastDataEntryGroupWorkflowState";
+export const fdeGroupWorkflowStorageVersion = '1.0.5';
+export const fdeGroupWorkflowStorageName = 'openmrs:fastDataEntryGroupWorkflowState';
 const persistData = (data) => {
-  localStorage.setItem(
-    fdeGroupWorkflowStorageName + ":" + data.userUuid,
-    JSON.stringify(data)
-  );
+  localStorage.setItem(fdeGroupWorkflowStorageName + ':' + data.userUuid, JSON.stringify(data));
 };
 
 const initialFormState = {
-  workflowState: "NEW_GROUP_SESSION",
+  workflowState: 'NEW_GROUP_SESSION',
   groupUuid: null,
   groupName: null,
   groupMembers: [],
   activePatientUuid: null,
   activeEncounterUuid: null,
   activeVisitUuid: null,
+  activeSessionUuid: null,
   patientUuids: [],
   encounters: {},
   visits: {},
@@ -26,16 +24,11 @@ const initialFormState = {
 
 const reducer = (state, action) => {
   switch (action.type) {
-    case "INITIALIZE_WORKFLOW_STATE": {
-      const savedData = localStorage.getItem(
-        fdeGroupWorkflowStorageName + ":" + action.userUuid
-      );
+    case 'INITIALIZE_WORKFLOW_STATE': {
+      const savedData = localStorage.getItem(fdeGroupWorkflowStorageName + ':' + action.userUuid);
       const savedDataObject = savedData ? JSON.parse(savedData) : {};
       let newState: { [key: string]: unknown } = {};
-      if (
-        savedData &&
-        savedDataObject["_storageVersion"] === fdeGroupWorkflowStorageVersion
-      ) {
+      if (savedData && savedDataObject['_storageVersion'] === fdeGroupWorkflowStorageVersion) {
         // there is localStorage data and it is still valid
         const thisSavedForm = savedDataObject.forms?.[action.activeFormUuid];
         // set active patient to the last one we were on
@@ -45,6 +38,7 @@ const reducer = (state, action) => {
           thisSavedForm?.patientUuids?.[0] ||
           // something probably went wrong...
           null;
+        const activeSessionUuid = thisSavedForm?.activeSessionUuid || uuid();
         newState = {
           ...savedDataObject,
           // set current form to this one
@@ -56,10 +50,9 @@ const reducer = (state, action) => {
               ...initialFormState,
               ...thisSavedForm,
               activePatientUuid: activePatientUuid,
-              activeEncounterUuid:
-                thisSavedForm?.encounters?.[activePatientUuid] || null,
-              activeVisitUuid:
-                thisSavedForm?.visits?.[activePatientUuid] || null,
+              activeEncounterUuid: thisSavedForm?.encounters?.[activePatientUuid] || null,
+              activeVisitUuid: thisSavedForm?.visits?.[activePatientUuid] || null,
+              activeSessionUuid: activeSessionUuid,
             },
           },
         };
@@ -79,7 +72,7 @@ const reducer = (state, action) => {
       return newState;
     }
 
-    case "SET_GROUP": {
+    case 'SET_GROUP': {
       const newState = {
         ...state,
         forms: {
@@ -92,23 +85,19 @@ const reducer = (state, action) => {
               // this translation is not preferred
               // the only reason we tollerate it here is beause it should be the only time
               // we add cohort information to state
-              action.group.cohortMembers?.map(
-                (member) => member?.patient?.uuid
-              ) ?? [],
-            groupMembers:
-              action.group.cohortMembers?.map(
-                (member) => member?.patient?.uuid
-              ) ?? [],
+              action.group.cohortMembers?.map((member) => member?.patient?.uuid) ?? [],
+            groupMembers: action.group.cohortMembers?.map((member) => member?.patient?.uuid) ?? [],
             activePatientUuid: null,
             activeEncounterUuid: null,
             activeVisitUuid: null,
+            activeSessionUuid: null,
           },
         },
       };
       persistData(newState);
       return newState;
     }
-    case "UNSET_GROUP": {
+    case 'UNSET_GROUP': {
       const newState = {
         ...state,
         forms: {
@@ -122,13 +111,14 @@ const reducer = (state, action) => {
             activePatientUuid: null,
             activeEncounterUuid: null,
             activeVisitUuid: null,
+            activeSessionUuid: null,
           },
         },
       };
       persistData(newState);
       return newState;
     }
-    case "SET_SESSION_META": {
+    case 'SET_SESSION_META': {
       // requires that group is already entered and contains patientUuids
       const newState = {
         ...state,
@@ -137,29 +127,21 @@ const reducer = (state, action) => {
           [state.activeFormUuid]: {
             ...state.forms[state.activeFormUuid],
             sessionMeta: action.meta,
-            activePatientUuid:
-              state.forms[state.activeFormUuid].patientUuids?.[0],
+            activePatientUuid: state.forms[state.activeFormUuid].patientUuids?.[0],
             activeEncounterUuid:
-              state.forms[state.activeFormUuid].encounters[
-                state.forms[state.activeFormUuid].patientUuids?.[0]
-              ] || null,
+              state.forms[state.activeFormUuid].encounters[state.forms[state.activeFormUuid].patientUuids?.[0]] || null,
             activeVisitUuid:
-              state.forms[state.activeFormUuid].visits[
-                state.forms[state.activeFormUuid].patientUuids?.[0]
-              ] || null,
-            workflowState: "EDIT_FORM",
+              state.forms[state.activeFormUuid].visits[state.forms[state.activeFormUuid].patientUuids?.[0]] || null,
+            activeSessionUuid: uuid(),
+            workflowState: 'EDIT_FORM',
           },
         },
       };
       persistData(newState);
       return newState;
     }
-    case "ADD_PATIENT_UUID": {
-      if (
-        state.forms[state.activeFormUuid].patientUuids.includes(
-          action.patientUuid
-        )
-      ) {
+    case 'ADD_PATIENT_UUID': {
+      if (state.forms[state.activeFormUuid].patientUuids.includes(action.patientUuid)) {
         return state;
       }
 
@@ -169,35 +151,30 @@ const reducer = (state, action) => {
           ...state.forms,
           [state.activeFormUuid]: {
             ...state.forms[state.activeFormUuid],
-            patientUuids: [
-              ...state.forms[state.activeFormUuid].patientUuids,
-              action.patientUuid,
-            ],
+            patientUuids: [...state.forms[state.activeFormUuid].patientUuids, action.patientUuid],
           },
         },
       };
       persistData(newState);
       return newState;
     }
-    case "REMOVE_PATIENT_UUID": {
+    case 'REMOVE_PATIENT_UUID': {
       const newState = {
         ...state,
         forms: {
           ...state.forms,
           [state.activeFormUuid]: {
             ...state.forms[state.activeFormUuid],
-            patientUuids: state.forms[
-              state.activeFormUuid
-            ].patientUuids?.filter((uuid) => action.patientUuid !== uuid),
+            patientUuids: state.forms[state.activeFormUuid].patientUuids?.filter((uuid) => action.patientUuid !== uuid),
           },
         },
       };
       persistData(newState);
       return newState;
     }
-    case "SAVE_ENCOUNTER": {
+    case 'SAVE_ENCOUNTER': {
       const thisForm = state.forms[state.activeFormUuid];
-      if (thisForm.workflowState === "SUBMIT_FOR_COMPLETE") {
+      if (thisForm.workflowState === 'SUBMIT_FOR_COMPLETE') {
         const { [state.activeFormUuid]: activeForm, ...formRest } = state.forms;
         const newState = {
           ...state,
@@ -206,31 +183,30 @@ const reducer = (state, action) => {
         };
         persistData(newState);
         // eslint-disable-next-line
-        navigate({ to: "${openmrsSpaBase}/forms" });
+        navigate({ to: '${openmrsSpaBase}/forms' });
         return newState;
-      } else if (thisForm.workflowState === "SUBMIT_FOR_NEXT") {
+      } else if (thisForm.workflowState === 'SUBMIT_FOR_NEXT') {
         const nextPatientUuid = state.nextPatientUuid
           ? state.nextPatientUuid
           : thisForm.patientUuids[
-              Math.min(
-                thisForm.patientUuids.indexOf(thisForm.activePatientUuid) + 1,
-                thisForm.patientUuids.length - 1
-              )
+              Math.min(thisForm.patientUuids.indexOf(thisForm.activePatientUuid) + 1, thisForm.patientUuids.length - 1)
             ];
+        const encounters = {
+          ...thisForm.encounters,
+          [thisForm.activePatientUuid]: action.encounterUuid,
+        };
         const newState = {
           ...state,
           forms: {
             ...state.forms,
             [state.activeFormUuid]: {
               ...thisForm,
-              encounters: {
-                ...thisForm.encounters,
-                [thisForm.activePatientUuid]: action.encounterUuid,
-              },
+              encounters,
               activePatientUuid: nextPatientUuid,
-              activeEncounterUuid: thisForm.encounters[nextPatientUuid] || null,
+              activeEncounterUuid: encounters[nextPatientUuid] || null,
               activeVisitUuid: thisForm.visits[nextPatientUuid] || null,
-              workflowState: "EDIT_FORM",
+              activeSessionUuid: thisForm.activeSessionUuid,
+              workflowState: 'EDIT_FORM',
             },
           },
         };
@@ -238,35 +214,34 @@ const reducer = (state, action) => {
         return newState;
       } else return state;
     }
-    case "EDIT_ENCOUNTER": {
+    case 'EDIT_ENCOUNTER': {
       const newState = {
         ...state,
         forms: {
           ...state.forms,
           [state.activeFormUuid]: {
             ...state.forms[state.activeFormUuid],
-            activeEncounterUuid:
-              state.forms[state.activeFormUuid].encounters[action.patientUuid],
-            activeVisitUuid:
-              state.forms[state.activeFormUuid].visits[action.patientUuid],
+            activeEncounterUuid: state.forms[state.activeFormUuid].encounters[action.patientUuid],
+            activeVisitUuid: state.forms[state.activeFormUuid].visits[action.patientUuid],
             activePatientUuid: action.patientUuid,
-            workflowState: "EDIT_FORM",
+            activeSessionUuid: action.activeSessionUuid,
+            workflowState: 'EDIT_FORM',
           },
         },
       };
       persistData(newState);
       return newState;
     }
-    case "VALIDATE_FOR_NEXT":
+    case 'VALIDATE_FOR_NEXT':
       // this state should not be persisted
       window.dispatchEvent(
-        new CustomEvent("ampath-form-action", {
+        new CustomEvent('ampath-form-action', {
           detail: {
             formUuid: state.activeFormUuid,
             patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
-            action: "validateForm",
+            action: 'validateForm',
           },
-        })
+        }),
       );
       return {
         ...state,
@@ -274,11 +249,11 @@ const reducer = (state, action) => {
           ...state.forms,
           [state.activeFormUuid]: {
             ...state.forms[state.activeFormUuid],
-            workflowState: "VALIDATE_FOR_NEXT",
+            workflowState: 'VALIDATE_FOR_NEXT',
           },
         },
       };
-    case "UPDATE_VISIT_UUID":
+    case 'UPDATE_VISIT_UUID':
       // this state should not be persisted
       // we don't pers
       return {
@@ -289,24 +264,23 @@ const reducer = (state, action) => {
             ...state.forms[state.activeFormUuid],
             visits: {
               ...state.forms[state.activeFormUuid].visits,
-              [state.forms[state.activeFormUuid].activePatientUuid]:
-                action.visitUuid,
+              [state.forms[state.activeFormUuid].activePatientUuid]: action.visitUuid,
             },
             activeVisitUuid: action.visitUuid,
           },
         },
       };
 
-    case "SUBMIT_FOR_NEXT":
+    case 'SUBMIT_FOR_NEXT':
       // this state should not be persisted
       window.dispatchEvent(
-        new CustomEvent("ampath-form-action", {
+        new CustomEvent('ampath-form-action', {
           detail: {
             formUuid: state.activeFormUuid,
             patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
-            action: "onSubmit",
+            action: 'onSubmit',
           },
-        })
+        }),
       );
       return {
         ...state,
@@ -314,21 +288,21 @@ const reducer = (state, action) => {
           ...state.forms,
           [state.activeFormUuid]: {
             ...state.forms[state.activeFormUuid],
-            workflowState: "SUBMIT_FOR_NEXT",
+            workflowState: 'SUBMIT_FOR_NEXT',
           },
         },
         nextPatientUuid: action.nextPatientUuid,
       };
-    case "SUBMIT_FOR_REVIEW":
+    case 'SUBMIT_FOR_REVIEW':
       // this state should not be persisted
       window.dispatchEvent(
-        new CustomEvent("ampath-form-action", {
+        new CustomEvent('ampath-form-action', {
           detail: {
             formUuid: state.activeFormUuid,
             patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
-            action: "onSubmit",
+            action: 'onSubmit',
           },
-        })
+        }),
       );
       return {
         ...state,
@@ -336,21 +310,21 @@ const reducer = (state, action) => {
           ...state.forms,
           [state.activeFormUuid]: {
             ...state.forms[state.activeFormUuid],
-            workflowState: "SUBMIT_FOR_REVIEW",
+            workflowState: 'SUBMIT_FOR_REVIEW',
           },
         },
       };
 
-    case "VALIDATE_FOR_COMPLETE":
+    case 'VALIDATE_FOR_COMPLETE':
       // this state should not be persisted
       window.dispatchEvent(
-        new CustomEvent("ampath-form-action", {
+        new CustomEvent('ampath-form-action', {
           detail: {
             formUuid: state.activeFormUuid,
             patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
-            action: "validateForm",
+            action: 'validateForm',
           },
-        })
+        }),
       );
       return {
         ...state,
@@ -358,20 +332,20 @@ const reducer = (state, action) => {
           ...state.forms,
           [state.activeFormUuid]: {
             ...state.forms[state.activeFormUuid],
-            workflowState: "VALIDATE_FOR_COMPLETE",
+            workflowState: 'VALIDATE_FOR_COMPLETE',
           },
         },
       };
-    case "SUBMIT_FOR_COMPLETE":
+    case 'SUBMIT_FOR_COMPLETE':
       // this state should not be persisted
       window.dispatchEvent(
-        new CustomEvent("ampath-form-action", {
+        new CustomEvent('ampath-form-action', {
           detail: {
             formUuid: state.activeFormUuid,
             patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
-            action: "onSubmit",
+            action: 'onSubmit',
           },
-        })
+        }),
       );
       return {
         ...state,
@@ -379,11 +353,11 @@ const reducer = (state, action) => {
           ...state.forms,
           [state.activeFormUuid]: {
             ...state.forms[state.activeFormUuid],
-            workflowState: "SUBMIT_FOR_COMPLETE",
+            workflowState: 'SUBMIT_FOR_COMPLETE',
           },
         },
       };
-    case "GO_TO_REVIEW": {
+    case 'GO_TO_REVIEW': {
       const newState = {
         ...state,
         forms: {
@@ -393,14 +367,15 @@ const reducer = (state, action) => {
             activeEncounterUuid: null,
             activVisitUuid: null,
             activePatientUuid: null,
-            workflowState: "REVIEW",
+            activeSessionUuid: null,
+            workflowState: 'REVIEW',
           },
         },
       };
       persistData(newState);
       return newState;
     }
-    case "DESTROY_SESSION": {
+    case 'DESTROY_SESSION': {
       const { [state.activeFormUuid]: activeForm, ...formRest } = state.forms;
       const newState = {
         ...state,
@@ -409,17 +384,17 @@ const reducer = (state, action) => {
       };
       persistData(newState);
       //eslint-disable-next-line
-      navigate({ to: "${openmrsSpaBase}/forms" });
+      navigate({ to: '${openmrsSpaBase}/forms' });
       return { ...newState, formDestroyed: true };
     }
-    case "CLOSE_SESSION": {
+    case 'CLOSE_SESSION': {
       const newState = {
         ...state,
         activeFormUuid: null,
       };
       persistData(newState);
       //eslint-disable-next-line
-      navigate({ to: "${openmrsSpaBase}/forms" });
+      navigate({ to: '${openmrsSpaBase}/forms' });
       return newState;
     }
     default:

package/src/declarations.d.ts

@@ -0,0 +1,3 @@
+declare module '*.css';
+declare module '*.scss';
+declare type SideNavProps = object;

package/src/empty-state/EmptyDataIllustration.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React from 'react';
 
-export const EmptyDataIllustration = ({ width = "64", height = "64" }) => {
+export const EmptyDataIllustration = ({ width = '64', height = '64' }) => {
   return (
     <svg width={width} height={height} viewBox="0 0 64 64">
       <title>Empty data illustration</title>
@@ -18,13 +18,7 @@ export const EmptyDataIllustration = ({ width = "64", height = "64" }) => {
           fill="#C6C6C6"
         />
         <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
-        <circle
-          fill="#FFF"
-          fillRule="nonzero"
-          cx={17.636}
-          cy={2.314}
-          r={1.175}
-        />
+        <circle fill="#FFF" fillRule="nonzero" cx={17.636} cy={2.314} r={1.175} />
         <path
           d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
           fill="#F4F4F4"
@@ -38,13 +32,7 @@ export const EmptyDataIllustration = ({ width = "64", height = "64" }) => {
           fill="#C6C6C6"
         />
         <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
-        <circle
-          fill="#FFF"
-          fillRule="nonzero"
-          cx={40.218}
-          cy={9.755}
-          r={1.13}
-        />
+        <circle fill="#FFF" fillRule="nonzero" cx={40.218} cy={9.755} r={1.13} />
       </g>
     </svg>
   );

package/src/empty-state/EmptyState.tsx

@@ -1,25 +1,20 @@
-import React from "react";
-import { Tile, Layer } from "@carbon/react";
-import styles from "./styles.scss";
-import { useLayoutType } from "@openmrs/esm-framework";
-import { EmptyDataIllustration } from "./EmptyDataIllustration";
+import React from 'react';
+import { Tile, Layer } from '@carbon/react';
+import styles from './styles.scss';
+import { useLayoutType } from '@openmrs/esm-framework';
+import { EmptyDataIllustration } from './EmptyDataIllustration';
 
 export interface EmptyStateProps {
   headerTitle: string;
   displayText: string;
 }
-const EmptyState: React.FC<EmptyStateProps> = ({
-  headerTitle,
-  displayText,
-}) => {
-  const isTablet = useLayoutType() === "tablet";
+const EmptyState: React.FC<EmptyStateProps> = ({ headerTitle, displayText }) => {
+  const isTablet = useLayoutType() === 'tablet';
 
   return (
     <Layer>
       <Tile className={styles.tile}>
-        <div
-          className={isTablet ? styles.tabletHeading : styles.desktopHeading}
-        >
+        <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
           <h4>{headerTitle}</h4>
         </div>
         <EmptyDataIllustration />

package/src/empty-state/styles.scss

@@ -1,36 +1,36 @@
-@import "~@openmrs/esm-styleguide/src/vars";
-@import "~carbon-components/src/globals/scss/vars";
-@import "~carbon-components/src/globals/scss/mixins";
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .action {
-  margin-bottom: $spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .content {
-  @include carbon--type-style("productive-heading-01");
-  color: $text-02;
-  margin-top: $spacing-05;
-  margin-bottom: $spacing-03;
+  @include type.type-style("heading-compact-01");
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
 }
 
 .desktopHeading {
   h4 {
-    @include carbon--type-style('productive-heading-02');
-    color: $text-02;
+    @include type.type-style('heading-compact-02');
+    color: colors.$gray-70;
   }
 }
 
 .tabletHeading {
   h4 {
-    @include carbon--type-style('productive-heading-03');
-    color: $text-02;
+    @include type.type-style('heading-03');
+    color: colors.$gray-70;
   }
 }
 
 .desktopHeading, .tabletHeading {
   text-align: left;
   text-transform: capitalize;
-  margin-bottom: $spacing-05;
+  margin-bottom: layout.$spacing-05;
 
   h4:after {
     content: "";
@@ -51,5 +51,5 @@
 
 .tile {
   text-align: center;
-  border: 1px solid $ui-03;
+  border: 1px solid colors.$gray-20;
 }