@openmrs/esm-fast-data-entry-app 1.0.1-pre.99 → 1.1.0

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,20 +24,20 @@
 :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 {
@@ -59,18 +57,18 @@
   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";
@@ -90,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 useSpecificQuestions from './useSpecificQuestions';
 
-export { useGetAllForms, useGetPatient, useFormState, useGetEncounter };
-export * from "./usePostEndpoint";
+export { useGetAllForms, useGetPatient, useFormState, useGetEncounter, useSpecificQuestions };
+export * from './usePostEndpoint';

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

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 } 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(`/ws/rest/v1/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 } 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 = () => {
@@ -66,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/useSpecificQuestions.ts

@@ -0,0 +1,75 @@
+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(
+    () => getQuestionByFormId(formUuid, specificQuestionConfig),
+    [formUuid, specificQuestionConfig],
+  );
+
+  const { data, error } = useSWR<FetchResponse, Error>(
+    specificQuestionsToLoad ? `${formUrl}/${formUuid}` : null,
+    openmrsFetch,
+  );
+
+  const specificQuestions = getQuestions(specificQuestionsToLoad, data?.data);
+
+  return {
+    questions: specificQuestions || null,
+    isError: error,
+    isLoading: !data && !error,
+  };
+};
+
+function getQuestionByFormId(formUuid: string, specificQuestionConfig: Array<SpecificQuestionConfig>) {
+  return specificQuestionConfig.filter((question) => question.forms.includes(formUuid));
+}
+
+function getQuestions(specificQuestions: Array<SpecificQuestionConfig>, formSchema): Array<SpecificQuestion> {
+  if (!formSchema || specificQuestions.length <= 0) {
+    return [];
+  }
+
+  const specificQuestionsMap = new Map<string, SpecificQuestionConfig>(
+    specificQuestions.map((sq) => [sq.questionId, sq]),
+  );
+
+  const questionIds = new Set(specificQuestionsMap.keys());
+  const conceptLabels = formSchema.conceptReferences;
+
+  return formSchema.pages.flatMap((page) =>
+    page.sections.flatMap((section) =>
+      section.questions
+        .filter((question) => questionIds.has(question.id))
+        .map((question) => {
+          const specificQuestion = specificQuestionsMap.get(question.id) || {};
+
+          const answers =
+            (specificQuestion as SpecificQuestionConfig).answers?.map((a) => ({
+              value: a,
+              display: conceptLabels[a]?.display,
+            })) ||
+            (question.questionOptions.answers ?? []).map((answer) => ({
+              value: answer.concept,
+              display: answer.label ?? conceptLabels[answer.concept]?.display,
+            }));
+
+          return {
+            question: {
+              display: question.label ?? conceptLabels[question.questionOptions.concept]?.display,
+              id: question.id,
+              disabled: (specificQuestion as SpecificQuestionConfig).disabled,
+              defaultAnswer: (specificQuestion as SpecificQuestionConfig).defaultAnswer,
+            },
+            answers,
+          };
+        }),
+    ),
+  );
+}
+
+export default useSpecificQuestions;

package/src/hooks/useStartVisit.ts

@@ -1,15 +1,8 @@
-import { useCallback, useState } from "react";
-import { useTranslation } from "react-i18next";
-import {
-  showNotification,
-  showToast,
-  openmrsFetch,
-} from "@openmrs/esm-framework";
+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 useStartVisit = ({ showSuccessNotification = true, showErrorNotification = true }) => {
   const { t } = useTranslation();
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [success, setSuccess] = useState(null);
@@ -23,16 +16,13 @@ const useStartVisit = ({
       if (showSuccessNotification) {
         showToast({
           critical: true,
-          kind: "success",
-          description: t(
-            "visitStartedSuccessfully",
-            `${result?.data?.visitType?.display} started successfully`
-          ),
-          title: t("visitStarted", "Visit started"),
+          kind: 'success',
+          description: t('visitStartedSuccessfully', `${result?.data?.visitType?.display} started successfully`),
+          title: t('visitStarted', 'Visit started'),
         });
       }
     },
-    [t, showSuccessNotification]
+    [t, showSuccessNotification],
   );
 
   const onError = useCallback(
@@ -42,14 +32,14 @@ const useStartVisit = ({
       setError(error);
       if (showErrorNotification) {
         showNotification({
-          title: t("startVisitError", "Error starting visit"),
-          kind: "error",
+          title: t('startVisitError', 'Error starting visit'),
+          kind: 'error',
           critical: true,
           description: error?.message,
         });
       }
     },
-    [t, showErrorNotification]
+    [t, showErrorNotification],
   );
 
   const saveVisit = useCallback(
@@ -61,22 +51,22 @@ const useStartVisit = ({
         visitType: data.visitType,
         location: data.location,
       };
-      openmrsFetch("/ws/rest/v1/visit", {
-        method: "POST",
+      openmrsFetch(`${restBaseUrl}/visit`, {
+        method: 'POST',
         body: payload,
-        headers: { "Content-Type": "application/json" },
+        headers: { 'Content-Type': 'application/json' },
       })
         .then(onSave)
         .catch(onError);
     },
-    [onError, onSave]
+    [onError, onSave],
   );
 
   const updateEncounter = useCallback((data) => {
-    openmrsFetch("/ws/rest/v1/encounter/" + data.uuid, {
-      method: "POST",
+    openmrsFetch(`${restBaseUrl}/encounter/` + data.uuid, {
+      method: 'POST',
       body: { visit: data.visit },
-      headers: { "Content-Type": "application/json" },
+      headers: { 'Content-Type': 'application/json' },
     });
   }, []);
 

package/src/index.ts

@@ -1,30 +1,18 @@
-import {
-  getAsyncLifecycle,
-  defineConfigSchema,
-  registerBreadcrumbs,
-} from "@openmrs/esm-framework";
-import { configSchema } from "./config-schema";
+import { getAsyncLifecycle, defineConfigSchema, registerBreadcrumbs } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
 
-const moduleName = "@openmrs/esm-fast-data-entry-app";
+const moduleName = '@openmrs/esm-fast-data-entry-app';
 
 const options = {
-  featureName: "fast-data-entry-app",
+  featureName: 'fast-data-entry-app',
   moduleName,
 };
 
-export const importTranslation = require.context(
-  "../translations",
-  false,
-  /.json$/,
-  "lazy"
-);
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
-export const root = getAsyncLifecycle(() => import("./Root"), options);
+export const root = getAsyncLifecycle(() => import('./Root'), options);
 
-export const formsAppMenuLink = getAsyncLifecycle(
-  () => import("./forms-app-menu-link"),
-  options
-);
+export const formsAppMenuLink = getAsyncLifecycle(() => import('./forms-app-menu-link'), options);
 
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
@@ -32,7 +20,7 @@ export function startupApp() {
   registerBreadcrumbs([
     {
       path: `${window.spaBase}/forms`,
-      title: "Forms",
+      title: 'Forms',
       parent: `${window.spaBase}/home`,
     },
   ]);