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

package/src/patient-banner/PatientBanner.tsx

@@ -1,76 +1,51 @@
-import {
-  age,
-  ExtensionSlot,
-  formatDate,
-  parseDate,
-} from "@openmrs/esm-framework";
-import {
-  Button,
-  SkeletonPlaceholder,
-  SkeletonText,
-} from "carbon-components-react";
-import React, { useState } from "react";
+import { age, ExtensionSlot } from "@openmrs/esm-framework";
+import { SkeletonPlaceholder, SkeletonText } from "carbon-components-react";
+import React, { useContext } from "react";
 import styles from "./styles.scss";
-import ChevronDown16 from "@carbon/icons-react/es/chevron--down/16";
-import ChevronUp16 from "@carbon/icons-react/es/chevron--up/16";
 import { useTranslation } from "react-i18next";
 import useGetPatient from "../hooks/useGetPatient";
-interface PatientInfoProps {
-  patientUuid: string;
-}
+import FormWorkflowContext from "../context/FormWorkflowContext";
 
 const SkeletonPatientInfo = () => {
   return (
     <div className={styles.container}>
-      <div className={styles.patientInfoContainer}>
-        <SkeletonPlaceholder />
-        <div className={styles.patientInfoContent}>
-          <div className={styles.patientInfoRow}>
-            <span className={styles.patientName}>
-              <SkeletonText />
-            </span>
-          </div>
-          <div className={styles.patientInfoRow}>
-            <div className={styles.demographics}>
-              <span>
-                <SkeletonText />
-              </span>
-              <span>
-                <SkeletonText />
-              </span>
-              <span>
-                <SkeletonText />
-              </span>
-            </div>
-          </div>
-          <div className={styles.patientInfoRow}>
-            <span className={styles.identifier}>
-              <SkeletonText />
-            </span>
-          </div>
+      <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 PatientInfo: React.FC<PatientInfoProps> = ({ patientUuid }) => {
-  const patient = useGetPatient(patientUuid);
+const PatientBanner = () => {
+  const { activePatientUuid, workflowState } = useContext(FormWorkflowContext);
+  const patient = useGetPatient(activePatientUuid);
   const { t } = useTranslation();
-  const [showContactDetails, setShowContactDetails] = useState<boolean>(false);
   const patientName = `${patient?.name?.[0].given?.join(" ")} ${
     patient?.name?.[0]?.family
   }`;
 
   const patientPhotoSlotState = React.useMemo(
-    () => ({ patientUuid: patient?.id, patientName }),
+    () => ({ patientUuid: patient?.id, patientName, size: "small" }),
     [patient?.id, patientName]
   );
 
-  const toggleShowMore = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setShowContactDetails((prevState) => !prevState);
-  };
+  if (workflowState === "NEW_PATIENT") return null;
 
   if (!patient) {
     return <SkeletonPatientInfo />;
@@ -78,63 +53,34 @@ const PatientInfo: React.FC<PatientInfoProps> = ({ patientUuid }) => {
 
   return (
     <div className={styles.container}>
-      <div
-        className={`${
-          showContactDetails
-            ? styles.activePatientInfoContainer
-            : styles.patientInfoContainer
-        }`}
-      >
-        <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}>
-            <div className={styles.demographics}>
-              <span>
-                {(patient.gender ?? t("unknown", "Unknown")).replace(
-                  /^\w/,
-                  (c) => c.toUpperCase()
-                )}{" "}
-                &middot;{" "}
-              </span>
-              <span>{age(patient.birthDate)} &middot; </span>
-              <span>
-                {formatDate(parseDate(patient.birthDate), {
-                  mode: "wide",
-                  time: false,
-                })}
-              </span>
-            </div>
-          </div>
-          <div className={styles.patientInfoRow}>
-            <span className={styles.identifier}>
-              {patient.identifier.length
-                ? patient.identifier
-                    .map((identifier) => identifier.value)
-                    .join(", ")
-                : "--"}
-            </span>
-            <Button
-              kind="ghost"
-              renderIcon={showContactDetails ? ChevronUp16 : ChevronDown16}
-              iconDescription="Toggle contact details"
-              onClick={(e) => toggleShowMore(e)}
-              disabled
-            >
-              {showContactDetails
-                ? t("showLess", "Show less")
-                : t("showAllDetails", "Show all details")}
-            </Button>
-          </div>
+      <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 PatientInfo;
+export default PatientBanner;

package/src/patient-banner/styles.scss

@@ -3,54 +3,39 @@
 @import '~carbon-components/src/globals/scss/mixins';
 
 .container {
-  border-bottom: 0.0125rem solid $color-gray-30;
-  background-color: $ui-02;
-  padding: 0;
-}
-
-.patientInfoContainer {
-  padding: 0 0 0 $spacing-05;
+  height: $spacing-11;
   display: flex;
   align-items: center;
-  min-height: 7rem;
+  background-color: $ui-02;
+  border-top: 0.0125rem solid $ui-03;
+  border-bottom: 0.0125rem solid $ui-03;
+  padding: 0 $spacing-05;
 }
 
-.activePatientInfoContainer {
-  background-color: $color-blue-10;
-  padding: 0 0 0 $spacing-05;
-  display: flex;
-  align-items: center;
-  min-height: 7rem;
+.photoPlaceholder {
+  height: 48px;
+  width: 48px;
 }
 
 .patientName {
   @include carbon--type-style('productive-heading-03');
+  font-weight: 600;
 }
 
 .patientInfoContent {
-  margin: $spacing-05 0 0 $spacing-05;
   width: 100%;
-}
-
-.demographics {
-  @include carbon--type-style('body-short-02');
-  color: $text-02;
-  margin-top: $spacing-02;
-}
-
-.identifier {
-  @include carbon--type-style('body-short-02');
-  color: $ui-04;
+  margin-left: 1rem;
 }
 
 .patientInfoRow {
   display: flex;
-  justify-content: space-between;
   align-items: center;
-
   & > button {
     min-height: 2rem;
   }
+  @include carbon--type-style('body-short-02');
+  color: $text-02;
+  column-gap: 0.8rem;
 }
 
 .patientEditBtn {

package/src/patient-card/PatientCard.tsx

@@ -7,8 +7,8 @@ import styles from "./styles.scss";
 const CardContainer = ({ active, onClick, children }) => {
   return (
     <div
-      className={`${styles.cardContainer} ${!active && styles.hoverable}`}
-      onClick={onClick}
+      className={`${styles.cardContainer} ${!active && styles.inactiveCard}`}
+      onClick={active ? onClick : () => {}}
       role="button"
       tabIndex={0}
     >

package/src/patient-card/styles.scss

@@ -4,13 +4,8 @@
 
 .cardContainer {
   padding: $spacing-05;
-  &:hover {
-    background-color: $carbon--gray-40;
-  }
 }
 
-
-
 .skeletonText {
   max-width: 8rem;
 }
@@ -28,3 +23,9 @@
 .activeDisplayName {
   color: $carbon--blue-50;
 }
+
+.inactiveCard {
+  &:hover {
+    background-color: $carbon--gray-40;
+  }
+}

package/src/patient-search-header/PatientSearchHeader.tsx

@@ -7,11 +7,13 @@ import FormWorkflowContext from "../context/FormWorkflowContext";
 import styles from "./styles.scss";
 
 const PatientSearchHeader = () => {
-  const { addPatient } = useContext(FormWorkflowContext);
+  const { addPatient, workflowState } = useContext(FormWorkflowContext);
   const handleSelectPatient = (uuid) => {
     addPatient(uuid);
   };
 
+  if (workflowState !== "NEW_PATIENT") return null;
+
   return (
     <div className={styles.searchHeaderContainer}>
       <span className={styles.padded}>Next patient:</span>

package/src/patient-search-header/styles.scss

@@ -3,9 +3,13 @@
 @import "~carbon-components/src/globals/scss/mixins";
 
 .searchHeaderContainer {
+  height: $spacing-11;
   display: flex;
-  background-color: white;
-  padding: $spacing-07 $spacing-05;
+  align-items: center;
+  background-color: $ui-02;
+  border-top: 0.0125rem solid $ui-03;
+  border-bottom: 0.0125rem solid $ui-03;
+  padding: 0 $spacing-05;
 }
 
 .searchBarWrapper {

package/src/workflow-review/WorkflowReview.tsx

@@ -0,0 +1,36 @@
+import { Button } from "carbon-components-react";
+import React, { useContext } from "react";
+import { useHistory } from "react-router-dom";
+import FormWorkflowContext from "../context/FormWorkflowContext";
+import FormReviewCard from "../form-review-card";
+import PatientCard from "../patient-card";
+import styles from "./styles.scss";
+
+const WorkflowReview = () => {
+  const { patientUuids } = useContext(FormWorkflowContext);
+  const history = useHistory();
+  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("/")}>
+              Save & Close
+            </Button>
+            <Button kind="tertiary" onClick={() => history.push("/")}>
+              Cancel
+            </Button>
+          </div>
+        </div>
+        <div className={styles.formContainer}>
+          {patientUuids.map((patientUuid) => (
+            <FormReviewCard patientUuid={patientUuid} key={patientUuid} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WorkflowReview;

package/src/workflow-review/index.ts

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

package/src/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/translations/en.json

@@ -6,6 +6,7 @@
   "fillForm": "Fill Form",
   "formalGreeting": "hello",
   "formName": "Form Name",
+  "goToForm": "Go To Form",
   "noFormsFound": "No Forms To Show",
   "noFormsFoundMessage": "No forms could be found for this category. Please double check the form concept uuids and access permissions.",
   "selectPatientFirst": "Please select a patient first",