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

package/src/FormBootstrap.tsx

@@ -0,0 +1,179 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { detach, ExtensionSlot } from '@openmrs/esm-framework';
+import useGetPatient from './hooks/useGetPatient';
+import GroupFormWorkflowContext from './context/GroupFormWorkflowContext';
+
+export interface Order {
+  uuid: string;
+  dateActivated: string;
+  dose: number;
+  doseUnits: {
+    uuid: string;
+    display: string;
+  };
+  orderNumber: number;
+  display: string;
+  drug: {
+    uuid: string;
+    name: string;
+    strength: string;
+  };
+  duration: number;
+  durationUnits: {
+    uuid: string;
+    display: string;
+  };
+  frequency: {
+    uuid: string;
+    display: string;
+  };
+  numRefills: number;
+  orderer: {
+    uuid: string;
+    person: {
+      uuid: string;
+      display: string;
+    };
+  };
+  orderType: {
+    uuid: string;
+    display: string;
+  };
+  route: {
+    uuid: string;
+    display: string;
+  };
+  auditInfo: {
+    dateVoided: string;
+  };
+}
+
+export interface Observation {
+  uuid: string;
+  concept: {
+    uuid: string;
+    display: string;
+    conceptClass: {
+      uuid: string;
+      display: string;
+    };
+  };
+  display: string;
+  groupMembers: null | Array<{
+    uuid: string;
+    concept: {
+      uuid: string;
+      display: string;
+    };
+    value: {
+      uuid: string;
+      display: string;
+    };
+  }>;
+  value: unknown;
+  obsDatetime: string;
+}
+
+export interface Encounter {
+  uuid: string;
+  encounterDatetime: string;
+  encounterProviders: Array<{
+    uuid: string;
+    display: string;
+    encounterRole: {
+      uuid: string;
+      display: string;
+    };
+    provider: {
+      uuid: string;
+      person: {
+        uuid: string;
+        display: string;
+      };
+    };
+  }>;
+  encounterType: {
+    uuid: string;
+    display: string;
+  };
+  obs: Array<Observation>;
+  orders: Array<Order>;
+}
+
+type PreFilledQuestions = {
+  [key: string]: string;
+};
+
+interface FormParams {
+  formUuid: string;
+  patientUuid: string;
+  visitUuid?: string;
+  visitTypeUuid?: string;
+  encounterUuid?: string;
+  preFilledQuestions?: PreFilledQuestions;
+  showDiscardSubmitButtons?: boolean;
+  handlePostResponse?: (Encounter) => void;
+  handleEncounterCreate?: (Object) => void;
+  handleOnValidate?: (boolean) => void;
+}
+
+const FormBootstrap = ({
+  formUuid,
+  patientUuid,
+  visitUuid,
+  visitTypeUuid,
+  encounterUuid,
+  handlePostResponse,
+  handleEncounterCreate,
+  handleOnValidate,
+}: FormParams) => {
+  const patient = useGetPatient(patientUuid);
+  const { activeSessionMeta } = useContext(GroupFormWorkflowContext);
+
+  useEffect(() => {
+    return () => detach('form-widget-slot', 'form-widget-slot');
+  });
+
+  // FIXME This should not be necessary
+  const [showForm, setShowForm] = useState(true);
+
+  const updateFormComponent = () => {
+    setShowForm(false);
+    setTimeout(() => {
+      setShowForm(true);
+    });
+  };
+
+  return (
+    <div>
+      {showForm && formUuid && patientUuid && patient && (
+        <ExtensionSlot
+          name="form-widget-slot"
+          state={{
+            view: 'form',
+            formUuid,
+            visitUuid: visitUuid ?? '',
+            visitTypeUuid: visitTypeUuid ?? '',
+            patientUuid,
+            patient,
+            encounterUuid: encounterUuid ?? '',
+            closeWorkspace: () => undefined,
+            handlePostResponse: (encounter) => {
+              handlePostResponse(encounter);
+              updateFormComponent();
+            },
+            handleEncounterCreate,
+            handleOnValidate,
+            showDiscardSubmitButtons: false,
+            preFilledQuestions: {
+              ...activeSessionMeta,
+              encDate: activeSessionMeta.sessionDate,
+            },
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default FormBootstrap;

package/src/Root.tsx

@@ -1,13 +1,19 @@
-import React from "react";
-import { BrowserRouter, Route } from "react-router-dom";
-import { appPath } from "./constant";
-import FormsRoot from "./forms/FormsRoot";
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { appPath } from './constant';
+const FormsPage = React.lazy(() => import('./forms-page'));
+const FormEntryWorkflow = React.lazy(() => import('./form-entry-workflow'));
+const GroupFormEntryWorkflow = React.lazy(() => import('./group-form-entry-workflow'));
 
 const Root = () => {
   return (
     <main>
       <BrowserRouter basename={appPath}>
-        <Route path="/:tab?" component={FormsRoot} />
+        <Routes>
+          <Route path="/" element={<FormsPage />} />
+          <Route path="/form/:formUuid" element={<FormEntryWorkflow />} />
+          <Route path="/groupform/:formUuid" element={<GroupFormEntryWorkflow />} />
+        </Routes>
       </BrowserRouter>
     </main>
   );

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,46 +1,139 @@
-import { Type, validator } from "@openmrs/esm-framework";
+import { Type } from '@openmrs/esm-framework';
 
 /**
- * This is the config schema. It expects a configuration object which
- * looks like this:
+ * This is the config schema.
  *
- * ```json
- * { "casualGreeting": true, "whoToGreet": ["Mom"] }
- * ```
- *
- * In OpenMRS Microfrontends, all config parameters are optional. Thus,
- * all elements must have a reasonable default. A good default is one
- * that works well with the reference application.
- *
- * To understand the schema below, please read the configuration system
- * documentation:
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config
- * Note especially the section "How do I make my module configurable?"
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=im-developing-an-esm-module-how-do-i-make-it-configurable
- * and the Schema Reference
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=schema-reference
  */
+
 export const configSchema = {
-  casualGreeting: {
-    _type: Type.Boolean,
-    _default: false,
-    _description: "Whether to use a casual greeting (or a formal one).",
+  formCategories: {
+    _type: Type.Array,
+    _description: 'Organize forms into categories. A form can belong to multiple categories.',
+    _elements: {
+      name: {
+        _type: Type.String,
+        _description: 'Category name',
+      },
+      forms: {
+        _type: Type.Array,
+        _description: 'List of forms for this category.',
+        _elements: {
+          formUUID: {
+            _type: Type.UUID,
+            _description: 'UUID of form',
+          },
+          name: {
+            _type: Type.String,
+            _description: 'Name of form',
+          },
+        },
+      },
+    },
+    _default: [
+      {
+        name: 'ICRC Forms',
+        forms: [
+          {
+            formUUID: '0cefb866-110c-4f16-af58-560932a1db1f',
+            name: 'Adult Triage',
+          },
+        ],
+      },
+      {
+        name: 'Distress Scales',
+        forms: [
+          {
+            formUUID: '9f26aad4-244a-46ca-be49-1196df1a8c9a',
+            name: 'POC Sample Form 1',
+          },
+        ],
+      },
+    ],
   },
-  whoToGreet: {
+  formCategoriesToShow: {
     _type: Type.Array,
-    _default: ["World"],
-    _description:
-      "Who should be greeted. Names will be separated by a comma and space.",
+    _description: 'Forms to show by default on the forms app home page.',
     _elements: {
       _type: Type.String,
+      _description: 'Name of category',
     },
-    _validators: [
-      validator((v) => v.length > 0, "At least one person must be greeted."),
-    ],
+    _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: [],
+  },
+};
+
+export type Form = {
+  formUUID: Type.UUID;
+  name: Type.String;
+};
+
+export type Category = {
+  name: string;
+  forms: Array<Form>;
 };
 
 export type Config = {
-  casualGreeting: boolean;
-  whoToGreet: Array<String>;
+  formCategories: Array<Category>;
+  formCategoriesToShow: Array<string>;
 };

package/src/constant.ts

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