@openmrs/esm-fast-data-entry-app 1.0.1-pre.15 → 1.0.1-pre.154

package/src/form-entry-workflow/FormEntryWorkflow.tsx

@@ -1,107 +1,24 @@
-import {
-  ExtensionSlot,
-  getGlobalStore,
-  useStore,
-} from "@openmrs/esm-framework";
-import {
-  Button,
-  ComposedModal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
-} from "@carbon/react";
-import React, { useContext, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { ExtensionSlot, useSession } from "@openmrs/esm-framework";
+import { Button } from "@carbon/react";
+import React, { useCallback, useContext, useEffect, useState } from "react";
 import FormBootstrap from "../FormBootstrap";
 import PatientCard from "../patient-card/PatientCard";
 import styles from "./styles.scss";
 import PatientSearchHeader from "./patient-search-header";
 import { useTranslation } from "react-i18next";
+import { v4 as uuid } from "uuid";
 import FormWorkflowContext, {
   FormWorkflowProvider,
 } from "../context/FormWorkflowContext";
 import WorkflowReview from "./workflow-review";
 import PatientBanner from "./patient-banner";
-
-const formStore = getGlobalStore("ampath-form-state");
-
-const CancelModal = ({ open, setOpen }) => {
-  const { destroySession, closeSession } = useContext(FormWorkflowContext);
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-
-  const discard = async () => {
-    await destroySession();
-    setOpen(false);
-    navigate("../");
-  };
-
-  const saveAndClose = async () => {
-    await closeSession();
-    setOpen(false);
-    navigate("../");
-  };
-
-  return (
-    <ComposedModal open={open}>
-      <ModalHeader>{t("areYouSure", "Are you sure?")}</ModalHeader>
-      <ModalBody>
-        {t(
-          "cancelExplanation",
-          "You will lose any unsaved changes on the current form. Do you want to discard the current session?"
-        )}
-      </ModalBody>
-      <ModalFooter>
-        <Button kind="secondary" onClick={() => setOpen(false)}>
-          {t("cancel", "Cancel")}
-        </Button>
-        <Button kind="danger" onClick={discard}>
-          {t("discard", "Discard")}
-        </Button>
-        <Button kind="primary" onClick={saveAndClose}>
-          {t("saveSession", "Save Session")}
-        </Button>
-      </ModalFooter>
-    </ComposedModal>
-  );
-};
-
-const CompleteModal = ({ open, setOpen }) => {
-  const { submitForComplete } = useContext(FormWorkflowContext);
-  const { t } = useTranslation();
-
-  const completeSession = () => {
-    submitForComplete();
-    setOpen(false);
-  };
-
-  return (
-    <ComposedModal open={open}>
-      <ModalHeader>{t("areYouSure", "Are you sure?")}</ModalHeader>
-      <ModalBody>
-        {t(
-          "saveExplanation",
-          "Do you want to save the current form and exit the workflow?"
-        )}
-      </ModalBody>
-      <ModalFooter>
-        <Button kind="secondary" onClick={() => setOpen(false)}>
-          {t("cancel", "Cancel")}
-        </Button>
-        <Button kind="primary" onClick={completeSession}>
-          {t("complete", "Complete")}
-        </Button>
-      </ModalFooter>
-    </ComposedModal>
-  );
-};
+import CompleteModal from "../CompleteModal";
+import CancelModal from "../CancelModal";
+import useStartVisit from "../hooks/useStartVisit";
 
 const WorkflowNavigationButtons = () => {
-  const { activeFormUuid, submitForNext, workflowState, destroySession } =
-    useContext(FormWorkflowContext);
-  const store = useStore(formStore);
-  const formState = store[activeFormUuid];
-  const navigationDisabled = formState !== "ready";
+  const context = useContext(FormWorkflowContext);
+  const { workflowState, destroySession } = context;
   const [cancelModalOpen, setCancelModalOpen] = useState(false);
   const [completeModalOpen, setCompleteModalOpen] = useState(false);
   const { t } = useTranslation();
@@ -111,13 +28,6 @@ const WorkflowNavigationButtons = () => {
   return (
     <>
       <div className={styles.rightPanelActionButtons}>
-        <Button
-          kind="primary"
-          onClick={() => submitForNext()}
-          disabled={navigationDisabled || workflowState === "NEW_PATIENT"}
-        >
-          {t("nextPatient", "Next Patient")}
-        </Button>
         <Button
           kind="secondary"
           onClick={
@@ -132,8 +42,16 @@ const WorkflowNavigationButtons = () => {
           {t("cancel", "Cancel")}
         </Button>
       </div>
-      <CancelModal open={cancelModalOpen} setOpen={setCancelModalOpen} />
-      <CompleteModal open={completeModalOpen} setOpen={setCompleteModalOpen} />
+      <CancelModal
+        open={cancelModalOpen}
+        setOpen={setCancelModalOpen}
+        context={context}
+      />
+      <CompleteModal
+        open={completeModalOpen}
+        setOpen={setCompleteModalOpen}
+        context={context}
+      />
     </>
   );
 };
@@ -147,15 +65,68 @@ const FormWorkspace = () => {
     activeFormUuid,
     editEncounter,
     encounters,
+    singleSessionVisitTypeUuid,
   } = useContext(FormWorkflowContext);
   const { t } = useTranslation();
 
+  const [encounter, setEncounter] = useState(null);
+  const [visit, setVisit] = useState(null);
+  const { sessionLocation } = useSession();
+
+  const { updateEncounter, success: visitSaveSuccess } = useStartVisit({
+    showSuccessNotification: false,
+    showErrorNotification: true,
+  });
+
   const handlePostResponse = (encounter) => {
     if (encounter && encounter.uuid) {
       saveEncounter(encounter.uuid);
+      setEncounter(encounter);
     }
   };
 
+  useEffect(() => {
+    if (encounter && visit) {
+      // Update encounter so that it belongs to the created visit
+      updateEncounter({ uuid: encounter.uuid, visit: visit.uuid });
+    }
+  }, [encounter, visit, updateEncounter]);
+
+  useEffect(() => {
+    if (visitSaveSuccess) {
+      setVisit(visitSaveSuccess.data);
+    }
+  }, [visitSaveSuccess]);
+
+  const handleEncounterCreate = useCallback(
+    (payload) => {
+      payload.location = sessionLocation?.uuid;
+      payload.encounterDatetime = payload.encounterDatetime
+        ? payload.encounterDatetime
+        : new Date().toISOString();
+      // Create a visit with the same date as the encounter being saved
+      const visitStartDatetime = new Date(payload.encounterDatetime);
+      const visitStopDatetime = new Date(payload.encounterDatetime);
+      const visitInfo = {
+        startDatetime: visitStartDatetime,
+        stopDatetime: visitStopDatetime,
+        uuid: uuid(),
+        patient: {
+          uuid: activePatientUuid,
+        },
+        location: {
+          uuid: sessionLocation?.uuid,
+        },
+        visitType: {
+          uuid: singleSessionVisitTypeUuid,
+        },
+      };
+
+      payload.visit = visitInfo;
+    },
+    [activePatientUuid, singleSessionVisitTypeUuid, sessionLocation]
+  );
+
   return (
     <div className={styles.workspace}>
       {!patientUuids.length && (
@@ -172,11 +143,12 @@ const FormWorkspace = () => {
               {...{
                 formUuid: activeFormUuid,
                 handlePostResponse,
+                handleEncounterCreate,
               }}
             />
           </div>
           <div className={styles.rightPanel}>
-            <h4>Forms filled</h4>
+            <h4>{t("formsFilled", "Forms filled")}</h4>
             <div className={styles.patientCardsSection}>
               {patientUuids.map((patientUuid) => (
                 <PatientCard

package/src/form-entry-workflow/form-review-card/styles.scss

@@ -1,12 +1,10 @@
-@use '@carbon/styles/scss/spacing';
-// @use '@carbon/colors';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .formReviewCard {
-  background-color: $ui-02;
-  padding: spacing.$spacing-02;
+  background-color: colors.$white-0;
+  padding: layout.$spacing-02;
 }
 
 .formReviewCard :global(.cds--accordion) :global(.cds--accordion__item) {
@@ -16,17 +14,17 @@
 .formReviewCard :global(.cds--accordion__title) {
   display: flex;
   align-items: baseline;
-  column-gap: spacing.$spacing-05;
+  column-gap: layout.$spacing-05;
 }
 
 .formReviewCard :global(.cds--accordion__content) {
-  padding: spacing.$spacing-03;
+  padding: layout.$spacing-03;
 }
 
 .dataField {
   @include type.type-style('code-02');
-  background-color: $ui-01;
-  padding: spacing.$spacing-03;
+  background-color: colors.$gray-10;
+  padding: layout.$spacing-03;
 }
 
 .displayName {

package/src/form-entry-workflow/patient-banner/styles.scss

@@ -1,16 +1,15 @@
-@use '@carbon/styles/scss/spacing';
-// @use '@carbon/colors';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .container {
-  height: spacing.$spacing-11;
+  height: layout.$spacing-11;
   display: flex;
   align-items: center;
-  background-color: $ui-02;
-  border-top: 0.0125rem solid $ui-03;
-  border-bottom: 0.0125rem solid $ui-03;
-  padding: 0 spacing.$spacing-05;
+  background-color: colors.$white-0;
+  border-top: 0.0125rem solid colors.$gray-20;
+  border-bottom: 0.0125rem solid colors.$gray-20;
+  padding: 0 layout.$spacing-05;
 }
 
 .photoPlaceholder {
@@ -35,11 +34,11 @@
     min-height: 2rem;
   }
   @include type.type-style('body-compact-02');
-  color: $text-02;
+  color: colors.$gray-70;
   column-gap: 0.8rem;
 }
 
 .patientEditBtn {
-  color: $ui-05;
-  margin: spacing.$spacing-03;
+  color: colors.$gray-100;
+  margin: layout.$spacing-03;
 }

package/src/form-entry-workflow/patient-search-header/PatientSearchHeader.tsx

@@ -15,7 +15,7 @@ const PatientSearchHeader = () => {
   const { addPatient, workflowState, activeFormUuid } =
     useContext(FormWorkflowContext);
   const handleSelectPatient = (patient) => {
-    addPatient(patient.uuid);
+    addPatient(patient);
   };
   const { t } = useTranslation();
 
@@ -33,7 +33,7 @@ const PatientSearchHeader = () => {
       <span className={styles.padded}>{t("nextPatient", "Next patient")}:</span>
       <span className={styles.searchBarWrapper}>
         <ExtensionSlot
-          extensionSlotName="patient-search-bar-slot"
+          name="patient-search-bar-slot"
           state={{
             selectPatientAction: handleSelectPatient,
             buttonProps: {

package/src/form-entry-workflow/patient-search-header/styles.scss

@@ -1,22 +1,25 @@
-@use '@carbon/styles/scss/spacing';
-// @use '@carbon/colors';
-// @use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .searchHeaderContainer {
-  height: spacing.$spacing-11;
+  height: layout.$spacing-11;
   display: flex;
   align-items: center;
-  background-color: $ui-02;
-  border-top: 0.0125rem solid $ui-03;
-  border-bottom: 0.0125rem solid $ui-03;
-  padding: 0 spacing.$spacing-05;
+  background-color: colors.$white-0;
+  border-top: 0.0125rem solid colors.$gray-20;
+  border-bottom: 0.0125rem solid colors.$gray-20;
+  padding: 0 layout.$spacing-05;
 }
 
 .searchBarWrapper {
   min-width: 35rem;
 }
 
+.searchBarWrapper > div button {
+  height: auto;
+}
+
 .padded {
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
 }

package/src/form-entry-workflow/styles.scss

@@ -1,13 +1,11 @@
-@use '@carbon/styles/scss/spacing';
 @use '@carbon/colors';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .breadcrumbsContainer > div > div > nav {
-  background-color: $ui-02;
-  padding: spacing.$spacing-04 spacing.$spacing-05;
-  height: spacing.$spacing-08;
+  background-color: colors.$white-0;
+  padding: layout.$spacing-04 layout.$spacing-05;
+  height: layout.$spacing-08;
 }
 
 .workspaceWrapper {
@@ -20,22 +18,23 @@
 }
 
 .selectPatientMessage {
-  @include type.type-style('productive-heading-03');
-  margin: spacing.$spacing-07;
+  @include type.type-style('heading-03');
+  margin: layout.$spacing-07;
   text-align: center;
 }
 
 .formMainContent {
   display: flex;
   text-align: center;
-  margin-top: spacing.$spacing-05;
-  column-gap: spacing.$spacing-05;
+  margin-top: layout.$spacing-05;
+  column-gap: layout.$spacing-05;
 }
 
 .formContainer {
   flex-grow: 1;
   max-height: calc(100vh - 14rem);
   overflow-y: scroll;
+  text-align: left;
 }
 
 .formContainer :global(.cds--form-item) :global(.question-area) {
@@ -43,20 +42,20 @@
 }
 
 .rightPanel {
-  width: 13rem;
+  min-width: 13rem;
   text-align: left;
   overflow-y: scroll;
 }
 
 .patientCardsSection {
-  margin: spacing.$spacing-05 0;
+  margin: layout.$spacing-05 0;
   border-bottom: 1px solid colors.$gray-10;
 }
 
 .rightPanelActionButtons {
   display: flex;
   flex-direction: column;
-  row-gap: spacing.$spacing-03;
+  row-gap: layout.$spacing-03;
   & button {
     width: 100%;
     text-decoration: "none";

package/src/form-entry-workflow/workflow-review/WorkflowReview.tsx

@@ -4,21 +4,23 @@ import { useNavigate } from "react-router-dom";
 import FormWorkflowContext from "../../context/FormWorkflowContext";
 import FormReviewCard from "../form-review-card";
 import styles from "./styles.scss";
+import { useTranslation } from "react-i18next";
 
 const WorkflowReview = () => {
   const { patientUuids } = useContext(FormWorkflowContext);
+  const { t } = useTranslation();
   const navigate = useNavigate();
   return (
     <div className={styles.workspaceWrapper}>
       <div className={styles.workspace}>
         <div className={styles.leftPanel}>
-          <h4>Review</h4>
+          <h4>{t("review", "Review")}</h4>
           <div className={styles.navButtons}>
             <Button kind="primary" onClick={() => navigate("/")}>
-              Save & Close
+              {t("save&close", "Save & Close")}
             </Button>
             <Button kind="tertiary" onClick={() => navigate("/")}>
-              Cancel
+              {t("cancel", "Cancel")}
             </Button>
           </div>
         </div>

package/src/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-page/FormsPage.tsx

@@ -1,7 +1,7 @@
-import { useConfig } from "@openmrs/esm-framework";
+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 { type Config } from "../config-schema";
 import { useGetAllForms } from "../hooks";
 import FormsTable from "./forms-table";
 import styles from "./styles.scss";
@@ -44,13 +44,18 @@ 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 savedFormsData = localStorage.getItem(fdeWorkflowStorageName);
-  const savedGroupFormsData = localStorage.getItem(fdeGroupWorkflowStorageName);
+  const { user } = useSession();
+  const savedFormsData = localStorage.getItem(
+    fdeWorkflowStorageName + ":" + user?.uuid
+  );
+  const savedGroupFormsData = localStorage.getItem(
+    fdeGroupWorkflowStorageName + ":" + user?.uuid
+  );
   const activeForms = [];
   const activeGroupForms = [];
 

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

@@ -28,10 +28,11 @@ const FormsTable = ({
 }) => {
   const { t } = useTranslation();
 
-  const formsHeader = [
+  const tableHeaders = [
     {
       key: "display",
       header: t("formName", "Form Name"),
+      isSortable: true,
     },
     {
       key: "actions",
@@ -43,7 +44,7 @@ const FormsTable = ({
     },
   ];
 
-  const augmenteRows = rows?.map((row) => ({
+  const augmentedRows = rows?.map((row) => ({
     ...row,
     actions: (
       <Link to={`form/${row.uuid}`}>
@@ -70,7 +71,7 @@ const FormsTable = ({
       />
     );
   }
-  if (augmenteRows.length === 0) {
+  if (augmentedRows.length === 0) {
     return (
       <EmptyState
         headerTitle={t("noFormsFound", "No Forms To Show")}
@@ -82,7 +83,7 @@ const FormsTable = ({
     );
   }
   return (
-    <DataTable rows={augmenteRows} headers={formsHeader} isSortable>
+    <DataTable rows={augmentedRows} headers={tableHeaders}>
       {({
         rows,
         headers,
@@ -104,7 +105,12 @@ const FormsTable = ({
               <TableHead>
                 <TableRow>
                   {headers.map((header) => (
-                    <TableHeader {...getHeaderProps({ header })}>
+                    <TableHeader
+                      {...getHeaderProps({
+                        header,
+                        isSortable: header.isSortable,
+                      })}
+                    >
                       {header.header}
                     </TableHeader>
                   ))}

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/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;
 }