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

package/src/hooks/useGetEncounter.ts

@@ -0,0 +1,21 @@
+import { openmrsFetch } from "@openmrs/esm-framework";
+import useSWR from "swr";
+
+const encounterUrl = "/ws/rest/v1/encounter/";
+
+const useGetEncounter = (encounterUuid) => {
+  const url = `${encounterUrl}${encounterUuid}`;
+  const { data, error } = useSWR(url, async () => {
+    const res = await openmrsFetch(url);
+    const encounter = res.data || null;
+    return encounter;
+  });
+
+  return {
+    encounter: data,
+    isLoading: !error && data,
+    error,
+  };
+};
+
+export default useGetEncounter;

package/src/hooks/useGetPatient.ts

@@ -0,0 +1,23 @@
+import { fetchCurrentPatient } from "@openmrs/esm-framework";
+import { useEffect, useState } from "react";
+
+const useGetPatient = (patientUuid) => {
+  const [patient, setPatient] = useState(null);
+
+  useEffect(() => {
+    if (!patientUuid) {
+      setPatient(null);
+    } else {
+      getPatient(patientUuid);
+    }
+  }, [patientUuid]);
+
+  const getPatient = async (uuid) => {
+    const result = await fetchCurrentPatient(uuid);
+    setPatient(result);
+  };
+
+  return patient;
+};
+
+export default useGetPatient;

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 } 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(`/ws/rest/v1/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 } 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: "/ws/rest/v1/visit" });
+};
+
+const usePostCohort = () => {
+  return usePostEndpoint({ endpointUrl: "/ws/rest/v1/cohortm/cohort" });
+};
+
+export { usePostEndpoint, usePostVisit, usePostCohort };

package/src/hooks/useSearchEndpoint.ts

@@ -0,0 +1,120 @@
+import { openmrsFetch, FetchResponse } 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<
+    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: "/ws/rest/v1/cohortm/cohort",
+    resultsToFetch: 10,
+    ...props,
+  });
+};
+
+export { useSearchEndpointInfinite, useSearchCohortInfinite };

package/src/hooks/useStartVisit.ts

@@ -0,0 +1,92 @@
+import { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  showNotification,
+  showToast,
+  openmrsFetch,
+} 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("/ws/rest/v1/visit", {
+        method: "POST",
+        body: payload,
+        headers: { "Content-Type": "application/json" },
+      })
+        .then(onSave)
+        .catch(onError);
+    },
+    [onError, onSave]
+  );
+
+  const updateEncounter = useCallback((data) => {
+    openmrsFetch("/ws/rest/v1/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,39 @@
-/**
- * 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 } from "@openmrs/esm-framework";
+import {
+  getAsyncLifecycle,
+  defineConfigSchema,
+  registerBreadcrumbs,
+} from "@openmrs/esm-framework";
 import { configSchema } from "./config-schema";
 
-/**
- * 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(
+const moduleName = "@openmrs/esm-fast-data-entry-app";
+
+const options = {
+  featureName: "fast-data-entry-app",
+  moduleName,
+};
+
+export 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",
-};
-
-/**
- * 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 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,67 @@
+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,46 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/colors';
+// @use '@carbon/styles/scss/type';
+// @import '~@openmrs/esm-styleguide/src/vars';
+
+.cardContainer {
+  padding: spacing.$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.0",
+    "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
+    }
+  ]
+}