@openmrs/esm-fast-data-entry-app 1.0.1-pre.99 → 1.1.0

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

@@ -1,19 +1,19 @@
-import React, { useEffect, useReducer, useRef } from "react";
-import { SkeletonIcon, SkeletonText } from "@carbon/react";
-import { Events } from "@carbon/react/icons";
-import styles from "./compact-group-result.scss";
-import { useTranslation } from "react-i18next";
-import useKeyPress from "../../hooks/useKeyPress";
+import React, { useEffect, useReducer, useRef } from 'react';
+import { SkeletonIcon, SkeletonText } from '@carbon/react';
+import { Events } from '@carbon/react/icons';
+import styles from './compact-group-result.scss';
+import { useTranslation } from 'react-i18next';
+import useKeyPress from '../../hooks/useKeyPress';
 
 const reducer = (state, action) => {
   switch (action.type) {
-    case "arrowUp":
+    case 'arrowUp':
       return { selectedIndex: Math.max(state.selectedIndex - 1, 0) };
-    case "arrowDown":
+    case 'arrowDown':
       return {
         selectedIndex: Math.min(state.selectedIndex + 1, action.listLength - 1),
       };
-    case "select":
+    case 'select':
       return { selectedIndex: action.payload };
     default:
       return state;
@@ -21,19 +21,11 @@ const reducer = (state, action) => {
 };
 
 const scrollingOptions = {
-  behavior: "smooth",
-  block: "nearest",
+  behavior: 'smooth',
+  block: 'nearest',
 };
 
-const ResultItem = ({
-  index,
-  selectGroupAction,
-  group,
-  dispatch,
-  state,
-  totalGroups,
-  lastRef,
-}) => {
+const ResultItem = ({ index, selectGroupAction, group, dispatch, state, totalGroups, lastRef }) => {
   const ref = useRef(null);
   const { t } = useTranslation();
 
@@ -48,12 +40,10 @@ const ResultItem = ({
   return (
     <div
       onClick={() => {
-        dispatch({ type: "select", payload: index });
+        dispatch({ type: 'select', payload: index });
         selectGroupAction(group);
       }}
-      className={`${styles.patientSearchResult} ${
-        index === state.selectedIndex && styles.patientSearchResultSelected
-      }`}
+      className={`${styles.patientSearchResult} ${index === state.selectedIndex && styles.patientSearchResultSelected}`}
       role="button"
       aria-pressed={index === state.selectedIndex}
       tabIndex={0}
@@ -65,7 +55,7 @@ const ResultItem = ({
       <div>
         <h2 className={styles.patientName}>{group.name}</h2>
         <p className={styles.demographics}>
-          {group.cohortMembers?.length ?? 0} {t("members", "members")}
+          {group.cohortMembers?.length ?? 0} {t('members', 'members')}
           <span className={styles.middot}>&middot;</span> {group.description}
         </p>
       </div>
@@ -74,21 +64,21 @@ const ResultItem = ({
 };
 
 const CompactGroupResults = ({ groups, selectGroupAction, lastRef }) => {
-  const arrowUpPressed = useKeyPress("ArrowUp");
-  const arrowDownPressed = useKeyPress("ArrowDown");
-  const enterPressed = useKeyPress("Enter");
+  const arrowUpPressed = useKeyPress('ArrowUp');
+  const arrowDownPressed = useKeyPress('ArrowDown');
+  const enterPressed = useKeyPress('Enter');
 
   const [state, dispatch] = useReducer(reducer, { selectedIndex: 0 });
 
   useEffect(() => {
     if (arrowUpPressed) {
-      dispatch({ type: "arrowUp" });
+      dispatch({ type: 'arrowUp' });
     }
   }, [arrowUpPressed]);
 
   useEffect(() => {
     if (arrowDownPressed) {
-      dispatch({ type: "arrowDown", listLength: groups.length });
+      dispatch({ type: 'arrowDown', listLength: groups.length });
     }
   }, [arrowDownPressed, groups.length]);
 
@@ -117,8 +107,8 @@ export const SearchResultSkeleton = () => {
       <div className={styles.patientAvatar} role="img">
         <SkeletonIcon
           style={{
-            height: "3rem",
-            width: "3rem",
+            height: '3rem',
+            width: '3rem',
           }}
         />
       </div>
@@ -127,9 +117,8 @@ export const SearchResultSkeleton = () => {
           <SkeletonText />
         </h2>
         <span className={styles.demographics}>
-          <SkeletonIcon /> <span className={styles.middot}>&middot;</span>{" "}
-          <SkeletonIcon /> <span className={styles.middot}>&middot;</span>{" "}
-          <SkeletonIcon />
+          <SkeletonIcon /> <span className={styles.middot}>&middot;</span> <SkeletonIcon />{' '}
+          <span className={styles.middot}>&middot;</span> <SkeletonIcon />
         </span>
       </div>
     </div>

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

@@ -1,26 +1,24 @@
-import React, { useState } from "react";
-import { GroupType } from "../../context/GroupFormWorkflowContext";
-import styles from "./compact-group-search.scss";
-import GroupSearch from "./GroupSearch";
-import { Button, Search } from "@carbon/react";
-import { useTranslation } from "react-i18next";
-import debounce from "lodash-es/debounce";
+import React, { useState } from 'react';
+import { type GroupType } from '../../context/GroupFormWorkflowContext';
+import styles from './compact-group-search.scss';
+import GroupSearch from './GroupSearch';
+import { Button, Search } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import debounce from 'lodash-es/debounce';
 
 interface CompactGroupSearchProps {
   selectGroupAction?: (group: GroupType) => void;
 }
 
-const CompactGroupSearch: React.FC<CompactGroupSearchProps> = ({
-  selectGroupAction,
-}) => {
+const CompactGroupSearch: React.FC<CompactGroupSearchProps> = ({ selectGroupAction }) => {
   const { t } = useTranslation();
-  const [query, setQuery] = useState("");
+  const [query, setQuery] = useState('');
   const [dropdownShown, setDropdownShown] = useState(false);
 
   const onGroupSelect = (group) => {
     selectGroupAction(group);
     setDropdownShown(false);
-    setQuery("");
+    setQuery('');
   };
 
   const handleSearchChange = (e) => {
@@ -42,18 +40,18 @@ const CompactGroupSearch: React.FC<CompactGroupSearchProps> = ({
         <Search
           autoFocus
           className={styles.patientSearchInput}
-          closeButtonLabelText={t("clearSearch", "Clear")}
+          closeButtonLabelText={t('clearSearch', 'Clear')}
           labelText=""
           onChange={(event) => {
             handleSearchChange(event.target.value);
           }}
           onClear={() => undefined}
-          placeholder={t("searchForGroup", "Search for a group by name")}
+          placeholder={t('searchForGroup', 'Search for a group by name')}
           size="sm"
           value={query}
         />
         <Button kind="secondary" size="sm">
-          {t("search", "Search")}
+          {t('search', 'Search')}
         </Button>
       </div>
       {dropdownShown && (

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

@@ -1,23 +1,18 @@
-import React, { useCallback, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import { Layer, Tile, Loading } from "@carbon/react";
-import styles from "./group-search.scss";
-import { EmptyDataIllustration } from "../../empty-state/EmptyDataIllustration";
-import CompactGroupResults, {
-  SearchResultSkeleton,
-} from "./CompactGroupResults";
-import { GroupType } from "../../context/GroupFormWorkflowContext";
-import { useSearchCohortInfinite } from "../../hooks/useSearchEndpoint";
+import React, { useCallback, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Layer, Tile, Loading } from '@carbon/react';
+import styles from './group-search.scss';
+import { EmptyDataIllustration } from '../../empty-state/EmptyDataIllustration';
+import CompactGroupResults, { SearchResultSkeleton } from './CompactGroupResults';
+import { type GroupType } from '../../context/GroupFormWorkflowContext';
+import { useSearchCohortInfinite } from '../../hooks/useSearchEndpoint';
 
 interface GroupSearchProps {
   query: string;
   selectGroupAction?: (group: GroupType) => void;
 }
 
-const GroupSearch: React.FC<GroupSearchProps> = ({
-  query = "",
-  selectGroupAction,
-}) => {
+const GroupSearch: React.FC<GroupSearchProps> = ({ query = '', selectGroupAction }) => {
   const { t } = useTranslation();
   const {
     isLoading,
@@ -31,7 +26,7 @@ const GroupSearch: React.FC<GroupSearchProps> = ({
     searchTerm: query,
     searching: !!query,
     parameters: {
-      v: "full",
+      v: 'full',
     },
   });
 
@@ -53,13 +48,13 @@ const GroupSearch: React.FC<GroupSearchProps> = ({
         },
         {
           threshold: 0.75,
-        }
+        },
       );
       if (node) {
         observer.current.observe(node);
       }
     },
-    [loadingNewData, hasMore, setPage]
+    [loadingNewData, hasMore, setPage],
   );
 
   if (error) {
@@ -69,11 +64,11 @@ const GroupSearch: React.FC<GroupSearchProps> = ({
           <Tile className={styles.emptySearchResultsTile}>
             <EmptyDataIllustration />
             <div>
-              <p className={styles.errorMessage}>{t("error", "Error")}</p>
+              <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."
+                  '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>
@@ -101,18 +96,11 @@ const GroupSearch: React.FC<GroupSearchProps> = ({
         <Layer>
           <Tile className={styles.emptySearchResultsTile}>
             <EmptyDataIllustration />
-            <p className={styles.emptyResultText}>
-              {t("noGroupsFoundMessage", "Sorry, no groups have been found")}
-            </p>
+            <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>
+              <span>{t('trySearchWithPatientUniqueID', "Try searching with the cohort's description")}</span>
               <br />
-              <span>{t("orLabelName", "OR label name")}</span>
+              <span>{t('orLabelName', 'OR label name')}</span>
             </p>
           </Tile>
         </Layer>
@@ -125,21 +113,17 @@ const GroupSearch: React.FC<GroupSearchProps> = ({
       <div
         className={styles.searchResults}
         style={{
-          maxHeight: "22rem",
+          maxHeight: '22rem',
         }}
       >
         <p className={styles.resultsText}>
-          {totalResults} {t("searchResultsText", "search result(s)")}
+          {totalResults} {t('searchResultsText', 'search result(s)')}
         </p>
-        <CompactGroupResults
-          groups={results}
-          selectGroupAction={selectGroupAction}
-          lastRef={lastItem}
-        />
+        <CompactGroupResults groups={results} selectGroupAction={selectGroupAction} lastRef={lastItem} />
         <div ref={lastItem}>
           <div className={styles.lastItem} ref={loadingRef}>
             {hasMore && <Loading withOverlay={false} small />}
-            {!hasMore && <p>{t("noMoreResults", "End of search results")}</p>}
+            {!hasMore && <p>{t('noMoreResults', 'End of search results')}</p>}
           </div>
         </div>
       </div>

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

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

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

@@ -1,7 +1,6 @@
-
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .patientSearchBar {
   width: 50vw;
@@ -11,11 +10,11 @@
 .floatingSearchResultsContainer {
   position: absolute;
   overflow-y: auto;
-  box-shadow: 0 spacing.$spacing-03 spacing.$spacing-05 $ui-03;
+  box-shadow: 0 layout.$spacing-03 layout.$spacing-05 colors.$gray-20;
   z-index: 99;
-  border: 0 1px 1px 1px solid $ui-03;
+  border: 0 1px 1px 1px solid colors.$gray-20;
   width: 100%;
-  background-color: $ui-02;
+  background-color: colors.$white-0;
 }
 
 .searchArea {
@@ -23,7 +22,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid $ui-04;
+  border: 1px solid colors.$gray-50;
 }
 
 .patientSearchInput {

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

@@ -1,17 +1,15 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
-@import '~@openmrs/esm-styleguide/src/vars';
-
-
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
 
 .searchResultsContainer {
   width: 100%;
-  background-color: $ui-02;
+  background-color: colors.$white-0;
 
   a {
     text-decoration: none;
     @include type.type-style('heading-02');
-    color: $text-02;
+    color: colors.$gray-70;
     margin: 0rem;
   }
 }
@@ -22,7 +20,7 @@
 
 :global(.omrs-breakpoint-gt-tablet) .searchResultsContainer {
   padding: 0;
-  top: spacing.$spacing-09;
+  top: layout.$spacing-09;
 }
 
 .searchResults {
@@ -30,7 +28,6 @@
 }
 
 
-
 .searchTerm {
   @include type.type-style('heading-03');
   margin-top: 0.375rem;
@@ -38,9 +35,9 @@
 
 .resultsText {
   @include type.type-style('label-01');
-  color: $text-02;
-  line-height: spacing.$spacing-05;
-  margin: spacing.$spacing-03 spacing.$spacing-05;
+  color: colors.$gray-70;
+  line-height: layout.$spacing-05;
+  margin: layout.$spacing-03 layout.$spacing-05;
 }
 
 .helperText {
@@ -50,46 +47,46 @@
 
 .emptyResultText {
   @include type.type-style('heading-compact-01');
-  color: $text-02;
-  margin-top: spacing.$spacing-05;
+  color: colors.$gray-70;
+  margin-top: layout.$spacing-05;
   margin-bottom: 0.313rem;
 }
 
 .actionText {
   @include type.type-style('body-01');
-  color: $text-02;
+  color: colors.$gray-70;
 }
 
 .pagination {
   display: flex;
   justify-content: space-evenly;
-  padding: 4.688rem 0 spacing.$spacing-06;
+  padding: 4.688rem 0 layout.$spacing-06;
 }
 
 .emptySearchResultsTile {
   text-align: center;
-  margin-top: spacing.$spacing-05;
-  padding: spacing.$spacing-09 0rem;
+  margin-top: layout.$spacing-05;
+  padding: layout.$spacing-09 0rem;
 }
 
 :global(.omrs-breakpoint-gt-tablet) .emptySearchResultsTile {
-  margin: spacing.$spacing-05;
+  margin: layout.$spacing-05;
 }
 
 .errorMessage {
   @include type.type-style('heading-compact-02');
   margin-top: 2.25rem;
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
 }
 
 .errorCopy {
-  margin-bottom: spacing.$spacing-03;
+  margin-bottom: layout.$spacing-03;
   @include type.type-style('body-01');
-  color: $text-02;
+  color: colors.$gray-70;
 }
 
 .lastItem {
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -1,19 +1,22 @@
-import { Close, Add } from "@carbon/react/icons";
-import { Button } from "@carbon/react";
-import React, { useCallback, useContext, useState } from "react";
-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";
+import { Close, Add } from '@carbon/react/icons';
+import { Button } from '@carbon/react';
+import React, { useCallback, useContext, useState } from 'react';
+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, destroySession } = useContext(
-    GroupFormWorkflowContext
-  );
+  const { activeGroupUuid, setGroup, destroySession } = useContext(GroupFormWorkflowContext);
   const [isOpen, setOpen] = useState(false);
   const handleSelectGroup = (group) => {
+    group.cohortMembers.sort((a, b) => {
+      const aName = a?.patient?.person?.names?.[0]?.display;
+      const bName = b?.patient?.person?.names?.[0]?.display;
+      return aName.localeCompare(bName, undefined, { sensitivity: 'base' });
+    });
     setGroup(group);
   };
 
@@ -33,24 +36,20 @@ const GroupSearchHeader = () => {
 
   return (
     <div className={styles.searchHeaderContainer}>
-      <span className={styles.padded}>{t("findGroup", "Find group")}:</span>
+      <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 className={styles.padded}>{t('or', 'or')}</span>
       <span>
-        <Button
-          onClick={handleOpenClick}
-          renderIcon={Add}
-          iconDescription="Add"
-        >
-          {t("createNewGroup", "Create New Group")}
+        <Button onClick={handleOpenClick} renderIcon={Add} iconDescription="Add">
+          {t('createNewGroup', 'Create New Group')}
         </Button>
         <AddGroupModal
           {...{
             isCreate: true,
             isOpen: isOpen,
-            handleCancel: handleCancel,
+            onPostCancel: handleCancel,
             onPostSubmit: onPostSubmit,
           }}
         />
@@ -63,7 +62,7 @@ const GroupSearchHeader = () => {
             destroySession();
           }}
         >
-          {t("cancel", "Cancel")} <Close size={20} />
+          {t('cancel', 'Cancel')} <Close size={20} />
         </Button>
       </span>
     </div>

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

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

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

@@ -1,14 +1,14 @@
-@use '@carbon/styles/scss/spacing';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/colors';
+@use '@carbon/layout';
 
 .searchHeaderContainer {
-  height: spacing.$spacing-11;
+  height: layout.$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.$spacing-05;
+  background-color: colors.$white-0;
+  border-top: 0.0125rem solid colors.$gray-20;
+  border-bottom: 0.0125rem solid colors.$gray-20;
+  padding: 0 layout.$spacing-05;
 }
 
 .searchBarWrapper {
@@ -16,5 +16,5 @@
 }
 
 .padded {
-  padding: spacing.$spacing-05;
+  padding: layout.$spacing-05;
 }

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

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