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

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

@@ -0,0 +1,64 @@
+@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.$spacing-04 spacing.$spacing-05;
+  height: spacing.$spacing-08;
+}
+
+.workspaceWrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.workspace {
+  width: 1100px;
+}
+
+.selectPatientMessage {
+  @include type.type-style('productive-heading-03');
+  margin: spacing.$spacing-07;
+  text-align: center;
+}
+
+.formMainContent {
+  display: flex;
+  text-align: center;
+  margin-top: spacing.$spacing-05;
+  column-gap: spacing.$spacing-05;
+}
+
+.formContainer {
+  flex-grow: 1;
+  max-height: calc(100vh - 14rem);
+  overflow-y: scroll;
+}
+
+.formContainer :global(.cds--form-item) :global(.question-area) {
+  max-width: 100%;
+}
+
+.rightPanel {
+  width: 13rem;
+  text-align: left;
+  overflow-y: scroll;
+}
+
+.patientCardsSection {
+  margin: spacing.$spacing-05 0;
+  border-bottom: 1px solid colors.$gray-10;
+}
+
+.rightPanelActionButtons {
+  display: flex;
+  flex-direction: column;
+  row-gap: spacing.$spacing-03;
+  & button {
+    width: 100%;
+    text-decoration: "none";
+  }
+}

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

@@ -0,0 +1,35 @@
+import { Button } from "@carbon/react";
+import React, { useContext } from "react";
+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 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={() => navigate("/")}>
+              Save & Close
+            </Button>
+            <Button kind="tertiary" onClick={() => navigate("/")}>
+              Cancel
+            </Button>
+          </div>
+        </div>
+        <div className={styles.formContainer}>
+          {patientUuids.map((patientUuid) => (
+            <FormReviewCard patientUuid={patientUuid} key={patientUuid} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WorkflowReview;

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

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

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

@@ -0,0 +1,34 @@
+@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;
+}
+
+.workspace {
+  display: flex;
+  width: 800px;
+  margin-top: 1rem;
+  column-gap: 1rem;
+}
+
+.leftPanel {
+  width: 13rem;
+  overflow-y: scroll;
+}
+
+.navButtons {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.5rem;
+}
+
+.formContainer {
+  flex-grow: 1;
+  max-height: calc(100vh - 14rem);
+  overflow-y: scroll;
+  row-gap: 1rem;
+}

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

@@ -2,11 +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

@@ -0,0 +1,129 @@
+import { useConfig } 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";
+
+// helper function useful for debugging
+// given a list of forms, it will organize into permissions
+// and list which forms are associated with that permission
+export const getFormPermissions = (forms) => {
+  const output = {};
+  forms?.forEach(
+    (form) =>
+      (output[form.encounterType.editPrivilege.display] = [
+        ...(output[form.encounterType.editPrivilege.display] || []),
+        form.display,
+      ])
+  );
+  return output;
+};
+
+// Function adds `id` field to rows so they will be accepted by DataTable
+// "display" is prefered for display name if present, otherwise fall back on "name'"
+const prepareRowsForTable = (rawFormData) => {
+  if (rawFormData) {
+    return rawFormData?.map((form) => ({
+      ...form,
+      id: form.uuid,
+      display: form.display || form.name,
+    }));
+  }
+  return null;
+};
+
+const FormsPage = () => {
+  const config = useConfig() as Config;
+  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 activeForms = [];
+  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);
+      }
+    );
+  }
+
+  const categoryRows = formCategoriesToShow.map((name) => {
+    const category = formCategories.find((category) => category.name === name);
+    let rows = [];
+    if (category && cleanRows && cleanRows.length) {
+      const uuids = category.forms?.map((form) => form.formUUID);
+      rows = cleanRows.filter((row) => uuids.includes(row.uuid));
+    }
+    return { ...{ name, rows } };
+  });
+
+  return (
+    <div className={styles.mainContent}>
+      <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>
+  );
+};
+
+export default FormsPage;

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

@@ -0,0 +1,131 @@
+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 formsHeader = [
+    {
+      key: "display",
+      header: t("formName", "Form Name"),
+    },
+    {
+      key: "actions",
+      header: t("actions", "Actions"),
+    },
+    {
+      key: "actions2",
+      header: "",
+    },
+  ];
+
+  const augmenteRows = 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 (augmenteRows.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={augmenteRows} headers={formsHeader} isSortable>
+      {({
+        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 })}>
+                      {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,20 @@
+@import "~@openmrs/esm-styleguide/src/vars";
+@import "~carbon-components/src/globals/scss/vars";
+@import "~carbon-components/src/globals/scss/mixins";
+
+.toolbarWrapper {
+  position: relative;
+  display: flex;
+  height: $spacing-09;
+  justify-content: flex-end;
+}
+
+.tableToolbar {
+  width: 20%;
+  min-width: 12.5rem;
+}
+
+.inactiveLink {
+  color: $carbon--gray-40;
+  cursor: not-allowed;
+}

package/src/forms-page/index.ts

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

package/src/forms-page/styles.scss

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