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

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,75 +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 } 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";
+export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+
+export const root = getAsyncLifecycle(() => import('./Root'), options);
 
-  const options = {
-    featureName: "fast-data-entry",
-    moduleName,
-  };
+export const formsAppMenuLink = getAsyncLifecycle(() => import('./forms-app-menu-link'), options);
 
+export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 
-  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,
-      },
-    ],
-  };
+  registerBreadcrumbs([
+    {
+      path: `${window.spaBase}/forms`,
+      title: 'Forms',
+      parent: `${window.spaBase}/home`,
+    },
+  ]);
 }
-
-export { backendDependencies, importTranslation, setupOpenMRS };

package/src/patient-card/PatientCard.tsx

@@ -0,0 +1,55 @@
+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 (
+    <div
+      onClick={onClick}
+      className={`${styles.cardContainer} ${!active && styles.inactiveCard}`}
+      role="button"
+      tabIndex={0}
+    >
+      {children}
+    </div>
+  );
+};
+
+const PatientCard = ({ patientUuid, activePatientUuid, editEncounter, encounters }) => {
+  const patient = useGetPatient(patientUuid);
+  const givenName = patient?.name?.[0]?.given?.[0];
+  const familyName = patient?.name?.[0]?.family;
+  const identifier = patient?.identifier?.[0]?.value;
+
+  if (!patient) {
+    return (
+      <CardContainer active={true}>
+        <SkeletonText className={styles.skeletonText} />
+      </CardContainer>
+    );
+  }
+
+  const active = activePatientUuid === patientUuid;
+
+  return (
+    <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}`}>
+          {givenName} {familyName}
+        </div>
+      </div>
+      <div>
+        {patientUuid in encounters ? (
+          <CheckmarkOutline size={16} className={styles.statusSuccess} />
+        ) : (
+          <WarningAlt size={16} className={styles.statusWarning} />
+        )}
+      </div>
+    </CardContainer>
+  );
+};
+
+export default PatientCard;

package/src/patient-card/index.ts

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

package/src/patient-card/styles.scss

@@ -0,0 +1,44 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.cardContainer {
+  padding: layout.$spacing-05;
+  display: flex;
+  cursor: pointer;
+}
+
+.skeletonText {
+  max-width: 8rem;
+}
+
+.identifier {
+  font-weight: 300;
+  font-size: 0.8rem;
+  line-height: 0.9rem;
+}
+
+.displayName {
+  font-weight: bold;
+}
+
+.activeDisplayName {
+  color: colors.$blue-50;
+}
+
+.inactiveCard {
+  &:hover {
+    background-color: colors.$gray-30;
+  }
+}
+
+.patientInfo {
+  flex-grow: 1;
+}
+
+.statusSuccess {
+  fill: colors.$green-60;
+}
+
+.statusWarning  {
+  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';

package/src/types.ts

@@ -0,0 +1,20 @@
+export interface Concept {
+  uuid: string;
+  display: string;
+}
+
+export interface SpecificQuestion {
+  question: {
+    id: string;
+    display: string;
+  };
+  answers: Array<{
+    value: string;
+    display: string;
+  }>;
+}
+
+export interface SpecificQuestionConfig {
+  forms: Array<string>;
+  questionId: string;
+}