@openmrs/esm-fast-data-entry-app 1.0.0-pre.9 → 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

@@ -0,0 +1,39 @@
+import React from 'react';
+
+export const EmptyDataIllustration = ({ width = '64', height = '64' }) => {
+  return (
+    <svg width={width} height={height} viewBox="0 0 64 64">
+      <title>Empty data illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
+          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} />
+        <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"
+        />
+        <path
+          d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
+          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} />
+      </g>
+    </svg>
+  );
+};

package/src/empty-state/EmptyState.tsx

@@ -0,0 +1,28 @@
+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';
+
+  return (
+    <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>
+  );
+};
+
+export default EmptyState;
+export { EmptyState };

package/src/empty-state/styles.scss

@@ -0,0 +1,55 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.action {
+  margin-bottom: layout.$spacing-03;
+}
+
+.content {
+  @include type.type-style("heading-compact-01");
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-05;
+  margin-bottom: layout.$spacing-03;
+}
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: colors.$gray-70;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: colors.$gray-70;
+  }
+}
+
+.desktopHeading, .tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: layout.$spacing-05;
+
+  h4:after {
+    content: "";
+    display: block;
+    width: 2rem;
+    padding-top: 0.188rem;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.heading:after {
+  content: "";
+  display: block;
+  width: 2rem;
+  padding-top: 0.188rem;
+  border-bottom: 0.375rem solid var(--brand-03);
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid colors.$gray-20;
+}