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

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?.data);
+  };
+
+  return patient;
+};
+
+export default useGetPatient;

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,70 @@
+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);
+      return openmrsFetch(endpointUrl, {
+        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/index.ts

@@ -5,9 +5,17 @@
  * microfrontend.
  */
 
-import { getAsyncLifecycle, defineConfigSchema } from "@openmrs/esm-framework";
+import {
+  getAsyncLifecycle,
+  defineConfigSchema,
+  registerBreadcrumbs,
+} from "@openmrs/esm-framework";
 import { configSchema } from "./config-schema";
 
+declare let __VERSION__: string;
+// __VERSION__ is replaced by Webpack with the version from package.json
+const version = __VERSION__;
+
 /**
  * This tells the app shell how to obtain translation files: that they
  * are JSON files in the directory `../translations` (which you should
@@ -44,15 +52,23 @@ const backendDependencies = {
  * `/openmrs/spa/hello`.
  */
 function setupOpenMRS() {
-  const moduleName = "@openmrs/esm-fast-data-entry";
+  const moduleName = "@openmrs/esm-fast-data-entry-app";
 
   const options = {
-    featureName: "fast-data-entry",
+    featureName: "fast-data-entry-app",
     moduleName,
   };
 
   defineConfigSchema(moduleName, configSchema);
 
+  registerBreadcrumbs([
+    {
+      path: `${window.spaBase}/forms`,
+      title: "Forms",
+      parent: `${window.spaBase}/home`,
+    },
+  ]);
+
   return {
     pages: [
       {
@@ -72,4 +88,4 @@ function setupOpenMRS() {
   };
 }
 
-export { backendDependencies, importTranslation, setupOpenMRS };
+export { backendDependencies, importTranslation, setupOpenMRS, version };

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,45 @@
+@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;
+}
+
+.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/translations/en.json

@@ -1,4 +1,54 @@
-{
-  "casualGreeting": "hey",
-  "formalGreeting": "hello"
-}
+{
+  "actions": "Actions",
+  "allFieldsRequired": "All fields are required unless marked optional",
+  "areYouSure": "Are you sure?",
+  "cancel": "Cancel",
+  "cancelExplanation": "You will lose any unsaved changes on the current form. Do you want to discard the current session?",
+  "changeGroup": "Choose a different group",
+  "chooseGroupError": "Please choose a group.",
+  "createNewPatient": "Create new patient",
+  "createGroup": "Create Group",
+  "createNewGroup": "Create New Group",
+  "createNewSession": "Create New Session",
+  "complete": "Complete",
+  "dataErrorMessage": "Something went wrong loading data from the server.",
+  "description": "Description",
+  "discard": "Discard",
+  "error": "Error",
+  "errorCoppy": "Sorry, there was an error. You can try to reload this page, or contact the site administrator and quote the error code above.",
+  "errorLoadingData": "Error Loading Data",
+  "fastDataEntry": "Fast Data Entry",
+  "fillForm": "Fill Form",
+  "formName": "Form Name",
+  "goToForm": "Go To Form",
+  "group": "Group",
+  "groupNameError": "Please enter a group name.",
+  "members": "members",
+  "newGroupName": "New Group Name",
+  "nextPatient": "Next Patient",
+  "noFormsFound": "No Forms To Show",
+  "noFormsFoundMessage": "No forms could be found for this category. Please double check the form concept uuids and access permissions.",
+  "noMoreResults": "End of search results",
+  "noGroupsFoundMessage": "Sorry, no groups have been found",
+  "noPatientError": "Please enter at least one patient.",
+  "or": "or",
+  "orLabelName": "OR label name",
+  "patientsInGroup": "Patients in group",
+  "postError": "POST Error",
+  "practitionerName": "Practitioner Name",
+  "remove": "Remove",
+  "resumeSession": "Resume Session",
+  "resumeGroupSession": "Resume Group Session",
+  "saveAndComplete": "Save & Complete",
+  "saveExplanation": "Do you want to save the current form and exit the workflow?",
+  "saveSession": "Save Session",
+  "searchResultsText": "search result(s)",
+  "selectPatientFirst": "Please select a patient first",
+  "sessionDate": "Session Date",
+  "sessionDetails": "Session details",
+  "sessionName": "Session Name",
+  "sessionNotes": "Session Notes",
+  "startGroupSession": "Start Group Session",
+  "trySearchWithPatientUniqueID": "Try searching with the cohort's description",
+  "unknownPostError": "An unknown error occured while saving data"
+}

package/tsconfig.json

@@ -1,23 +1,26 @@
-{
-  "compilerOptions": {
-    "esModuleInterop": true,
-    "module": "esnext",
-    "allowSyntheticDefaultImports": true,
-    "jsx": "react",
-    "skipLibCheck": true,
-    "moduleResolution": "node",
-    "lib": [
-      "dom",
-      "es5",
-      "scripthost",
-      "es2015",
-      "es2015.promise",
-      "es2016.array.include",
-      "es2018",
-      "es2020"
-    ],
-    "resolveJsonModule": true,
-    "noEmit": true,
-    "target": "esnext"
-  }
-}
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "module": "esnext",
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react",
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "lib": [
+      "dom",
+      "es5",
+      "scripthost",
+      "es2015",
+      "es2015.promise",
+      "es2016.array.include",
+      "es2018",
+      "es2020"
+    ],
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "target": "esnext",
+    // "paths": {
+    //   "@openmrs/*": ["./node_modules/@openmrs/*"]
+    // }
+  }
+}

package/.eslintrc

@@ -1,4 +0,0 @@
-{
-  "parser": "@typescript-eslint/parser",
-  "extends": ["ts-react-important-stuff", "plugin:prettier/recommended"]
-}

package/.github/workflows/node.js.yml

@@ -1,79 +0,0 @@
-name: Node.js CI
-
-on:
-  push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-  release:
-    types:
-      - created
-
-env:
-  ESM_NAME: "@openmrs/esm-fast-data-entry-app"
-  JS_NAME: "openmrs-esm-fast-data-entry-app.js"
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: "16.x"
-      - run: yarn
-      - run: yarn lint
-      - run: yarn coverage
-      - run: yarn typescript
-      - run: yarn build
-      - name: Upload Artifacts
-        uses: actions/upload-artifact@v2
-        with:
-          name: dist
-          path: |
-            dist
-
-  pre_release:
-    runs-on: ubuntu-latest
-
-    needs: build
-
-    if: ${{ github.event_name == 'push' }}
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Download Artifacts
-        uses: actions/download-artifact@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: "16.x"
-          registry-url: "https://registry.npmjs.org"
-      - run: npm install
-      - run: sed -i -e "s/\(\"version\":\\s\+\"\([0-9]\+\.\?\)\+\)/\1-pre.${{ github.run_number }}/" 'package.json'
-      - run: npm publish --tag next
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
-
-  release:
-    runs-on: ubuntu-latest
-
-    needs: build
-
-    if: ${{ github.event_name == 'release' }}
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: Download Artifacts
-        uses: actions/download-artifact@v2
-      - name: Use Node.js
-        uses: actions/setup-node@v1
-        with:
-          node-version: "16.x"
-          registry-url: 'https://registry.npmjs.org'
-      - run: yarn
-      - run: yarn publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

package/.husky/pre-commit

@@ -1,6 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-set -e  # die on error
-
-npx pretty-quick --staged