@openmrs/esm-fast-data-entry-app 1.0.0-pre.59 → 1.0.0

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

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { type 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,134 @@
+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 { type 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,63 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.patientSearchResult {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid colors.$gray-20;
+  padding: 0 layout.$spacing-04;
+
+  &:hover,
+  &:focus {
+    background-color: colors.$gray-10;
+  }
+}
+
+.patientSearchResultSelected {
+  background-color: colors.$gray-20;
+}
+
+.patientBanner {
+  display: flex;
+}
+
+.patientName {
+  @include type.type-style('heading-02');
+}
+
+.patientAvatar {
+  width: layout.$spacing-09;
+  height: layout.$spacing-09;
+  margin: layout.$spacing-03 layout.$spacing-05 layout.$spacing-03 0;
+  border-radius: 1px;
+}
+
+.patientInfo {
+  width: 100%;
+  display: flex;
+  flex-flow: column wrap;
+  margin: layout.$spacing-05;
+  cursor: pointer;
+}
+
+.demographics {
+  margin-top: layout.$spacing-03;
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-70;
+}
+
+.identifiers {
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-50;
+}
+
+.actionsContainer {
+  padding-top: layout.$spacing-03;
+  margin-top: layout.$spacing-05;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+}

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

@@ -0,0 +1,34 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.patientSearchBar {
+  width: 50vw;
+  position: relative;
+}
+
+.floatingSearchResultsContainer {
+  position: absolute;
+  overflow-y: auto;
+  box-shadow: 0 layout.$spacing-03 layout.$spacing-05 colors.$gray-20;
+  z-index: 99;
+  border: 0 1px 1px 1px solid colors.$gray-20;
+  width: 100%;
+  background-color: colors.$white-0;
+}
+
+.searchArea {
+  width: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid colors.$gray-50;
+}
+
+.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,93 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.searchResultsContainer {
+  width: 100%;
+  background-color: colors.$white-0;
+
+  a {
+    text-decoration: none;
+    @include type.type-style('heading-02');
+    color: colors.$gray-70;
+    margin: 0rem;
+  }
+}
+
+:global(.omrs-breakpoint-lt-desktop) .searchResultsContainer {
+  top: 6.25rem;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .searchResultsContainer {
+  padding: 0;
+  top: layout.$spacing-09;
+}
+
+.searchResults {
+  width: 100%;
+}
+
+
+.searchTerm {
+  @include type.type-style('heading-03');
+  margin-top: 0.375rem;
+}
+
+.resultsText {
+  @include type.type-style('label-01');
+  color: colors.$gray-70;
+  line-height: layout.$spacing-05;
+  margin: layout.$spacing-03 layout.$spacing-05;
+}
+
+.helperText {
+  color: var(--omrs-color-ink-medium-contrast);
+  margin-left: 2.375rem;
+}
+
+.emptyResultText {
+  @include type.type-style('heading-compact-01');
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-05;
+  margin-bottom: 0.313rem;
+}
+
+.actionText {
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+}
+
+.pagination {
+  display: flex;
+  justify-content: space-evenly;
+  padding: 4.688rem 0 layout.$spacing-06;
+}
+
+.emptySearchResultsTile {
+  text-align: center;
+  margin-top: layout.$spacing-05;
+  padding: layout.$spacing-09 0rem;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .emptySearchResultsTile {
+  margin: layout.$spacing-05;
+}
+
+.errorMessage {
+  @include type.type-style('heading-compact-02');
+  margin-top: 2.25rem;
+  margin-bottom: layout.$spacing-03;
+}
+
+.errorCopy {
+  margin-bottom: layout.$spacing-03;
+  @include type.type-style('body-01');
+  color: colors.$gray-70;
+}
+
+.lastItem {
+  padding: layout.$spacing-05;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -0,0 +1,72 @@
+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) => {
+    group.cohortMembers.sort((a, b) => {
+      const aName = a?.patient?.person?.names?.[0]?.display;
+      const bName = b?.patient?.person?.names?.[0]?.display;
+      return aName.localeCompare(bName, undefined, { sensitivity: 'base' });
+    });
+    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,
+            onPostCancel: 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/colors';
+@use '@carbon/layout';
+
+.searchHeaderContainer {
+  height: layout.$spacing-11;
+  display: flex;
+  align-items: center;
+  background-color: colors.$white-0;
+  border-top: 0.0125rem solid colors.$gray-20;
+  border-bottom: 0.0125rem solid colors.$gray-20;
+  padding: 0 layout.$spacing-05;
+}
+
+.searchBarWrapper {
+  min-width: 35rem;
+}
+
+.padded {
+  padding: layout.$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,94 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.breadcrumbsContainer > div > div > nav {
+  background-color: colors.$white-0;
+  padding: layout.$spacing-04 layout.$spacing-05;
+  height: layout.$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 layout.$spacing-04;
+}
+
+.selectPatientMessage {
+  @include type.type-style('heading-03');
+  margin: layout.$spacing-07;
+  text-align: center;
+}
+
+.formMainContent {
+  display: flex;
+  text-align: center;
+  margin-top: layout.$spacing-05;
+  column-gap: layout.$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: layout.$spacing-05;
+}
+
+.patientCardsSection {
+  margin: layout.$spacing-05 0;
+  border-bottom: 1px solid colors.$gray-10;
+}
+
+.rightPanelActionButtons {
+  display: flex;
+  flex-direction: column;
+  row-gap: layout.$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

@@ -1,6 +1,8 @@
-import useGetAllForms from "./useGetAllForms";
-import useGetPatient from "./useGetPatient";
-import useFormState from "./useFormState";
-import useGetEncounter from "./useGetEncounter";
+import useGetAllForms from './useGetAllForms';
+import useGetPatient from './useGetPatient';
+import useFormState from './useFormState';
+import useGetEncounter from './useGetEncounter';
+import useForm from './useForm';
 
-export { useGetAllForms, useGetPatient, useFormState, useGetEncounter };
+export { useGetAllForms, useGetPatient, useFormState, useGetEncounter, useForm };
+export * from './usePostEndpoint';

package/src/hooks/useForm.ts

@@ -0,0 +1,56 @@
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { type SpecificQuestion, type SpecificQuestionConfig } from '../types';
+import { useMemo } from 'react';
+
+const formUrl = `${restBaseUrl}/o3/forms`;
+
+export const useSpecificQuestions = (formUuid: string, specificQuestionConfig: Array<SpecificQuestionConfig>) => {
+  const specificQuestionsToLoad = useMemo(
+    () => getQuestionIdsByFormId(formUuid, specificQuestionConfig),
+    [formUuid, specificQuestionConfig],
+  );
+
+  const { data, error } = useSWR<FetchResponse, Error>(
+    specificQuestionsToLoad ? `${formUrl}/${formUuid}` : null,
+    openmrsFetch,
+  );
+
+  const specificQuestions = getQuestionsByIds(specificQuestionsToLoad, data?.data);
+
+  return {
+    questions: specificQuestions || null,
+    isError: error,
+    isLoading: !data && !error,
+  };
+};
+
+function getQuestionIdsByFormId(formUuid: string, specificQuestionConfig: Array<SpecificQuestionConfig>) {
+  const matchingQuestions = specificQuestionConfig.filter((question) => question.forms.includes(formUuid));
+  return matchingQuestions.map((question) => question.questionId);
+}
+
+function getQuestionsByIds(questionIds, formSchema): Array<SpecificQuestion> {
+  if (!formSchema || questionIds.lenght <= 0) {
+    return [];
+  }
+  const conceptLabels = formSchema.conceptReferences;
+  return formSchema.pages.flatMap((page) =>
+    page.sections.flatMap((section) =>
+      section.questions
+        .filter((question) => questionIds.includes(question.id))
+        .map((question) => ({
+          question: {
+            display: question.label ?? conceptLabels[question.questionOptions.concept]?.display,
+            id: question.id,
+          },
+          answers: (question.questionOptions.answers ?? []).map((answer) => ({
+            value: answer.concept,
+            display: answer.label ?? conceptLabels[answer.concept]?.display,
+          })),
+        })),
+    ),
+  );
+}
+
+export default useSpecificQuestions;

package/src/hooks/useFormState.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
 
 const useFormState = (formUuid) => {
   const [state, setState] = useState(null);
@@ -10,10 +10,10 @@ const useFormState = (formUuid) => {
       }
     };
 
-    window.addEventListener("ampath-form-state", handler);
+    window.addEventListener('ampath-form-state', handler);
 
     return () => {
-      window.removeEventListener("ampath-form-state", handler);
+      window.removeEventListener('ampath-form-state', handler);
     };
   }, [formUuid]);