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

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

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react';
+
+const useKeyPress = (targetKey) => {
+  const [keyPressed, setKeyPressed] = useState(false);
+
+  useEffect(() => {
+    const downHandler = ({ key }) => {
+      if (key === targetKey) {
+        setKeyPressed(true);
+      }
+    };
+
+    const upHandler = ({ key }) => {
+      if (key === targetKey) {
+        setKeyPressed(false);
+      }
+    };
+
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
+
+    return () => {
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
+    };
+  }, [targetKey]);
+
+  return keyPressed;
+};
+
+export default useKeyPress;

package/src/hooks/usePostEndpoint.ts

@@ -0,0 +1,76 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { useCallback, useState } from 'react';
+
+const usePostEndpoint = ({ endpointUrl }) => {
+  const [submissionInProgress, setSubmissionInProgress] = useState(null);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState(null);
+
+  const onFormPosted = useCallback(
+    (result) => {
+      setSubmissionInProgress(false);
+      if (error) {
+        setError(null);
+      }
+      setResult(result.data);
+    },
+    [error],
+  );
+
+  const onError = useCallback(
+    (error) => {
+      setSubmissionInProgress(false);
+      if (result) {
+        setResult(null);
+      }
+      setError(error?.responseBody?.error ?? error?.responseBody ?? error);
+    },
+    [result],
+  );
+
+  const post = useCallback(
+    async (data) => {
+      setSubmissionInProgress(true);
+
+      let path = endpointUrl;
+      if (data.uuid) {
+        path += '/' + data.uuid;
+      }
+
+      return openmrsFetch(path, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: data,
+      })
+        .then(onFormPosted)
+        .catch(onError);
+    },
+    [endpointUrl, onError, onFormPosted],
+  );
+
+  const reset = () => {
+    setSubmissionInProgress(null);
+    setResult(null);
+    setError(null);
+  };
+
+  return {
+    post,
+    isPosting: submissionInProgress,
+    result,
+    error,
+    reset,
+  };
+};
+
+const usePostVisit = () => {
+  return usePostEndpoint({ endpointUrl: `${restBaseUrl}/visit` });
+};
+
+const usePostCohort = () => {
+  return usePostEndpoint({ endpointUrl: `${restBaseUrl}/cohortm/cohort` });
+};
+
+export { usePostEndpoint, usePostVisit, usePostCohort };

package/src/hooks/useSearchEndpoint.ts

@@ -0,0 +1,103 @@
+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;
+  isLoading: boolean;
+  error: Error;
+  loadingNewData: boolean;
+  hasMore: boolean;
+  currentPage: number;
+  totalResults: number;
+  setPage: (size: number | ((_size: number) => number)) => Promise<
+    Array<
+      FetchResponse<{
+        results: Array<Record<string, unknown>>;
+        links: Array<{
+          rel: 'prev' | 'next';
+        }>;
+      }>
+    >
+  >;
+}
+
+interface SearchInfiniteProps {
+  baseUrl?: string;
+  searchTerm: string;
+  parameters?: Record<string, unknown> | undefined;
+  searching: boolean;
+  resultsToFetch?: number;
+}
+
+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' }>;
+      }>,
+    ) => {
+      if (prevPageData && !prevPageData?.data?.links.some((link) => link.rel === 'next')) {
+        return null;
+      }
+      let url = `${baseUrl}?q=${searchTerm}`;
+      const params = {
+        // merge passed parameters and default parameters
+        // this way the defaults can be overriden if needed
+        totalCount: true,
+        limit: resultsToFetch,
+        ...parameters,
+      };
+      Object.entries(params).forEach(([key, value]) => {
+        // don't send null parmeters
+        if (value !== null && value !== undefined) {
+          url += `&${key}=${value}`;
+        }
+      });
+      if (page) {
+        url += `&startIndex=${page * resultsToFetch}`;
+      }
+      return url;
+    },
+    [baseUrl, searchTerm, parameters, resultsToFetch],
+  );
+
+  const { data, isValidating, setSize, error, size } = useSWRInfinite<
+    FetchResponse<{
+      results: Array<Record<string, unknown>>;
+      links: Array<{ rel: 'prev' | 'next' }>;
+      totalCount: number;
+    }>,
+    Error
+  >(searching ? getUrl : null, openmrsFetch);
+
+  const results = useMemo(
+    () => ({
+      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,
+      loadingNewData: isValidating,
+      setPage: setSize,
+      currentPage: size,
+      totalResults: data?.[0]?.data?.totalCount,
+    }),
+    [data, isValidating, error, setSize, size],
+  );
+
+  return results;
+};
+
+const useSearchCohortInfinite = ({ ...props }: SearchInfiniteProps): SearchResponse => {
+  return useSearchEndpointInfinite({
+    baseUrl: `${restBaseUrl}/cohortm/cohort`,
+    resultsToFetch: 10,
+    ...props,
+  });
+};
+
+export { useSearchEndpointInfinite, useSearchCohortInfinite };

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;

package/src/index.ts

@@ -1,87 +1,27 @@
-/**
- * This is the entrypoint file of the application. It communicates the
- * important features of this microfrontend to the app shell. It
- * connects the app shell to the React application(s) that make up this
- * microfrontend.
- */
+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';
 
-/**
- * This tells the app shell how to obtain translation files: that they
- * are JSON files in the directory `../translations` (which you should
- * see in the directory structure).
- */
-const importTranslation = require.context(
-  "../translations",
-  false,
-  /.json$/,
-  "lazy"
-);
-
-/**
- * This tells the app shell what versions of what OpenMRS backend modules
- * are expected. Warnings will appear if suitable modules are not
- * installed. The keys are the part of the module name after
- * `openmrs-module-`; e.g., `openmrs-module-fhir2` becomes `fhir2`.
- */
-const backendDependencies = {
-  fhir2: "^1.2.0",
-  "webservices.rest": "^2.2.0",
+const options = {
+  featureName: 'fast-data-entry-app',
+  moduleName,
 };
 
-/**
- * This function performs any setup that should happen at microfrontend
- * load-time (such as defining the config schema) and then returns an
- * object which describes how the React application(s) should be
- * rendered.
- *
- * In this example, our return object contains a single page definition.
- * It tells the app shell that the default export of `greeter.tsx`
- * should be rendered when the route matches `hello`. The full route
- * will be `openmrsSpaBase() + 'hello'`, which is usually
- * `/openmrs/spa/hello`.
- */
-function setupOpenMRS() {
-  const moduleName = "@openmrs/esm-fast-data-entry-app";
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export const root = getAsyncLifecycle(() => import('./Root'), options);
 
-  const options = {
-    featureName: "fast-data-entry-app",
-    moduleName,
-  };
+export const formsAppMenuLink = getAsyncLifecycle(() => import('./forms-app-menu-link'), options);
 
+export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 
   registerBreadcrumbs([
     {
       path: `${window.spaBase}/forms`,
-      title: "Forms",
+      title: 'Forms',
       parent: `${window.spaBase}/home`,
     },
   ]);
-
-  return {
-    pages: [
-      {
-        load: getAsyncLifecycle(() => import("./Root"), options),
-        route: "forms",
-      },
-    ],
-    extensions: [
-      {
-        name: "forms-app-link",
-        slot: "app-menu-slot",
-        load: getAsyncLifecycle(() => import("./forms-app-menu-link"), options),
-        online: true,
-        offline: true,
-      },
-    ],
-  };
 }
-
-export { backendDependencies, importTranslation, setupOpenMRS };

package/src/patient-card/PatientCard.tsx

@@ -1,9 +1,8 @@
-import { CheckmarkOutline16, WarningAlt16 } from "@carbon/icons-react";
-import { SkeletonText } from "carbon-components-react";
-import React, { useContext } from "react";
-import FormWorkflowContext from "../context/FormWorkflowContext";
-import useGetPatient from "../hooks/useGetPatient";
-import styles from "./styles.scss";
+import { CheckmarkOutline, WarningAlt } from '@carbon/react/icons';
+import { SkeletonText } from '@carbon/react';
+import React from 'react';
+import useGetPatient from '../hooks/useGetPatient';
+import styles from './styles.scss';
 
 const CardContainer = ({ onClick = () => undefined, active, children }) => {
   return (
@@ -18,9 +17,7 @@ const CardContainer = ({ onClick = () => undefined, active, children }) => {
   );
 };
 
-const PatientCard = ({ patientUuid }) => {
-  const { activePatientUuid, editEncounter, encounters } =
-    useContext(FormWorkflowContext);
+const PatientCard = ({ patientUuid, activePatientUuid, editEncounter, encounters }) => {
   const patient = useGetPatient(patientUuid);
   const givenName = patient?.name?.[0]?.given?.[0];
   const familyName = patient?.name?.[0]?.family;
@@ -37,25 +34,18 @@ const PatientCard = ({ patientUuid }) => {
   const active = activePatientUuid === patientUuid;
 
   return (
-    <CardContainer
-      onClick={active ? () => undefined : () => editEncounter(patientUuid)}
-      active={active}
-    >
+    <CardContainer onClick={active ? () => undefined : () => editEncounter(patientUuid)} active={active}>
       <div className={styles.patientInfo}>
         <div className={styles.identifier}>{identifier}</div>
-        <div
-          className={`${styles.displayName} ${
-            active && styles.activeDisplayName
-          }`}
-        >
+        <div className={`${styles.displayName} ${active && styles.activeDisplayName}`}>
           {givenName} {familyName}
         </div>
       </div>
       <div>
         {patientUuid in encounters ? (
-          <CheckmarkOutline16 className={styles.statusSuccess} />
+          <CheckmarkOutline size={16} className={styles.statusSuccess} />
         ) : (
-          <WarningAlt16 className={styles.statusWarning} />
+          <WarningAlt size={16} className={styles.statusWarning} />
         )}
       </div>
     </CardContainer>

package/src/patient-card/index.ts

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

package/src/patient-card/styles.scss

@@ -1,10 +1,10 @@
-@import "~@openmrs/esm-styleguide/src/vars";
-@import "~carbon-components/src/globals/scss/vars";
-@import "~carbon-components/src/globals/scss/mixins";
+@use '@carbon/colors';
+@use '@carbon/layout';
 
 .cardContainer {
-  padding: $spacing-05;
+  padding: layout.$spacing-05;
   display: flex;
+  cursor: pointer;
 }
 
 .skeletonText {
@@ -22,12 +22,12 @@
 }
 
 .activeDisplayName {
-  color: $carbon--blue-50;
+  color: colors.$blue-50;
 }
 
 .inactiveCard {
   &:hover {
-    background-color: $carbon--gray-40;
+    background-color: colors.$gray-30;
   }
 }
 
@@ -36,9 +36,9 @@
 }
 
 .statusSuccess {
-  fill: $support-02;
+  fill: colors.$green-60;
 }
 
 .statusWarning  {
-  fill: $support-03;
+  fill: colors.$yellow-40;
 }

package/src/routes.json

@@ -0,0 +1,24 @@
+{
+  "$schema": "https://json.openmrs.org/routes.schema.json",
+  "backendDependencies": {
+    "fhir2": ">=1.2",
+    "webservices.rest": "^2.2.0"
+  },
+  "pages": [
+    {
+      "component": "root",
+      "routeRegex": "forms",
+      "online": true,
+      "offline": true
+    }
+  ],
+  "extensions": [
+    {
+      "name": "forms-app-link",
+      "slot": "app-menu-slot",
+      "component": "formsAppMenuLink",
+      "online": true,
+      "offline": true
+    }
+  ]
+}

package/src/setup-tests.ts

@@ -1 +1 @@
-import "@testing-library/jest-dom/extend-expect";
+import '@testing-library/jest-dom/extend-expect';