@openmrs/esm-fast-data-entry-app 1.0.1-pre.99 → 1.1.0

package/src/forms-page/FormsPage.tsx

@@ -1,19 +1,13 @@
-import { useConfig, useSession } from "@openmrs/esm-framework";
-import { Tab, Tabs, TabList, TabPanels, TabPanel } from "@carbon/react";
-import React from "react";
-import { Config } from "../config-schema";
-import { useGetAllForms } from "../hooks";
-import FormsTable from "./forms-table";
-import styles from "./styles.scss";
-import { useTranslation } from "react-i18next";
-import {
-  fdeWorkflowStorageName,
-  fdeWorkflowStorageVersion,
-} from "../context/FormWorkflowReducer";
-import {
-  fdeGroupWorkflowStorageName,
-  fdeGroupWorkflowStorageVersion,
-} from "../context/GroupFormWorkflowReducer";
+import { useConfig, useSession } from '@openmrs/esm-framework';
+import { Tab, Tabs, TabList, TabPanels, TabPanel } from '@carbon/react';
+import React from 'react';
+import { type Config } from '../config-schema';
+import { useGetAllForms } from '../hooks';
+import FormsTable from './forms-table';
+import styles from './styles.scss';
+import { useTranslation } from 'react-i18next';
+import { fdeWorkflowStorageName, fdeWorkflowStorageVersion } from '../context/FormWorkflowReducer';
+import { fdeGroupWorkflowStorageName, fdeGroupWorkflowStorageVersion } from '../context/GroupFormWorkflowReducer';
 
 // helper function useful for debugging
 // given a list of forms, it will organize into permissions
@@ -25,7 +19,7 @@ export const getFormPermissions = (forms) => {
       (output[form.encounterType.editPrivilege.display] = [
         ...(output[form.encounterType.editPrivilege.display] || []),
         form.display,
-      ])
+      ]),
   );
   return output;
 };
@@ -44,41 +38,29 @@ const prepareRowsForTable = (rawFormData) => {
 };
 
 const FormsPage = () => {
-  const config = useConfig() as Config;
+  const config = useConfig();
   const { t } = useTranslation();
   const { formCategories, formCategoriesToShow } = config;
   const { forms, isLoading, error } = useGetAllForms();
   const cleanRows = prepareRowsForTable(forms);
   const { user } = useSession();
-  const savedFormsData = localStorage.getItem(
-    fdeWorkflowStorageName + ":" + user?.uuid
-  );
-  const savedGroupFormsData = localStorage.getItem(
-    fdeGroupWorkflowStorageName + ":" + user?.uuid
-  );
+  const savedFormsData = localStorage.getItem(fdeWorkflowStorageName + ':' + user?.uuid);
+  const savedGroupFormsData = localStorage.getItem(fdeGroupWorkflowStorageName + ':' + user?.uuid);
   const activeForms = [];
   const activeGroupForms = [];
 
-  if (
-    savedFormsData &&
-    JSON.parse(savedFormsData)?.["_storageVersion"] ===
-      fdeWorkflowStorageVersion
-  ) {
+  if (savedFormsData && JSON.parse(savedFormsData)?.['_storageVersion'] === fdeWorkflowStorageVersion) {
     Object.entries(JSON.parse(savedFormsData).forms).forEach(
       ([formUuid, form]: [string, { [key: string]: unknown }]) => {
         if (form.workflowState) activeForms.push(formUuid);
-      }
+      },
     );
   }
-  if (
-    savedGroupFormsData &&
-    JSON.parse(savedGroupFormsData)?.["_storageVersion"] ===
-      fdeGroupWorkflowStorageVersion
-  ) {
+  if (savedGroupFormsData && JSON.parse(savedGroupFormsData)?.['_storageVersion'] === fdeGroupWorkflowStorageVersion) {
     Object.entries(JSON.parse(savedGroupFormsData).forms).forEach(
       ([formUuid, form]: [string, { [key: string]: unknown }]) => {
         if (form.workflowState) activeGroupForms.push(formUuid);
-      }
+      },
     );
   }
 
@@ -94,15 +76,11 @@ const FormsPage = () => {
 
   return (
     <div className={styles.mainContent}>
-      <h3 className={styles.pageTitle}>
-        {t("fastDataEntry", "Fast Data Entry")}
-      </h3>
+      <h3 className={styles.pageTitle}>{t('fastDataEntry', 'Fast Data Entry')}</h3>
       <Tabs>
         <TabList>
-          <Tab label={t("allForms", "All Forms")}>
-            {`${t("allForms", "All Forms")} (${
-              cleanRows ? cleanRows?.length : "??"
-            })`}
+          <Tab label={t('allForms', 'All Forms')}>
+            {`${t('allForms', 'All Forms')} (${cleanRows ? cleanRows?.length : '??'})`}
           </Tab>
           {categoryRows?.map((category, index) => (
             <Tab label={category.name} key={index}>
@@ -112,17 +90,11 @@ const FormsPage = () => {
         </TabList>
         <TabPanels>
           <TabPanel>
-            <FormsTable
-              rows={cleanRows}
-              {...{ error, isLoading, activeForms, activeGroupForms }}
-            />
+            <FormsTable rows={cleanRows} {...{ error, isLoading, activeForms, activeGroupForms }} />
           </TabPanel>
           {categoryRows?.map((category, index) => (
             <TabPanel key={index}>
-              <FormsTable
-                rows={category.rows}
-                {...{ error, isLoading, activeForms, activeGroupForms }}
-              />
+              <FormsTable rows={category.rows} {...{ error, isLoading, activeForms, activeGroupForms }} />
             </TabPanel>
           ))}
         </TabPanels>

package/src/forms-page/forms-table/FormsTable.tsx

@@ -1,4 +1,4 @@
-import { ErrorState } from "@openmrs/esm-framework";
+import { ErrorState } from '@openmrs/esm-framework';
 import {
   DataTable,
   DataTableSkeleton,
@@ -12,35 +12,29 @@ import {
   TableToolbar,
   TableToolbarContent,
   TableToolbarSearch,
-} from "@carbon/react";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { Link } from "react-router-dom";
-import EmptyState from "../../empty-state/EmptyState";
-import styles from "./styles.scss";
+} from '@carbon/react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import EmptyState from '../../empty-state/EmptyState';
+import styles from './styles.scss';
 
-const FormsTable = ({
-  rows,
-  error,
-  isLoading,
-  activeForms,
-  activeGroupForms,
-}) => {
+const FormsTable = ({ rows, error, isLoading, activeForms, activeGroupForms }) => {
   const { t } = useTranslation();
 
   const tableHeaders = [
     {
-      key: "display",
-      header: t("formName", "Form Name"),
+      key: 'display',
+      header: t('formName', 'Form Name'),
       isSortable: true,
     },
     {
-      key: "actions",
-      header: t("actions", "Actions"),
+      key: 'actions',
+      header: t('actions', 'Actions'),
     },
     {
-      key: "actions2",
-      header: "",
+      key: 'actions2',
+      header: '',
     },
   ];
 
@@ -48,50 +42,36 @@ const FormsTable = ({
     ...row,
     actions: (
       <Link to={`form/${row.uuid}`}>
-        {activeForms.includes(row.uuid)
-          ? t("resumeSession", "Resume Session")
-          : t("fillForm", "Fill Form")}
+        {activeForms.includes(row.uuid) ? t('resumeSession', 'Resume Session') : t('fillForm', 'Fill Form')}
       </Link>
     ),
     actions2: (
       <Link to={`groupform/${row.uuid}`}>
         {activeGroupForms.includes(row.uuid)
-          ? t("resumeGroupSession", "Resume Group Session")
-          : t("startGroupSession", "Start Group Session")}
+          ? t('resumeGroupSession', 'Resume Group Session')
+          : t('startGroupSession', 'Start Group Session')}
       </Link>
     ),
   }));
 
   if (isLoading) return <DataTableSkeleton />;
   if (error) {
-    return (
-      <ErrorState
-        headerTitle={t("errorLoadingData", "Error Loading Data")}
-        error={error}
-      />
-    );
+    return <ErrorState headerTitle={t('errorLoadingData', 'Error Loading Data')} error={error} />;
   }
   if (augmentedRows.length === 0) {
     return (
       <EmptyState
-        headerTitle={t("noFormsFound", "No Forms To Show")}
+        headerTitle={t('noFormsFound', 'No Forms To Show')}
         displayText={t(
-          "noFormsFoundMessage",
-          "No forms could be found for this category. Please double check the form concept uuids and access permissions."
+          'noFormsFoundMessage',
+          'No forms could be found for this category. Please double check the form concept uuids and access permissions.',
         )}
       />
     );
   }
   return (
     <DataTable rows={augmentedRows} headers={tableHeaders}>
-      {({
-        rows,
-        headers,
-        getTableProps,
-        getHeaderProps,
-        getRowProps,
-        onInputChange,
-      }) => {
+      {({ rows, headers, getTableProps, getHeaderProps, getRowProps, onInputChange }) => {
         return (
           <TableContainer>
             <div className={styles.toolbarWrapper}>

package/src/forms-page/forms-table/index.ts

@@ -1,3 +1,3 @@
-import FormsTable from "./FormsTable";
+import FormsTable from './FormsTable';
 
 export default FormsTable;

package/src/forms-page/forms-table/styles.scss

@@ -1,11 +1,10 @@
-@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';
 
 .toolbarWrapper {
   position: relative;
   display: flex;
-  height: $spacing-09;
+  height: layout.$spacing-09;
   justify-content: flex-end;
 }
 
@@ -15,6 +14,6 @@
 }
 
 .inactiveLink {
-  color: $carbon--gray-40;
+  color: colors.$gray-40;
   cursor: not-allowed;
 }

package/src/forms-page/index.ts

@@ -1,3 +1,3 @@
-import FormsPage from "./FormsPage";
+import FormsPage from './FormsPage';
 
 export default FormsPage;

package/src/forms-page/styles.scss

@@ -1,11 +1,9 @@
-@use '@carbon/styles/scss/spacing';
-// @use '@carbon/styles/scss/type';
-// @import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
 
 .mainContent {
-  padding: spacing.$spacing-07;
+  padding: layout.$spacing-07;
 }
 
 .pageTitle {
-  margin-bottom: spacing.$spacing-06;
+  margin-bottom: layout.$spacing-06;
 }

package/src/group-form-entry-workflow/GroupFormEntryWorkflow.tsx

@@ -1,17 +1,17 @@
-import { ExtensionSlot } from "@openmrs/esm-framework";
-import React from "react";
-import GroupDisplayHeader from "./group-display-header";
-import styles from "./styles.scss";
-import { GroupFormWorkflowProvider } from "../context/GroupFormWorkflowContext";
-import GroupSearchHeader from "./group-search-header";
-import SessionMetaWorkspace from "./SessionMetaWorkspace";
-import GroupSessionWorkspace from "./GroupSessionWorkspace";
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import React from 'react';
+import GroupDisplayHeader from './group-display-header';
+import styles from './styles.scss';
+import { GroupFormWorkflowProvider } from '../context/GroupFormWorkflowContext';
+import GroupSearchHeader from './group-search-header';
+import SessionMetaWorkspace from './SessionMetaWorkspace';
+import GroupSessionWorkspace from './GroupSessionWorkspace';
 
 const GroupFormEntryWorkflow = () => {
   return (
     <GroupFormWorkflowProvider>
       <div className={styles.breadcrumbsContainer}>
-        <ExtensionSlot extensionSlotName="breadcrumbs-slot" />
+        <ExtensionSlot name="breadcrumbs-slot" />
       </div>
       <GroupSearchHeader />
       <GroupDisplayHeader />

package/src/group-form-entry-workflow/GroupSessionWorkspace.tsx

@@ -1,48 +1,32 @@
-import {
-  getGlobalStore,
-  useConfig,
-  useSession,
-  useStore,
-} from "@openmrs/esm-framework";
-import { Button } from "@carbon/react";
-import React, { useCallback, useContext, useEffect, useState } from "react";
-import PatientCard from "../patient-card/PatientCard";
-import styles from "./styles.scss";
-import { useTranslation } from "react-i18next";
-import GroupFormWorkflowContext from "../context/GroupFormWorkflowContext";
-import FormBootstrap from "../FormBootstrap";
-import useStartVisit from "../hooks/useStartVisit";
-import CompleteModal from "../CompleteModal";
-import CancelModal from "../CancelModal";
-
-const formStore = getGlobalStore("ampath-form-state");
+import { getGlobalStore, useConfig, useSession, useStore } from '@openmrs/esm-framework';
+import { Button } from '@carbon/react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import PatientCard from '../patient-card/PatientCard';
+import styles from './styles.scss';
+import { useTranslation } from 'react-i18next';
+import { v4 as uuid } from 'uuid';
+import GroupFormWorkflowContext from '../context/GroupFormWorkflowContext';
+import FormBootstrap from '../FormBootstrap';
+import CompleteModal from '../CompleteModal';
+import CancelModal from '../CancelModal';
+
+const formStore = getGlobalStore('ampath-form-state');
 
 const WorkflowNavigationButtons = () => {
   const context = useContext(GroupFormWorkflowContext);
-  const {
-    activeFormUuid,
-    submitForNext,
-    patientUuids,
-    activePatientUuid,
-    workflowState,
-  } = context;
+  const { activeFormUuid, submitForNext, patientUuids, activePatientUuid, workflowState } = context;
   const store = useStore(formStore);
   const formState = store[activeFormUuid];
   const navigationDisabled =
-    (formState !== "ready" || workflowState !== "EDIT_FORM") &&
-    formState !== "readyWithValidationErrors";
+    (formState !== 'ready' || workflowState !== 'EDIT_FORM') && formState !== 'readyWithValidationErrors';
   const [cancelModalOpen, setCancelModalOpen] = useState(false);
   const [completeModalOpen, setCompleteModalOpen] = useState(false);
   const { t } = useTranslation();
 
-  const isLastPatient =
-    activePatientUuid === patientUuids[patientUuids.length - 1];
+  const isLastPatient = activePatientUuid === patientUuids[patientUuids.length - 1];
 
   const handleClickNext = () => {
-    if (
-      workflowState === "EDIT_FORM" ||
-      formState === "readyWithValidationErrors"
-    ) {
+    if (workflowState === 'EDIT_FORM' || formState === 'readyWithValidationErrors') {
       submitForNext();
     }
   };
@@ -50,33 +34,18 @@ const WorkflowNavigationButtons = () => {
   return (
     <>
       <div className={styles.rightPanelActionButtons}>
-        <Button
-          kind="primary"
-          onClick={handleClickNext}
-          disabled={navigationDisabled}
-        >
-          {isLastPatient
-            ? t("saveForm", "Save Form")
-            : t("nextPatient", "Next Patient")}
+        <Button kind="primary" onClick={handleClickNext} disabled={navigationDisabled}>
+          {isLastPatient ? t('saveForm', 'Save Form') : t('nextPatient', 'Next patient')}
         </Button>
         <Button kind="secondary" onClick={() => setCompleteModalOpen(true)}>
-          {t("saveAndComplete", "Save & Complete")}
+          {t('saveAndComplete', 'Save & Complete')}
         </Button>
         <Button kind="tertiary" onClick={() => setCancelModalOpen(true)}>
-          {t("cancel", "Cancel")}
+          {t('cancel', 'Cancel')}
         </Button>
       </div>
-      <CancelModal
-        open={cancelModalOpen}
-        setOpen={setCancelModalOpen}
-        context={context}
-      />
-      <CompleteModal
-        open={completeModalOpen}
-        setOpen={setCompleteModalOpen}
-        context={context}
-        validateFirst={false}
-      />
+      <CancelModal open={cancelModalOpen} setOpen={setCancelModalOpen} context={context} />
+      <CompleteModal open={completeModalOpen} setOpen={setCompleteModalOpen} context={context} validateFirst={false} />
     </>
   );
 };
@@ -91,6 +60,9 @@ const GroupSessionWorkspace = () => {
     activeEncounterUuid,
     activeVisitUuid,
     activeFormUuid,
+    activeGroupUuid,
+    activeGroupName,
+    activeSessionUuid,
     saveEncounter,
     activeSessionMeta,
     groupVisitTypeUuid,
@@ -100,53 +72,17 @@ const GroupSessionWorkspace = () => {
   } = useContext(GroupFormWorkflowContext);
 
   const { sessionLocation } = useSession();
-  const [encounter, setEncounter] = useState(null);
-  const [visit, setVisit] = useState(null);
 
-  const {
-    saveVisit,
-    updateEncounter,
-    success: visitSaveSuccess,
-  } = useStartVisit({
-    showSuccessNotification: false,
-    showErrorNotification: true,
-  });
-
-  // 0. user clicks "next patient" in WorkflowNavigationButtons
-  // which triggers submitForNext() if workflowState === "EDIT_FORM"
-
-  // 1. save the new visit uuid and start form submission
   useEffect(() => {
-    if (
-      visitSaveSuccess &&
-      visitSaveSuccess.data.patient.uuid === activePatientUuid
-    ) {
-      setVisit(visitSaveSuccess.data);
-      // Update visit UUID on workflow
-      updateVisitUuid(visitSaveSuccess.data.uuid);
+    if (activeVisitUuid) {
+      updateVisitUuid(activeVisitUuid);
     }
-  }, [
-    visitSaveSuccess,
-    updateVisitUuid,
-    activeVisitUuid,
-    activePatientUuid,
-    visit,
-    setVisit,
-  ]);
+  }, [updateVisitUuid, activeVisitUuid, activePatientUuid]);
 
-  // 2. If there's no active visit, trigger the creation of a new one
+  // If there's no active visit, trigger the creation of a new one
   const handleEncounterCreate = useCallback(
     (payload) => {
       // Create a visit with the same date as the encounter being saved
-      if (!activeVisitUuid) {
-        saveVisit({
-          patientUuid: activePatientUuid,
-          startDatetime: activeSessionMeta.sessionDate,
-          stopDatetime: activeSessionMeta.sessionDate,
-          visitType: groupVisitTypeUuid,
-          location: sessionLocation?.uuid,
-        });
-      }
       const obsTime = new Date(activeSessionMeta.sessionDate);
       payload.obs.forEach((item, index) => {
         payload.obs[index] = {
@@ -158,55 +94,79 @@ const GroupSessionWorkspace = () => {
           obsDatetime: obsTime.toISOString(),
         };
       });
-      // If this is a newly created encounter and visit, add session concepts to encounter payload.
+      const visitUuid = activeVisitUuid ? activeVisitUuid : uuid();
       if (!activeVisitUuid) {
         Object.entries(groupSessionConcepts).forEach(([field, uuid]) => {
-          payload.obs.push({
-            concept: uuid,
-            value: activeSessionMeta?.[field],
-          });
+          if (activeSessionMeta?.[field] != null) {
+            payload.obs.push({
+              concept: uuid,
+              value: activeSessionMeta[field],
+            });
+          }
         });
+
+        const otherIdentifiers = [
+          { concept: groupSessionConcepts.cohortId, value: activeGroupUuid },
+          { concept: groupSessionConcepts.cohortName, value: activeGroupName },
+          {
+            concept: groupSessionConcepts.sessionUuid,
+            value: activeSessionUuid,
+          },
+        ];
+        payload.obs.push(...otherIdentifiers);
+        // If this is a newly created encounter and visit, add session concepts to encounter payload.
+        const visitInfo = {
+          startDatetime: activeSessionMeta.sessionDate,
+          stopDatetime: activeSessionMeta.sessionDate,
+          uuid: visitUuid,
+          patient: {
+            uuid: activePatientUuid,
+          },
+          location: {
+            uuid: sessionLocation?.uuid,
+          },
+          visitType: {
+            uuid: groupVisitTypeUuid,
+          },
+        };
+        payload.visit = visitInfo;
+        updateVisitUuid(visitUuid);
       }
       payload.location = sessionLocation?.uuid;
       payload.encounterDatetime = obsTime.toISOString();
     },
     [
-      activePatientUuid,
-      activeVisitUuid,
       activeSessionMeta,
+      activeVisitUuid,
+      sessionLocation?.uuid,
       groupSessionConcepts,
+      activeGroupUuid,
+      activeGroupName,
+      activeSessionUuid,
+      activePatientUuid,
       groupVisitTypeUuid,
-      saveVisit,
-      sessionLocation,
-    ]
+      updateVisitUuid,
+    ],
   );
 
-  // 3. Update encounter so that it belongs to the created visit
-  useEffect(() => {
-    if (encounter && visit && encounter.patient?.uuid === visit.patient?.uuid) {
-      updateEncounter({ uuid: encounter.uuid, visit: visit.uuid });
-    }
-  }, [encounter, updateEncounter, visit]);
-
-  // 4. Once form has been posted, save the new encounter uuid so we can edit it later
+  // Once form has been posted, save the new encounter uuid so we can edit it later
   const handlePostResponse = useCallback(
     (encounter) => {
       if (encounter && encounter.uuid) {
         saveEncounter(encounter.uuid);
-        setEncounter(encounter);
       }
     },
-    [saveEncounter]
+    [saveEncounter],
   );
 
   const switchPatient = useCallback(
     (patientUuid) => {
       submitForNext(patientUuid);
     },
-    [submitForNext]
+    [submitForNext],
   );
 
-  if (workflowState === "NEW_GROUP_SESSION") return null;
+  if (workflowState === 'NEW_GROUP_SESSION') return null;
 
   return (
     <div className={styles.workspace}>
@@ -223,7 +183,7 @@ const GroupSessionWorkspace = () => {
           />
         </div>
         <div className={styles.rightPanel}>
-          <h4>{t("formsFilled", "Forms filled")}</h4>
+          <h4>{t('formsFilled', 'Forms filled')}</h4>
           <div className={styles.patientCardsSection}>
             {patientUuids?.map((patientUuid) => (
               <PatientCard