@openmrs/esm-fast-data-entry-app 1.0.1-pre.8 → 1.0.1-pre.82

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

@@ -0,0 +1,122 @@
+import {
+  Layer,
+  Tile,
+  TextInput,
+  TextArea,
+  DatePicker,
+  DatePickerInput,
+} from "@carbon/react";
+import React from "react";
+import styles from "./styles.scss";
+import { useTranslation } from "react-i18next";
+import { Controller, useFormContext } from "react-hook-form";
+import { AttendanceTable } from "./attendance-table";
+
+const SessionDetailsForm = () => {
+  const { t } = useTranslation();
+  const {
+    register,
+    formState: { errors },
+    control,
+  } = useFormContext();
+
+  return (
+    <div className={styles.formSection}>
+      <h4>{t("sessionDetails", "1. 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>
+      <h4>{t("sessionParticipants", "2. Session participants")}</h4>
+      <div>
+        <p>
+          {t(
+            "markAbsentPatients",
+            "The patients in this group. Patients that are not present in the session should be marked as absent."
+          )}
+        </p>
+      </div>
+      <Layer>
+        <Tile className={styles.formSectionTile}>
+          <Layer>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                rowGap: "1.5rem",
+              }}
+            >
+              <AttendanceTable />
+            </div>
+          </Layer>
+        </Tile>
+      </Layer>
+    </div>
+  );
+};
+
+export default SessionDetailsForm;

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

@@ -0,0 +1,107 @@
+import { Button } from "@carbon/react";
+import React, { useContext, useEffect, useState } from "react";
+import styles from "./styles.scss";
+import { useTranslation } from "react-i18next";
+import GroupFormWorkflowContext from "../context/GroupFormWorkflowContext";
+import { FormProvider, useForm, useFormContext } from "react-hook-form";
+import CancelModal from "../CancelModal";
+import SessionDetailsForm from "./SessionDetailsForm";
+
+const NewGroupWorkflowButtons = () => {
+  const { t } = useTranslation();
+  const context = useContext(GroupFormWorkflowContext);
+  const { workflowState, patientUuids } = context;
+  const [cancelModalOpen, setCancelModalOpen] = useState(false);
+  if (workflowState !== "NEW_GROUP_SESSION") return null;
+
+  return (
+    <>
+      <div className={styles.rightPanelActionButtons}>
+        <Button kind="secondary" type="submit" disabled={!patientUuids.length}>
+          {t("createNewSession", "Create New Session")}
+        </Button>
+        <Button
+          kind="tertiary"
+          onClick={() => {
+            setCancelModalOpen(true);
+          }}
+        >
+          {t("cancel", "Cancel")}
+        </Button>
+      </div>
+      <CancelModal
+        open={cancelModalOpen}
+        setOpen={setCancelModalOpen}
+        context={context}
+      />
+    </>
+  );
+};
+
+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, workflowState } = useContext(
+    GroupFormWorkflowContext
+  );
+  const methods = useForm();
+
+  const onSubmit = (data) => {
+    const { sessionDate, ...rest } = data;
+    setSessionMeta({ ...rest, sessionDate: sessionDate[0] });
+  };
+
+  if (workflowState !== "NEW_GROUP_SESSION") return null;
+
+  return (
+    <FormProvider {...methods}>
+      <form onSubmit={methods.handleSubmit(onSubmit)}>
+        <div className={styles.workspace}>
+          <div className={styles.formMainContent}>
+            <div className={styles.formContainer}>
+              <SessionDetailsForm />
+            </div>
+            <div className={styles.rightPanel}>
+              <h4>{t("newGroupSession", "New Group Session")}</h4>
+              <GroupIdField />
+              <hr style={{ width: "100%" }} />
+              <NewGroupWorkflowButtons />
+            </div>
+          </div>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default SessionMetaWorkspace;

package/src/group-form-entry-workflow/attendance-table/AttendanceTable.tsx

@@ -0,0 +1,105 @@
+import React, { useContext } from "react";
+
+import {
+  Checkbox,
+  SkeletonText,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+} from "@carbon/react";
+import { useTranslation } from "react-i18next";
+import GroupFormWorkflowContext from "../../context/GroupFormWorkflowContext";
+import { useGetPatient } from "../../hooks";
+
+const PatientRow = ({ patientUuid }) => {
+  const patient = useGetPatient(patientUuid);
+  const { patientUuids, addPatientUuid, removePatientUuid } = useContext(
+    GroupFormWorkflowContext
+  );
+  const givenName = patient?.name?.[0]?.given?.[0];
+  const familyName = patient?.name?.[0]?.family;
+  const identifier = patient?.identifier?.[0]?.value;
+
+  const handleOnChange = (e, { checked }) => {
+    if (checked) {
+      addPatientUuid(patientUuid);
+    } else {
+      removePatientUuid(patientUuid);
+    }
+  };
+
+  if (!patient) {
+    return (
+      <TableRow>
+        <TableCell>
+          <SkeletonText />
+        </TableCell>
+        <TableCell>
+          <SkeletonText />
+        </TableCell>
+        <TableCell>
+          <Checkbox diabled />
+        </TableCell>
+      </TableRow>
+    );
+  }
+
+  return (
+    <TableRow>
+      <TableCell>
+        {patient.display ||
+          patient.displayName ||
+          [givenName, familyName].join(" ")}
+      </TableCell>
+      <TableCell>{identifier}</TableCell>
+      <TableCell>
+        <Checkbox
+          checked={patientUuids.includes(patientUuid)}
+          labelText={patientUuid}
+          hideLabel
+          id={`${identifier}-attendance-checkbox`}
+          onChange={handleOnChange}
+        />
+      </TableCell>
+    </TableRow>
+  );
+};
+
+const AttendanceTable = () => {
+  const { t } = useTranslation();
+  const { activeGroupUuid, activeGroupMembers } = useContext(
+    GroupFormWorkflowContext
+  );
+
+  const headers = [
+    t("name", "Name"),
+    t("identifier", "Patient ID"),
+    t("patientIsPresent", "Patient is present"),
+  ];
+
+  if (!activeGroupUuid) {
+    return <div>{t("selectGroupFirst", "Please select a group first")}</div>;
+  }
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          {headers.map((header, index) => (
+            <TableHeader key={index}>{header}</TableHeader>
+          ))}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {activeGroupMembers.map((patientUuid, index) => (
+          <PatientRow {...{ patientUuid }} key={index} />
+        ))}
+      </TableBody>
+    </Table>
+  );
+};
+
+export default AttendanceTable;

package/src/group-form-entry-workflow/attendance-table/index.ts

@@ -0,0 +1 @@
+export { default as AttendanceTable } from "./AttendanceTable";

package/src/group-form-entry-workflow/{group-banner/GroupBanner.test.tsx → group-display-header/GroupDisplayHeader.test.tsx}

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

package/src/group-form-entry-workflow/{group-banner/GroupBanner.tsx → group-display-header/GroupDisplayHeader.tsx}

@@ -1,12 +1,19 @@
 import React, { useContext } from "react";
-import { Events } from "@carbon/react/icons";
+import { Button } from "@carbon/react";
+import { Events, Close } 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 GroupDisplayHeader = () => {
+  const {
+    activeGroupName,
+    activeGroupUuid,
+    patientUuids,
+    activeSessionMeta,
+    unsetGroup,
+    destroySession,
+  } = useContext(GroupFormWorkflowContext);
   const { t } = useTranslation();
 
   if (!activeGroupUuid) {
@@ -38,8 +45,19 @@ const GroupBanner = () => {
           </div>
         </div>
       )}
+      <span style={{ flexGrow: 1 }} />
+      <span>
+        <Button kind="ghost" onClick={() => unsetGroup()}>
+          {t("changeGroup", "Choose a different group")} <Close size={20} />
+        </Button>
+      </span>
+      <span>
+        <Button kind="ghost" onClick={() => destroySession()}>
+          {t("cancel", "Cancel")} <Close size={20} />
+        </Button>
+      </span>
     </div>
   );
 };
 
-export default GroupBanner;
+export default GroupDisplayHeader;

package/src/group-form-entry-workflow/group-display-header/index.ts

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

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer } from "react";
+import React, { useEffect, useReducer, useRef } from "react";
 import { SkeletonIcon, SkeletonText } from "@carbon/react";
 import { Events } from "@carbon/react/icons";
 import styles from "./compact-group-result.scss";
@@ -20,11 +20,64 @@ const reducer = (state, action) => {
   }
 };
 
-const CompactGroupResults = ({ groups, selectGroupAction }) => {
+const scrollingOptions = {
+  behavior: "smooth",
+  block: "nearest",
+};
+
+const ResultItem = ({
+  index,
+  selectGroupAction,
+  group,
+  dispatch,
+  state,
+  totalGroups,
+  lastRef,
+}) => {
+  const ref = useRef(null);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    if (state.selectedIndex === totalGroups - 1) {
+      lastRef.current.scrollIntoView(scrollingOptions);
+    } else if (state.selectedIndex === index) {
+      ref.current.scrollIntoView(scrollingOptions);
+    }
+  }, [state, index, totalGroups, lastRef]);
+
+  return (
+    <div
+      onClick={() => {
+        dispatch({ type: "select", payload: index });
+        selectGroupAction(group);
+      }}
+      className={`${styles.patientSearchResult} ${
+        index === state.selectedIndex && styles.patientSearchResultSelected
+      }`}
+      role="button"
+      aria-pressed={index === state.selectedIndex}
+      tabIndex={0}
+      ref={ref}
+    >
+      <div className={styles.patientAvatar} role="img">
+        <Events size={24} />
+      </div>
+      <div>
+        <h2 className={styles.patientName}>{group.name}</h2>
+        <p className={styles.demographics}>
+          {group.cohortMembers?.length ?? 0} {t("members", "members")}
+          <span className={styles.middot}>&middot;</span> {group.description}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+const CompactGroupResults = ({ groups, selectGroupAction, lastRef }) => {
   const arrowUpPressed = useKeyPress("ArrowUp");
   const arrowDownPressed = useKeyPress("ArrowDown");
   const enterPressed = useKeyPress("Enter");
-  const { t } = useTranslation();
+
   const [state, dispatch] = useReducer(reducer, { selectedIndex: 0 });
 
   useEffect(() => {
@@ -48,31 +101,11 @@ const CompactGroupResults = ({ groups, selectGroupAction }) => {
   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>
+        <ResultItem
+          key={index}
+          totalGroups={groups.length}
+          {...{ lastRef, index, selectGroupAction, group, dispatch, state }}
+        />
       ))}
     </>
   );

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

@@ -4,6 +4,7 @@ import styles from "./compact-group-search.scss";
 import GroupSearch from "./GroupSearch";
 import { Button, Search } from "@carbon/react";
 import { useTranslation } from "react-i18next";
+import debounce from "lodash-es/debounce";
 
 interface CompactGroupSearchProps {
   selectGroupAction?: (group: GroupType) => void;
@@ -23,6 +24,10 @@ const CompactGroupSearch: React.FC<CompactGroupSearchProps> = ({
   };
 
   const handleSearchChange = (e) => {
+    debounce((q) => {
+      setDropdownShown(!!e.length);
+      setQuery(q);
+    }, 300);
     setQuery(e);
     if (e.length) {
       setDropdownShown(true);

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

@@ -1,13 +1,13 @@
-import React from "react";
+import React, { useCallback, useRef } from "react";
 import { useTranslation } from "react-i18next";
-import { Layer, Tile } from "@carbon/react";
+import { Layer, Tile, Loading } from "@carbon/react";
 import styles from "./group-search.scss";
 import { EmptyDataIllustration } from "../../empty-state/EmptyDataIllustration";
-import { useGroupSearch } from "./useGroupSearch";
 import CompactGroupResults, {
   SearchResultSkeleton,
 } from "./CompactGroupResults";
 import { GroupType } from "../../context/GroupFormWorkflowContext";
+import { useSearchCohortInfinite } from "../../hooks/useSearchEndpoint";
 
 interface GroupSearchProps {
   query: string;
@@ -19,8 +19,48 @@ const GroupSearch: React.FC<GroupSearchProps> = ({
   selectGroupAction,
 }) => {
   const { t } = useTranslation();
-  const results = useGroupSearch(query);
-  const error = false;
+  const {
+    isLoading,
+    data: results,
+    error,
+    loadingNewData,
+    setPage,
+    hasMore,
+    totalResults,
+  } = useSearchCohortInfinite({
+    searchTerm: query,
+    searching: !!query,
+    parameters: {
+      v: "full",
+    },
+  });
+
+  const lastItem = useRef(null);
+  const observer = useRef(null);
+  const loadingRef = useCallback(
+    (node) => {
+      if (loadingNewData) {
+        return;
+      }
+      if (observer.current) {
+        observer.current.disconnect();
+      }
+      observer.current = new IntersectionObserver(
+        (entries) => {
+          if (entries[0].isIntersecting && hasMore) {
+            setPage((page) => page + 1);
+          }
+        },
+        {
+          threshold: 0.75,
+        }
+      );
+      if (node) {
+        observer.current.observe(node);
+      }
+    },
+    [loadingNewData, hasMore, setPage]
+  );
 
   if (error) {
     return (
@@ -43,9 +83,19 @@ const GroupSearch: React.FC<GroupSearchProps> = ({
     );
   }
 
-  if (query.length <= 2) return <SearchResultSkeleton />;
+  if (isLoading) {
+    return (
+      <div className={styles.searchResultsContainer}>
+        <SearchResultSkeleton />
+        <SearchResultSkeleton />
+        <SearchResultSkeleton />
+        <SearchResultSkeleton />
+        <SearchResultSkeleton />
+      </div>
+    );
+  }
 
-  if (results.length === 0) {
+  if (results?.length === 0) {
     return (
       <div className={styles.searchResults}>
         <Layer>
@@ -79,12 +129,19 @@ const GroupSearch: React.FC<GroupSearchProps> = ({
         }}
       >
         <p className={styles.resultsText}>
-          {results.length} {t("searchResultsText", "search result(s)")}
+          {totalResults} {t("searchResultsText", "search result(s)")}
         </p>
         <CompactGroupResults
           groups={results}
           selectGroupAction={selectGroupAction}
+          lastRef={lastItem}
         />
+        <div ref={lastItem}>
+          <div className={styles.lastItem} ref={loadingRef}>
+            {hasMore && <Loading withOverlay={false} small />}
+            {!hasMore && <p>{t("noMoreResults", "End of search results")}</p>}
+          </div>
+        </div>
       </div>
     </div>
   );

package/src/group-form-entry-workflow/group-search/group-search.scss

@@ -29,12 +29,7 @@
   width: 100%;
 }
 
-.loadingIcon {
-  padding: spacing.$spacing-05 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+
 
 .searchTerm {
   @include type.type-style('heading-03');
@@ -92,3 +87,10 @@
   @include type.type-style('body-01');
   color: $text-02;
 }
+
+.lastItem {
+  padding: spacing.$spacing-05;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}