@openmrs/esm-fast-data-entry-app 1.0.1-pre.17 → 1.0.1-pre.176

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

@@ -1,105 +1,93 @@
-import React, { useCallback, useContext, useEffect, useState } from "react";
-import {
-  ComposedModal,
-  Button,
-  ModalHeader,
-  ModalFooter,
-  ModalBody,
-  TextInput,
-  FormLabel,
-  Loading,
-} from "@carbon/react";
-import { Add, TrashCan } from "@carbon/react/icons";
-import { useTranslation } from "react-i18next";
-import { ExtensionSlot, showToast } from "@openmrs/esm-framework";
-import styles from "./styles.scss";
-import GroupFormWorkflowContext from "../context/GroupFormWorkflowContext";
-import { usePostCohort } from "../hooks";
+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 key={patient.uuid} className={styles.patientRow}>
+    <li className={styles.patientRow}>
       <span>
         <Button
           kind="tertiary"
           size="sm"
           hasIconOnly
-          onClick={() => removePatient(patient.uuid)}
+          onClick={onClickHandler}
           renderIcon={TrashCan}
           tooltipAlignment="start"
           tooltipPosition="top"
-          iconDescription={t("remove", "Remove")}
+          iconDescription={t('remove', 'Remove')}
         />
       </span>
-      <span className={styles.patientName}>{patient?.display}</span>
+      <span className={styles.patientName}>{patientDisplay}</span>
     </li>
   );
 };
 
 const NewGroupForm = (props) => {
-  const {
-    name,
-    setName,
-    patientList,
-    updatePatientList,
-    errors,
-    validate,
-    removePatient,
-  } = props;
+  const { name, setName, patientList, updatePatientList, errors, validate, removePatient } = props;
   const { t } = useTranslation();
 
   return (
     <div
       style={{
-        display: "flex",
-        flexDirection: "column",
-        rowGap: "1rem",
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: '1rem',
       }}
     >
       <TextInput
-        labelText={t("newGroupName", "New Group Name")}
+        labelText={t('newGroupName', 'New Group Name')}
         value={name}
         onChange={(e) => setName(e.target.value)}
-        onBlur={() => validate("name")}
+        onBlur={() => validate('name')}
       />
       {errors?.name && (
         <p className={styles.formError}>
-          {errors.name === "required"
-            ? t("groupNameError", "Please enter a group name.")
-            : errors.name}
+          {errors.name === 'required' ? t('groupNameError', 'Please enter a group name.') : errors.name}
         </p>
       )}
       <FormLabel>
-        {patientList.length} {t("patientsInGroup", "Patients in group")}
+        {patientList.length} {t('patientsInGroup', 'Patients in group')}
       </FormLabel>
       {errors?.patientList && (
-        <p className={styles.formError}>
-          {t("noPatientError", "Please enter at least one patient.")}
-        </p>
+        <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={index}
-            />
+            <PatientRow patient={patient} removePatient={removePatient} key={patient.uuid} />
           ))}
         </ul>
       )}
 
-      <FormLabel>Search for patients to add to group</FormLabel>
+      <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",
+              kind: 'secondary',
             },
           }}
         />
@@ -108,45 +96,47 @@ const NewGroupForm = (props) => {
   );
 };
 
-const AddGroupModal = () => {
+const AddGroupModal = ({
+  patients = undefined,
+  isCreate = undefined,
+  groupName = '',
+  cohortUuid = undefined,
+  isOpen,
+  onPostCancel,
+  onPostSubmit,
+}) => {
   const { setGroup } = useContext(GroupFormWorkflowContext);
   const { t } = useTranslation();
-  const [open, setOpen] = useState(false);
   const [errors, setErrors] = useState({});
-  const [name, setName] = useState("");
-  const [patientList, setPatientList] = useState([]);
-  const { post, result, isPosting, error } = usePostCohort();
-
-  const handleCancel = () => {
-    setOpen(false);
-  };
+  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]
+      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;
+        valid = field === 'name' ? !!name : !!patientList.length;
         setErrors((errors) => ({
           ...errors,
-          [field]: valid ? null : "required",
+          [field]: valid ? null : 'required',
         }));
       } else {
         if (!name) {
-          setErrors((errors) => ({ ...errors, name: "required" }));
+          setErrors((errors) => ({ ...errors, name: 'required' }));
           valid = false;
         } else {
           setErrors((errors) => ({ ...errors, name: null }));
         }
         if (!patientList.length) {
-          setErrors((errors) => ({ ...errors, patientList: "required" }));
+          setErrors((errors) => ({ ...errors, patientList: 'required' }));
           valid = false;
         } else {
           setErrors((errors) => ({ ...errors, patientList: null }));
@@ -154,29 +144,49 @@ const AddGroupModal = () => {
       }
       return valid;
     },
-    [name, patientList.length]
+    [name, patientList.length],
   );
 
   const updatePatientList = useCallback(
-    (patient) => {
-      setPatientList((patientList) => {
-        if (!patientList.find((p) => p.uuid === patient.uuid)) {
-          return [...patientList, patient];
-        } else {
-          return patientList;
-        }
-      });
+    (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 }));
     },
-    [setPatientList]
+    [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();
     }
   };
 
@@ -194,20 +204,13 @@ const AddGroupModal = () => {
   useEffect(() => {
     if (error) {
       showToast({
-        kind: "error",
-        title: t("postError", "POST Error"),
-        description:
-          error.message ??
-          t("unknownPostError", "An unknown error occured while saving data"),
+        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,
-            ])
-          )
+          Object.fromEntries(Object.entries(error.fieldErrors).map(([key, value]) => [key, value?.[0]?.message])),
         );
       }
     }
@@ -215,43 +218,27 @@ const AddGroupModal = () => {
 
   return (
     <div className={styles.modal}>
-      <Button
-        onClick={() => setOpen(true)}
-        renderIcon={Add}
-        iconDescription="Add"
-      >
-        {t("createNewGroup", "Create New Group")}
-      </Button>
-      <ComposedModal open={open} onClose={() => setOpen(false)}>
-        <ModalHeader>{t("createNewGroup", "Create New Group")}</ModalHeader>
+      <ComposedModal open={isOpen} onClose={handleCancel}>
+        <ModalHeader>{isCreate ? t('createNewGroup', 'Create New Group') : t('editGroup', 'Edit Group')}</ModalHeader>
         <ModalBody>
-          {result ? (
-            <p>Group saved succesfully</p>
-          ) : isPosting ? (
-            <div className={styles.loading}>
-              <Loading withOverlay={false} />
-              <span>Saving new group...</span>
-            </div>
-          ) : (
-            <NewGroupForm
-              {...{
-                name,
-                setName,
-                patientList,
-                updatePatientList,
-                errors,
-                validate,
-                removePatient,
-              }}
-            />
-          )}
+          <NewGroupForm
+            {...{
+              name,
+              setName,
+              patientList,
+              updatePatientList,
+              errors,
+              validate,
+              removePatient,
+            }}
+          />
         </ModalBody>
         <ModalFooter>
-          <Button kind="secondary" onClick={handleCancel} disabled={isPosting}>
-            {t("cancel", "Cancel")}
+          <Button kind="secondary" onClick={handleCancel}>
+            {t('cancel', 'Cancel')}
           </Button>
-          <Button kind="primary" onClick={handleSubmit} disabled={isPosting}>
-            {t("createGroup", "Create Group")}
+          <Button kind="primary" onClick={handleSubmit}>
+            {isCreate ? t('createGroup', 'Create Group') : t('save', 'Save')}
           </Button>
         </ModalFooter>
       </ComposedModal>

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

@@ -1,5 +1,5 @@
-@use '@carbon/styles/scss/spacing';
 @use '@carbon/colors';
+@use '@carbon/layout';
 
 .modal {
   :global(.cds--modal) {
@@ -17,6 +17,10 @@
   width: 100%
 }
 
+.searchBar > div button {
+  height: auto;
+}
+
 .formError {
   color: red;
 }
@@ -32,7 +36,7 @@
 
 .patientName {
   flex-grow: 1;
-  padding-left: spacing.$spacing-05;
+  padding-left: layout.$spacing-05;
 }
 
 .loading {
@@ -41,5 +45,5 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  row-gap: spacing.$spacing-05;
+  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,6 +1,8 @@
-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;
 }
@@ -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}