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

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

@@ -1,7 +1,6 @@
-
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .patientSearchBar {
   width: 50vw;
@@ -11,11 +10,11 @@
 .floatingSearchResultsContainer {
   position: absolute;
   overflow-y: auto;
-  box-shadow: 0 spacing.$spacing-03 spacing.$spacing-05 $ui-03;
+  box-shadow: 0 layout.$spacing-03 layout.$spacing-05 colors.$gray-20;
   z-index: 99;
-  border: 0 1px 1px 1px solid $ui-03;
+  border: 0 1px 1px 1px solid colors.$gray-20;
   width: 100%;
-  background-color: $ui-02;
+  background-color: colors.$white-0;
 }
 
 .searchArea {
@@ -23,7 +22,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid $ui-04;
+  border: 1px solid colors.$gray-50;
 }
 
 .patientSearchInput {

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

@@ -1,17 +1,15 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-
-
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .searchResultsContainer {
   width: 100%;
-  background-color: $ui-02;
+  background-color: colors.$white-0;
 
   a {
     text-decoration: none;
     @include type.type-style('heading-02');
-    color: $text-02;
+    color: colors.$gray-70;
     margin: 0rem;
   }
 }
@@ -22,7 +20,7 @@
 
 :global(.omrs-breakpoint-gt-tablet) .searchResultsContainer {
   padding: 0;
-  top: spacing.$spacing-09;
+  top: layout.$spacing-09;
 }
 
 .searchResults {
@@ -30,7 +28,6 @@
 }
 
 
-
 .searchTerm {
   @include type.type-style('heading-03');
   margin-top: 0.375rem;
@@ -38,9 +35,9 @@
 
 .resultsText {
   @include type.type-style('label-01');
-  color: $text-02;
-  line-height: spacing.$spacing-05;
-  margin: spacing.$spacing-03 spacing.$spacing-05;
+  color: colors.$gray-70;
+  line-height: layout.$spacing-05;
+  margin: layout.$spacing-03 layout.$spacing-05;
 }
 
 .helperText {
@@ -50,46 +47,46 @@
 
 .emptyResultText {
   @include type.type-style('heading-compact-01');
-  color: $text-02;
-  margin-top: spacing.$spacing-05;
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-05;
   margin-bottom: 0.313rem;
 }
 
 .actionText {
   @include type.type-style('body-01');
-  color: $text-02;
+  color: colors.$gray-70;
 }
 
 .pagination {
   display: flex;
   justify-content: space-evenly;
-  padding: 4.688rem 0 spacing.$spacing-06;
+  padding: 4.688rem 0 layout.$spacing-06;
 }
 
 .emptySearchResultsTile {
   text-align: center;
-  margin-top: spacing.$spacing-05;
-  padding: spacing.$spacing-09 0rem;
+  margin-top: layout.$spacing-05;
+  padding: layout.$spacing-09 0rem;
 }
 
 :global(.omrs-breakpoint-gt-tablet) .emptySearchResultsTile {
-  margin: spacing.$spacing-05;
+  margin: layout.$spacing-05;
 }
 
 .errorMessage {
   @include type.type-style('heading-compact-02');
   margin-top: 2.25rem;
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .errorCopy {
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
   @include type.type-style('body-01');
-  color: $text-02;
+  color: colors.$gray-70;
 }
 
 .lastItem {
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -1,22 +1,40 @@
-import { Close } from "@carbon/react/icons";
+import { Close, Add } from "@carbon/react/icons";
 import { Button } from "@carbon/react";
-import React, { useContext } from "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 { navigate } from "@openmrs/esm-framework";
 
 const GroupSearchHeader = () => {
   const { t } = useTranslation();
   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"});
+      }
+    );
     setGroup(group);
   };
 
+  const handleCancel = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const onPostSubmit = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  const handleOpenClick = useCallback(() => {
+    setOpen(true);
+  }, []);
+
   if (activeGroupUuid) return null;
 
   return (
@@ -27,7 +45,21 @@ const GroupSearchHeader = () => {
       </span>
       <span className={styles.padded}>{t("or", "or")}</span>
       <span>
-        <AddGroupModal />
+        <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>
@@ -35,8 +67,6 @@ const GroupSearchHeader = () => {
           kind="ghost"
           onClick={() => {
             destroySession();
-            // eslint-disable-next-line
-            navigate({ to: "${openmrsSpaBase}/forms" });
           }}
         >
           {t("cancel", "Cancel")} <Close size={20} />

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

@@ -1,14 +1,14 @@
-@use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '@carbon/layout';
 
 .searchHeaderContainer {
-  height: spacing.$spacing-11;
+  height: layout.$spacing-11;
   display: flex;
   align-items: center;
-  background-color: $ui-02;
-  border-top: 0.0125rem solid $ui-03;
-  border-bottom: 0.0125rem solid $ui-03;
-  padding: 0 spacing.$spacing-05;
+  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 {
@@ -16,5 +16,5 @@
 }
 
 .padded {
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
 }

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

@@ -2,6 +2,13 @@ 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,73 @@
+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/useGetAllForms.ts

@@ -2,14 +2,15 @@ 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 = `/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();

package/src/hooks/useGetEncounter.ts

@@ -1,7 +1,7 @@
-import { openmrsFetch } from "@openmrs/esm-framework";
+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

@@ -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,34 @@
+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,38 @@
+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/usePostEndpoint.ts

@@ -1,4 +1,4 @@
-import { openmrsFetch } from "@openmrs/esm-framework";
+import { openmrsFetch, restBaseUrl } from "@openmrs/esm-framework";
 import { useCallback, useState } from "react";
 
 const usePostEndpoint = ({ endpointUrl }) => {
@@ -31,7 +31,13 @@ const usePostEndpoint = ({ endpointUrl }) => {
   const post = useCallback(
     async (data) => {
       setSubmissionInProgress(true);
-      return openmrsFetch(endpointUrl, {
+
+      let path = endpointUrl;
+      if (data.uuid) {
+        path += "/" + data.uuid;
+      }
+
+      return openmrsFetch(path, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -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,4 +1,8 @@
-import { openmrsFetch, FetchResponse } from "@openmrs/esm-framework";
+import {
+  openmrsFetch,
+  type FetchResponse,
+  restBaseUrl,
+} from "@openmrs/esm-framework";
 import { useCallback, useMemo } from "react";
 import useSWRInfinite from "swr/infinite";
 
@@ -11,12 +15,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";
+        }>;
+      }>
+    >
   >;
 }
 
@@ -111,7 +117,7 @@ const useSearchCohortInfinite = ({
   ...props
 }: SearchInfiniteProps): SearchResponse => {
   return useSearchEndpointInfinite({
-    baseUrl: "/ws/rest/v1/cohortm/cohort",
+    baseUrl: `${restBaseUrl}/cohortm/cohort`,
     resultsToFetch: 10,
     ...props,
   });