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

package/src/group-form-entry-workflow/group-search/GroupSearch.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Layer, Tile } from "@carbon/react";
+import styles from "./group-search.scss";
+import { EmptyDataIllustration } from "../../empty-state/EmptyDataIllustration";
+import { useGroupSearch } from "./useGroupSearch";
+import CompactGroupResults, {
+  SearchResultSkeleton,
+} from "./CompactGroupResults";
+import { GroupType } from "../../context/GroupFormWorkflowContext";
+
+interface GroupSearchProps {
+  query: string;
+  selectGroupAction?: (group: GroupType) => void;
+}
+
+const GroupSearch: React.FC<GroupSearchProps> = ({
+  query = "",
+  selectGroupAction,
+}) => {
+  const { t } = useTranslation();
+  const results = useGroupSearch(query);
+  const error = false;
+
+  if (error) {
+    return (
+      <div className={styles.searchResults}>
+        <Layer>
+          <Tile className={styles.emptySearchResultsTile}>
+            <EmptyDataIllustration />
+            <div>
+              <p className={styles.errorMessage}>{t("error", "Error")}</p>
+              <p className={styles.errorCopy}>
+                {t(
+                  "errorCopy",
+                  "Sorry, there was an error. You can try to reload this page, or contact the site administrator and quote the error code above."
+                )}
+              </p>
+            </div>
+          </Tile>
+        </Layer>
+      </div>
+    );
+  }
+
+  if (query.length <= 2) return <SearchResultSkeleton />;
+
+  if (results.length === 0) {
+    return (
+      <div className={styles.searchResults}>
+        <Layer>
+          <Tile className={styles.emptySearchResultsTile}>
+            <EmptyDataIllustration />
+            <p className={styles.emptyResultText}>
+              {t("noGroupsFoundMessage", "Sorry, no groups have been found")}
+            </p>
+            <p className={styles.actionText}>
+              <span>
+                {t(
+                  "trySearchWithPatientUniqueID",
+                  "Try searching with the cohort's description"
+                )}
+              </span>
+              <br />
+              <span>{t("orLabelName", "OR label name")}</span>
+            </p>
+          </Tile>
+        </Layer>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.searchResultsContainer}>
+      <div
+        className={styles.searchResults}
+        style={{
+          maxHeight: "22rem",
+        }}
+      >
+        <p className={styles.resultsText}>
+          {results.length} {t("searchResultsText", "search result(s)")}
+        </p>
+        <CompactGroupResults
+          groups={results}
+          selectGroupAction={selectGroupAction}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default GroupSearch;

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

@@ -0,0 +1,64 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.patientSearchResult {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid $ui-03;
+  padding: 0 spacing.$spacing-04;
+
+  &:hover,
+  &:focus {
+    background-color: $ui-01;
+  }
+}
+
+.patientSearchResultSelected {
+  background-color: colors.$gray-20;
+}
+
+.patientBanner {
+  display: flex;
+}
+
+.patientName {
+  @include type.type-style('heading-02');
+}
+
+.patientAvatar {
+  width: spacing.$spacing-09;
+  height: spacing.$spacing-09;
+  margin: spacing.$spacing-03 spacing.$spacing-05 spacing.$spacing-03 0;
+  border-radius: 1px;
+}
+
+.patientInfo {
+  width: 100%;
+  display: flex;
+  flex-flow: column wrap;
+  margin: spacing.$spacing-05;
+  cursor: pointer;
+}
+
+.demographics {
+  margin-top: spacing.$spacing-03;
+  @include type.type-style('body-compact-02');
+  color: $text-02;
+}
+
+.identifiers {
+  @include type.type-style('body-compact-02');
+  color: $ui-04;
+}
+
+.actionsContainer {
+  padding-top: spacing.$spacing-03;
+  margin-top: spacing.$spacing-05;
+}
+
+.middot {
+  margin: 0 spacing.$spacing-03;
+}

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

@@ -0,0 +1,35 @@
+
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.patientSearchBar {
+  width: 50vw;
+  position: relative;
+}
+
+.floatingSearchResultsContainer {
+  position: absolute;
+  overflow-y: auto;
+  box-shadow: 0 spacing.$spacing-03 spacing.$spacing-05 $ui-03;
+  z-index: 99;
+  border: 0 1px 1px 1px solid $ui-03;
+  width: 100%;
+  background-color: $ui-02;
+}
+
+.searchArea {
+  width: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid $ui-04;
+}
+
+.patientSearchInput {
+  border: none;
+}
+
+.patientSearchInput input:focus {
+  outline: 1px solid 1px solid colors.$orange-40;
+}

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

@@ -0,0 +1,94 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+
+
+.searchResultsContainer {
+  width: 100%;
+  background-color: $ui-02;
+
+  a {
+    text-decoration: none;
+    @include type.type-style('heading-02');
+    color: $text-02;
+    margin: 0rem;
+  }
+}
+
+:global(.omrs-breakpoint-lt-desktop) .searchResultsContainer {
+  top: 6.25rem;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .searchResultsContainer {
+  padding: 0;
+  top: spacing.$spacing-09;
+}
+
+.searchResults {
+  width: 100%;
+}
+
+.loadingIcon {
+  padding: spacing.$spacing-05 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.searchTerm {
+  @include type.type-style('heading-03');
+  margin-top: 0.375rem;
+}
+
+.resultsText {
+  @include type.type-style('label-01');
+  color: $text-02;
+  line-height: spacing.$spacing-05;
+  margin: spacing.$spacing-03 spacing.$spacing-05;
+}
+
+.helperText {
+  color: var(--omrs-color-ink-medium-contrast);
+  margin-left: 2.375rem;
+}
+
+.emptyResultText {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: 0.313rem;
+}
+
+.actionText {
+  @include type.type-style('body-01');
+  color: $text-02;
+}
+
+.pagination {
+  display: flex;
+  justify-content: space-evenly;
+  padding: 4.688rem 0 spacing.$spacing-06;
+}
+
+.emptySearchResultsTile {
+  text-align: center;
+  margin-top: spacing.$spacing-05;
+  padding: spacing.$spacing-09 0rem;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .emptySearchResultsTile {
+  margin: spacing.$spacing-05;
+}
+
+.errorMessage {
+  @include type.type-style('heading-compact-02');
+  margin-top: 2.25rem;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.errorCopy {
+  margin-bottom: spacing.$spacing-03;
+  @include type.type-style('body-01');
+  color: $text-02;
+}

package/src/group-form-entry-workflow/group-search/mock-group-data.ts

@@ -0,0 +1,79 @@
+export const mockGroupData = [
+  {
+    id: 1,
+    name: "Teal Group",
+    description: "Coping skills group - Calgary",
+    members: [
+      {
+        name: "Donna Campbell",
+        uuid: "f87cae5e-6b64-4f64-884d-d46043a3b7da",
+      },
+      {
+        name: "Agnes Lewis",
+        uuid: "8af48d72-b155-4b41-ba9c-39e017fcf452",
+      },
+      {
+        name: "Daniel Mitchell",
+        uuid: "63665703-de71-4a2b-baa4-1a3acf995b7f",
+      },
+    ],
+  },
+  {
+    id: 2,
+    name: "Orange Group",
+    description: "Thursday night depression session",
+    members: [
+      {
+        name: "Mark Martin",
+        uuid: "eaef5256-ce7c-402c-9e56-f8e5d1fba22f",
+      },
+      {
+        name: "Robert Evans",
+        uuid: "8648a68d-1d68-4293-9d1a-a7a188b91418",
+      },
+      {
+        name: "Linda Johnson",
+        uuid: "8078cc5f-3cd7-4ebb-9ade-515c0dd5f85f",
+      },
+      {
+        name: "Daniel Green",
+        uuid: "4ff33dfa-e4ad-4cb5-bbad-8936f9d162df",
+      },
+      {
+        name: "Kimberly Adams",
+        uuid: "65bb2ebd-fef9-48c4-9c64-16445fa4fe7c",
+      },
+      {
+        name: "Daniel Lee",
+        uuid: "7d46336f-4b6e-4daa-a122-77a7efeb7a2e",
+      },
+      {
+        name: "Nancy Hernández",
+        uuid: "89ee2163-4dd4-4d4b-9882-f6be19c15b8f",
+      },
+    ],
+  },
+  {
+    id: 3,
+    name: "Blue Group",
+    description: "Thursday night depression session",
+    members: [
+      {
+        name: "Patty Patterson",
+        uuid: "9bf3adf4-3a5e-48b2-9adf-e117ce2ecdc5",
+      },
+      {
+        name: "Johnny Cash",
+        uuid: "f43172b8-a6fc-4edb-b92b-8d759ed9da50",
+      },
+      {
+        name: "John Doe Two",
+        uuid: "fa918efe-a4a4-4ac8-8381-3ba14ac61953",
+      },
+      {
+        name: "Foo Bazzi Bar",
+        uuid: "791c9475-8396-4519-a8ab-905cee8cccd3",
+      },
+    ],
+  },
+];

package/src/group-form-entry-workflow/group-search/useGroupSearch.ts

@@ -0,0 +1,14 @@
+import { mockGroupData } from "./mock-group-data";
+
+export function useGroupSearch(filter) {
+  const searchHistory = mockGroupData || [];
+  // if (filter.length <= 2) return [];
+
+  return filter
+    ? searchHistory?.filter(
+        (item) =>
+          item?.description?.toLowerCase()?.includes(filter?.toLowerCase()) ||
+          item?.name?.toLowerCase()?.includes(filter?.toLowerCase())
+      )
+    : searchHistory;
+}

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

@@ -0,0 +1,42 @@
+import { Close } from "@carbon/react/icons";
+import { Button } from "@carbon/react";
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+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";
+
+const GroupSearchHeader = () => {
+  const { t } = useTranslation();
+  const { activeGroupUuid, setGroup } = useContext(GroupFormWorkflowContext);
+  const handleSelectGroup = (group) => {
+    setGroup(group);
+  };
+
+  if (activeGroupUuid) return null;
+
+  return (
+    <div className={styles.searchHeaderContainer}>
+      <span className={styles.padded}>{t("findGroup", "Find group")}:</span>
+      <span className={styles.searchBarWrapper}>
+        <CompactGroupSearch selectGroupAction={handleSelectGroup} />
+      </span>
+      <span className={styles.padded}>{t("or", "or")}</span>
+      <span>
+        <AddGroupModal />
+      </span>
+      <span style={{ flexGrow: 1 }} />
+      <span>
+        <Link to="..">
+          <Button kind="ghost">
+            {t("cancel", "Cancel")} <Close size={20} />
+          </Button>
+        </Link>
+      </span>
+    </div>
+  );
+};
+
+export default GroupSearchHeader;

package/src/group-form-entry-workflow/group-search-header/index.ts

@@ -0,0 +1,3 @@
+import GroupSearchHeader from "./GroupSearchHeader";
+
+export default GroupSearchHeader;

package/src/{patient-search-header → group-form-entry-workflow/group-search-header}/styles.scss

@@ -1,15 +1,14 @@
-@import "~@openmrs/esm-styleguide/src/vars";
-@import "~carbon-components/src/globals/scss/vars";
-@import "~carbon-components/src/globals/scss/mixins";
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
 
 .searchHeaderContainer {
-  height: $spacing-11;
+  height: spacing.$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-05;
+  padding: 0 spacing.$spacing-05;
 }
 
 .searchBarWrapper {
@@ -17,5 +16,5 @@
 }
 
 .padded {
-  padding: $spacing-05;
+  padding: spacing.$spacing-05;
 }

package/src/group-form-entry-workflow/index.ts

@@ -0,0 +1,3 @@
+import GroupFormEntryWorkflow from "./GroupFormEntryWorkflow";
+
+export default GroupFormEntryWorkflow;

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

@@ -0,0 +1,86 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/colors';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+
+.breadcrumbsContainer > div > div > nav {
+  background-color: $ui-02;
+  padding: spacing.$spacing-04 spacing.$spacing-05;
+  height: spacing.$spacing-08;
+}
+
+.workspaceWrapper {
+  display: flex;
+  justify-content: center;
+}
+
+.workspace {
+  width: 1100px;
+}
+
+.selectPatientMessage {
+  @include type.type-style('productive-heading-03');
+  margin: spacing.$spacing-07;
+  text-align: center;
+}
+
+.formMainContent {
+  display: flex;
+  text-align: center;
+  margin-top: spacing.$spacing-05;
+  column-gap: spacing.$spacing-05;
+}
+
+.formContainer {
+  flex-grow: 1;
+  max-height: calc(100vh - 14rem);
+  overflow-y: scroll;
+}
+
+.formContainer :global(.cds--form-item) :global(.question-area) {
+  max-width: 100%;
+}
+
+.rightPanel {
+  width: 13rem;
+  text-align: left;
+  overflow-y: scroll;
+  display: flex;
+  flex-direction: column;
+  row-gap: spacing.$spacing-05;
+}
+
+.patientCardsSection {
+  margin: spacing.$spacing-05 0;
+  border-bottom: 1px solid colors.$gray-10;
+}
+
+.rightPanelActionButtons {
+  display: flex;
+  flex-direction: column;
+  row-gap: spacing.$spacing-03;
+  & button {
+    width: 100%;
+    text-decoration: "none";
+  }
+}
+
+.formSection {
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+  justify-content: flex-start;
+  align-items: flex-start;
+  text-align: left;
+}
+
+.formSectionTile {
+  width: 500px;
+}
+
+
+.formError {
+  @include type.type-style("helper-text-02");
+  color: colors.$red-60;
+}

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/usePostCohort.ts

@@ -0,0 +1,18 @@
+import { openmrsFetch } from "@openmrs/esm-framework";
+
+const usePostCohort = () => {
+  const cohortURL = `/ws/rest/v1/cohortm/cohort`;
+  const fetcher = openmrsFetch(cohortURL, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: {
+      name: "Magenta",
+      cohortType: "hello",
+    },
+  });
+  return fetcher;
+};
+
+export default usePostCohort;

package/src/index.ts

@@ -12,6 +12,10 @@ import {
 } 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
@@ -84,4 +88,4 @@ function setupOpenMRS() {
   };
 }
 
-export { backendDependencies, importTranslation, setupOpenMRS };
+export { backendDependencies, importTranslation, setupOpenMRS, version };

package/src/patient-card/PatientCard.tsx

@@ -1,7 +1,6 @@
-import { CheckmarkOutline16, WarningAlt16 } from "@carbon/icons-react";
-import { SkeletonText } from "carbon-components-react";
-import React, { useContext } from "react";
-import FormWorkflowContext from "../context/FormWorkflowContext";
+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";
 
@@ -18,9 +17,12 @@ 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;
@@ -53,9 +55,9 @@ const PatientCard = ({ patientUuid }) => {
       </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/styles.scss

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