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

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;
+}

package/src/group-form-entry-workflow/group-search-header/GroupSearchHeader.tsx

@@ -1,7 +1,6 @@
-import { Close } from "@carbon/react/icons";
+import { Close, Add } from "@carbon/react/icons";
 import { Button } from "@carbon/react";
-import React, { useContext } from "react";
-import { Link } from "react-router-dom";
+import React, { useCallback, useContext, useState } from "react";
 import GroupFormWorkflowContext from "../../context/GroupFormWorkflowContext";
 import styles from "./styles.scss";
 import { useTranslation } from "react-i18next";
@@ -10,11 +9,26 @@ import AddGroupModal from "../../add-group-modal/AddGroupModal";
 
 const GroupSearchHeader = () => {
   const { t } = useTranslation();
-  const { activeGroupUuid, setGroup } = useContext(GroupFormWorkflowContext);
+  const { activeGroupUuid, setGroup, destroySession } = useContext(
+    GroupFormWorkflowContext
+  );
+  const [isOpen, setOpen] = useState(false);
   const handleSelectGroup = (group) => {
     setGroup(group);
   };
 
+  const handleCancel = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const onPostSubmit = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const handleOpenClick = useCallback(() => {
+    setOpen(true);
+  }, []);
+
   if (activeGroupUuid) return null;
 
   return (
@@ -25,15 +39,32 @@ const GroupSearchHeader = () => {
       </span>
       <span className={styles.padded}>{t("or", "or")}</span>
       <span>
-        <AddGroupModal />
+        <Button
+          onClick={handleOpenClick}
+          renderIcon={Add}
+          iconDescription="Add"
+        >
+          {t("createNewGroup", "Create New Group")}
+        </Button>
+        <AddGroupModal
+          {...{
+            isCreate: true,
+            isOpen: isOpen,
+            handleCancel: handleCancel,
+            onPostSubmit: onPostSubmit,
+          }}
+        />
       </span>
       <span style={{ flexGrow: 1 }} />
       <span>
-        <Link to="..">
-          <Button kind="ghost">
-            {t("cancel", "Cancel")} <Close size={20} />
-          </Button>
-        </Link>
+        <Button
+          kind="ghost"
+          onClick={() => {
+            destroySession();
+          }}
+        >
+          {t("cancel", "Cancel")} <Close size={20} />
+        </Button>
       </span>
     </div>
   );

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

@@ -19,6 +19,16 @@
   width: 1100px;
 }
 
+:global(.omrs-breakpoint-lt-large-desktop) .workspace {
+  width: 1000px;
+}
+
+:global(.omrs-breakpoint-lt-small-desktop) .workspace {
+  // there's only so much we can do here. Currenlty the design does not support tablet
+  width: 100vw;
+  padding: 0 spacing.$spacing-04;
+}
+
 .selectPatientMessage {
   @include type.type-style('productive-heading-03');
   margin: spacing.$spacing-07;
@@ -36,6 +46,7 @@
   flex-grow: 1;
   max-height: calc(100vh - 14rem);
   overflow-y: scroll;
+  text-align: left;
 }
 
 .formContainer :global(.cds--form-item) :global(.question-area) {
@@ -43,7 +54,7 @@
 }
 
 .rightPanel {
-  width: 13rem;
+  min-width: 13rem;
   text-align: left;
   overflow-y: scroll;
   display: flex;

package/src/hooks/index.ts

@@ -4,3 +4,4 @@ import useFormState from "./useFormState";
 import useGetEncounter from "./useGetEncounter";
 
 export { useGetAllForms, useGetPatient, useFormState, useGetEncounter };
+export * from "./usePostEndpoint";

package/src/hooks/useGetPatient.ts

@@ -14,7 +14,7 @@ const useGetPatient = (patientUuid) => {
 
   const getPatient = async (uuid) => {
     const result = await fetchCurrentPatient(uuid);
-    setPatient(result?.data);
+    setPatient(result);
   };
 
   return patient;

package/src/hooks/useGetPatients.ts

@@ -0,0 +1,34 @@
+import { fetchCurrentPatient } from "@openmrs/esm-framework";
+import { useEffect, useState } from "react";
+
+const useGetPatients = (patientUuids) => {
+  const [patients, setPatients] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (!patientUuids || patientUuids.length === 0) {
+      setPatients([]);
+      setIsLoading(false);
+    } else {
+      getPatients(patientUuids);
+    }
+  }, [patientUuids]);
+
+  const getPatients = async (uuids) => {
+    try {
+      setIsLoading(true);
+      const results = await Promise.all(
+        uuids.map(async (uuid) => await fetchCurrentPatient(uuid))
+      );
+      setPatients(results);
+      setIsLoading(false);
+    } catch (error) {
+      console.error("Error fetching patients:", error);
+      setIsLoading(false);
+    }
+  };
+
+  return { patients, isLoading };
+};
+
+export default useGetPatients;

package/src/hooks/useGetSystemSetting.ts

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useState } from "react";
+import { openmrsFetch } from "@openmrs/esm-framework";
+
+const useGetSystemSetting = (settingId) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+
+  const onResult = useCallback((result) => {
+    setIsSubmitting(false);
+    setError(false);
+    setResult(result);
+  }, []);
+
+  const onError = useCallback((error) => {
+    setIsSubmitting(false);
+    setResult(null);
+    setError(error);
+  }, []);
+
+  const getSetting = useCallback(() => {
+    openmrsFetch(`/ws/rest/v1/systemsetting?q=${settingId}&v=default`)
+      .then(onResult)
+      .catch(onError);
+  }, [onError, onResult, settingId]);
+
+  useEffect(() => {
+    getSetting();
+  }, [getSetting]);
+
+  return {
+    result,
+    error,
+    isSubmitting,
+  };
+};
+
+export default useGetSystemSetting;

package/src/hooks/usePostEndpoint.ts

@@ -0,0 +1,76 @@
+import { openmrsFetch } from "@openmrs/esm-framework";
+import { useCallback, useState } from "react";
+
+const usePostEndpoint = ({ endpointUrl }) => {
+  const [submissionInProgress, setSubmissionInProgress] = useState(null);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+
+  const onFormPosted = useCallback(
+    (result) => {
+      setSubmissionInProgress(false);
+      if (error) {
+        setError(null);
+      }
+      setResult(result.data);
+    },
+    [error]
+  );
+
+  const onError = useCallback(
+    (error) => {
+      setSubmissionInProgress(false);
+      if (result) {
+        setResult(null);
+      }
+      setError(error?.responseBody?.error ?? error?.responseBody ?? error);
+    },
+    [result]
+  );
+
+  const post = useCallback(
+    async (data) => {
+      setSubmissionInProgress(true);
+
+      let path = endpointUrl;
+      if (data.uuid) {
+        path += "/" + data.uuid;
+      }
+
+      return openmrsFetch(path, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: data,
+      })
+        .then(onFormPosted)
+        .catch(onError);
+    },
+    [endpointUrl, onError, onFormPosted]
+  );
+
+  const reset = () => {
+    setSubmissionInProgress(null);
+    setResult(null);
+    setError(null);
+  };
+
+  return {
+    post,
+    isPosting: submissionInProgress,
+    result,
+    error,
+    reset,
+  };
+};
+
+const usePostVisit = () => {
+  return usePostEndpoint({ endpointUrl: "/ws/rest/v1/visit" });
+};
+
+const usePostCohort = () => {
+  return usePostEndpoint({ endpointUrl: "/ws/rest/v1/cohortm/cohort" });
+};
+
+export { usePostEndpoint, usePostVisit, usePostCohort };

package/src/hooks/useSearchEndpoint.ts

@@ -0,0 +1,120 @@
+import { openmrsFetch, FetchResponse } from "@openmrs/esm-framework";
+import { useCallback, useMemo } from "react";
+import useSWRInfinite from "swr/infinite";
+
+export interface SearchResponse {
+  data: Array<Record<string, unknown>> | null;
+  isLoading: boolean;
+  error: Error;
+  loadingNewData: boolean;
+  hasMore: boolean;
+  currentPage: number;
+  totalResults: number;
+  setPage: (size: number | ((_size: number) => number)) => Promise<
+    FetchResponse<{
+      results: Array<Record<string, unknown>>;
+      links: Array<{
+        rel: "prev" | "next";
+      }>;
+    }>[]
+  >;
+}
+
+interface SearchInfiniteProps {
+  baseUrl?: string;
+  searchTerm: string;
+  parameters?: Record<string, unknown> | undefined;
+  searching: boolean;
+  resultsToFetch?: number;
+}
+
+const useSearchEndpointInfinite = (
+  arg0: SearchInfiniteProps
+): SearchResponse => {
+  const {
+    baseUrl,
+    searchTerm,
+    parameters,
+    searching = true,
+    resultsToFetch = 10,
+  } = arg0;
+
+  const getUrl = useCallback(
+    (
+      page: number,
+      prevPageData: FetchResponse<{
+        results: Array<Record<string, unknown>>;
+        links: Array<{ rel: "prev" | "next" }>;
+      }>
+    ) => {
+      if (
+        prevPageData &&
+        !prevPageData?.data?.links.some((link) => link.rel === "next")
+      ) {
+        return null;
+      }
+      let url = `${baseUrl}?q=${searchTerm}`;
+      const params = {
+        // merge passed parameters and default parameters
+        // this way the defaults can be overriden if needed
+        totalCount: true,
+        limit: resultsToFetch,
+        ...parameters,
+      };
+      Object.entries(params).forEach(([key, value]) => {
+        // don't send null parmeters
+        if (value !== null && value !== undefined) {
+          url += `&${key}=${value}`;
+        }
+      });
+      if (page) {
+        url += `&startIndex=${page * resultsToFetch}`;
+      }
+      return url;
+    },
+    [baseUrl, searchTerm, parameters, resultsToFetch]
+  );
+
+  const { data, isValidating, setSize, error, size } = useSWRInfinite<
+    FetchResponse<{
+      results: Array<Record<string, unknown>>;
+      links: Array<{ rel: "prev" | "next" }>;
+      totalCount: number;
+    }>,
+    Error
+  >(searching ? getUrl : null, openmrsFetch);
+
+  const results = useMemo(
+    () => ({
+      data: data
+        ? [].concat(...(data?.map((resp) => resp?.data?.results) ?? []))
+        : null,
+      isLoading: !data && !error,
+      error,
+      hasMore: data?.length
+        ? !!data[data.length - 1].data?.links?.some(
+            (link) => link.rel === "next"
+          )
+        : false,
+      loadingNewData: isValidating,
+      setPage: setSize,
+      currentPage: size,
+      totalResults: data?.[0]?.data?.totalCount,
+    }),
+    [data, isValidating, error, setSize, size]
+  );
+
+  return results;
+};
+
+const useSearchCohortInfinite = ({
+  ...props
+}: SearchInfiniteProps): SearchResponse => {
+  return useSearchEndpointInfinite({
+    baseUrl: "/ws/rest/v1/cohortm/cohort",
+    resultsToFetch: 10,
+    ...props,
+  });
+};
+
+export { useSearchEndpointInfinite, useSearchCohortInfinite };