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

package/src/group-form-entry-workflow/GroupFormEntryWorkflow.tsx

@@ -0,0 +1,413 @@
+import {
+  ExtensionSlot,
+  getGlobalStore,
+  useStore,
+} from "@openmrs/esm-framework";
+import {
+  Button,
+  ComposedModal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  Layer,
+  Tile,
+  TextInput,
+  TextArea,
+  DatePicker,
+  DatePickerInput,
+} from "@carbon/react";
+import React, { useContext, useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import PatientCard from "../patient-card/PatientCard";
+import GroupBanner from "./group-banner";
+import styles from "./styles.scss";
+import { useTranslation } from "react-i18next";
+import GroupFormWorkflowContext, {
+  GroupFormWorkflowProvider,
+} from "../context/GroupFormWorkflowContext";
+import GroupSearchHeader from "./group-search-header";
+import {
+  Controller,
+  FormProvider,
+  useForm,
+  useFormContext,
+} from "react-hook-form";
+import FormBootstrap from "../FormBootstrap";
+
+const formStore = getGlobalStore("ampath-form-state");
+
+const CancelModal = ({ open, setOpen }) => {
+  const { destroySession, closeSession } = useContext(GroupFormWorkflowContext);
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+
+  const discard = async () => {
+    await destroySession();
+    setOpen(false);
+    navigate("../");
+  };
+
+  const saveAndClose = async () => {
+    await closeSession();
+    setOpen(false);
+    navigate("../");
+  };
+
+  return (
+    <ComposedModal open={open}>
+      <ModalHeader>{t("areYouSure", "Are you sure?")}</ModalHeader>
+      <ModalBody>
+        {t(
+          "cancelExplanation",
+          "You will lose any unsaved changes on the current form. Do you want to discard the current session?"
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={() => setOpen(false)}>
+          {t("cancel", "Cancel")}
+        </Button>
+        <Button kind="danger" onClick={discard}>
+          {t("discard", "Discard")}
+        </Button>
+        <Button kind="primary" onClick={saveAndClose}>
+          {t("saveSession", "Save Session")}
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+};
+
+const CompleteModal = ({ open, setOpen }) => {
+  const { submitForComplete } = useContext(GroupFormWorkflowContext);
+  const { t } = useTranslation();
+
+  const completeSession = () => {
+    submitForComplete();
+    setOpen(false);
+  };
+
+  return (
+    <ComposedModal open={open}>
+      <ModalHeader>{t("areYouSure", "Are you sure?")}</ModalHeader>
+      <ModalBody>
+        {t(
+          "saveExplanation",
+          "Do you want to save the current form and exit the workflow?"
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <Button kind="secondary" onClick={() => setOpen(false)}>
+          {t("cancel", "Cancel")}
+        </Button>
+        <Button kind="primary" onClick={completeSession}>
+          {t("complete", "Complete")}
+        </Button>
+      </ModalFooter>
+    </ComposedModal>
+  );
+};
+
+const NewGroupWorkflowButtons = () => {
+  const { t } = useTranslation();
+  const { workflowState } = useContext(GroupFormWorkflowContext);
+  const [cancelModalOpen, setCancelModalOpen] = useState(false);
+  if (workflowState !== "NEW_GROUP_SESSION") return null;
+
+  return (
+    <>
+      <div className={styles.rightPanelActionButtons}>
+        <Button kind="secondary" type="submit">
+          {t("createNewSession", "Create New Session")}
+        </Button>
+        <Button
+          kind="tertiary"
+          onClick={() => {
+            setCancelModalOpen(true);
+          }}
+        >
+          {t("cancel", "Cancel")}
+        </Button>
+      </div>
+      <CancelModal open={cancelModalOpen} setOpen={setCancelModalOpen} />
+    </>
+  );
+};
+
+const WorkflowNavigationButtons = () => {
+  const { activeFormUuid, submitForNext, patientUuids, activePatientUuid } =
+    useContext(GroupFormWorkflowContext);
+  const store = useStore(formStore);
+  const formState = store[activeFormUuid];
+  const navigationDisabled = formState !== "ready";
+  const [cancelModalOpen, setCancelModalOpen] = useState(false);
+  const [completeModalOpen, setCompleteModalOpen] = useState(false);
+  const { t } = useTranslation();
+
+  const isLastPatient =
+    activePatientUuid === patientUuids[patientUuids.length - 1];
+
+  return (
+    <>
+      <div className={styles.rightPanelActionButtons}>
+        <Button
+          kind="primary"
+          onClick={() => submitForNext()}
+          disabled={navigationDisabled}
+        >
+          {isLastPatient
+            ? t("saveForm", "Save Form")
+            : t("nextPatient", "Next Patient")}
+        </Button>
+        <Button kind="secondary" onClick={() => setCompleteModalOpen(true)}>
+          {t("saveAndComplete", "Save & Complete")}
+        </Button>
+        <Button kind="tertiary" onClick={() => setCancelModalOpen(true)}>
+          {t("cancel", "Cancel")}
+        </Button>
+      </div>
+      <CancelModal open={cancelModalOpen} setOpen={setCancelModalOpen} />
+      <CompleteModal open={completeModalOpen} setOpen={setCompleteModalOpen} />
+    </>
+  );
+};
+
+const SessionDetails = () => {
+  const { t } = useTranslation();
+  const {
+    register,
+    formState: { errors },
+    control,
+  } = useFormContext();
+
+  return (
+    <div className={styles.formSection}>
+      <h4>{t("sessionDetails", "Session details")}</h4>
+      <div>
+        <p>
+          {t(
+            "allFieldsRequired",
+            "All fields are required unless marked optional"
+          )}
+        </p>
+      </div>
+      <Layer>
+        <Tile className={styles.formSectionTile}>
+          <Layer>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                rowGap: "1.5rem",
+              }}
+            >
+              <TextInput
+                id="text"
+                type="text"
+                labelText={t("sessionName", "Session Name")}
+                {...register("sessionName", { required: true })}
+                invalid={errors.sessionName}
+                invalidText={"This field is required"}
+              />
+              <TextInput
+                id="text"
+                type="text"
+                labelText={t("practitionerName", "Practitioner Name")}
+                {...register("practitionerName", { required: true })}
+                invalid={errors.practitionerName}
+                invalidText={"This field is required"}
+              />
+              <Controller
+                name="sessionDate"
+                control={control}
+                rules={{ required: true }}
+                render={({ field }) => (
+                  <DatePicker
+                    datePickerType="single"
+                    size="md"
+                    maxDate={new Date()}
+                    {...field}
+                  >
+                    <DatePickerInput
+                      id="session-date"
+                      labelText={t("sessionDate", "Session Date")}
+                      placeholder="mm/dd/yyyy"
+                      size="md"
+                      invalid={errors.sessionDate}
+                      invalidText={"This field is required"}
+                    />
+                  </DatePicker>
+                )}
+              />
+              <TextArea
+                id="text"
+                type="text"
+                labelText={t("sessionNotes", "Session Notes")}
+                {...register("sessionNotes", { required: true })}
+                invalid={errors.sessionNotes}
+                invalidText={"This field is required"}
+              />
+            </div>
+          </Layer>
+        </Tile>
+      </Layer>
+    </div>
+  );
+};
+
+const GroupIdField = () => {
+  const { t } = useTranslation();
+  const {
+    register,
+    formState: { errors },
+    setValue,
+  } = useFormContext();
+  const { activeGroupUuid } = useContext(GroupFormWorkflowContext);
+
+  useEffect(() => {
+    if (activeGroupUuid) setValue("groupUuid", activeGroupUuid);
+  }, [activeGroupUuid, setValue]);
+
+  return (
+    <>
+      <input
+        hidden
+        {...register("groupUuid", {
+          value: activeGroupUuid,
+          required: t("chooseGroupError", "Please choose a group."),
+        })}
+      />
+      {errors.groupUuid && !activeGroupUuid && (
+        <div className={styles.formError}>
+          {errors.groupUuid.message as string}
+        </div>
+      )}
+    </>
+  );
+};
+
+const SessionMetaWorkspace = () => {
+  const { t } = useTranslation();
+  const { setSessionMeta } = useContext(GroupFormWorkflowContext);
+  const methods = useForm();
+
+  const onSubmit = (data) => {
+    const { sessionDate, ...rest } = data;
+    setSessionMeta({ ...rest, sessionDate: sessionDate[0] });
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <div className={styles.workspace}>
+          <div className={styles.formMainContent}>
+            <div className={styles.formContainer}>
+              <SessionDetails />
+            </div>
+            <div className={styles.rightPanel}>
+              <h4>{t("newGroupSession", "New Group Session")}</h4>
+              <GroupIdField />
+              <hr style={{ width: "100%" }} />
+              <NewGroupWorkflowButtons />
+            </div>
+          </div>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+const GroupSessionWorkspace = () => {
+  const { t } = useTranslation();
+  const {
+    patientUuids,
+    activePatientUuid,
+    editEncounter,
+    encounters,
+    activeEncounterUuid,
+    activeFormUuid,
+    saveEncounter,
+    // activeSessionMeta,
+  } = useContext(GroupFormWorkflowContext);
+
+  // const handleEncounterCreate = (payload: Record<string, unknown>) => {
+  //   console.log("payload", payload);
+  //   Object.entries(activeSessionMeta).forEach((key, value) => {
+  //     payload[key as unknown as string] = value;
+  //   });
+  // };
+
+  const handlePostResponse = (encounter) => {
+    if (encounter && encounter.uuid) {
+      saveEncounter(encounter.uuid);
+    }
+  };
+
+  return (
+    <div className={styles.workspace}>
+      <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 GroupFormEntryWorkflow = () => {
+  const { workflowState } = useContext(GroupFormWorkflowContext);
+
+  return (
+    <>
+      <div className={styles.breadcrumbsContainer}>
+        <ExtensionSlot extensionSlotName="breadcrumbs-slot" />
+      </div>
+      <GroupSearchHeader />
+      <GroupBanner />
+      {workflowState === "NEW_GROUP_SESSION" && (
+        <div className={styles.workspaceWrapper}>
+          <SessionMetaWorkspace />
+        </div>
+      )}
+      {["EDIT_FORM"].includes(workflowState) && (
+        <div className={styles.workspaceWrapper}>
+          <GroupSessionWorkspace />
+        </div>
+      )}
+    </>
+  );
+};
+
+const GroupFormEntryWorkflowWrapper = () => {
+  return (
+    <GroupFormWorkflowProvider>
+      <GroupFormEntryWorkflow />
+    </GroupFormWorkflowProvider>
+  );
+};
+
+export default GroupFormEntryWorkflowWrapper;

package/src/group-form-entry-workflow/group-banner/GroupBanner.test.tsx

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

package/src/group-form-entry-workflow/group-banner/GroupBanner.tsx

@@ -0,0 +1,45 @@
+import React, { useContext } from "react";
+import { Events } from "@carbon/react/icons";
+import styles from "./styles.scss";
+import { useTranslation } from "react-i18next";
+import GroupFormWorkflowContext from "../../context/GroupFormWorkflowContext";
+
+const GroupBanner = () => {
+  const { activeGroupName, activeGroupUuid, patientUuids, activeSessionMeta } =
+    useContext(GroupFormWorkflowContext);
+  const { t } = useTranslation();
+
+  if (!activeGroupUuid) {
+    return null;
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.groupAvatar} role="img">
+        <Events size={48} />
+      </div>
+      <div className={styles.groupInfoContent}>
+        <div className={styles.groupInfoRow}>
+          <span className={styles.groupName}>{activeGroupName}</span>
+        </div>
+        <div className={styles.groupInfoRow}>
+          <span>
+            {patientUuids.length} {t("members", "members")}
+          </span>
+        </div>
+      </div>
+      {activeSessionMeta?.sessionNotes && (
+        <div className={styles.groupMeataContent}>
+          <div className={`${styles.groupInfoRow} ${styles.sessionNotesLabel}`}>
+            {t("sessionNotes", "Session Notes")}
+          </div>
+          <div className={styles.groupInfoRow}>
+            {activeSessionMeta.sessionNotes}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default GroupBanner;

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

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

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

@@ -0,0 +1,60 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  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;
+}
+
+.photoPlaceholder {
+  height: spacing.$spacing-09;
+  width: spacing.$spacing-09;
+}
+
+.groupAvatar {
+  width: spacing.$spacing-09;
+  height: spacing.$spacing-09;
+  margin: spacing.$spacing-03 spacing.$spacing-05 spacing.$spacing-03 0;
+  border-radius: 1px;
+}
+
+.groupName {
+  @include type.type-style('heading-03');
+  font-weight: 600;
+}
+
+.groupInfoContent {
+  margin-left: spacing.$spacing-05;
+  margin-right: spacing.$spacing-10;
+}
+
+.groupInfoRow {
+  display: flex;
+  align-items: center;
+  & > button {
+    min-height: spacing.$spacing-07;
+  }
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+  column-gap: 0.8rem;
+
+}
+.sessionNotesLabel {
+  @include type.type-style('label-01');
+  margin-bottom: spacing.$spacing-01
+}
+
+.groupEditBtn {
+  color: $ui-05;
+  margin: spacing.$spacing-03;
+}
+
+.groupMetaContent {
+  flex-grow: 1;
+}

package/src/group-form-entry-workflow/group-search/CompactGroupResults.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useReducer } from "react";
+import { SkeletonIcon, SkeletonText } from "@carbon/react";
+import { Events } from "@carbon/react/icons";
+import styles from "./compact-group-result.scss";
+import { useTranslation } from "react-i18next";
+import useKeyPress from "../../hooks/useKeyPress";
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case "arrowUp":
+      return { selectedIndex: Math.max(state.selectedIndex - 1, 0) };
+    case "arrowDown":
+      return {
+        selectedIndex: Math.min(state.selectedIndex + 1, action.listLength - 1),
+      };
+    case "select":
+      return { selectedIndex: action.payload };
+    default:
+      return state;
+  }
+};
+
+const CompactGroupResults = ({ groups, selectGroupAction }) => {
+  const arrowUpPressed = useKeyPress("ArrowUp");
+  const arrowDownPressed = useKeyPress("ArrowDown");
+  const enterPressed = useKeyPress("Enter");
+  const { t } = useTranslation();
+  const [state, dispatch] = useReducer(reducer, { selectedIndex: 0 });
+
+  useEffect(() => {
+    if (arrowUpPressed) {
+      dispatch({ type: "arrowUp" });
+    }
+  }, [arrowUpPressed]);
+
+  useEffect(() => {
+    if (arrowDownPressed) {
+      dispatch({ type: "arrowDown", listLength: groups.length });
+    }
+  }, [arrowDownPressed, groups.length]);
+
+  useEffect(() => {
+    if (enterPressed && groups.length) {
+      selectGroupAction(groups[state.selectedIndex]);
+    }
+  }, [enterPressed, selectGroupAction, groups, state.selectedIndex]);
+
+  return (
+    <>
+      {groups.map((group, index) => (
+        <div
+          onClick={() => {
+            dispatch({ type: "select", payload: index });
+            selectGroupAction(group);
+          }}
+          key={group.id}
+          className={`${styles.patientSearchResult} ${
+            index === state.selectedIndex && styles.patientSearchResultSelected
+          }`}
+          role="button"
+          aria-pressed={index === state.selectedIndex}
+          tabIndex={0}
+        >
+          <div className={styles.patientAvatar} role="img">
+            <Events size={24} />
+          </div>
+          <div>
+            <h2 className={styles.patientName}>{group.name}</h2>
+            <p className={styles.demographics}>
+              {group.members.length} {t("members", "members")}
+              <span className={styles.middot}>&middot;</span>{" "}
+              {group.description}
+            </p>
+          </div>
+        </div>
+      ))}
+    </>
+  );
+};
+
+export const SearchResultSkeleton = () => {
+  return (
+    <div className={styles.patientSearchResult}>
+      <div className={styles.patientAvatar} role="img">
+        <SkeletonIcon
+          style={{
+            height: "3rem",
+            width: "3rem",
+          }}
+        />
+      </div>
+      <div>
+        <h2 className={styles.patientName}>
+          <SkeletonText />
+        </h2>
+        <span className={styles.demographics}>
+          <SkeletonIcon /> <span className={styles.middot}>&middot;</span>{" "}
+          <SkeletonIcon /> <span className={styles.middot}>&middot;</span>{" "}
+          <SkeletonIcon />
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default CompactGroupResults;

package/src/group-form-entry-workflow/group-search/CompactGroupSearch.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { GroupType } from "../../context/GroupFormWorkflowContext";
+import styles from "./compact-group-search.scss";
+import GroupSearch from "./GroupSearch";
+import { Button, Search } from "@carbon/react";
+import { useTranslation } from "react-i18next";
+
+interface CompactGroupSearchProps {
+  selectGroupAction?: (group: GroupType) => void;
+}
+
+const CompactGroupSearch: React.FC<CompactGroupSearchProps> = ({
+  selectGroupAction,
+}) => {
+  const { t } = useTranslation();
+  const [query, setQuery] = useState("");
+  const [dropdownShown, setDropdownShown] = useState(false);
+
+  const onGroupSelect = (group) => {
+    selectGroupAction(group);
+    setDropdownShown(false);
+    setQuery("");
+  };
+
+  const handleSearchChange = (e) => {
+    setQuery(e);
+    if (e.length) {
+      setDropdownShown(true);
+    } else {
+      setDropdownShown(false);
+    }
+  };
+
+  return (
+    <div className={styles.patientSearchBar}>
+      <div className={styles.searchArea}>
+        <Search
+          autoFocus
+          className={styles.patientSearchInput}
+          closeButtonLabelText={t("clearSearch", "Clear")}
+          labelText=""
+          onChange={(event) => {
+            handleSearchChange(event.target.value);
+          }}
+          onClear={() => undefined}
+          placeholder={t("searchForGroup", "Search for a group by name")}
+          size="sm"
+          value={query}
+        />
+        <Button kind="secondary" size="sm">
+          {t("search", "Search")}
+        </Button>
+      </div>
+      {dropdownShown && (
+        <div className={styles.floatingSearchResultsContainer}>
+          <GroupSearch query={query} selectGroupAction={onGroupSelect} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CompactGroupSearch;