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

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

@@ -0,0 +1,184 @@
+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);
+  const { workflowState, destroySession } = context;
+  const [cancelModalOpen, setCancelModalOpen] = useState(false);
+  const [completeModalOpen, setCompleteModalOpen] = useState(false);
+  const { t } = useTranslation();
+
+  if (!workflowState) return null;
+
+  return (
+    <>
+      <div className={styles.rightPanelActionButtons}>
+        <Button
+          kind="secondary"
+          onClick={workflowState === 'NEW_PATIENT' ? () => destroySession() : () => setCompleteModalOpen(true)}
+        >
+          {t('saveAndComplete', 'Save & Complete')}
+        </Button>
+        <Button kind="tertiary" onClick={() => setCancelModalOpen(true)}>
+          {t('cancel', 'Cancel')}
+        </Button>
+      </div>
+      <CancelModal open={cancelModalOpen} setOpen={setCancelModalOpen} context={context} />
+      <CompleteModal open={completeModalOpen} setOpen={setCompleteModalOpen} context={context} />
+    </>
+  );
+};
+
+const FormWorkspace = () => {
+  const {
+    patientUuids,
+    activePatientUuid,
+    activeEncounterUuid,
+    saveEncounter,
+    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 && (
+        <div className={styles.selectPatientMessage}>{t('selectPatientFirst', 'Please select a patient first')}</div>
+      )}
+      {!!patientUuids.length && (
+        <div className={styles.formMainContent}>
+          <div className={styles.formContainer}>
+            <FormBootstrap
+              patientUuid={activePatientUuid}
+              encounterUuid={activeEncounterUuid}
+              {...{
+                formUuid: activeFormUuid,
+                handlePostResponse,
+                handleEncounterCreate,
+              }}
+            />
+          </div>
+          <div className={styles.rightPanel}>
+            <h4>{t('formsFilled', 'Forms filled')}</h4>
+            <div className={styles.patientCardsSection}>
+              {patientUuids.map((patientUuid) => (
+                <PatientCard
+                  key={patientUuid}
+                  {...{
+                    patientUuid,
+                    activePatientUuid,
+                    editEncounter,
+                    encounters,
+                  }}
+                />
+              ))}
+            </div>
+            <WorkflowNavigationButtons />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const FormEntryWorkflow = () => {
+  const { workflowState } = useContext(FormWorkflowContext);
+  return (
+    <>
+      <div className={styles.breadcrumbsContainer}>
+        <ExtensionSlot extensionSlotName="breadcrumbs-slot" />
+      </div>
+      {workflowState === 'REVIEW' && <WorkflowReview />}
+      {workflowState !== 'REVIEW' && (
+        <>
+          <PatientSearchHeader />
+          <PatientBanner />
+          <div className={styles.workspaceWrapper}>
+            <FormWorkspace />
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+const FormEntryWorkflowWrapper = () => {
+  return (
+    <FormWorkflowProvider>
+      <FormEntryWorkflow />
+    </FormWorkflowProvider>
+  );
+};
+
+export default FormEntryWorkflowWrapper;

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

@@ -0,0 +1,50 @@
+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);
+  const patient = useGetPatient(patientUuid);
+  const givenName = patient?.name?.[0]?.given?.[0];
+  const familyName = patient?.name?.[0]?.family;
+  const identifier = patient?.identifier?.[0]?.value;
+  const encounterUuid = encounters?.[patientUuid];
+  const { encounter } = useGetEncounter(encounterUuid);
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.formReviewCard}>
+      <Accordion align="start">
+        <AccordionItem
+          title={
+            <>
+              <span className={styles.identifier}>{identifier}</span>
+              <span className={styles.displayName}>
+                {givenName} {familyName}
+              </span>
+            </>
+          }
+          className={styles.accordionItem}
+        >
+          {encounter && encounter?.obs && encounter.obs?.length && (
+            <div className={styles.dataField}>
+              <ul>
+                {encounter.obs.map((obs, index) => (
+                  <li key={index}>{obs.display}</li>
+                ))}
+              </ul>
+            </div>
+          )}
+          <Button kind="primary" onClick={() => editEncounter(patientUuid)}>
+            {t('goToForm', 'Go To Form')}
+          </Button>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+};
+
+export default FormReviewCard;

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

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

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

@@ -0,0 +1,37 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.formReviewCard {
+  background-color: colors.$white-0;
+  padding: layout.$spacing-02;
+}
+
+.formReviewCard :global(.cds--accordion) :global(.cds--accordion__item) {
+  border: none;
+}
+
+.formReviewCard :global(.cds--accordion__title) {
+  display: flex;
+  align-items: baseline;
+  column-gap: layout.$spacing-05;
+}
+
+.formReviewCard :global(.cds--accordion__content) {
+  padding: layout.$spacing-03;
+}
+
+.dataField {
+  @include type.type-style('code-02');
+  background-color: colors.$gray-10;
+  padding: layout.$spacing-03;
+}
+
+.displayName {
+  @include type.type-style('heading-02');
+  font-weight: bold;
+}
+
+.identifier {
+  @include type.type-style('body-compact-01')
+}

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

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

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

@@ -0,0 +1,9 @@
+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', () => {
+    render(<PatientBanner />);
+  });
+});

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

@@ -0,0 +1,73 @@
+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 (
+    <div className={styles.container}>
+      <SkeletonPlaceholder className={styles.photoPlaceholder} />
+      <div className={styles.patientInfoContent}>
+        <div className={styles.patientInfoRow}>
+          <SkeletonText width="7rem" lineCount={1} />
+        </div>
+        <div className={styles.patientInfoRow}>
+          <span>
+            <SkeletonText width="1rem" lineCount={1} />
+          </span>
+          <span>&middot;</span>
+          <span>
+            <SkeletonText width="1rem" lineCount={1} />
+          </span>
+          <span>&middot;</span>
+          <span>
+            <SkeletonText width="1rem" lineCount={1} />
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+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 patientPhotoSlotState = React.useMemo(
+    () => ({ patientUuid: patient?.id, patientName, size: 'small' }),
+    [patient?.id, patientName],
+  );
+
+  if (workflowState === 'NEW_PATIENT') return null;
+
+  if (!patient) {
+    return <SkeletonPatientInfo />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <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>&middot;</span>
+          <span>{age(patient.birthDate)}</span>
+          <span>&middot;</span>
+          <span>
+            {patient.identifier.length ? patient.identifier.map((identifier) => identifier.value).join(', ') : '--'}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PatientBanner;

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

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

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

@@ -0,0 +1,44 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.container {
+  height: layout.$spacing-11;
+  display: flex;
+  align-items: center;
+  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 {
+  height: 48px;
+  width: 48px;
+}
+
+.patientName {
+  @include type.type-style('heading-03');
+  font-weight: 600;
+}
+
+.patientInfoContent {
+  width: 100%;
+  margin-left: 1rem;
+}
+
+.patientInfoRow {
+  display: flex;
+  align-items: center;
+  & > button {
+    min-height: 2rem;
+  }
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-70;
+  column-gap: 0.8rem;
+}
+
+.patientEditBtn {
+  color: colors.$gray-100;
+  margin: layout.$spacing-03;
+}

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

@@ -0,0 +1,54 @@
+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 handleSelectPatient = (patient) => {
+    addPatient(patient);
+  };
+  const { t } = useTranslation();
+
+  if (workflowState !== 'NEW_PATIENT') return null;
+
+  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.searchBarWrapper}>
+        <ExtensionSlot
+          name="patient-search-bar-slot"
+          state={{
+            selectPatientAction: handleSelectPatient,
+            buttonProps: {
+              kind: 'primary',
+            },
+          }}
+        />
+      </span>
+      <span className={styles.padded}>{t('or', 'or')}</span>
+      <span>
+        <Button onClick={() => navigate({ to: patientRegistrationUrl })}>
+          {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} />
+          </Button>
+        </Link>
+      </span>
+    </div>
+  );
+};
+
+export default PatientSearchHeader;

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

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

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

@@ -0,0 +1,25 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.searchHeaderContainer {
+  height: layout.$spacing-11;
+  display: flex;
+  align-items: center;
+  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: layout.$spacing-05;
+}

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

@@ -0,0 +1,63 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.breadcrumbsContainer > div > div > nav {
+  background-color: colors.$white-0;
+  padding: layout.$spacing-04 layout.$spacing-05;
+  height: layout.$spacing-08;
+}
+
+.workspaceWrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.workspace {
+  width: 1100px;
+}
+
+.selectPatientMessage {
+  @include type.type-style('heading-03');
+  margin: layout.$spacing-07;
+  text-align: center;
+}
+
+.formMainContent {
+  display: flex;
+  text-align: center;
+  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) {
+  max-width: 100%;
+}
+
+.rightPanel {
+  min-width: 13rem;
+  text-align: left;
+  overflow-y: scroll;
+}
+
+.patientCardsSection {
+  margin: layout.$spacing-05 0;
+  border-bottom: 1px solid colors.$gray-10;
+}
+
+.rightPanelActionButtons {
+  display: flex;
+  flex-direction: column;
+  row-gap: layout.$spacing-03;
+  & button {
+    width: 100%;
+    text-decoration: "none";
+  }
+}

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

@@ -0,0 +1,37 @@
+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>{t('review', 'Review')}</h4>
+          <div className={styles.navButtons}>
+            <Button kind="primary" onClick={() => navigate('/')}>
+              {t('save&close', 'Save & Close')}
+            </Button>
+            <Button kind="tertiary" onClick={() => navigate('/')}>
+              {t('cancel', '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,30 @@
+.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

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