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

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

@@ -0,0 +1,8 @@
+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, 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

@@ -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,37 @@
+import { openmrsFetch, userHasAccess, useSession, restBaseUrl } 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 = `${restBaseUrl}/form?v=custom:${customFormRepresentation}`;
+const formEncounterUrlPoc = `${restBaseUrl}/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, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+const encounterUrl = `${restBaseUrl}/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);
+  };
+
+  return patient;
+};
+
+export default useGetPatient;