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

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

@@ -0,0 +1,93 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Layer, Tile } 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";
+
+interface GroupSearchProps {
+  query: string;
+  selectGroupAction?: (group: GroupType) => void;
+}
+
+const GroupSearch: React.FC<GroupSearchProps> = ({
+  query = "",
+  selectGroupAction,
+}) => {
+  const { t } = useTranslation();
+  const results = useGroupSearch(query);
+  const error = false;
+
+  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 (query.length <= 2) return <SearchResultSkeleton />;
+
+  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}>
+          {results.length} {t("searchResultsText", "search result(s)")}
+        </p>
+        <CompactGroupResults
+          groups={results}
+          selectGroupAction={selectGroupAction}
+        />
+      </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,94 @@
+@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%;
+}
+
+.loadingIcon {
+  padding: spacing.$spacing-05 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.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;
+}

package/src/group-form-entry-workflow/group-search/mock-group-data.ts

@@ -0,0 +1,79 @@
+export const mockGroupData = [
+  {
+    id: 1,
+    name: "Teal Group",
+    description: "Coping skills group - Calgary",
+    members: [
+      {
+        name: "Donna Campbell",
+        uuid: "f87cae5e-6b64-4f64-884d-d46043a3b7da",
+      },
+      {
+        name: "Agnes Lewis",
+        uuid: "8af48d72-b155-4b41-ba9c-39e017fcf452",
+      },
+      {
+        name: "Daniel Mitchell",
+        uuid: "63665703-de71-4a2b-baa4-1a3acf995b7f",
+      },
+    ],
+  },
+  {
+    id: 2,
+    name: "Orange Group",
+    description: "Thursday night depression session",
+    members: [
+      {
+        name: "Mark Martin",
+        uuid: "eaef5256-ce7c-402c-9e56-f8e5d1fba22f",
+      },
+      {
+        name: "Robert Evans",
+        uuid: "8648a68d-1d68-4293-9d1a-a7a188b91418",
+      },
+      {
+        name: "Linda Johnson",
+        uuid: "8078cc5f-3cd7-4ebb-9ade-515c0dd5f85f",
+      },
+      {
+        name: "Daniel Green",
+        uuid: "4ff33dfa-e4ad-4cb5-bbad-8936f9d162df",
+      },
+      {
+        name: "Kimberly Adams",
+        uuid: "65bb2ebd-fef9-48c4-9c64-16445fa4fe7c",
+      },
+      {
+        name: "Daniel Lee",
+        uuid: "7d46336f-4b6e-4daa-a122-77a7efeb7a2e",
+      },
+      {
+        name: "Nancy Hernández",
+        uuid: "89ee2163-4dd4-4d4b-9882-f6be19c15b8f",
+      },
+    ],
+  },
+  {
+    id: 3,
+    name: "Blue Group",
+    description: "Thursday night depression session",
+    members: [
+      {
+        name: "Patty Patterson",
+        uuid: "9bf3adf4-3a5e-48b2-9adf-e117ce2ecdc5",
+      },
+      {
+        name: "Johnny Cash",
+        uuid: "f43172b8-a6fc-4edb-b92b-8d759ed9da50",
+      },
+      {
+        name: "John Doe Two",
+        uuid: "fa918efe-a4a4-4ac8-8381-3ba14ac61953",
+      },
+      {
+        name: "Foo Bazzi Bar",
+        uuid: "791c9475-8396-4519-a8ab-905cee8cccd3",
+      },
+    ],
+  },
+];

package/src/group-form-entry-workflow/group-search/useGroupSearch.ts

@@ -0,0 +1,14 @@
+import { mockGroupData } from "./mock-group-data";
+
+export function useGroupSearch(filter) {
+  const searchHistory = mockGroupData || [];
+  // if (filter.length <= 2) return [];
+
+  return filter
+    ? searchHistory?.filter(
+        (item) =>
+          item?.description?.toLowerCase()?.includes(filter?.toLowerCase()) ||
+          item?.name?.toLowerCase()?.includes(filter?.toLowerCase())
+      )
+    : searchHistory;
+}

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

@@ -0,0 +1,42 @@
+import { Close } from "@carbon/react/icons";
+import { Button } from "@carbon/react";
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+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 } = useContext(GroupFormWorkflowContext);
+  const handleSelectGroup = (group) => {
+    setGroup(group);
+  };
+
+  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>
+        <AddGroupModal />
+      </span>
+      <span style={{ flexGrow: 1 }} />
+      <span>
+        <Link to="..">
+          <Button kind="ghost">
+            {t("cancel", "Cancel")} <Close size={20} />
+          </Button>
+        </Link>
+      </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,86 @@
+@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;
+}
+
+.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;
+}
+
+.formContainer :global(.cds--form-item) :global(.question-area) {
+  max-width: 100%;
+}
+
+.rightPanel {
+  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,6 @@
+import useGetAllForms from "./useGetAllForms";
+import useGetPatient from "./useGetPatient";
+import useFormState from "./useFormState";
+import useGetEncounter from "./useGetEncounter";
+
+export { useGetAllForms, useGetPatient, useFormState, useGetEncounter };

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;

package/src/hooks/useGetEncounter.ts

@@ -0,0 +1,21 @@
+import { openmrsFetch } from "@openmrs/esm-framework";
+import useSWR from "swr";
+
+const encounterUrl = "/ws/rest/v1/encounter/";
+
+const useGetEncounter = (encounterUuid) => {
+  const url = `${encounterUrl}${encounterUuid}`;
+  const { data, error } = useSWR(url, async () => {
+    const res = await openmrsFetch(url);
+    const encounter = res.data || null;
+    return encounter;
+  });
+
+  return {
+    encounter: data,
+    isLoading: !error && data,
+    error,
+  };
+};
+
+export default useGetEncounter;

package/src/hooks/useGetPatient.ts

@@ -0,0 +1,23 @@
+import { fetchCurrentPatient } from "@openmrs/esm-framework";
+import { useEffect, useState } from "react";
+
+const useGetPatient = (patientUuid) => {
+  const [patient, setPatient] = useState(null);
+
+  useEffect(() => {
+    if (!patientUuid) {
+      setPatient(null);
+    } else {
+      getPatient(patientUuid);
+    }
+  }, [patientUuid]);
+
+  const getPatient = async (uuid) => {
+    const result = await fetchCurrentPatient(uuid);
+    setPatient(result?.data);
+  };
+
+  return patient;
+};
+
+export default useGetPatient;

package/src/hooks/useKeyPress.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+const useKeyPress = (targetKey) => {
+  const [keyPressed, setKeyPressed] = useState(false);
+
+  useEffect(() => {
+    const downHandler = ({ key }) => {
+      if (key === targetKey) {
+        setKeyPressed(true);
+      }
+    };
+
+    const upHandler = ({ key }) => {
+      if (key === targetKey) {
+        setKeyPressed(false);
+      }
+    };
+
+    window.addEventListener("keydown", downHandler);
+    window.addEventListener("keyup", upHandler);
+
+    return () => {
+      window.removeEventListener("keydown", downHandler);
+      window.removeEventListener("keyup", upHandler);
+    };
+  }, [targetKey]);
+
+  return keyPressed;
+};
+
+export default useKeyPress;