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

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

@@ -1,13 +1,11 @@
-@use '@carbon/styles/scss/spacing';
 @use '@carbon/colors';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .breadcrumbsContainer > div > div > nav {
-  background-color: $ui-02;
-  padding: spacing.$spacing-04 spacing.$spacing-05;
-  height: spacing.$spacing-08;
+  background-color: colors.$white-0;
+  padding: layout.$spacing-04 layout.$spacing-05;
+  height: layout.$spacing-08;
 }
 
 .workspaceWrapper {
@@ -26,26 +24,27 @@
 :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;
+  padding: 0 layout.$spacing-04;
 }
 
 .selectPatientMessage {
-  @include type.type-style('productive-heading-03');
-  margin: spacing.$spacing-07;
+  @include type.type-style('heading-03');
+  margin: layout.$spacing-07;
   text-align: center;
 }
 
 .formMainContent {
   display: flex;
   text-align: center;
-  margin-top: spacing.$spacing-05;
-  column-gap: spacing.$spacing-05;
+  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) {
@@ -53,23 +52,23 @@
 }
 
 .rightPanel {
-  width: 13rem;
+  min-width: 13rem;
   text-align: left;
   overflow-y: scroll;
   display: flex;
   flex-direction: column;
-  row-gap: spacing.$spacing-05;
+  row-gap: layout.$spacing-05;
 }
 
 .patientCardsSection {
-  margin: spacing.$spacing-05 0;
+  margin: layout.$spacing-05 0;
   border-bottom: 1px solid colors.$gray-10;
 }
 
 .rightPanelActionButtons {
   display: flex;
   flex-direction: column;
-  row-gap: spacing.$spacing-03;
+  row-gap: layout.$spacing-03;
   & button {
     width: 100%;
     text-decoration: "none";
@@ -89,7 +88,6 @@
   width: 500px;
 }
 
-
 .formError {
   @include type.type-style("helper-text-02");
   color: colors.$red-60;

package/src/hooks/index.ts

@@ -1,7 +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 * from "./usePostEndpoint";
+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]);
 

package/src/hooks/useGetAllForms.ts

@@ -1,15 +1,11 @@
-import {
-  openmrsFetch,
-  userHasAccess,
-  useSession,
-} 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 = `/ws/rest/v1/form?v=custom:${customFormRepresentation}`;
-const formEncounterUrlPoc = `/ws/rest/v1/form?v=custom:${customFormRepresentation}&q=poc`;
+const formEncounterUrl = `${restBaseUrl}/form?v=custom:${customFormRepresentation}`;
+const formEncounterUrlPoc = `${restBaseUrl}/form?v=custom:${customFormRepresentation}&q=poc`;
 
 export function useGetAllForms(cachedOfflineFormsOnly = false) {
   const session = useSession();
@@ -24,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
       ) ?? [];
 
@@ -32,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,7 +1,7 @@
-import { openmrsFetch } from "@openmrs/esm-framework";
-import useSWR from "swr";
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
 
-const encounterUrl = "/ws/rest/v1/encounter/";
+const encounterUrl = `${restBaseUrl}/encounter/`;
 
 const useGetEncounter = (encounterUuid) => {
   const url = `${encounterUrl}${encounterUuid}`;

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);
@@ -14,7 +14,7 @@ const useGetPatient = (patientUuid) => {
 
   const getPatient = async (uuid) => {
     const result = await fetchCurrentPatient(uuid);
-    setPatient(result?.data);
+    setPatient(result);
   };
 
   return patient;

package/src/hooks/useGetPatients.ts

@@ -0,0 +1,32 @@
+import { fetchCurrentPatient } from '@openmrs/esm-framework';
+import { useEffect, useState } from 'react';
+
+const useGetPatients = (patientUuids) => {
+  const [patients, setPatients] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    if (!patientUuids || patientUuids.length === 0) {
+      setPatients([]);
+      setIsLoading(false);
+    } else {
+      getPatients(patientUuids);
+    }
+  }, [patientUuids]);
+
+  const getPatients = async (uuids) => {
+    try {
+      setIsLoading(true);
+      const results = await Promise.all(uuids.map(async (uuid) => await fetchCurrentPatient(uuid)));
+      setPatients(results);
+      setIsLoading(false);
+    } catch (error) {
+      console.error('Error fetching patients:', error);
+      setIsLoading(false);
+    }
+  };
+
+  return { patients, isLoading };
+};
+
+export default useGetPatients;

package/src/hooks/useGetSystemSetting.ts

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useState } from 'react';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+const useGetSystemSetting = (settingId) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+
+  const onResult = useCallback((result) => {
+    setIsSubmitting(false);
+    setError(false);
+    setResult(result);
+  }, []);
+
+  const onError = useCallback((error) => {
+    setIsSubmitting(false);
+    setResult(null);
+    setError(error);
+  }, []);
+
+  const getSetting = useCallback(() => {
+    openmrsFetch(`${restBaseUrl}/systemsetting?q=${settingId}&v=default`).then(onResult).catch(onError);
+  }, [onError, onResult, settingId]);
+
+  useEffect(() => {
+    getSetting();
+  }, [getSetting]);
+
+  return {
+    result,
+    error,
+    isSubmitting,
+  };
+};
+
+export default useGetSystemSetting;

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 } 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,23 +25,29 @@ const usePostEndpoint = ({ endpointUrl }) => {
       }
       setError(error?.responseBody?.error ?? error?.responseBody ?? error);
     },
-    [result]
+    [result],
   );
 
   const post = useCallback(
     async (data) => {
       setSubmissionInProgress(true);
-      return openmrsFetch(endpointUrl, {
-        method: "POST",
+
+      let path = endpointUrl;
+      if (data.uuid) {
+        path += '/' + data.uuid;
+      }
+
+      return openmrsFetch(path, {
+        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 = () => {
@@ -60,11 +66,11 @@ const usePostEndpoint = ({ endpointUrl }) => {
 };
 
 const usePostVisit = () => {
-  return usePostEndpoint({ endpointUrl: "/ws/rest/v1/visit" });
+  return usePostEndpoint({ endpointUrl: `${restBaseUrl}/visit` });
 };
 
 const usePostCohort = () => {
-  return usePostEndpoint({ endpointUrl: "/ws/rest/v1/cohortm/cohort" });
+  return usePostEndpoint({ endpointUrl: `${restBaseUrl}/cohortm/cohort` });
 };
 
 export { usePostEndpoint, usePostVisit, usePostCohort };

package/src/hooks/useSearchEndpoint.ts

@@ -1,6 +1,6 @@
-import { openmrsFetch, FetchResponse } from "@openmrs/esm-framework";
-import { useCallback, useMemo } from "react";
-import useSWRInfinite from "swr/infinite";
+import { openmrsFetch, type FetchResponse, restBaseUrl } from '@openmrs/esm-framework';
+import { useCallback, useMemo } from 'react';
+import useSWRInfinite from 'swr/infinite';
 
 export interface SearchResponse {
   data: Array<Record<string, unknown>> | null;
@@ -11,12 +11,14 @@ export interface SearchResponse {
   currentPage: number;
   totalResults: number;
   setPage: (size: number | ((_size: number) => number)) => Promise<
-    FetchResponse<{
-      results: Array<Record<string, unknown>>;
-      links: Array<{
-        rel: "prev" | "next";
-      }>;
-    }>[]
+    Array<
+      FetchResponse<{
+        results: Array<Record<string, unknown>>;
+        links: Array<{
+          rel: 'prev' | 'next';
+        }>;
+      }>
+    >
   >;
 }
 
@@ -28,29 +30,18 @@ interface SearchInfiniteProps {
   resultsToFetch?: number;
 }
 
-const useSearchEndpointInfinite = (
-  arg0: SearchInfiniteProps
-): SearchResponse => {
-  const {
-    baseUrl,
-    searchTerm,
-    parameters,
-    searching = true,
-    resultsToFetch = 10,
-  } = arg0;
+const useSearchEndpointInfinite = (arg0: SearchInfiniteProps): SearchResponse => {
+  const { baseUrl, searchTerm, parameters, searching = true, resultsToFetch = 10 } = arg0;
 
   const getUrl = useCallback(
     (
       page: number,
       prevPageData: FetchResponse<{
         results: Array<Record<string, unknown>>;
-        links: Array<{ rel: "prev" | "next" }>;
-      }>
+        links: Array<{ rel: 'prev' | 'next' }>;
+      }>,
     ) => {
-      if (
-        prevPageData &&
-        !prevPageData?.data?.links.some((link) => link.rel === "next")
-      ) {
+      if (prevPageData && !prevPageData?.data?.links.some((link) => link.rel === 'next')) {
         return null;
       }
       let url = `${baseUrl}?q=${searchTerm}`;
@@ -72,13 +63,13 @@ const useSearchEndpointInfinite = (
       }
       return url;
     },
-    [baseUrl, searchTerm, parameters, resultsToFetch]
+    [baseUrl, searchTerm, parameters, resultsToFetch],
   );
 
   const { data, isValidating, setSize, error, size } = useSWRInfinite<
     FetchResponse<{
       results: Array<Record<string, unknown>>;
-      links: Array<{ rel: "prev" | "next" }>;
+      links: Array<{ rel: 'prev' | 'next' }>;
       totalCount: number;
     }>,
     Error
@@ -86,32 +77,24 @@ const useSearchEndpointInfinite = (
 
   const results = useMemo(
     () => ({
-      data: data
-        ? [].concat(...(data?.map((resp) => resp?.data?.results) ?? []))
-        : null,
+      data: data ? [].concat(...(data?.map((resp) => resp?.data?.results) ?? [])) : null,
       isLoading: !data && !error,
       error,
-      hasMore: data?.length
-        ? !!data[data.length - 1].data?.links?.some(
-            (link) => link.rel === "next"
-          )
-        : false,
+      hasMore: data?.length ? !!data[data.length - 1].data?.links?.some((link) => link.rel === 'next') : false,
       loadingNewData: isValidating,
       setPage: setSize,
       currentPage: size,
       totalResults: data?.[0]?.data?.totalCount,
     }),
-    [data, isValidating, error, setSize, size]
+    [data, isValidating, error, setSize, size],
   );
 
   return results;
 };
 
-const useSearchCohortInfinite = ({
-  ...props
-}: SearchInfiniteProps): SearchResponse => {
+const useSearchCohortInfinite = ({ ...props }: SearchInfiniteProps): SearchResponse => {
   return useSearchEndpointInfinite({
-    baseUrl: "/ws/rest/v1/cohortm/cohort",
+    baseUrl: `${restBaseUrl}/cohortm/cohort`,
     resultsToFetch: 10,
     ...props,
   });

package/src/hooks/useStartVisit.ts

@@ -0,0 +1,82 @@
+import { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { showNotification, showToast, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+const useStartVisit = ({ showSuccessNotification = true, showErrorNotification = true }) => {
+  const { t } = useTranslation();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [success, setSuccess] = useState(null);
+  const [error, setError] = useState(null);
+
+  const onSave = useCallback(
+    (result) => {
+      setIsSubmitting(false);
+      setError(false);
+      setSuccess(result);
+      if (showSuccessNotification) {
+        showToast({
+          critical: true,
+          kind: 'success',
+          description: t('visitStartedSuccessfully', `${result?.data?.visitType?.display} started successfully`),
+          title: t('visitStarted', 'Visit started'),
+        });
+      }
+    },
+    [t, showSuccessNotification],
+  );
+
+  const onError = useCallback(
+    (error) => {
+      setIsSubmitting(false);
+      setSuccess(false);
+      setError(error);
+      if (showErrorNotification) {
+        showNotification({
+          title: t('startVisitError', 'Error starting visit'),
+          kind: 'error',
+          critical: true,
+          description: error?.message,
+        });
+      }
+    },
+    [t, showErrorNotification],
+  );
+
+  const saveVisit = useCallback(
+    (data) => {
+      const payload = {
+        patient: data.patientUuid,
+        startDatetime: data.startDatetime,
+        stopDatetime: data.stopDatetime,
+        visitType: data.visitType,
+        location: data.location,
+      };
+      openmrsFetch(`${restBaseUrl}/visit`, {
+        method: 'POST',
+        body: payload,
+        headers: { 'Content-Type': 'application/json' },
+      })
+        .then(onSave)
+        .catch(onError);
+    },
+    [onError, onSave],
+  );
+
+  const updateEncounter = useCallback((data) => {
+    openmrsFetch(`${restBaseUrl}/encounter/` + data.uuid, {
+      method: 'POST',
+      body: { visit: data.visit },
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }, []);
+
+  return {
+    saveVisit,
+    updateEncounter,
+    success,
+    error,
+    isSubmitting,
+  };
+};
+
+export default useStartVisit;