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

package/src/add-group-modal/AddGroupModal.tsx

@@ -0,0 +1,249 @@
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { ComposedModal, Button, ModalHeader, ModalFooter, ModalBody, TextInput, FormLabel } from '@carbon/react';
+import { TrashCan } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { ExtensionSlot, fetchCurrentPatient, showToast, useConfig, usePatient } from '@openmrs/esm-framework';
+import styles from './styles.scss';
+import GroupFormWorkflowContext from '../context/GroupFormWorkflowContext';
+import { usePostCohort } from '../hooks';
+
+const MemExtension = React.memo(ExtensionSlot);
+
+const PatientRow = ({ patient, removePatient }) => {
+  const { t } = useTranslation();
+  const { patient: patientInfo, error, isLoading } = usePatient(patient?.uuid);
+  const onClickHandler = useCallback(() => removePatient(patient?.uuid), [patient, removePatient]);
+
+  const patientDisplay = useMemo(() => {
+    if (isLoading || error || !patientInfo) return '';
+
+    const { identifier, name } = patientInfo;
+    const displayIdentifier = identifier?.[0]?.value || '';
+    const givenNames = `${(name?.[0]?.given || []).join(' ')} ${name?.[0]?.family || ''}`;
+
+    return `${displayIdentifier ? `${displayIdentifier} -` : ''}${givenNames ? ` ${givenNames}` : ''}`.trim();
+  }, [isLoading, error, patientInfo]);
+
+  return (
+    <li className={styles.patientRow}>
+      <span>
+        <Button
+          kind="tertiary"
+          size="sm"
+          hasIconOnly
+          onClick={onClickHandler}
+          renderIcon={TrashCan}
+          tooltipAlignment="start"
+          tooltipPosition="top"
+          iconDescription={t('remove', 'Remove')}
+        />
+      </span>
+      <span className={styles.patientName}>{patientDisplay}</span>
+    </li>
+  );
+};
+
+const NewGroupForm = (props) => {
+  const { name, setName, patientList, updatePatientList, errors, validate, removePatient } = props;
+  const { t } = useTranslation();
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: '1rem',
+      }}
+    >
+      <TextInput
+        labelText={t('newGroupName', 'New Group Name')}
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        onBlur={() => validate('name')}
+      />
+      {errors?.name && (
+        <p className={styles.formError}>
+          {errors.name === 'required' ? t('groupNameError', 'Please enter a group name.') : errors.name}
+        </p>
+      )}
+      <FormLabel>
+        {patientList.length} {t('patientsInGroup', 'Patients in group')}
+      </FormLabel>
+      {errors?.patientList && (
+        <p className={styles.formError}>{t('noPatientError', 'Please enter at least one patient.')}</p>
+      )}
+      {!errors?.patientList && (
+        <ul className={styles.patientList}>
+          {patientList?.map((patient, index) => (
+            <PatientRow patient={patient} removePatient={removePatient} key={patient.uuid} />
+          ))}
+        </ul>
+      )}
+
+      <FormLabel>{t('searchForPatientsToAddToGroup', 'Search for patients to add to group')}</FormLabel>
+      <div className={styles.searchBar}>
+        <MemExtension
+          extensionSlotName="patient-search-bar-slot"
+          state={{
+            selectPatientAction: updatePatientList,
+            buttonProps: {
+              kind: 'secondary',
+            },
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+const AddGroupModal = ({
+  patients = undefined,
+  isCreate = undefined,
+  groupName = '',
+  cohortUuid = undefined,
+  isOpen,
+  onPostCancel,
+  onPostSubmit,
+}) => {
+  const { setGroup } = useContext(GroupFormWorkflowContext);
+  const { t } = useTranslation();
+  const [errors, setErrors] = useState({});
+  const [name, setName] = useState(groupName);
+  const [patientList, setPatientList] = useState(patients || []);
+  const { post, result, error } = usePostCohort();
+  const config = useConfig();
+
+  const removePatient = useCallback(
+    (patientUuid: string) =>
+      setPatientList((patientList) => patientList.filter((patient) => patient.uuid !== patientUuid)),
+    [setPatientList],
+  );
+
+  const validate = useCallback(
+    (field?: string | undefined) => {
+      let valid = true;
+      if (field) {
+        valid = field === 'name' ? !!name : !!patientList.length;
+        setErrors((errors) => ({
+          ...errors,
+          [field]: valid ? null : 'required',
+        }));
+      } else {
+        if (!name) {
+          setErrors((errors) => ({ ...errors, name: 'required' }));
+          valid = false;
+        } else {
+          setErrors((errors) => ({ ...errors, name: null }));
+        }
+        if (!patientList.length) {
+          setErrors((errors) => ({ ...errors, patientList: 'required' }));
+          valid = false;
+        } else {
+          setErrors((errors) => ({ ...errors, patientList: null }));
+        }
+      }
+      return valid;
+    },
+    [name, patientList.length],
+  );
+
+  const updatePatientList = useCallback(
+    (patientUuid) => {
+      function getPatientName(patient) {
+        return [patient?.name?.[0]?.given, patient?.name?.[0]?.family].join(' ');
+      }
+      if (!patientList.find((p) => p.uuid === patientUuid)) {
+        fetchCurrentPatient(patientUuid).then((result) => {
+          const newPatient = { uuid: patientUuid, ...result };
+          setPatientList(
+            [...patientList, newPatient].sort((a, b) =>
+              getPatientName(a).localeCompare(getPatientName(b), undefined, {
+                sensitivity: 'base',
+              }),
+            ),
+          );
+        });
+      }
+      setErrors((errors) => ({ ...errors, patientList: null }));
+    },
+    [patientList, setPatientList],
+  );
+
+  const handleSubmit = () => {
+    if (validate()) {
+      post({
+        uuid: cohortUuid,
+        name: name,
+        cohortType: config?.groupSessionConcepts?.cohortTypeId,
+        cohortMembers: patientList.map((p) => ({ patient: p.uuid })),
+      });
+      if (onPostSubmit) {
+        onPostSubmit();
+      }
+    }
+  };
+
+  const handleCancel = () => {
+    setPatientList(patients || []);
+    if (onPostCancel) {
+      onPostCancel();
+    }
+  };
+
+  useEffect(() => {
+    if (result) {
+      setGroup({
+        ...result,
+        // the result doesn't come with cohortMembers.
+        // need to add it in based on our local state
+        cohortMembers: patientList.map((p) => ({ patient: { uuid: p.uuid } })),
+      });
+    }
+  }, [result, setGroup, patientList]);
+
+  useEffect(() => {
+    if (error) {
+      showToast({
+        kind: 'error',
+        title: t('postError', 'POST Error'),
+        description: error.message ?? t('unknownPostError', 'An unknown error occurred while saving data'),
+      });
+      if (error.fieldErrors) {
+        setErrors(
+          Object.fromEntries(Object.entries(error.fieldErrors).map(([key, value]) => [key, value?.[0]?.message])),
+        );
+      }
+    }
+  }, [error, t]);
+
+  return (
+    <div className={styles.modal}>
+      <ComposedModal open={isOpen} onClose={handleCancel}>
+        <ModalHeader>{isCreate ? t('createNewGroup', 'Create New Group') : t('editGroup', 'Edit Group')}</ModalHeader>
+        <ModalBody>
+          <NewGroupForm
+            {...{
+              name,
+              setName,
+              patientList,
+              updatePatientList,
+              errors,
+              validate,
+              removePatient,
+            }}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button kind="secondary" onClick={handleCancel}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button kind="primary" onClick={handleSubmit}>
+            {isCreate ? t('createGroup', 'Create Group') : t('save', 'Save')}
+          </Button>
+        </ModalFooter>
+      </ComposedModal>
+    </div>
+  );
+};
+
+export default AddGroupModal;

package/src/add-group-modal/styles.scss

@@ -0,0 +1,49 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.modal {
+  :global(.cds--modal) {
+    z-index: 90;
+  }
+  :global(.cds--modal-container) {
+    height: 600px;
+  }
+  :global(.cds--modal-content) {
+    height: 100%;
+  }
+}
+
+.searchBar > div > div > div {
+  width: 100%
+}
+
+.searchBar > div button {
+  height: auto;
+}
+
+.formError {
+  color: red;
+}
+
+.patientRow {
+   display: flex;
+   align-items: center;
+   width: "100%";
+   &:nth-child(odd) {
+    background-color: colors.$gray-20;
+  }
+}
+
+.patientName {
+  flex-grow: 1;
+  padding-left: layout.$spacing-05;
+}
+
+.loading {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  row-gap: layout.$spacing-05;
+}

package/src/config-schema.ts

@@ -1,4 +1,4 @@
-import { Type } from "@openmrs/esm-framework";
+import { Type } from '@openmrs/esm-framework';
 
 /**
  * This is the config schema.
@@ -8,44 +8,43 @@ import { Type } from "@openmrs/esm-framework";
 export const configSchema = {
   formCategories: {
     _type: Type.Array,
-    _description:
-      "Organize forms into categories. A form can belong to multiple categories.",
+    _description: 'Organize forms into categories. A form can belong to multiple categories.',
     _elements: {
       name: {
         _type: Type.String,
-        _description: "Category name",
+        _description: 'Category name',
       },
       forms: {
         _type: Type.Array,
-        _description: "List of forms for this category.",
+        _description: 'List of forms for this category.',
         _elements: {
           formUUID: {
             _type: Type.UUID,
-            _description: "UUID of form",
+            _description: 'UUID of form',
           },
           name: {
             _type: Type.String,
-            _description: "Name of form",
+            _description: 'Name of form',
           },
         },
       },
     },
     _default: [
       {
-        name: "ICRC Forms",
+        name: 'ICRC Forms',
         forms: [
           {
-            formUUID: "0cefb866-110c-4f16-af58-560932a1db1f",
-            name: "Adult Triage",
+            formUUID: '0cefb866-110c-4f16-af58-560932a1db1f',
+            name: 'Adult Triage',
           },
         ],
       },
       {
-        name: "Distress Scales",
+        name: 'Distress Scales',
         forms: [
           {
-            formUUID: "9f26aad4-244a-46ca-be49-1196df1a8c9a",
-            name: "POC Sample Form 1",
+            formUUID: '9f26aad4-244a-46ca-be49-1196df1a8c9a',
+            name: 'POC Sample Form 1',
           },
         ],
       },
@@ -53,12 +52,74 @@ export const configSchema = {
   },
   formCategoriesToShow: {
     _type: Type.Array,
-    _description: "Forms to show by default on the forms app home page.",
+    _description: 'Forms to show by default on the forms app home page.',
     _elements: {
       _type: Type.String,
-      _description: "Name of category",
+      _description: 'Name of category',
     },
-    _default: ["ICRC Forms", "Distress Scales"],
+    _default: ['ICRC Forms', 'Distress Scales'],
+  },
+  groupSessionConcepts: {
+    sessionName: {
+      _type: Type.UUID,
+      _description: 'UUID of concept for Session Name',
+      _default: 'e2559620-900b-4f66-ae41-0b9c4adfb654',
+    },
+    sessionDate: {
+      _type: Type.UUID,
+      _description: 'UUID of concept for Session Date',
+      _default: 'ceaca505-6dff-4940-8a43-8c060a0924d7',
+    },
+    practitionerName: {
+      _type: Type.UUID,
+      _description: 'UUID of concept for Practitioner Name',
+      _default: 'f1a2d58c-1a0e-4148-931a-aac224649fdc',
+    },
+    sessionNotes: {
+      _type: Type.UUID,
+      _description: 'UUID of concept for Session Notes',
+      _default: 'fa8fedc0-c066-4da3-8dc1-2ad8621fc480',
+    },
+    cohortTypeId: {
+      _type: Type.UUID,
+      _description: 'UUID of cohort type',
+      _default: 'eee9970e-7ca0-4e8c-a280-c33e9d5f6a04',
+    },
+    cohortId: {
+      _type: Type.UUID,
+      _description: 'UUID of concept for cohort identifier',
+      _default: '5461f231-7e59-4be8-93a4-6d49fd13c00a',
+    },
+    cohortName: {
+      _type: Type.UUID,
+      _description: 'UUID of concept for cohort name',
+      _default: '6029f289-92a6-4a68-80f1-3078d0152449',
+    },
+    sessionUuid: {
+      _type: Type.UUID,
+      _description: 'UUID of concept for session identifier',
+      _default: '6a803908-8a5b-4598-adea-19358c83529a',
+    },
+  },
+  specificQuestions: {
+    _type: Type.Array,
+    _description: 'List of specific questions to populate forms.',
+    _elements: {
+      forms: {
+        _type: Type.Array,
+        _description: 'List of form UUIDs for which the question applies.',
+        _elements: {
+          _type: Type.UUID,
+        },
+        _default: [],
+      },
+      questionId: {
+        _type: Type.String,
+        _description: 'ID of the question.',
+        _default: '',
+      },
+    },
+    _default: [],
   },
 };
 

package/src/constant.ts

@@ -1,5 +1,5 @@
 export const routes = {
-  allForms: "all-forms",
+  allForms: 'all-forms',
 };
 
 export const spaBase = window.spaBase;

package/src/context/FormWorkflowContext.tsx

@@ -1,8 +1,10 @@
-import React, { useEffect, useMemo, useReducer } from "react";
-import reducer from "./FormWorkflowReducer";
-import { useParams, useLocation } from "react-router-dom";
+import React, { useEffect, useMemo, useReducer } from 'react';
+import reducer from './FormWorkflowReducer';
+import { useParams, useLocation } from 'react-router-dom';
+import useGetSystemSetting from '../hooks/useGetSystemSetting';
+import { useSession } from '@openmrs/esm-framework';
 interface ParamTypes {
-  formUuid: string;
+  formUuid?: string;
 }
 
 const initialActions = {
@@ -30,6 +32,8 @@ export const initialWorkflowState = {
   activeEncounterUuid: null, // pseudo field from state[activeFormUuid].encounterUuid
   patientUuids: [], // pseudo field from state[activeFormUuid].patientUuids
   encounters: {}, // pseudo field from state[activeFormUuid].encounters
+  singleSessionVisitTypeUuid: null,
+  userUuid: null, // UUID of the user to which this workflow state belongs to
 };
 
 const FormWorkflowContext = React.createContext({
@@ -38,41 +42,43 @@ const FormWorkflowContext = React.createContext({
 });
 
 const FormWorkflowProvider = ({ children }) => {
+  const { user } = useSession();
   const { formUuid } = useParams() as ParamTypes;
-  const activeFormUuid = formUuid.split("&")[0];
+  const activeFormUuid = formUuid.split('&')[0];
   const { search } = useLocation();
-  const newPatientUuid = new URLSearchParams(search).get("patientUuid");
+  const newPatientUuid = new URLSearchParams(search).get('patientUuid');
   const [state, dispatch] = useReducer(reducer, {
     ...initialWorkflowState,
     ...initialActions,
   });
+  const systemSetting = useGetSystemSetting('@openmrs/esm-fast-data-entry-app.groupSessionVisitTypeUuid');
+  const singleSessionVisitTypeUuid = systemSetting?.result?.data?.results?.[0]?.value;
 
   const actions = useMemo(
     () => ({
       initializeWorkflowState: ({ activeFormUuid, newPatientUuid }) =>
         dispatch({
-          type: "INITIALIZE_WORKFLOW_STATE",
+          type: 'INITIALIZE_WORKFLOW_STATE',
           activeFormUuid,
           newPatientUuid,
+          userUuid: user.uuid,
         }),
-      addPatient: (patientUuid) =>
-        dispatch({ type: "ADD_PATIENT", patientUuid }),
-      openPatientSearch: () => dispatch({ type: "OPEN_PATIENT_SEARCH" }),
+      addPatient: (patientUuid) => dispatch({ type: 'ADD_PATIENT', patientUuid }),
+      openPatientSearch: () => dispatch({ type: 'OPEN_PATIENT_SEARCH' }),
       saveEncounter: (encounterUuid) =>
         dispatch({
-          type: "SAVE_ENCOUNTER",
+          type: 'SAVE_ENCOUNTER',
           encounterUuid,
         }),
-      submitForNext: () => dispatch({ type: "SUBMIT_FOR_NEXT" }),
-      submitForReview: () => dispatch({ type: "SUBMIT_FOR_REVIEW" }),
-      submitForComplete: () => dispatch({ type: "SUBMIT_FOR_COMPLETE" }),
-      editEncounter: (patientUuid) =>
-        dispatch({ type: "EDIT_ENCOUNTER", patientUuid }),
-      goToReview: () => dispatch({ type: "GO_TO_REVIEW" }),
-      destroySession: () => dispatch({ type: "DESTROY_SESSION" }),
-      closeSession: () => dispatch({ type: "CLOSE_SESSION" }),
+      submitForNext: () => dispatch({ type: 'SUBMIT_FOR_NEXT' }),
+      submitForReview: () => dispatch({ type: 'SUBMIT_FOR_REVIEW' }),
+      submitForComplete: () => dispatch({ type: 'SUBMIT_FOR_COMPLETE' }),
+      editEncounter: (patientUuid) => dispatch({ type: 'EDIT_ENCOUNTER', patientUuid }),
+      goToReview: () => dispatch({ type: 'GO_TO_REVIEW' }),
+      destroySession: () => dispatch({ type: 'DESTROY_SESSION' }),
+      closeSession: () => dispatch({ type: 'CLOSE_SESSION' }),
     }),
-    []
+    [user],
   );
 
   // if formUuid isn't a part of state yet, grab it from the url params
@@ -88,21 +94,14 @@ const FormWorkflowProvider = ({ children }) => {
       value={{
         ...state,
         ...actions,
-        workflowState:
-          state.forms?.[state.activeFormUuid]?.workflowState ??
-          initialWorkflowState.workflowState,
+        workflowState: state.forms?.[state.activeFormUuid]?.workflowState ?? initialWorkflowState.workflowState,
         activePatientUuid:
-          state.forms?.[state.activeFormUuid]?.activePatientUuid ??
-          initialWorkflowState.activePatientUuid,
+          state.forms?.[state.activeFormUuid]?.activePatientUuid ?? initialWorkflowState.activePatientUuid,
         activeEncounterUuid:
-          state.forms?.[state.activeFormUuid]?.activeEncounterUuid ??
-          initialWorkflowState.activeEncounterUuid,
-        patientUuids:
-          state.forms?.[state.activeFormUuid]?.patientUuids ??
-          initialWorkflowState.patientUuids,
-        encounters:
-          state.forms?.[state.activeFormUuid]?.encounters ??
-          initialWorkflowState.encounters,
+          state.forms?.[state.activeFormUuid]?.activeEncounterUuid ?? initialWorkflowState.activeEncounterUuid,
+        patientUuids: state.forms?.[state.activeFormUuid]?.patientUuids ?? initialWorkflowState.patientUuids,
+        encounters: state.forms?.[state.activeFormUuid]?.encounters ?? initialWorkflowState.encounters,
+        singleSessionVisitTypeUuid,
       }}
     >
       {children}