@thrustdevs/esm-procedure-orders-app 1.0.2-pre.6

package/src/form/procedures-orders/add-procedures-order/procedures-order-form.scss

@@ -0,0 +1,80 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+.orderForm {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  :global(.cds--css-grid) {
+    max-width: unset;
+  }
+
+  :global(.cds--css-grid-column) {
+    margin: 0 spacing.$spacing-03 !important;
+  }
+
+  :global(.cds--subgrid) {
+    margin: 0 calc(spacing.$spacing-03 * -1) !important;
+  }
+
+  :global(.cds--number--nosteppers.cds--number input[type='number']) {
+    padding-right: spacing.$spacing-05;
+  }
+
+  :global(.cds--number__control-btn) {
+    border: 0;
+  }
+}
+
+.form {
+  margin: spacing.$spacing-05;
+}
+
+.gridRow {
+  padding: 0px;
+
+  :global(.cds--number) {
+    display: inline-block;
+  }
+}
+
+.field {
+  margin-bottom: spacing.$spacing-05;
+}
+
+.buttonSet {
+  :global(.cds--btn) {
+    width: 50%;
+    max-width: unset;
+  }
+}
+
+.errorContainer {
+  margin: 1rem;
+}
+
+.errorNotification {
+  margin: 0.5rem 0;
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .orderForm {
+    height: calc(100vh - 6rem - var(--workspace-header-height));
+    background-color: #ededed;
+  }
+
+  .buttonSet {
+    padding: spacing.$spacing-06 spacing.$spacing-05;
+    background-color: vars.$ui-02;
+  }
+
+  .errorContainer {
+    margin: 1rem;
+    margin-bottom: calc(var(--bottom-nav-height) + 1rem);
+  }
+}

package/src/form/procedures-orders/add-procedures-order/procedures-order.ts

@@ -0,0 +1,17 @@
+import { type ProcedureOrderBasketItem } from '../../../types';
+import { type ProceduresType } from './useProceduresTypes';
+
+export const priorityOptions = [
+  { value: 'ROUTINE', label: 'Routine' },
+  { value: 'STAT', label: 'Stat' },
+  { value: 'ON_SCHEDULED_DATE', label: 'Scheduled' },
+];
+
+export function createEmptyLabOrder(testType: ProceduresType, orderer: string): ProcedureOrderBasketItem {
+  return {
+    action: 'NEW',
+    display: testType.label,
+    testType,
+    orderer,
+  };
+}

package/src/form/procedures-orders/add-procedures-order/procedures-type-search.scss

@@ -0,0 +1,115 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+/** For TestTypeSearchResults */
+
+.container {
+  margin: spacing.$spacing-03 spacing.$spacing-05;
+}
+
+.divider {
+  border: 0;
+  border-top: 1px solid vars.$color-gray-30;
+  width: 66%;
+}
+
+.desktopDivider {
+  margin: spacing.$spacing-07 auto spacing.$spacing-05;
+}
+
+.tabletDivider {
+  margin: spacing.$spacing-08 auto spacing.$spacing-06;
+}
+
+.searchResultsCount {
+  @include type.type-style('body-compact-01');
+  color: vars.$text-02;
+}
+
+.orderBasketSearchResultsHeader {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: spacing.$spacing-03;
+  align-items: center;
+}
+
+/** For TestTypeSearchResultItem */
+
+.searchResultTile {
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  border: 1px solid vars.$grey-2;
+  &:not(:last-of-type) {
+    margin-bottom: spacing.$spacing-03;
+  }
+}
+
+.tabletSearchResultTile {
+  margin-top: 5px;
+  background-color: vars.$ui-02;
+}
+
+.searchResultTileContent {
+  padding: spacing.$spacing-03 spacing.$spacing-05;
+}
+
+.searchResultActions {
+  border-top: 1px solid vars.$grey-2;
+  padding: 0 spacing.$spacing-05;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.searchResultSkeletonWrapper {
+  margin: spacing.$spacing-03 1rem spacing.$spacing-03;
+
+  :global(.cds--skeleton__text) {
+    margin: 0;
+  }
+
+  .searchResultCntSkeleton {
+    margin-right: spacing.$spacing-07;
+  }
+
+  .skeletonTile {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.emptyState {
+  margin: spacing.$spacing-05;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: spacing.$spacing-07;
+  border: 1px solid vars.$ui-03;
+  text-align: center;
+  background-color: vars.$ui-01;
+}
+
+:global(.omrs-breakpoint-lt-small-desktop) .emptyState {
+  background-color: vars.$ui-02;
+}
+
+.link {
+  color: vars.$interactive-01;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.resultsContainer {
+  overflow-y: scroll;
+}
+
+.resultsContainer::-webkit-scrollbar {
+  width: spacing.$spacing-03;
+}
+
+.resultsContainer::-webkit-scrollbar-thumb {
+  background: vars.$ui-04;
+  border-radius: spacing.$spacing-02;
+}

package/src/form/procedures-orders/add-procedures-order/procedures-type-search.tsx

@@ -0,0 +1,236 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button, ButtonSkeleton, Search, SkeletonText, Tile } from '@carbon/react';
+import { ArrowRight, ShoppingCartArrowDown, ShoppingCartArrowUp } from '@carbon/react/icons';
+import { useDebounce, useLayoutType, useSession, ResponsiveWrapper, closeWorkspace } from '@openmrs/esm-framework';
+import { launchPatientWorkspace, useOrderBasket } from '@openmrs/esm-patient-common-lib';
+import { prepProceduresOrderPostData } from '../api';
+import { type ProceduresType, useProceduresTypes } from './useProceduresTypes';
+import { createEmptyLabOrder } from './procedures-order';
+import styles from './procedures-type-search.scss';
+import { type ProcedureOrderBasketItem } from '../../../types';
+
+export interface TestTypeSearchProps {
+  openLabForm: (searchResult: ProcedureOrderBasketItem) => void;
+}
+
+export function TestTypeSearch({ openLabForm }: TestTypeSearchProps) {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm);
+  const searchInputRef = useRef(null);
+
+  const focusAndClearSearchInput = () => {
+    setSearchTerm('');
+    searchInputRef.current?.focus();
+  };
+
+  const handleSearchTermChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value ?? '');
+  };
+
+  return (
+    <>
+      <ResponsiveWrapper>
+        <Search
+          autoFocus
+          size="lg"
+          placeholder={t('searchFieldPlaceholder', 'Search for a procedure')}
+          labelText={t('searchFieldPlaceholder', 'Search for a procedure')}
+          onChange={handleSearchTermChange}
+          ref={searchInputRef}
+          value={searchTerm}
+        />
+      </ResponsiveWrapper>
+      <TestTypeSearchResults
+        searchTerm={debouncedSearchTerm}
+        openOrderForm={openLabForm}
+        focusAndClearSearchInput={focusAndClearSearchInput}
+      />
+    </>
+  );
+}
+
+interface TestTypeSearchResultsProps {
+  searchTerm: string;
+  openOrderForm: (searchResult: ProcedureOrderBasketItem) => void;
+  focusAndClearSearchInput: () => void;
+}
+
+function TestTypeSearchResults({ searchTerm, openOrderForm, focusAndClearSearchInput }: TestTypeSearchResultsProps) {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { testTypes, isLoading, error } = useProceduresTypes(searchTerm);
+
+  if (isLoading) {
+    return <TestTypeSearchSkeleton />;
+  }
+
+  if (error) {
+    return (
+      <Tile className={styles.emptyState}>
+        <div>
+          <h4 className={styles.productiveHeading01}>
+            {t('errorFetchingTestTypes', 'Error fetching results for "{{searchTerm}}"', {
+              searchTerm,
+            })}
+          </h4>
+          <p className={styles.bodyShort01}>
+            <span>{t('trySearchingAgain', 'Please try searching again')}</span>
+          </p>
+        </div>
+      </Tile>
+    );
+  }
+
+  return (
+    <>
+      {testTypes?.length ? (
+        <div className={styles.container}>
+          {searchTerm && (
+            <div className={styles.orderBasketSearchResultsHeader}>
+              <span className={styles.searchResultsCount}>
+                {t('searchResultsMatchesForTerm', '{{count}} results for "{{searchTerm}}"', {
+                  count: testTypes?.length,
+                  searchTerm,
+                })}
+              </span>
+              <Button kind="ghost" onClick={focusAndClearSearchInput} size={isTablet ? 'md' : 'sm'}>
+                {t('clearSearchResults', 'Clear Results')}
+              </Button>
+            </div>
+          )}
+          <div className={styles.resultsContainer}>
+            {testTypes.map((testType) => (
+              <TestTypeSearchResultItem key={testType.conceptUuid} testType={testType} openOrderForm={openOrderForm} />
+            ))}
+          </div>
+        </div>
+      ) : (
+        <Tile className={styles.emptyState}>
+          <div>
+            <h4 className={styles.productiveHeading01}>
+              {t('noResultsForTestTypeSearch', 'No results to display for "{{searchTerm}}"', {
+                searchTerm,
+              })}
+            </h4>
+            <p className={styles.bodyShort01}>
+              <span>{t('tryTo', 'Try to')}</span>{' '}
+              <span className={styles.link} role="link" tabIndex={0} onClick={focusAndClearSearchInput}>
+                {t('searchAgain', 'search again')}
+              </span>{' '}
+              <span>{t('usingADifferentTerm', 'using a different term')}</span>
+            </p>
+          </div>
+        </Tile>
+      )}
+      <hr className={classNames(styles.divider, isTablet ? styles.tabletDivider : styles.desktopDivider)} />
+    </>
+  );
+}
+
+interface TestTypeSearchResultItemProps {
+  testType: ProceduresType;
+  openOrderForm: (searchResult: ProcedureOrderBasketItem) => void;
+}
+
+const TestTypeSearchResultItem: React.FC<TestTypeSearchResultItemProps> = ({ testType, openOrderForm }) => {
+  const isTablet = useLayoutType() === 'tablet';
+  const session = useSession();
+  const { orders, setOrders } = useOrderBasket<ProcedureOrderBasketItem>('procedures', prepProceduresOrderPostData);
+  const testTypeAlreadyInBasket = useMemo(
+    () => orders?.some((order) => order.testType.conceptUuid === testType.conceptUuid),
+    [orders, testType],
+  );
+
+  const createLabOrder = useCallback(
+    (testType: ProceduresType) => {
+      return createEmptyLabOrder(testType, session.currentProvider.uuid);
+    },
+    [session.currentProvider?.uuid],
+  );
+
+  const { t } = useTranslation();
+
+  const addToBasket = useCallback(() => {
+    const labOrder = createLabOrder(testType);
+    labOrder.isOrderIncomplete = true;
+    setOrders([...orders, labOrder]);
+    closeWorkspace('add-procedures-order', {
+      ignoreChanges: true,
+      onWorkspaceClose: () => launchPatientWorkspace('order-basket'),
+    });
+  }, [orders, setOrders, createLabOrder, testType]);
+
+  const removeFromBasket = useCallback(() => {
+    setOrders(orders.filter((order) => order.testType.conceptUuid !== testType.conceptUuid));
+  }, [orders, setOrders, testType.conceptUuid]);
+
+  return (
+    <Tile
+      className={classNames(styles.searchResultTile, {
+        [styles.tabletSearchResultTile]: isTablet,
+      })}
+      key={testType.conceptUuid}
+      role="listitem">
+      <div className={classNames(styles.searchResultTileContent, styles.text02)}>
+        <p>
+          <span className={styles.productiveHeading01}>{testType.label}</span>{' '}
+        </p>
+      </div>
+      <div className={styles.searchResultActions}>
+        {testTypeAlreadyInBasket ? (
+          <Button
+            kind="danger--ghost"
+            renderIcon={(props) => <ShoppingCartArrowUp size={16} {...props} />}
+            onClick={() => removeFromBasket()}>
+            {t('removeFromBasket', 'Remove from basket')}
+          </Button>
+        ) : (
+          <Button
+            kind="ghost"
+            renderIcon={(props) => <ShoppingCartArrowDown size={16} {...props} />}
+            onClick={() => addToBasket()}>
+            {t('directlyAddToBasket', 'Add to basket')}
+          </Button>
+        )}
+        <Button
+          kind="ghost"
+          renderIcon={(props) => <ArrowRight size={16} {...props} />}
+          onClick={() => openOrderForm(createLabOrder(testType))}>
+          {t('goToDrugOrderForm', 'Order form')}
+        </Button>
+      </div>
+    </Tile>
+  );
+};
+
+const TestTypeSearchSkeleton = () => {
+  const isTablet = useLayoutType() === 'tablet';
+  const tileClassName = `${isTablet ? `${styles.tabletSearchResultTile}` : `${styles.desktopSearchResultTile}`} ${
+    styles.skeletonTile
+  }`;
+  return (
+    <div className={styles.searchResultSkeletonWrapper}>
+      <div className={styles.orderBasketSearchResultsHeader}>
+        <SkeletonText className={styles.searchResultCntSkeleton} />
+        <ButtonSkeleton size={isTablet ? 'md' : 'sm'} />
+      </div>
+      <Tile className={tileClassName}>
+        <SkeletonText />
+      </Tile>
+      <Tile className={tileClassName}>
+        <SkeletonText />
+      </Tile>
+      <Tile className={tileClassName}>
+        <SkeletonText />
+      </Tile>
+      <Tile className={tileClassName}>
+        <SkeletonText />
+      </Tile>
+      <hr className={classNames(styles.divider, isTablet ? styles.tabletDivider : styles.desktopDivider)} />
+    </div>
+  );
+};

package/src/form/procedures-orders/add-procedures-order/useProceduresTypes.ts

@@ -0,0 +1,93 @@
+import { useEffect, useMemo } from 'react';
+import useSWRImmutable from 'swr/immutable';
+import fuzzy from 'fuzzy';
+import { type FetchResponse, openmrsFetch, useConfig, restBaseUrl, reportError } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../../../config-schema';
+import { type Concept } from '../api';
+
+type ConceptResult = FetchResponse<Concept>;
+type ConceptResults = FetchResponse<{ setMembers: Array<Concept> }>;
+
+export interface ProceduresType {
+  label: string;
+  conceptUuid: string;
+}
+
+export interface UseProceduresType {
+  testTypes: Array<ProceduresType>;
+  isLoading: boolean;
+  error: Error;
+}
+
+function openmrsFetchMultiple(urls: Array<string>) {
+  // SWR has an RFC for `useSWRList`:
+  // https://github.com/vercel/swr/discussions/1988
+  // If that ever is implemented we should switch to using that.
+  return Promise.all(urls.map((url) => openmrsFetch<{ results: Array<Concept> }>(url)));
+}
+
+function useProceduresConceptsSWR(labOrderableConcepts?: Array<string>) {
+  const config = useConfig<ConfigObject>();
+  const { data, isLoading, error } = useSWRImmutable(
+    () =>
+      labOrderableConcepts
+        ? labOrderableConcepts.map((c) => `${restBaseUrl}/concept/${c}`)
+        : `${restBaseUrl}/concept/${config.procedureConceptSetUuid}?v=custom:setMembers`,
+    (labOrderableConcepts ? openmrsFetchMultiple : openmrsFetch) as any,
+    {
+      shouldRetryOnError(err) {
+        return err instanceof Response;
+      },
+    },
+  );
+
+  const results = useMemo(() => {
+    if (isLoading || error) {
+      return null;
+    }
+    return labOrderableConcepts
+      ? (data as Array<ConceptResult>)?.flatMap((d) => d.data.setMembers)
+      : ((data as ConceptResults)?.data.setMembers ?? ([] as Concept[]));
+  }, [data, isLoading, error]);
+
+  return {
+    data: results,
+    isLoading,
+    error,
+  };
+}
+
+export function useProceduresTypes(searchTerm = ''): UseProceduresType {
+  const {
+    orders: { labOrderableConcepts },
+  } = useConfig<ConfigObject>();
+
+  const { data, isLoading, error } = useProceduresConceptsSWR(
+    labOrderableConcepts.length ? labOrderableConcepts : null,
+  );
+
+  useEffect(() => {
+    if (error) {
+      reportError(error);
+    }
+  }, [error]);
+
+  const testConcepts = useMemo(() => {
+    return data?.map((concept) => ({
+      label: concept.display,
+      conceptUuid: concept.uuid,
+    }));
+  }, [data]);
+
+  const filteredTestTypes = useMemo(() => {
+    return searchTerm && !isLoading && !error
+      ? fuzzy.filter(searchTerm, testConcepts, { extract: (c) => c.label }).map((result) => result.original)
+      : testConcepts;
+  }, [testConcepts, searchTerm]);
+
+  return {
+    testTypes: filteredTestTypes,
+    isLoading: isLoading,
+    error: error,
+  };
+}