@openmrs/esm-fast-data-entry-app 1.0.1-pre.99 → 1.1.0

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

@@ -1,19 +1,18 @@
-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 FormWorkflowContext, {
-  FormWorkflowProvider,
-} from "../context/FormWorkflowContext";
-import WorkflowReview from "./workflow-review";
-import PatientBanner from "./patient-banner";
-import CompleteModal from "../CompleteModal";
-import CancelModal from "../CancelModal";
-import useStartVisit from "../hooks/useStartVisit";
+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';
+import CompleteModal from '../CompleteModal';
+import CancelModal from '../CancelModal';
+import useStartVisit from '../hooks/useStartVisit';
 
 const WorkflowNavigationButtons = () => {
   const context = useContext(FormWorkflowContext);
@@ -29,28 +28,16 @@ const WorkflowNavigationButtons = () => {
       <div className={styles.rightPanelActionButtons}>
         <Button
           kind="secondary"
-          onClick={
-            workflowState === "NEW_PATIENT"
-              ? () => destroySession()
-              : () => setCompleteModalOpen(true)
-          }
+          onClick={workflowState === 'NEW_PATIENT' ? () => destroySession() : () => setCompleteModalOpen(true)}
         >
-          {t("saveAndComplete", "Save & Complete")}
+          {t('saveAndComplete', 'Save & Complete')}
         </Button>
         <Button kind="tertiary" onClick={() => setCancelModalOpen(true)}>
-          {t("cancel", "Cancel")}
+          {t('cancel', 'Cancel')}
         </Button>
       </div>
-      <CancelModal
-        open={cancelModalOpen}
-        setOpen={setCancelModalOpen}
-        context={context}
-      />
-      <CompleteModal
-        open={completeModalOpen}
-        setOpen={setCompleteModalOpen}
-        context={context}
-      />
+      <CancelModal open={cancelModalOpen} setOpen={setCancelModalOpen} context={context} />
+      <CompleteModal open={completeModalOpen} setOpen={setCompleteModalOpen} context={context} />
     </>
   );
 };
@@ -72,11 +59,7 @@ const FormWorkspace = () => {
   const [visit, setVisit] = useState(null);
   const { sessionLocation } = useSession();
 
-  const {
-    saveVisit,
-    updateEncounter,
-    success: visitSaveSuccess,
-  } = useStartVisit({
+  const { updateEncounter, success: visitSaveSuccess } = useStartVisit({
     showSuccessNotification: false,
     showErrorNotification: true,
   });
@@ -104,29 +87,34 @@ const FormWorkspace = () => {
   const handleEncounterCreate = useCallback(
     (payload) => {
       payload.location = sessionLocation?.uuid;
-      payload.encounterDatetime = payload.encounterDatetime
-        ? payload.encounterDatetime
-        : new Date().toISOString();
+      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);
-      saveVisit({
-        patientUuid: activePatientUuid,
-        startDatetime: visitStartDatetime.toISOString(),
-        stopDatetime: visitStopDatetime.toISOString(),
-        visitType: singleSessionVisitTypeUuid,
-        location: sessionLocation?.uuid,
-      });
+      const visitInfo = {
+        startDatetime: visitStartDatetime,
+        stopDatetime: visitStopDatetime,
+        uuid: uuid(),
+        patient: {
+          uuid: activePatientUuid,
+        },
+        location: {
+          uuid: sessionLocation?.uuid,
+        },
+        visitType: {
+          uuid: singleSessionVisitTypeUuid,
+        },
+      };
+
+      payload.visit = visitInfo;
     },
-    [activePatientUuid, singleSessionVisitTypeUuid, saveVisit, sessionLocation]
+    [activePatientUuid, singleSessionVisitTypeUuid, sessionLocation],
   );
 
   return (
     <div className={styles.workspace}>
       {!patientUuids.length && (
-        <div className={styles.selectPatientMessage}>
-          {t("selectPatientFirst", "Please select a patient first")}
-        </div>
+        <div className={styles.selectPatientMessage}>{t('selectPatientFirst', 'Please select a patient first')}</div>
       )}
       {!!patientUuids.length && (
         <div className={styles.formMainContent}>
@@ -142,7 +130,7 @@ const FormWorkspace = () => {
             />
           </div>
           <div className={styles.rightPanel}>
-            <h4>Forms filled</h4>
+            <h4>{t('formsFilled', 'Forms filled')}</h4>
             <div className={styles.patientCardsSection}>
               {patientUuids.map((patientUuid) => (
                 <PatientCard
@@ -171,8 +159,8 @@ const FormEntryWorkflow = () => {
       <div className={styles.breadcrumbsContainer}>
         <ExtensionSlot extensionSlotName="breadcrumbs-slot" />
       </div>
-      {workflowState === "REVIEW" && <WorkflowReview />}
-      {workflowState !== "REVIEW" && (
+      {workflowState === 'REVIEW' && <WorkflowReview />}
+      {workflowState !== 'REVIEW' && (
         <>
           <PatientSearchHeader />
           <PatientBanner />

package/src/form-entry-workflow/form-review-card/FormReviewCard.tsx

@@ -1,9 +1,9 @@
-import { Accordion, AccordionItem, Button } from "@carbon/react";
-import React, { useContext } from "react";
-import { useTranslation } from "react-i18next";
-import FormWorkflowContext from "../../context/FormWorkflowContext";
-import { useGetPatient, useGetEncounter } from "../../hooks";
-import styles from "./styles.scss";
+import { Accordion, AccordionItem, Button } from '@carbon/react';
+import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import FormWorkflowContext from '../../context/FormWorkflowContext';
+import { useGetPatient, useGetEncounter } from '../../hooks';
+import styles from './styles.scss';
 
 const FormReviewCard = ({ patientUuid }) => {
   const { encounters, editEncounter } = useContext(FormWorkflowContext);
@@ -39,7 +39,7 @@ const FormReviewCard = ({ patientUuid }) => {
             </div>
           )}
           <Button kind="primary" onClick={() => editEncounter(patientUuid)}>
-            {t("goToForm", "Go To Form")}
+            {t('goToForm', 'Go To Form')}
           </Button>
         </AccordionItem>
       </Accordion>

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

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

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/index.ts

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

package/src/form-entry-workflow/patient-banner/PatientBanner.test.tsx

@@ -1,9 +1,9 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import PatientBanner from "./PatientBanner";
+import React from 'react';
+import { render } from '@testing-library/react';
+import PatientBanner from './PatientBanner';
 
-describe("PatientBanner", () => {
-  it("renders placeholder information when no data is present", () => {
+describe('PatientBanner', () => {
+  it('renders placeholder information when no data is present', () => {
     render(<PatientBanner />);
   });
 });

package/src/form-entry-workflow/patient-banner/PatientBanner.tsx

@@ -1,10 +1,10 @@
-import { age, ExtensionSlot } from "@openmrs/esm-framework";
-import { SkeletonPlaceholder, SkeletonText } from "@carbon/react";
-import React, { useContext } from "react";
-import styles from "./styles.scss";
-import { useTranslation } from "react-i18next";
-import useGetPatient from "../../hooks/useGetPatient";
-import FormWorkflowContext from "../../context/FormWorkflowContext";
+import { age, ExtensionSlot } from '@openmrs/esm-framework';
+import { SkeletonPlaceholder, SkeletonText } from '@carbon/react';
+import React, { useContext } from 'react';
+import styles from './styles.scss';
+import { useTranslation } from 'react-i18next';
+import useGetPatient from '../../hooks/useGetPatient';
+import FormWorkflowContext from '../../context/FormWorkflowContext';
 
 const SkeletonPatientInfo = () => {
   return (
@@ -36,16 +36,14 @@ const PatientBanner = () => {
   const { activePatientUuid, workflowState } = useContext(FormWorkflowContext);
   const patient = useGetPatient(activePatientUuid);
   const { t } = useTranslation();
-  const patientName = `${patient?.name?.[0].given?.join(" ")} ${
-    patient?.name?.[0]?.family
-  }`;
+  const patientName = `${patient?.name?.[0].given?.join(' ')} ${patient?.name?.[0]?.family}`;
 
   const patientPhotoSlotState = React.useMemo(
-    () => ({ patientUuid: patient?.id, patientName, size: "small" }),
-    [patient?.id, patientName]
+    () => ({ patientUuid: patient?.id, patientName, size: 'small' }),
+    [patient?.id, patientName],
   );
 
-  if (workflowState === "NEW_PATIENT") return null;
+  if (workflowState === 'NEW_PATIENT') return null;
 
   if (!patient) {
     return <SkeletonPatientInfo />;
@@ -53,29 +51,18 @@ const PatientBanner = () => {
 
   return (
     <div className={styles.container}>
-      <ExtensionSlot
-        extensionSlotName="patient-photo-slot"
-        state={patientPhotoSlotState}
-      />
+      <ExtensionSlot extensionSlotName="patient-photo-slot" state={patientPhotoSlotState} />
       <div className={styles.patientInfoContent}>
         <div className={styles.patientInfoRow}>
           <span className={styles.patientName}>{patientName}</span>
         </div>
         <div className={styles.patientInfoRow}>
-          <span>
-            {(patient.gender ?? t("unknown", "Unknown")).replace(/^\w/, (c) =>
-              c.toUpperCase()
-            )}
-          </span>
+          <span>{(patient.gender ?? t('unknown', 'Unknown')).replace(/^\w/, (c) => c.toUpperCase())}</span>
           <span>&middot;</span>
           <span>{age(patient.birthDate)}</span>
           <span>&middot;</span>
           <span>
-            {patient.identifier.length
-              ? patient.identifier
-                  .map((identifier) => identifier.value)
-                  .join(", ")
-              : "--"}
+            {patient.identifier.length ? patient.identifier.map((identifier) => identifier.value).join(', ') : '--'}
           </span>
         </div>
       </div>

package/src/form-entry-workflow/patient-banner/index.ts

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

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

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

package/src/form-entry-workflow/patient-search-header/index.ts

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

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,16 +18,16 @@
 }
 
 .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 {
@@ -50,14 +48,14 @@
 }
 
 .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

@@ -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>
   );
 }