@openmrs/esm-fast-data-entry-app 1.0.1-pre.17 → 1.0.1-pre.176

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

@@ -1,24 +1,26 @@
-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";
+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';
+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
+            <Button kind="primary" onClick={() => navigate('/')}>
+              {t('save&close', 'Save & Close')}
             </Button>
-            <Button kind="tertiary" onClick={() => navigate("/")}>
-              Cancel
+            <Button kind="tertiary" onClick={() => navigate('/')}>
+              {t('cancel', 'Cancel')}
             </Button>
           </div>
         </div>

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

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

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-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 FormsAppMenuLink() {
   const { t } = useTranslation();
   return (
     // eslint-disable-next-line
-    <ConfigurableLink to="${openmrsSpaBase}/forms">
-      {t("formsAppMenuLink", "Fast Data Entry")}
-    </ConfigurableLink>
+    <ConfigurableLink to="${openmrsSpaBase}/forms">{t('formsAppMenuLink', 'Fast Data Entry')}</ConfigurableLink>
   );
 }

package/src/forms-page/FormsPage.tsx

@@ -1,19 +1,13 @@
-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";
+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,36 +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 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 = [];
 
-  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);
-      }
+      },
     );
   }
 
@@ -89,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}>
@@ -107,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,85 +12,66 @@ 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 formsHeader = [
+  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: '',
     },
   ];
 
-  const augmenteRows = rows?.map((row) => ({
+  const augmentedRows = rows?.map((row) => ({
     ...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 (augmenteRows.length === 0) {
+  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={augmenteRows} headers={formsHeader} isSortable>
-      {({
-        rows,
-        headers,
-        getTableProps,
-        getHeaderProps,
-        getRowProps,
-        onInputChange,
-      }) => {
+    <DataTable rows={augmentedRows} headers={tableHeaders}>
+      {({ rows, headers, getTableProps, getHeaderProps, getRowProps, onInputChange }) => {
         return (
           <TableContainer>
             <div className={styles.toolbarWrapper}>
@@ -104,7 +85,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/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;
 }