@digihmis/esm-patient-registration-app 1.0.0

package/src/components/custom-input/autosuggest/autosuggest.component.tsx

@@ -0,0 +1,213 @@
+import React, { type HTMLAttributes, useEffect, useRef, useState, useCallback } from 'react';
+import { Layer, Search, type SearchProps } from '@carbon/react';
+import classNames from 'classnames';
+import styles from './autosuggest.scss';
+import Loader from '../../custom-card/custom-loader.component';
+import upperCase from 'lodash-es/upperCase';
+
+type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
+
+interface SearchPropsExtended extends InputPropsBase {
+  autoComplete?: string;
+  className?: string;
+  closeButtonLabelText?: string;
+  defaultValue?: string | number;
+  disabled?: boolean;
+  isExpanded?: boolean;
+  id?: string;
+  labelText: React.ReactNode;
+  onChange?(e: { target: HTMLInputElement; type: 'change' }): void;
+  onClear?(): void;
+  onExpand?(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void;
+  placeholder?: string;
+  renderIcon?: React.ComponentType | React.FunctionComponent;
+  role?: string;
+  size?: 'sm' | 'md' | 'lg';
+  type?: string;
+  value?: string | number;
+}
+
+interface AutosuggestProps extends SearchPropsExtended {
+  getDisplayValue: (item: any) => string;
+  getFieldValue: (item: any) => string;
+  getSearchResults: (query: string) => Promise<any[]>;
+  onSuggestionSelected: (field: string, value: string | undefined) => void;
+  invalid?: boolean;
+  invalidText?: string;
+}
+
+export const Autosuggest: React.FC<AutosuggestProps> = ({
+  getDisplayValue,
+  getFieldValue,
+  getSearchResults,
+  onSuggestionSelected,
+  invalid,
+  invalidText,
+  ...searchProps
+}) => {
+  const [suggestions, setSuggestions] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const searchBox = useRef<HTMLInputElement>(null);
+  const wrapper = useRef<HTMLDivElement>(null);
+  const suggestionsContainer = useRef<HTMLDivElement>(null);
+  const { id: name, labelText } = searchProps;
+  const searchTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutsideComponent);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutsideComponent);
+    };
+  }, [wrapper]);
+
+  const handleClickOutsideComponent = (e: MouseEvent) => {
+    if (wrapper.current && !wrapper.current.contains(e.target as Node)) {
+      setSuggestions([]);
+      setSelectedIndex(-1);
+    }
+  };
+
+  const handleChange = useCallback(
+    async (e: React.ChangeEvent<HTMLInputElement>) => {
+      const query = e.target.value;
+      onSuggestionSelected(name, undefined);
+      setSelectedIndex(-1);
+
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+
+      if (query) {
+        setIsLoading(true);
+        searchTimeoutRef.current = setTimeout(async () => {
+          try {
+            const results = await getSearchResults(query);
+            setSuggestions(results);
+          } catch (error) {
+            console.error('Error fetching suggestions:', error);
+            setSuggestions([]);
+          } finally {
+            setIsLoading(false);
+          }
+        }, 300);
+      } else {
+        setSuggestions([]);
+        setIsLoading(false);
+      }
+    },
+    [name, onSuggestionSelected, getSearchResults],
+  );
+
+  const handleClear = () => {
+    onSuggestionSelected(name, undefined);
+    setSuggestions([]);
+    setSelectedIndex(-1);
+  };
+
+  const handleClick = useCallback(
+    (index: number) => {
+      if (suggestions[index]) {
+        const display = getDisplayValue(suggestions[index]);
+        const value = getFieldValue(suggestions[index]);
+        if (searchBox.current) {
+          // Uppercase the value when setting it in the search box
+          searchBox.current.value = upperCase(display);
+        }
+        onSuggestionSelected(name, value);
+        setSuggestions([]);
+        setSelectedIndex(-1);
+      }
+    },
+    [suggestions, name, getDisplayValue, getFieldValue, onSuggestionSelected],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (suggestions.length === 0) {
+        return;
+      }
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          setSelectedIndex((prev) => (prev < suggestions.length - 1 ? prev + 1 : prev));
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          setSelectedIndex((prev) => (prev > 0 ? prev - 1 : -1));
+          break;
+        case 'Enter':
+          e.preventDefault();
+          if (selectedIndex >= 0) {
+            handleClick(selectedIndex);
+          }
+          break;
+        case 'Escape':
+          setSuggestions([]);
+          setSelectedIndex(-1);
+          break;
+        default:
+          break;
+      }
+    },
+    [suggestions, selectedIndex, handleClick],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <div className={styles.autocomplete} ref={wrapper}>
+      <label className="cds--label">{labelText}</label>
+      <Layer className={classNames({ [styles.invalid]: invalid })}>
+        <Search
+          id="autosuggest"
+          onChange={handleChange}
+          onClear={handleClear}
+          onKeyDown={handleKeyDown}
+          ref={searchBox}
+          className={styles.autocompleteSearch}
+          {...searchProps}
+        />
+      </Layer>
+
+      {(suggestions.length > 0 || isLoading) && (
+        <div className={styles.suggestionsWrapper} ref={suggestionsContainer}>
+          {isLoading ? (
+            <div className={styles.loaderContainer}>
+              {Array.from({ length: 1 }).map((_, i) => (
+                <div key={`loader-${i}`} className={styles.loaderItem}>
+                  <Loader />
+                </div>
+              ))}
+            </div>
+          ) : (
+            <ul className={styles.suggestions}>
+              {suggestions.map((suggestion, index) => (
+                <li
+                  key={getFieldValue(suggestion)}
+                  onClick={() => handleClick(index)}
+                  className={classNames(styles.suggestionItem, {
+                    [styles.selected]: index === selectedIndex,
+                  })}
+                  role="option"
+                  aria-selected={index === selectedIndex}>
+                  {upperCase(getDisplayValue(suggestion))}
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+
+      {invalid && <label className={classNames(styles.invalidMsg)}>{invalidText}</label>}
+    </div>
+  );
+};

package/src/components/custom-input/autosuggest/autosuggest.scss

@@ -0,0 +1,158 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.autocomplete {
+  position: relative;
+}
+
+.autocompleteSearch {
+  width: 100%;
+}
+
+.suggestionsWrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% + 2px);
+  background-color: $ui-background;
+  border: 1px solid $ui-03;
+  border-radius: 0 0 4px 4px;
+  max-height: 400px;
+  overflow-y: auto;
+  z-index: 99;
+  box-shadow: 0 4px 12px rgba(27, 75, 102, 0.15);
+  animation: slideDown 0.2s ease-out;
+
+  // Custom scrollbar styling
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $ui-01;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--brand-02, #2e6b8a);
+    border-radius: 4px;
+
+    &:hover {
+      background: var(--brand-01, #1b4b66);
+    }
+  }
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.loaderContainer {
+  padding: layout.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+  width: 100%;
+}
+
+.loaderItem {
+  width: 100%;
+  max-width: 1400px;
+}
+
+.suggestions {
+  position: relative;
+  list-style: none;
+  margin: 0;
+  padding: layout.$spacing-02 0;
+  width: 100%;
+}
+
+.suggestionItem {
+  padding: layout.$spacing-04 layout.$spacing-05;
+  border-bottom: 1px solid $ui-03;
+  cursor: pointer;
+  transition: all 0.15s cubic-bezier(0.2, 0, 0.38, 0.9);
+  @include type.type-style('body-compact-01');
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    background-color: var(--brand-03, #4a90b8);
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.2s ease;
+  }
+
+  &:hover {
+    background-color: rgba(74, 144, 184, 0.08);
+
+    &::before {
+      transform: scaleX(1);
+    }
+  }
+
+  &.selected {
+    background-color: rgba(74, 144, 184, 0.15);
+    color: var(--brand-01, #1b4b66);
+    font-weight: 600;
+
+    &::before {
+      transform: scaleX(1);
+      background-color: var(--brand-01, #1b4b66);
+    }
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:first-child {
+    border-radius: 4px 4px 0 0;
+  }
+
+  &:last-child {
+    border-radius: 0 0 4px 4px;
+  }
+}
+
+.suggestions a {
+  color: inherit;
+  text-decoration: none;
+  display: block;
+}
+
+.invalid input {
+  outline: 2px solid var(--cds-support-error, #da1e28) !important;
+  outline-offset: -2px;
+}
+
+.invalidMsg {
+  display: block;
+  margin-top: layout.$spacing-03;
+  color: var(--cds-text-error, #da1e28);
+  @include type.type-style('label-01');
+  font-weight: 400;
+}
+
+.emptyState {
+  padding: layout.$spacing-05;
+  text-align: center;
+  @include type.type-style('body-compact-01');
+}

package/src/components/custom-input/autosuggest/autosuggest.test.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Autosuggest } from './autosuggest.component';
+import { BrowserRouter } from 'react-router-dom';
+
+export function renderWithRouter(ui: React.ReactElement) {
+  return render(<BrowserRouter>{ui}</BrowserRouter>);
+}
+
+const mockPersons = [
+  {
+    uuid: 'randomuuid1',
+    display: 'John Doe',
+  },
+  {
+    uuid: 'randomuuid2',
+    display: 'John Smith',
+  },
+  {
+    uuid: 'randomuuid3',
+    display: 'James Smith',
+  },
+  {
+    uuid: 'randomuuid4',
+    display: 'Spider Man',
+  },
+];
+
+const mockGetSearchResults = async (query: string) => {
+  return mockPersons.filter((person) => {
+    return person.display.toUpperCase().includes(query.toUpperCase());
+  });
+};
+
+const mockHandleSuggestionSelected = jest.fn((field, value) => [field, value]);
+
+describe('Autosuggest', () => {
+  it('renders a search box', () => {
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
+    );
+
+    expect(screen.getByRole('searchbox')).toBeInTheDocument();
+    expect(screen.queryByRole('list')).not.toBeInTheDocument();
+  });
+
+  it('renders matching search results in a list when the user types a query', async () => {
+    const user = userEvent.setup();
+
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
+    );
+
+    const searchbox = screen.getByRole('searchbox');
+    await user.type(searchbox, 'john');
+
+    const list = screen.getByRole('list');
+
+    expect(list).toBeInTheDocument();
+    expect(screen.getAllByRole('listitem').length).toEqual(2);
+    expect(screen.getAllByRole('listitem')[0]).toHaveTextContent('John Doe');
+    expect(screen.getAllByRole('listitem')[1]).toHaveTextContent('John Smith');
+  });
+
+  it('clears the list of suggestions when a suggestion is selected', async () => {
+    const user = userEvent.setup();
+
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
+    );
+
+    let list = screen.queryByRole('list');
+    expect(list).not.toBeInTheDocument();
+
+    const searchbox = screen.getByRole('searchbox');
+    await user.type(searchbox, 'john');
+
+    list = screen.getByRole('list');
+    expect(list).toBeInTheDocument();
+
+    const listitems = screen.getAllByRole('listitem');
+    await user.click(listitems[0]);
+
+    expect(mockHandleSuggestionSelected).toHaveBeenLastCalledWith('person', 'randomuuid1');
+
+    list = screen.queryByRole('list');
+    expect(list).not.toBeInTheDocument();
+  });
+
+  it('changes suggestions when a search input is changed', async () => {
+    const user = userEvent.setup();
+
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
+    );
+
+    let list = screen.queryByRole('list');
+    expect(list).not.toBeInTheDocument();
+
+    const searchbox = screen.getByRole('searchbox');
+    await user.type(searchbox, 'john');
+
+    const suggestion = await screen.findByText('John Doe');
+    expect(suggestion).toBeInTheDocument();
+
+    await user.clear(searchbox);
+
+    list = screen.queryByRole('list');
+    expect(list).not.toBeInTheDocument();
+  });
+
+  it('hides the list of suggestions when the user clicks outside of the component', async () => {
+    const user = userEvent.setup();
+
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
+    );
+
+    const input = screen.getByRole('searchbox');
+
+    await user.type(input, 'john');
+    await screen.findByText('John Doe');
+    await user.click(document.body);
+
+    expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
+  });
+});

package/src/components/custom-patient-banner/custom-patient-banner.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tag } from '@carbon/react';
+import styles from './custom-patient-banner.scss';
+import { usePerson } from './custom-patient-banner.resource';
+import capitalize from 'lodash-es/capitalize';
+import { useConfig } from '@openmrs/esm-framework';
+import { ConfigObject } from '../../config-schema';
+
+interface PatientBannerProps {
+  patientUuid: string;
+}
+
+const PatientBanner: React.FC<PatientBannerProps> = ({ patientUuid }) => {
+  const { t } = useTranslation();
+  const { OpenmrsIdentifierTypeUuid } = useConfig<ConfigObject>();
+
+  const { isLoading, error, person } = usePerson(patientUuid);
+  const openmrsId =
+    person?.identifiers?.find((id) => id.identifierType?.uuid === OpenmrsIdentifierTypeUuid)?.identifier || '';
+  const isDeceased = person?.dead;
+
+  return (
+    <div className={styles.patientHeader}>
+      <span className={styles.patientName}>{capitalize(person?.display)}</span>
+      <span className={styles.patientDetails}>· {openmrsId} </span>
+      <span className={styles.patientDetails}>
+        · {person?.gender} · {person?.age} {t('years', 'yrs')}
+        {isDeceased && (
+          <Tag type="red" size="md" className={styles.tag}>
+            . {t('deceased', 'Deceased')}
+          </Tag>
+        )}
+      </span>
+    </div>
+  );
+};
+
+export default PatientBanner;

package/src/components/custom-patient-banner/custom-patient-banner.resource.ts

@@ -0,0 +1,32 @@
+import { FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export interface Identifier {
+  identifierType: { uuid: string; display: string };
+  identifier: string;
+}
+export interface Person {
+  uuid: string;
+  display: string;
+  identifiers?: Array<Identifier>;
+  person?: Person;
+  gender: string;
+  age: number;
+  dead: boolean;
+  birthdate: string;
+  birthdateEstimated: boolean;
+}
+export interface Patient {
+  uuid: string;
+  display: string;
+  identifiers: Array<Identifier>;
+  person: Person;
+}
+
+export const usePerson = (uuid: string) => {
+  const customRepresentation = `custom:(uuid,display,gender,birthdate,dead,age,deathDate,causeOfDeath:(uuid,display),identifiers:(uuid,identifier,identifierType:(uuid,display),preferred),person:(uuid`;
+  const url = `${restBaseUrl}/person/${uuid}?v=${customRepresentation}`;
+  const { isLoading, error, data } = useSWR<FetchResponse<Patient['person']>>(url, openmrsFetch);
+  const person = data?.data;
+  return { isLoading, error, person };
+};

package/src/components/custom-patient-banner/custom-patient-banner.scss

@@ -0,0 +1,26 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.patientHeader {
+  padding: layout.$spacing-05;
+  border-bottom: 1px solid colors.$gray-20;
+  background-color: colors.$gray-10;
+
+  .patientName {
+    @include type.type-style('heading-compact-01');
+    font-weight: 600;
+    margin-right: layout.$spacing-03;
+  }
+
+  .patientId {
+    @include type.type-style('body-compact-01');
+    font-weight: 600;
+    margin-right: layout.$spacing-02;
+  }
+
+  .patientDetails {
+    @include type.type-style('body-compact-01');
+    color: colors.$gray-70;
+  }
+}