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

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

@@ -1,26 +1,28 @@
-import { Add20, Close20 } from "@carbon/icons-react";
+import { Add, Close } from "@carbon/react/icons";
 import {
   ExtensionSlot,
   interpolateUrl,
   navigate,
 } from "@openmrs/esm-framework";
-import { Button } from "carbon-components-react";
+import { Button } from "@carbon/react";
 import React, { useContext } from "react";
 import { Link } from "react-router-dom";
-import FormWorkflowContext from "../context/FormWorkflowContext";
+import FormWorkflowContext from "../../context/FormWorkflowContext";
 import styles from "./styles.scss";
+import { useTranslation } from "react-i18next";
 
 const PatientSearchHeader = () => {
   const { addPatient, workflowState, activeFormUuid } =
     useContext(FormWorkflowContext);
-  const handleSelectPatient = (uuid) => {
-    addPatient(uuid);
+  const handleSelectPatient = (patient) => {
+    addPatient(patient.uuid);
   };
+  const { t } = useTranslation();
 
   if (workflowState !== "NEW_PATIENT") return null;
 
   const afterUrl = encodeURIComponent(
-    `\${openmrsSpaBase}/forms/${activeFormUuid}?patientUuid=\${patientUuid}`
+    `\${openmrsSpaBase}/forms/form/${activeFormUuid}?patientUuid=\${patientUuid}`
   );
   const patientRegistrationUrl = interpolateUrl(
     `\${openmrsSpaBase}/patient-registration?afterUrl=${afterUrl}`
@@ -28,7 +30,7 @@ const PatientSearchHeader = () => {
 
   return (
     <div className={styles.searchHeaderContainer}>
-      <span className={styles.padded}>Next patient:</span>
+      <span className={styles.padded}>{t("nextPatient", "Next patient")}:</span>
       <span className={styles.searchBarWrapper}>
         <ExtensionSlot
           extensionSlotName="patient-search-bar-slot"
@@ -40,17 +42,17 @@ const PatientSearchHeader = () => {
           }}
         />
       </span>
-      <span className={styles.padded}>or</span>
+      <span className={styles.padded}>{t("or", "or")}</span>
       <span>
         <Button onClick={() => navigate({ to: patientRegistrationUrl })}>
-          Create new patient <Add20 />
+          {t("createNewPatient", "Create new patient")} <Add size={20} />
         </Button>
       </span>
       <span style={{ flexGrow: 1 }} />
       <span>
-        <Link to="">
+        <Link to="../">
           <Button kind="ghost">
-            Cancel <Close20 />
+            {t("cancel", "Cancel")} <Close size={20} />
           </Button>
         </Link>
       </span>

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

@@ -0,0 +1,22 @@
+@use '@carbon/styles/scss/spacing';
+// @use '@carbon/colors';
+// @use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.searchHeaderContainer {
+  height: spacing.$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;
+}
+
+.searchBarWrapper {
+  min-width: 35rem;
+}
+
+.padded {
+  padding: spacing.$spacing-05;
+}

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

@@ -1,12 +1,13 @@
-@import "~@openmrs/esm-styleguide/src/vars";
-@import "~carbon-components/src/globals/scss/vars";
-@import "~carbon-components/src/globals/scss/mixins";
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/colors';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
 
 
 .breadcrumbsContainer > div > div > nav {
   background-color: $ui-02;
-  padding: $spacing-04 $spacing-05;
-  height: $spacing-08;
+  padding: spacing.$spacing-04 spacing.$spacing-05;
+  height: spacing.$spacing-08;
 }
 
 .workspaceWrapper {
@@ -19,16 +20,16 @@
 }
 
 .selectPatientMessage {
-  @include carbon--type-style('productive-heading-03');
-  margin: $spacing-07;
+  @include type.type-style('productive-heading-03');
+  margin: spacing.$spacing-07;
   text-align: center;
 }
 
 .formMainContent {
   display: flex;
   text-align: center;
-  margin-top: $spacing-05;
-  column-gap: $spacing-05;
+  margin-top: spacing.$spacing-05;
+  column-gap: spacing.$spacing-05;
 }
 
 .formContainer {
@@ -37,7 +38,7 @@
   overflow-y: scroll;
 }
 
-.formContainer :global(.bx--form-item) :global(.question-area) {
+.formContainer :global(.cds--form-item) :global(.question-area) {
   max-width: 100%;
 }
 
@@ -48,14 +49,14 @@
 }
 
 .patientCardsSection {
-  margin: $spacing-05 0;
-  border-bottom: 1px solid $carbon--gray-10;
+  margin: spacing.$spacing-05 0;
+  border-bottom: 1px solid colors.$gray-10;
 }
 
 .rightPanelActionButtons {
   display: flex;
   flex-direction: column;
-  row-gap: $spacing-03;
+  row-gap: spacing.$spacing-03;
   & button {
     width: 100%;
     text-decoration: "none";

package/src/{workflow-review → form-entry-workflow/workflow-review}/WorkflowReview.tsx

@@ -1,23 +1,23 @@
-import { Button } from "carbon-components-react";
+import { Button } from "@carbon/react";
 import React, { useContext } from "react";
-import { useHistory } from "react-router-dom";
-import FormWorkflowContext from "../context/FormWorkflowContext";
+import { useNavigate } from "react-router-dom";
+import FormWorkflowContext from "../../context/FormWorkflowContext";
 import FormReviewCard from "../form-review-card";
 import styles from "./styles.scss";
 
 const WorkflowReview = () => {
   const { patientUuids } = useContext(FormWorkflowContext);
-  const history = useHistory();
+  const navigate = useNavigate();
   return (
     <div className={styles.workspaceWrapper}>
       <div className={styles.workspace}>
         <div className={styles.leftPanel}>
           <h4>Review</h4>
           <div className={styles.navButtons}>
-            <Button kind="primary" onClick={() => history.push("/")}>
+            <Button kind="primary" onClick={() => navigate("/")}>
               Save & Close
             </Button>
-            <Button kind="tertiary" onClick={() => history.push("/")}>
+            <Button kind="tertiary" onClick={() => navigate("/")}>
               Cancel
             </Button>
           </div>

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

@@ -2,12 +2,12 @@ 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")}
+      {t("formsAppMenuLink", "Fast Data Entry")}
     </ConfigurableLink>
   );
 }

package/src/forms-page/FormsPage.tsx

@@ -1,15 +1,19 @@
 import { useConfig } from "@openmrs/esm-framework";
-import { Tab, Tabs } from "carbon-components-react";
+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 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
@@ -45,18 +49,33 @@ const FormsPage = () => {
   const { formCategories, formCategoriesToShow } = config;
   const { forms, isLoading, error } = useGetAllForms();
   const cleanRows = prepareRowsForTable(forms);
-  const savedData = localStorage.getItem(fdeWorkflowStorageName);
+  const savedFormsData = localStorage.getItem(fdeWorkflowStorageName);
+  const savedGroupFormsData = localStorage.getItem(fdeGroupWorkflowStorageName);
   const activeForms = [];
+  const activeGroupForms = [];
+
   if (
-    savedData &&
-    JSON.parse(savedData)?.["_storageVersion"] === fdeWorkflowStorageVersion
+    savedFormsData &&
+    JSON.parse(savedFormsData)?.["_storageVersion"] ===
+      fdeWorkflowStorageVersion
   ) {
-    Object.entries(JSON.parse(savedData).forms).forEach(
+    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);
+      }
+    );
+  }
 
   const categoryRows = formCategoriesToShow.map((name) => {
     const category = formCategories.find((category) => category.name === name);
@@ -70,23 +89,38 @@ 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}>
+      <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={category.rows}
-              {...{ error, isLoading, activeForms }}
+              rows={cleanRows}
+              {...{ error, isLoading, activeForms, activeGroupForms }}
             />
-          </Tab>
-        ))}
+          </TabPanel>
+          {categoryRows?.map((category, index) => (
+            <TabPanel key={index}>
+              <FormsTable
+                rows={category.rows}
+                {...{ error, isLoading, activeForms, activeGroupForms }}
+              />
+            </TabPanel>
+          ))}
+        </TabPanels>
       </Tabs>
     </div>
   );

package/src/{forms-table → forms-page/forms-table}/FormsTable.tsx

@@ -12,14 +12,20 @@ import {
   TableToolbar,
   TableToolbarContent,
   TableToolbarSearch,
-} from "carbon-components-react";
+} 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 EmptyState from "../../empty-state/EmptyState";
 import styles from "./styles.scss";
 
-const FormsTable = ({ rows, error, isLoading, activeForms }) => {
+const FormsTable = ({
+  rows,
+  error,
+  isLoading,
+  activeForms,
+  activeGroupForms,
+}) => {
   const { t } = useTranslation();
 
   const formsHeader = [
@@ -40,15 +46,17 @@ const FormsTable = ({ rows, error, isLoading, activeForms }) => {
   const augmenteRows = rows?.map((row) => ({
     ...row,
     actions: (
-      <Link to={row.uuid}>
+      <Link to={`form/${row.uuid}`}>
         {activeForms.includes(row.uuid)
           ? t("resumeSession", "Resume Session")
           : t("fillForm", "Fill Form")}
       </Link>
     ),
     actions2: (
-      <Link to="#" className={styles.inactiveLink}>
-        {t("startGroupSession", "Start Group Session")}
+      <Link to={`groupform/${row.uuid}`}>
+        {activeGroupForms.includes(row.uuid)
+          ? t("resumeGroupSession", "Resume Group Session")
+          : t("startGroupSession", "Start Group Session")}
       </Link>
     ),
   }));

package/src/forms-page/styles.scss

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