@openmrs/esm-fast-data-entry-app 1.0.0-pre.59 → 1.0.0

package/src/context/GroupFormWorkflowReducer.ts

@@ -0,0 +1,405 @@
+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';
+const persistData = (data) => {
+  localStorage.setItem(fdeGroupWorkflowStorageName + ':' + data.userUuid, JSON.stringify(data));
+};
+
+const initialFormState = {
+  workflowState: 'NEW_GROUP_SESSION',
+  groupUuid: null,
+  groupName: null,
+  groupMembers: [],
+  activePatientUuid: null,
+  activeEncounterUuid: null,
+  activeVisitUuid: null,
+  activeSessionUuid: null,
+  patientUuids: [],
+  encounters: {},
+  visits: {},
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    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) {
+        // 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
+        const activePatientUuid =
+          thisSavedForm?.activePatientUuid ||
+          // or set it to the first member in the list
+          thisSavedForm?.patientUuids?.[0] ||
+          // something probably went wrong...
+          null;
+        const activeSessionUuid = thisSavedForm?.activeSessionUuid || uuid();
+        newState = {
+          ...savedDataObject,
+          // set current form to this one
+          activeFormUuid: action.activeFormUuid,
+          forms: {
+            ...savedDataObject.forms,
+            // initialize this particular form if it hasn't been created already
+            [action.activeFormUuid]: {
+              ...initialFormState,
+              ...thisSavedForm,
+              activePatientUuid: activePatientUuid,
+              activeEncounterUuid: thisSavedForm?.encounters?.[activePatientUuid] || null,
+              activeVisitUuid: thisSavedForm?.visits?.[activePatientUuid] || null,
+              activeSessionUuid: activeSessionUuid,
+            },
+          },
+        };
+      } else {
+        // no localStorage data, or we should void it
+        newState = {
+          ...initialWorkflowState,
+          _storageVersion: fdeGroupWorkflowStorageVersion,
+          forms: {
+            [action.activeFormUuid]: initialFormState,
+          },
+          activeFormUuid: action.activeFormUuid,
+          userUuid: action.userUuid,
+        };
+      }
+      persistData(newState);
+      return newState;
+    }
+
+    case 'SET_GROUP': {
+      const newState = {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            groupUuid: action.group.uuid,
+            groupName: action.group.name,
+            patientUuids:
+              // 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) ?? [],
+            activePatientUuid: null,
+            activeEncounterUuid: null,
+            activeVisitUuid: null,
+            activeSessionUuid: null,
+          },
+        },
+      };
+      persistData(newState);
+      return newState;
+    }
+    case 'UNSET_GROUP': {
+      const newState = {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            groupUuid: null,
+            groupName: null,
+            patientUuids: [],
+            groupMembers: [],
+            activePatientUuid: null,
+            activeEncounterUuid: null,
+            activeVisitUuid: null,
+            activeSessionUuid: null,
+          },
+        },
+      };
+      persistData(newState);
+      return newState;
+    }
+    case 'SET_SESSION_META': {
+      // requires that group is already entered and contains patientUuids
+      const newState = {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            sessionMeta: action.meta,
+            activePatientUuid: state.forms[state.activeFormUuid].patientUuids?.[0],
+            activeEncounterUuid:
+              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,
+            activeSessionUuid: uuid(),
+            workflowState: 'EDIT_FORM',
+          },
+        },
+      };
+      persistData(newState);
+      return newState;
+    }
+    case 'ADD_PATIENT_UUID': {
+      if (state.forms[state.activeFormUuid].patientUuids.includes(action.patientUuid)) {
+        return state;
+      }
+
+      const newState = {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            patientUuids: [...state.forms[state.activeFormUuid].patientUuids, action.patientUuid],
+          },
+        },
+      };
+      persistData(newState);
+      return newState;
+    }
+    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),
+          },
+        },
+      };
+      persistData(newState);
+      return newState;
+    }
+    case 'SAVE_ENCOUNTER': {
+      const thisForm = state.forms[state.activeFormUuid];
+      if (thisForm.workflowState === 'SUBMIT_FOR_COMPLETE') {
+        const { [state.activeFormUuid]: activeForm, ...formRest } = state.forms;
+        const newState = {
+          ...state,
+          forms: formRest,
+          activeFormUuid: null,
+        };
+        persistData(newState);
+        // eslint-disable-next-line
+        navigate({ to: '${openmrsSpaBase}/forms' });
+        return newState;
+      } 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)
+            ];
+        const encounters = {
+          ...thisForm.encounters,
+          [thisForm.activePatientUuid]: action.encounterUuid,
+        };
+        const newState = {
+          ...state,
+          forms: {
+            ...state.forms,
+            [state.activeFormUuid]: {
+              ...thisForm,
+              encounters,
+              activePatientUuid: nextPatientUuid,
+              activeEncounterUuid: encounters[nextPatientUuid] || null,
+              activeVisitUuid: thisForm.visits[nextPatientUuid] || null,
+              activeSessionUuid: thisForm.activeSessionUuid,
+              workflowState: 'EDIT_FORM',
+            },
+          },
+        };
+        persistData(newState);
+        return newState;
+      } else return state;
+    }
+    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],
+            activePatientUuid: action.patientUuid,
+            activeSessionUuid: action.activeSessionUuid,
+            workflowState: 'EDIT_FORM',
+          },
+        },
+      };
+      persistData(newState);
+      return newState;
+    }
+    case 'VALIDATE_FOR_NEXT':
+      // this state should not be persisted
+      window.dispatchEvent(
+        new CustomEvent('ampath-form-action', {
+          detail: {
+            formUuid: state.activeFormUuid,
+            patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
+            action: 'validateForm',
+          },
+        }),
+      );
+      return {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            workflowState: 'VALIDATE_FOR_NEXT',
+          },
+        },
+      };
+    case 'UPDATE_VISIT_UUID':
+      // this state should not be persisted
+      // we don't pers
+      return {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            visits: {
+              ...state.forms[state.activeFormUuid].visits,
+              [state.forms[state.activeFormUuid].activePatientUuid]: action.visitUuid,
+            },
+            activeVisitUuid: action.visitUuid,
+          },
+        },
+      };
+
+    case 'SUBMIT_FOR_NEXT':
+      // this state should not be persisted
+      window.dispatchEvent(
+        new CustomEvent('ampath-form-action', {
+          detail: {
+            formUuid: state.activeFormUuid,
+            patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
+            action: 'onSubmit',
+          },
+        }),
+      );
+      return {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            workflowState: 'SUBMIT_FOR_NEXT',
+          },
+        },
+        nextPatientUuid: action.nextPatientUuid,
+      };
+    case 'SUBMIT_FOR_REVIEW':
+      // this state should not be persisted
+      window.dispatchEvent(
+        new CustomEvent('ampath-form-action', {
+          detail: {
+            formUuid: state.activeFormUuid,
+            patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
+            action: 'onSubmit',
+          },
+        }),
+      );
+      return {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            workflowState: 'SUBMIT_FOR_REVIEW',
+          },
+        },
+      };
+
+    case 'VALIDATE_FOR_COMPLETE':
+      // this state should not be persisted
+      window.dispatchEvent(
+        new CustomEvent('ampath-form-action', {
+          detail: {
+            formUuid: state.activeFormUuid,
+            patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
+            action: 'validateForm',
+          },
+        }),
+      );
+      return {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            workflowState: 'VALIDATE_FOR_COMPLETE',
+          },
+        },
+      };
+    case 'SUBMIT_FOR_COMPLETE':
+      // this state should not be persisted
+      window.dispatchEvent(
+        new CustomEvent('ampath-form-action', {
+          detail: {
+            formUuid: state.activeFormUuid,
+            patientUuid: state.forms[state.activeFormUuid].activePatientUuid,
+            action: 'onSubmit',
+          },
+        }),
+      );
+      return {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            workflowState: 'SUBMIT_FOR_COMPLETE',
+          },
+        },
+      };
+    case 'GO_TO_REVIEW': {
+      const newState = {
+        ...state,
+        forms: {
+          ...state.forms,
+          [state.activeFormUuid]: {
+            ...state.forms[state.activeFormUuid],
+            activeEncounterUuid: null,
+            activVisitUuid: null,
+            activePatientUuid: null,
+            activeSessionUuid: null,
+            workflowState: 'REVIEW',
+          },
+        },
+      };
+      persistData(newState);
+      return newState;
+    }
+    case 'DESTROY_SESSION': {
+      const { [state.activeFormUuid]: activeForm, ...formRest } = state.forms;
+      const newState = {
+        ...state,
+        forms: formRest,
+        activeFormUuid: null,
+      };
+      persistData(newState);
+      //eslint-disable-next-line
+      navigate({ to: '${openmrsSpaBase}/forms' });
+      return { ...newState, formDestroyed: true };
+    }
+    case 'CLOSE_SESSION': {
+      const newState = {
+        ...state,
+        activeFormUuid: null,
+      };
+      persistData(newState);
+      //eslint-disable-next-line
+      navigate({ to: '${openmrsSpaBase}/forms' });
+      return newState;
+    }
+    default:
+      return state;
+  }
+};
+
+export default reducer;

package/src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '@carbon/react';
+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,27 +1,26 @@
-import React from "react";
-import { Tile } from "carbon-components-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 (
-    <Tile light className={styles.tile}>
-      <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
-        <h4>{headerTitle}</h4>
-      </div>
-      <EmptyDataIllustration />
-      <p className={styles.content}>{displayText}</p>
-    </Tile>
+    <Layer>
+      <Tile className={styles.tile}>
+        <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+          <h4>{headerTitle}</h4>
+        </div>
+        <EmptyDataIllustration />
+        <p className={styles.content}>{displayText}</p>
+      </Tile>
+    </Layer>
   );
 };
 

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;
 }