@openmrs/esm-fast-data-entry-app 1.0.1-pre.171 → 1.0.1-pre.176

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

@@ -1,26 +1,24 @@
-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";
+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 CompactGroupSearch: React.FC<CompactGroupSearchProps> = ({ selectGroupAction }) => {
   const { t } = useTranslation();
-  const [query, setQuery] = useState("");
+  const [query, setQuery] = useState('');
   const [dropdownShown, setDropdownShown] = useState(false);
 
   const onGroupSelect = (group) => {
     selectGroupAction(group);
     setDropdownShown(false);
-    setQuery("");
+    setQuery('');
   };
 
   const handleSearchChange = (e) => {
@@ -42,18 +40,18 @@ const CompactGroupSearch: React.FC<CompactGroupSearchProps> = ({
         <Search
           autoFocus
           className={styles.patientSearchInput}
-          closeButtonLabelText={t("clearSearch", "Clear")}
+          closeButtonLabelText={t('clearSearch', 'Clear')}
           labelText=""
           onChange={(event) => {
             handleSearchChange(event.target.value);
           }}
           onClear={() => undefined}
-          placeholder={t("searchForGroup", "Search for a group by name")}
+          placeholder={t('searchForGroup', 'Search for a group by name')}
           size="sm"
           value={query}
         />
         <Button kind="secondary" size="sm">
-          {t("search", "Search")}
+          {t('search', 'Search')}
         </Button>
       </div>
       {dropdownShown && (

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

@@ -1,23 +1,18 @@
-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";
+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 GroupSearch: React.FC<GroupSearchProps> = ({ query = '', selectGroupAction }) => {
   const { t } = useTranslation();
   const {
     isLoading,
@@ -31,7 +26,7 @@ const GroupSearch: React.FC<GroupSearchProps> = ({
     searchTerm: query,
     searching: !!query,
     parameters: {
-      v: "full",
+      v: 'full',
     },
   });
 
@@ -53,13 +48,13 @@ const GroupSearch: React.FC<GroupSearchProps> = ({
         },
         {
           threshold: 0.75,
-        }
+        },
       );
       if (node) {
         observer.current.observe(node);
       }
     },
-    [loadingNewData, hasMore, setPage]
+    [loadingNewData, hasMore, setPage],
   );
 
   if (error) {
@@ -69,11 +64,11 @@ const GroupSearch: React.FC<GroupSearchProps> = ({
           <Tile className={styles.emptySearchResultsTile}>
             <EmptyDataIllustration />
             <div>
-              <p className={styles.errorMessage}>{t("error", "Error")}</p>
+              <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."
+                  '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>
@@ -101,18 +96,11 @@ const GroupSearch: React.FC<GroupSearchProps> = ({
         <Layer>
           <Tile className={styles.emptySearchResultsTile}>
             <EmptyDataIllustration />
-            <p className={styles.emptyResultText}>
-              {t("noGroupsFoundMessage", "Sorry, no groups have been found")}
-            </p>
+            <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>
+              <span>{t('trySearchWithPatientUniqueID', "Try searching with the cohort's description")}</span>
               <br />
-              <span>{t("orLabelName", "OR label name")}</span>
+              <span>{t('orLabelName', 'OR label name')}</span>
             </p>
           </Tile>
         </Layer>
@@ -125,21 +113,17 @@ const GroupSearch: React.FC<GroupSearchProps> = ({
       <div
         className={styles.searchResults}
         style={{
-          maxHeight: "22rem",
+          maxHeight: '22rem',
         }}
       >
         <p className={styles.resultsText}>
-          {totalResults} {t("searchResultsText", "search result(s)")}
+          {totalResults} {t('searchResultsText', 'search result(s)')}
         </p>
-        <CompactGroupResults
-          groups={results}
-          selectGroupAction={selectGroupAction}
-          lastRef={lastItem}
-        />
+        <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>}
+            {!hasMore && <p>{t('noMoreResults', 'End of search results')}</p>}
           </div>
         </div>
       </div>

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

@@ -1,25 +1,22 @@
-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";
+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 { activeGroupUuid, setGroup, destroySession } = useContext(GroupFormWorkflowContext);
   const [isOpen, setOpen] = useState(false);
   const handleSelectGroup = (group) => {
     group.cohortMembers.sort((a, b) => {
-        let aName = a?.patient?.person?.names?.[0]?.display;
-        let bName = b?.patient?.person?.names?.[0]?.display;
-        return aName.localeCompare(bName, undefined, {sensitivity: "base"});
-      }
-    );
+      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);
   };
 
@@ -39,18 +36,14 @@ const GroupSearchHeader = () => {
 
   return (
     <div className={styles.searchHeaderContainer}>
-      <span className={styles.padded}>{t("findGroup", "Find group")}:</span>
+      <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 className={styles.padded}>{t('or', 'or')}</span>
       <span>
-        <Button
-          onClick={handleOpenClick}
-          renderIcon={Add}
-          iconDescription="Add"
-        >
-          {t("createNewGroup", "Create New Group")}
+        <Button onClick={handleOpenClick} renderIcon={Add} iconDescription="Add">
+          {t('createNewGroup', 'Create New Group')}
         </Button>
         <AddGroupModal
           {...{
@@ -69,7 +62,7 @@ const GroupSearchHeader = () => {
             destroySession();
           }}
         >
-          {t("cancel", "Cancel")} <Close size={20} />
+          {t('cancel', 'Cancel')} <Close size={20} />
         </Button>
       </span>
     </div>

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

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

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

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

package/src/hooks/index.ts

@@ -1,14 +1,8 @@
-import useGetAllForms from "./useGetAllForms";
-import useGetPatient from "./useGetPatient";
-import useFormState from "./useFormState";
-import useGetEncounter from "./useGetEncounter";
-import useForm from "./useForm";
+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";
+export { useGetAllForms, useGetPatient, useFormState, useGetEncounter, useForm };
+export * from './usePostEndpoint';

package/src/hooks/useForm.ts

@@ -1,32 +1,22 @@
-import {
-  type FetchResponse,
-  openmrsFetch,
-  restBaseUrl,
-} from "@openmrs/esm-framework";
-import useSWR from "swr";
-import { type SpecificQuestion, type SpecificQuestionConfig } from "../types";
-import { useMemo } from "react";
+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>
-) => {
+export const useSpecificQuestions = (formUuid: string, specificQuestionConfig: Array<SpecificQuestionConfig>) => {
   const specificQuestionsToLoad = useMemo(
     () => getQuestionIdsByFormId(formUuid, specificQuestionConfig),
-    [formUuid, specificQuestionConfig]
+    [formUuid, specificQuestionConfig],
   );
 
   const { data, error } = useSWR<FetchResponse, Error>(
     specificQuestionsToLoad ? `${formUrl}/${formUuid}` : null,
-    openmrsFetch
+    openmrsFetch,
   );
 
-  const specificQuestions = getQuestionsByIds(
-    specificQuestionsToLoad,
-    data?.data
-  );
+  const specificQuestions = getQuestionsByIds(specificQuestionsToLoad, data?.data);
 
   return {
     questions: specificQuestions || null,
@@ -35,13 +25,8 @@ export const useSpecificQuestions = (
   };
 };
 
-function getQuestionIdsByFormId(
-  formUuid: string,
-  specificQuestionConfig: Array<SpecificQuestionConfig>
-) {
-  const matchingQuestions = specificQuestionConfig.filter((question) =>
-    question.forms.includes(formUuid)
-  );
+function getQuestionIdsByFormId(formUuid: string, specificQuestionConfig: Array<SpecificQuestionConfig>) {
+  const matchingQuestions = specificQuestionConfig.filter((question) => question.forms.includes(formUuid));
   return matchingQuestions.map((question) => question.questionId);
 }
 
@@ -56,17 +41,15 @@ function getQuestionsByIds(questionIds, formSchema): Array<SpecificQuestion> {
         .filter((question) => questionIds.includes(question.id))
         .map((question) => ({
           question: {
-            display:
-              question.label ??
-              conceptLabels[question.questionOptions.concept]?.display,
+            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,
           })),
-        }))
-    )
+        })),
+    ),
   );
 }
 

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]);
 

package/src/hooks/useGetAllForms.ts

@@ -1,13 +1,8 @@
-import {
-  openmrsFetch,
-  userHasAccess,
-  useSession,
-  restBaseUrl,
-} from "@openmrs/esm-framework";
-import useSWR from "swr";
+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))";
+  '(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`;
@@ -25,7 +20,7 @@ export function useGetAllForms(cachedOfflineFormsOnly = false) {
           // forms should be published
           form.published &&
           // forms should not be component forms
-          !/component/i.test(form.name)
+          !/component/i.test(form.name),
         // user should have privileges to edit forms
       ) ?? [];
 
@@ -33,11 +28,7 @@ export function useGetAllForms(cachedOfflineFormsOnly = false) {
   });
 
   return {
-    forms: data?.filter((form) =>
-      Boolean(
-        userHasAccess(form.encounterType?.editPrivilege?.display, session?.user)
-      )
-    ),
+    forms: data?.filter((form) => Boolean(userHasAccess(form.encounterType?.editPrivilege?.display, session?.user))),
     isLoading: !error && !data,
     error,
   };

package/src/hooks/useGetEncounter.ts

@@ -1,5 +1,5 @@
-import { openmrsFetch, restBaseUrl } from "@openmrs/esm-framework";
-import useSWR from "swr";
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
 
 const encounterUrl = `${restBaseUrl}/encounter/`;
 

package/src/hooks/useGetPatient.ts

@@ -1,5 +1,5 @@
-import { fetchCurrentPatient } from "@openmrs/esm-framework";
-import { useEffect, useState } from "react";
+import { fetchCurrentPatient } from '@openmrs/esm-framework';
+import { useEffect, useState } from 'react';
 
 const useGetPatient = (patientUuid) => {
   const [patient, setPatient] = useState(null);

package/src/hooks/useGetPatients.ts

@@ -1,5 +1,5 @@
-import { fetchCurrentPatient } from "@openmrs/esm-framework";
-import { useEffect, useState } from "react";
+import { fetchCurrentPatient } from '@openmrs/esm-framework';
+import { useEffect, useState } from 'react';
 
 const useGetPatients = (patientUuids) => {
   const [patients, setPatients] = useState([]);
@@ -17,13 +17,11 @@ const useGetPatients = (patientUuids) => {
   const getPatients = async (uuids) => {
     try {
       setIsLoading(true);
-      const results = await Promise.all(
-        uuids.map(async (uuid) => await fetchCurrentPatient(uuid))
-      );
+      const results = await Promise.all(uuids.map(async (uuid) => await fetchCurrentPatient(uuid)));
       setPatients(results);
       setIsLoading(false);
     } catch (error) {
-      console.error("Error fetching patients:", error);
+      console.error('Error fetching patients:', error);
       setIsLoading(false);
     }
   };

package/src/hooks/useGetSystemSetting.ts

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useState } from "react";
-import { openmrsFetch, restBaseUrl } from "@openmrs/esm-framework";
+import { useCallback, useEffect, useState } from 'react';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
 
 const useGetSystemSetting = (settingId) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -19,9 +19,7 @@ const useGetSystemSetting = (settingId) => {
   }, []);
 
   const getSetting = useCallback(() => {
-    openmrsFetch(`${restBaseUrl}/systemsetting?q=${settingId}&v=default`)
-      .then(onResult)
-      .catch(onError);
+    openmrsFetch(`${restBaseUrl}/systemsetting?q=${settingId}&v=default`).then(onResult).catch(onError);
   }, [onError, onResult, settingId]);
 
   useEffect(() => {

package/src/hooks/useKeyPress.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
 
 const useKeyPress = (targetKey) => {
   const [keyPressed, setKeyPressed] = useState(false);
@@ -16,12 +16,12 @@ const useKeyPress = (targetKey) => {
       }
     };
 
-    window.addEventListener("keydown", downHandler);
-    window.addEventListener("keyup", upHandler);
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
 
     return () => {
-      window.removeEventListener("keydown", downHandler);
-      window.removeEventListener("keyup", upHandler);
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
     };
   }, [targetKey]);
 

package/src/hooks/usePostEndpoint.ts

@@ -1,5 +1,5 @@
-import { openmrsFetch, restBaseUrl } from "@openmrs/esm-framework";
-import { useCallback, useState } from "react";
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { useCallback, useState } from 'react';
 
 const usePostEndpoint = ({ endpointUrl }) => {
   const [submissionInProgress, setSubmissionInProgress] = useState(null);
@@ -14,7 +14,7 @@ const usePostEndpoint = ({ endpointUrl }) => {
       }
       setResult(result.data);
     },
-    [error]
+    [error],
   );
 
   const onError = useCallback(
@@ -25,7 +25,7 @@ const usePostEndpoint = ({ endpointUrl }) => {
       }
       setError(error?.responseBody?.error ?? error?.responseBody ?? error);
     },
-    [result]
+    [result],
   );
 
   const post = useCallback(
@@ -34,20 +34,20 @@ const usePostEndpoint = ({ endpointUrl }) => {
 
       let path = endpointUrl;
       if (data.uuid) {
-        path += "/" + data.uuid;
+        path += '/' + data.uuid;
       }
 
       return openmrsFetch(path, {
-        method: "POST",
+        method: 'POST',
         headers: {
-          "Content-Type": "application/json",
+          'Content-Type': 'application/json',
         },
         body: data,
       })
         .then(onFormPosted)
         .catch(onError);
     },
-    [endpointUrl, onError, onFormPosted]
+    [endpointUrl, onError, onFormPosted],
   );
 
   const reset = () => {