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

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

@@ -0,0 +1,68 @@
+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";
+import debounce from "lodash-es/debounce";
+
+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) => {
+    debounce((q) => {
+      setDropdownShown(!!e.length);
+      setQuery(q);
+    }, 300);
+    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;

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

@@ -0,0 +1,150 @@
+import React, { useCallback, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Layer, Tile, Loading } from "@carbon/react";
+import styles from "./group-search.scss";
+import { EmptyDataIllustration } from "../../empty-state/EmptyDataIllustration";
+import CompactGroupResults, {
+  SearchResultSkeleton,
+} from "./CompactGroupResults";
+import { GroupType } from "../../context/GroupFormWorkflowContext";
+import { useSearchCohortInfinite } from "../../hooks/useSearchEndpoint";
+
+interface GroupSearchProps {
+  query: string;
+  selectGroupAction?: (group: GroupType) => void;
+}
+
+const GroupSearch: React.FC<GroupSearchProps> = ({
+  query = "",
+  selectGroupAction,
+}) => {
+  const { t } = useTranslation();
+  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 (
+      <div className={styles.searchResults}>
+        <Layer>
+          <Tile className={styles.emptySearchResultsTile}>
+            <EmptyDataIllustration />
+            <div>
+              <p className={styles.errorMessage}>{t("error", "Error")}</p>
+              <p className={styles.errorCopy}>
+                {t(
+                  "errorCopy",
+                  "Sorry, there was an error. You can try to reload this page, or contact the site administrator and quote the error code above."
+                )}
+              </p>
+            </div>
+          </Tile>
+        </Layer>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className={styles.searchResultsContainer}>
+        <SearchResultSkeleton />
+        <SearchResultSkeleton />
+        <SearchResultSkeleton />
+        <SearchResultSkeleton />
+        <SearchResultSkeleton />
+      </div>
+    );
+  }
+
+  if (results?.length === 0) {
+    return (
+      <div className={styles.searchResults}>
+        <Layer>
+          <Tile className={styles.emptySearchResultsTile}>
+            <EmptyDataIllustration />
+            <p className={styles.emptyResultText}>
+              {t("noGroupsFoundMessage", "Sorry, no groups have been found")}
+            </p>
+            <p className={styles.actionText}>
+              <span>
+                {t(
+                  "trySearchWithPatientUniqueID",
+                  "Try searching with the cohort's description"
+                )}
+              </span>
+              <br />
+              <span>{t("orLabelName", "OR label name")}</span>
+            </p>
+          </Tile>
+        </Layer>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.searchResultsContainer}>
+      <div
+        className={styles.searchResults}
+        style={{
+          maxHeight: "22rem",
+        }}
+      >
+        <p className={styles.resultsText}>
+          {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>
+  );
+};
+
+export default GroupSearch;

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

@@ -0,0 +1,64 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.patientSearchResult {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid $ui-03;
+  padding: 0 spacing.$spacing-04;
+
+  &:hover,
+  &:focus {
+    background-color: $ui-01;
+  }
+}
+
+.patientSearchResultSelected {
+  background-color: colors.$gray-20;
+}
+
+.patientBanner {
+  display: flex;
+}
+
+.patientName {
+  @include type.type-style('heading-02');
+}
+
+.patientAvatar {
+  width: spacing.$spacing-09;
+  height: spacing.$spacing-09;
+  margin: spacing.$spacing-03 spacing.$spacing-05 spacing.$spacing-03 0;
+  border-radius: 1px;
+}
+
+.patientInfo {
+  width: 100%;
+  display: flex;
+  flex-flow: column wrap;
+  margin: spacing.$spacing-05;
+  cursor: pointer;
+}
+
+.demographics {
+  margin-top: spacing.$spacing-03;
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+}
+
+.identifiers {
+  @include type.type-style('body-compact-02');
+  color: $ui-04;
+}
+
+.actionsContainer {
+  padding-top: spacing.$spacing-03;
+  margin-top: spacing.$spacing-05;
+}
+
+.middot {
+  margin: 0 spacing.$spacing-03;
+}

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

@@ -0,0 +1,35 @@
+
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.patientSearchBar {
+  width: 50vw;
+  position: relative;
+}
+
+.floatingSearchResultsContainer {
+  position: absolute;
+  overflow-y: auto;
+  box-shadow: 0 spacing.$spacing-03 spacing.$spacing-05 $ui-03;
+  z-index: 99;
+  border: 0 1px 1px 1px solid $ui-03;
+  width: 100%;
+  background-color: $ui-02;
+}
+
+.searchArea {
+  width: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid $ui-04;
+}
+
+.patientSearchInput {
+  border: none;
+}
+
+.patientSearchInput input:focus {
+  outline: 1px solid 1px solid colors.$orange-40;
+}

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

@@ -0,0 +1,96 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+
+
+.searchResultsContainer {
+  width: 100%;
+  background-color: $ui-02;
+
+  a {
+    text-decoration: none;
+    @include type.type-style('heading-02');
+    color: $text-02;
+    margin: 0rem;
+  }
+}
+
+:global(.omrs-breakpoint-lt-desktop) .searchResultsContainer {
+  top: 6.25rem;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .searchResultsContainer {
+  padding: 0;
+  top: spacing.$spacing-09;
+}
+
+.searchResults {
+  width: 100%;
+}
+
+
+
+.searchTerm {
+  @include type.type-style('heading-03');
+  margin-top: 0.375rem;
+}
+
+.resultsText {
+  @include type.type-style('label-01');
+  color: $text-02;
+  line-height: spacing.$spacing-05;
+  margin: spacing.$spacing-03 spacing.$spacing-05;
+}
+
+.helperText {
+  color: var(--omrs-color-ink-medium-contrast);
+  margin-left: 2.375rem;
+}
+
+.emptyResultText {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: 0.313rem;
+}
+
+.actionText {
+  @include type.type-style('body-01');
+  color: $text-02;
+}
+
+.pagination {
+  display: flex;
+  justify-content: space-evenly;
+  padding: 4.688rem 0 spacing.$spacing-06;
+}
+
+.emptySearchResultsTile {
+  text-align: center;
+  margin-top: spacing.$spacing-05;
+  padding: spacing.$spacing-09 0rem;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .emptySearchResultsTile {
+  margin: spacing.$spacing-05;
+}
+
+.errorMessage {
+  @include type.type-style('heading-compact-02');
+  margin-top: 2.25rem;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.errorCopy {
+  margin-bottom: spacing.$spacing-03;
+  @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

@@ -0,0 +1,73 @@
+import { Close, Add } from "@carbon/react/icons";
+import { Button } from "@carbon/react";
+import React, { useCallback, useContext, useState } from "react";
+import GroupFormWorkflowContext from "../../context/GroupFormWorkflowContext";
+import styles from "./styles.scss";
+import { useTranslation } from "react-i18next";
+import CompactGroupSearch from "../group-search/CompactGroupSearch";
+import AddGroupModal from "../../add-group-modal/AddGroupModal";
+
+const GroupSearchHeader = () => {
+  const { t } = useTranslation();
+  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 (
+    <div className={styles.searchHeaderContainer}>
+      <span className={styles.padded}>{t("findGroup", "Find group")}:</span>
+      <span className={styles.searchBarWrapper}>
+        <CompactGroupSearch selectGroupAction={handleSelectGroup} />
+      </span>
+      <span className={styles.padded}>{t("or", "or")}</span>
+      <span>
+        <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>
+        <Button
+          kind="ghost"
+          onClick={() => {
+            destroySession();
+          }}
+        >
+          {t("cancel", "Cancel")} <Close size={20} />
+        </Button>
+      </span>
+    </div>
+  );
+};
+
+export default GroupSearchHeader;

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

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

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

@@ -0,0 +1,20 @@
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.searchHeaderContainer {
+  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;
+}
+
+.searchBarWrapper {
+  min-width: 35rem;
+}
+
+.padded {
+  padding: spacing.$spacing-05;
+}

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

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

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

@@ -0,0 +1,97 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/colors';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+
+.breadcrumbsContainer > div > div > nav {
+  background-color: $ui-02;
+  padding: spacing.$spacing-04 spacing.$spacing-05;
+  height: spacing.$spacing-08;
+}
+
+.workspaceWrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.workspace {
+  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;
+  text-align: center;
+}
+
+.formMainContent {
+  display: flex;
+  text-align: center;
+  margin-top: spacing.$spacing-05;
+  column-gap: spacing.$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;
+  display: flex;
+  flex-direction: column;
+  row-gap: spacing.$spacing-05;
+}
+
+.patientCardsSection {
+  margin: spacing.$spacing-05 0;
+  border-bottom: 1px solid colors.$gray-10;
+}
+
+.rightPanelActionButtons {
+  display: flex;
+  flex-direction: column;
+  row-gap: spacing.$spacing-03;
+  & button {
+    width: 100%;
+    text-decoration: "none";
+  }
+}
+
+.formSection {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  justify-content: flex-start;
+  align-items: flex-start;
+  text-align: left;
+}
+
+.formSectionTile {
+  width: 500px;
+}
+
+
+.formError {
+  @include type.type-style("helper-text-02");
+  color: colors.$red-60;
+}

package/src/hooks/index.ts

@@ -0,0 +1,7 @@
+import useGetAllForms from "./useGetAllForms";
+import useGetPatient from "./useGetPatient";
+import useFormState from "./useFormState";
+import useGetEncounter from "./useGetEncounter";
+
+export { useGetAllForms, useGetPatient, useFormState, useGetEncounter };
+export * from "./usePostEndpoint";

package/src/hooks/useFormState.ts

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+
+const useFormState = (formUuid) => {
+  const [state, setState] = useState(null);
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.detail?.formUuid === formUuid) {
+        setState(e.detail?.state);
+      }
+    };
+
+    window.addEventListener("ampath-form-state", handler);
+
+    return () => {
+      window.removeEventListener("ampath-form-state", handler);
+    };
+  }, [formUuid]);
+
+  return state;
+};
+
+export default useFormState;

package/src/hooks/useGetAllForms.ts

@@ -0,0 +1,45 @@
+import {
+  openmrsFetch,
+  userHasAccess,
+  useSession,
+} from "@openmrs/esm-framework";
+import useSWR from "swr";
+
+const customFormRepresentation =
+  "(uuid,name,display,encounterType:(uuid,name,viewPrivilege,editPrivilege),version,published,retired,resources:(uuid,name,dataType,valueReference))";
+
+const formEncounterUrl = `/ws/rest/v1/form?v=custom:${customFormRepresentation}`;
+const formEncounterUrlPoc = `/ws/rest/v1/form?v=custom:${customFormRepresentation}&q=poc`;
+
+export function useGetAllForms(cachedOfflineFormsOnly = false) {
+  const session = useSession();
+  const showHtmlFormEntryForms = true;
+  const url = showHtmlFormEntryForms ? formEncounterUrl : formEncounterUrlPoc;
+  const { data, error } = useSWR([url, cachedOfflineFormsOnly], async () => {
+    const res = await openmrsFetch(url);
+    // show published forms, and hide component forms, and filter based on privileges
+    const forms =
+      res.data?.results?.filter(
+        (form) =>
+          // forms should be published
+          form.published &&
+          // forms should not be component forms
+          !/component/i.test(form.name)
+        // user should have privileges to edit forms
+      ) ?? [];
+
+    return forms;
+  });
+
+  return {
+    forms: data?.filter((form) =>
+      Boolean(
+        userHasAccess(form.encounterType?.editPrivilege?.display, session?.user)
+      )
+    ),
+    isLoading: !error && !data,
+    error,
+  };
+}
+
+export default useGetAllForms;