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

package/src/form-entry-workflow/workflow-review/index.ts

@@ -0,0 +1,3 @@
+import WorkflowReview from './WorkflowReview';
+
+export default WorkflowReview;

package/src/{workflow-review → form-entry-workflow/workflow-review}/styles.scss

@@ -1,7 +1,3 @@
-@import "~@openmrs/esm-styleguide/src/vars";
-@import "~carbon-components/src/globals/scss/vars";
-@import "~carbon-components/src/globals/scss/mixins";
-
 .workspaceWrapper {
   display: flex;
   justify-content: center;

package/src/forms-app-menu-link.tsx

@@ -1,13 +1,11 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { ConfigurableLink } from "@openmrs/esm-framework";
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ConfigurableLink } from '@openmrs/esm-framework';
 
-export default function OfflineToolsAppMenuLink() {
+export default function FormsAppMenuLink() {
   const { t } = useTranslation();
   return (
     // eslint-disable-next-line
-    <ConfigurableLink to="${openmrsSpaBase}/forms">
-      {t("formsAppMenuLink", "Forms")}
-    </ConfigurableLink>
+    <ConfigurableLink to="${openmrsSpaBase}/forms">{t('formsAppMenuLink', 'Fast Data Entry')}</ConfigurableLink>
   );
 }

package/src/forms-page/FormsPage.tsx

@@ -1,15 +1,13 @@
-import { useConfig } from "@openmrs/esm-framework";
-import { Tab, Tabs } from "carbon-components-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 { 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
@@ -21,7 +19,7 @@ export const getFormPermissions = (forms) => {
       (output[form.encounterType.editPrivilege.display] = [
         ...(output[form.encounterType.editPrivilege.display] || []),
         form.display,
-      ])
+      ]),
   );
   return output;
 };
@@ -40,21 +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 savedData = localStorage.getItem(fdeWorkflowStorageName);
+  const { user } = useSession();
+  const savedFormsData = localStorage.getItem(fdeWorkflowStorageName + ':' + user?.uuid);
+  const savedGroupFormsData = localStorage.getItem(fdeGroupWorkflowStorageName + ':' + user?.uuid);
   const activeForms = [];
-  if (
-    savedData &&
-    JSON.parse(savedData)?.["_storageVersion"] === fdeWorkflowStorageVersion
-  ) {
-    Object.entries(JSON.parse(savedData).forms).forEach(
+  const activeGroupForms = [];
+
+  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) {
+    Object.entries(JSON.parse(savedGroupFormsData).forms).forEach(
+      ([formUuid, form]: [string, { [key: string]: unknown }]) => {
+        if (form.workflowState) activeGroupForms.push(formUuid);
+      },
     );
   }
 
@@ -70,23 +76,28 @@ const FormsPage = () => {
 
   return (
     <div className={styles.mainContent}>
-      <h3 className={styles.pageTitle}>{t("forms", "Forms")}</h3>
-      <Tabs type="container">
-        <Tab
-          label={`${t("allForms", "All Forms")} (${
-            cleanRows ? cleanRows?.length : "??"
-          })`}
-        >
-          <FormsTable rows={cleanRows} {...{ error, isLoading, activeForms }} />
-        </Tab>
-        {categoryRows?.map((category, index) => (
-          <Tab label={`${category.name} (${category.rows.length})`} key={index}>
-            <FormsTable
-              rows={category.rows}
-              {...{ error, isLoading, activeForms }}
-            />
+      <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>
-        ))}
+          {categoryRows?.map((category, index) => (
+            <Tab label={category.name} key={index}>
+              {`${category.name} (${category.rows.length})`}
+            </Tab>
+          ))}
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <FormsTable rows={cleanRows} {...{ error, isLoading, activeForms, activeGroupForms }} />
+          </TabPanel>
+          {categoryRows?.map((category, index) => (
+            <TabPanel key={index}>
+              <FormsTable rows={category.rows} {...{ error, isLoading, activeForms, activeGroupForms }} />
+            </TabPanel>
+          ))}
+        </TabPanels>
       </Tabs>
     </div>
   );

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

@@ -0,0 +1,117 @@
+import { ErrorState } from '@openmrs/esm-framework';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  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';
+
+const FormsTable = ({ rows, error, isLoading, activeForms, activeGroupForms }) => {
+  const { t } = useTranslation();
+
+  const tableHeaders = [
+    {
+      key: 'display',
+      header: t('formName', 'Form Name'),
+      isSortable: true,
+    },
+    {
+      key: 'actions',
+      header: t('actions', 'Actions'),
+    },
+    {
+      key: 'actions2',
+      header: '',
+    },
+  ];
+
+  const augmentedRows = rows?.map((row) => ({
+    ...row,
+    actions: (
+      <Link to={`form/${row.uuid}`}>
+        {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')}
+      </Link>
+    ),
+  }));
+
+  if (isLoading) return <DataTableSkeleton />;
+  if (error) {
+    return <ErrorState headerTitle={t('errorLoadingData', 'Error Loading Data')} error={error} />;
+  }
+  if (augmentedRows.length === 0) {
+    return (
+      <EmptyState
+        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.',
+        )}
+      />
+    );
+  }
+  return (
+    <DataTable rows={augmentedRows} headers={tableHeaders}>
+      {({ rows, headers, getTableProps, getHeaderProps, getRowProps, onInputChange }) => {
+        return (
+          <TableContainer>
+            <div className={styles.toolbarWrapper}>
+              <TableToolbar className={styles.tableToolbar}>
+                <TableToolbarContent>
+                  <TableToolbarSearch onChange={onInputChange} />
+                </TableToolbarContent>
+              </TableToolbar>
+            </div>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      {...getHeaderProps({
+                        header,
+                        isSortable: header.isSortable,
+                      })}
+                    >
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows?.map((row) => (
+                  <TableRow {...getRowProps({ row })}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        );
+      }}
+    </DataTable>
+  );
+};
+
+export default FormsTable;
+export { FormsTable };

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

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

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

@@ -0,0 +1,19 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.toolbarWrapper {
+  position: relative;
+  display: flex;
+  height: layout.$spacing-09;
+  justify-content: flex-end;
+}
+
+.tableToolbar {
+  width: 20%;
+  min-width: 12.5rem;
+}
+
+.inactiveLink {
+  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 @@
-@import "~@openmrs/esm-styleguide/src/vars";
-@import "~carbon-components/src/globals/scss/vars";
-@import "~carbon-components/src/globals/scss/mixins";
+@use '@carbon/layout';
 
 .mainContent {
-  padding: $spacing-07;
+  padding: layout.$spacing-07;
 }
 
 .pageTitle {
-  margin-bottom: $spacing-06;
+  margin-bottom: layout.$spacing-06;
 }

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

@@ -0,0 +1,26 @@
+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 name="breadcrumbs-slot" />
+      </div>
+      <GroupSearchHeader />
+      <GroupDisplayHeader />
+      <div className={styles.workspaceWrapper}>
+        <SessionMetaWorkspace />
+        <GroupSessionWorkspace />
+      </div>
+    </GroupFormWorkflowProvider>
+  );
+};
+
+export default GroupFormEntryWorkflow;

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

@@ -0,0 +1,207 @@
+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 store = useStore(formStore);
+  const formState = store[activeFormUuid];
+  const navigationDisabled =
+    (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 handleClickNext = () => {
+    if (workflowState === 'EDIT_FORM' || formState === 'readyWithValidationErrors') {
+      submitForNext();
+    }
+  };
+
+  return (
+    <>
+      <div className={styles.rightPanelActionButtons}>
+        <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')}
+        </Button>
+        <Button kind="tertiary" onClick={() => setCancelModalOpen(true)}>
+          {t('cancel', 'Cancel')}
+        </Button>
+      </div>
+      <CancelModal open={cancelModalOpen} setOpen={setCancelModalOpen} context={context} />
+      <CompleteModal open={completeModalOpen} setOpen={setCompleteModalOpen} context={context} validateFirst={false} />
+    </>
+  );
+};
+
+const GroupSessionWorkspace = () => {
+  const { groupSessionConcepts } = useConfig();
+  const { t } = useTranslation();
+  const {
+    patientUuids,
+    activePatientUuid,
+    encounters,
+    activeEncounterUuid,
+    activeVisitUuid,
+    activeFormUuid,
+    activeGroupUuid,
+    activeGroupName,
+    activeSessionUuid,
+    saveEncounter,
+    activeSessionMeta,
+    groupVisitTypeUuid,
+    updateVisitUuid,
+    submitForNext,
+    workflowState,
+  } = useContext(GroupFormWorkflowContext);
+
+  const { sessionLocation } = useSession();
+
+  useEffect(() => {
+    if (activeVisitUuid) {
+      updateVisitUuid(activeVisitUuid);
+    }
+  }, [updateVisitUuid, activeVisitUuid, activePatientUuid]);
+
+  // 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
+      const obsTime = new Date(activeSessionMeta.sessionDate);
+      payload.obs.forEach((item, index) => {
+        payload.obs[index] = {
+          ...item,
+          groupMembers: item.groupMembers?.map((mem) => ({
+            ...mem,
+            obsDatetime: obsTime.toISOString(),
+          })),
+          obsDatetime: obsTime.toISOString(),
+        };
+      });
+      const visitUuid = activeVisitUuid ? activeVisitUuid : uuid();
+      if (!activeVisitUuid) {
+        Object.entries(groupSessionConcepts).forEach(([field, uuid]) => {
+          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();
+    },
+    [
+      activeSessionMeta,
+      activeVisitUuid,
+      sessionLocation?.uuid,
+      groupSessionConcepts,
+      activeGroupUuid,
+      activeGroupName,
+      activeSessionUuid,
+      activePatientUuid,
+      groupVisitTypeUuid,
+      updateVisitUuid,
+    ],
+  );
+
+  // 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);
+      }
+    },
+    [saveEncounter],
+  );
+
+  const switchPatient = useCallback(
+    (patientUuid) => {
+      submitForNext(patientUuid);
+    },
+    [submitForNext],
+  );
+
+  if (workflowState === 'NEW_GROUP_SESSION') return null;
+
+  return (
+    <div className={styles.workspace}>
+      <div className={styles.formMainContent}>
+        <div className={styles.formContainer}>
+          <FormBootstrap
+            patientUuid={activePatientUuid}
+            encounterUuid={activeEncounterUuid}
+            {...{
+              formUuid: activeFormUuid,
+              handlePostResponse,
+              handleEncounterCreate,
+            }}
+          />
+        </div>
+        <div className={styles.rightPanel}>
+          <h4>{t('formsFilled', 'Forms filled')}</h4>
+          <div className={styles.patientCardsSection}>
+            {patientUuids?.map((patientUuid) => (
+              <PatientCard
+                key={patientUuid}
+                {...{
+                  patientUuid,
+                  activePatientUuid,
+                  editEncounter: switchPatient,
+                  encounters,
+                }}
+              />
+            ))}
+          </div>
+          <WorkflowNavigationButtons />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GroupSessionWorkspace;