@digihmis/esm-administration-app 1.0.0

package/src/location-management/components/auto-suggest/autosuggest.component.tsx

@@ -0,0 +1,149 @@
+import { InlineLoading, Layer, Search } from '@carbon/react';
+import classNames from 'classnames';
+import React, { type HTMLAttributes, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './autosuggest.scss';
+
+type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
+
+interface SearchProps 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 SearchProps {
+  getDisplayValue: (item: any) => string;
+  getFieldValue: (item: any) => string;
+  getSearchResults: (query: string) => Promise<any>;
+  onSuggestionSelected: (field: string, value: string) => void;
+  invalid?: boolean;
+  invalidText?: string;
+  renderSuggestionItem?: (item: any) => React.ReactNode;
+  renderEmptyState?: (value: any) => React.ReactNode;
+}
+
+export const Autosuggest: React.FC<AutosuggestProps> = ({
+  getDisplayValue,
+  getFieldValue,
+  getSearchResults,
+  onSuggestionSelected,
+  invalid,
+  invalidText,
+  renderSuggestionItem,
+  renderEmptyState,
+  ...searchProps
+}) => {
+  const { t } = useTranslation();
+  const [suggestions, setSuggestions] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const searchBox = useRef<HTMLInputElement>(null);
+  const wrapper = useRef<HTMLDivElement>(null);
+  const { id: name, labelText } = searchProps;
+
+  useEffect(() => {
+    const handleClickOutsideComponent = (e: MouseEvent) => {
+      if (wrapper.current && !wrapper.current.contains(e.target as Node)) {
+        setSuggestions([]);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutsideComponent);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutsideComponent);
+    };
+  }, [wrapper]);
+
+  const handleChange = (e) => {
+    const query = e.target.value;
+    onSuggestionSelected(name, undefined);
+
+    if (query && query.trim()) {
+      setIsLoading(true);
+      getSearchResults(query.trim())
+        .then((results) => {
+          setSuggestions(results || []);
+          setIsLoading(false);
+        })
+        .catch((error) => {
+          setSuggestions([]);
+          setIsLoading(false);
+        });
+    } else {
+      setSuggestions([]);
+      setIsLoading(false);
+    }
+  };
+
+  const handleClear = () => {
+    onSuggestionSelected(name, undefined);
+    setSuggestions([]);
+    setIsLoading(false);
+  };
+
+  const handleClick = (index: number) => {
+    const selectedSuggestion = suggestions[index];
+    if (selectedSuggestion) {
+      const fieldValue = getFieldValue(selectedSuggestion);
+      const displayValue = getDisplayValue(selectedSuggestion);
+      if (searchBox.current) {
+        searchBox.current.value = displayValue;
+      }
+      onSuggestionSelected(name, fieldValue);
+      setSuggestions([]);
+    }
+  };
+
+  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}
+          ref={searchBox}
+          className={styles.autocompleteSearch}
+          {...searchProps}
+        />
+      </Layer>
+      {isLoading && (
+        <div className={styles.loading}>
+          <InlineLoading status="active" description={t('loading', 'Loading...')} />
+        </div>
+      )}
+      {suggestions.length > 0 ? (
+        <ul className={styles.suggestions}>
+          {suggestions.map((suggestion, index) => {
+            return (
+              <li
+                key={getFieldValue(suggestion) || index}
+                onClick={() => handleClick(index)}
+                role="presentation"
+                style={{ cursor: 'pointer' }}>
+                {renderSuggestionItem ? renderSuggestionItem(suggestion) : getDisplayValue(suggestion)}
+              </li>
+            );
+          })}
+        </ul>
+      ) : (
+        !isLoading && renderEmptyState && renderEmptyState(searchBox.current?.value || '')
+      )}
+      {invalid && <label className={classNames(styles.invalidMsg)}>{invalidText}</label>}
+    </div>
+  );
+};

package/src/location-management/components/auto-suggest/autosuggest.scss

@@ -0,0 +1,61 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@carbon/colors';
+
+.label01 {
+  @include type.type-style('label-01');
+}
+
+.suggestions {
+  position: relative;
+  border-top-width: 0;
+  list-style: none;
+  margin-top: 0;
+  max-height: 400px;
+  overflow-y: auto;
+  padding-left: 0;
+  width: 100%;
+  position: absolute;
+  left: 0;
+  background-color: colors.$white;
+  margin-bottom: 20px;
+  z-index: 99;
+  box-shadow: layout.$spacing-03 layout.$spacing-03 layout.$spacing-03 layout.$spacing-03 colors.$gray-30;
+}
+
+.suggestions li {
+  color: colors.$gray-70;
+  border-bottom: 1px solid colors.$gray-50;
+}
+
+.displayText {
+  padding: layout.$spacing-05;
+}
+
+.suggestions li:not(:last-of-type) {
+  border-bottom: 1px solid colors.$gray-40-hover;
+}
+
+.autocomplete {
+  position: relative;
+}
+
+.autocompleteSearch {
+  width: 100%;
+}
+
+.suggestions a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.invalid input {
+  outline: 2px solid var(--cds-support-error, colors.$red-60);
+  outline-offset: -2px;
+  margin-bottom: layout.$spacing-02;
+}
+
+.invalidMsg {
+  color: var(--cds-text-error, colors.$red-60);
+  font-size: small;
+}

package/src/location-management/components/auto-suggest/location-autosuggest.component.tsx

@@ -0,0 +1,97 @@
+import { Tile } from '@carbon/react';
+import React, { useCallback, useState } from 'react';
+import { Autosuggest } from './autosuggest.component';
+import styles from './location-autosuggest.scss';
+import { type LocationResponse } from '../../types';
+import ResultsTile from '../custom-results-tile/results-tile.component';
+import { searchLocation } from '../../hooks/UseFacilityLocations';
+import { useTranslation } from 'react-i18next';
+
+interface LocationAutosuggestProps {
+  onLocationSelected: (locationUuid: string, locationData: LocationResponse) => void;
+  labelText?: string;
+  placeholder?: string;
+  invalid?: boolean;
+  invalidText?: string;
+}
+
+export const LocationAutosuggest: React.FC<LocationAutosuggestProps> = ({
+  onLocationSelected,
+  labelText = 'Select Location',
+  placeholder = 'Search for a location...',
+  invalid = false,
+  invalidText = 'Please select a valid location',
+}) => {
+  const [searchResults, setSearchResults] = useState<LocationResponse[]>([]);
+  const { t } = useTranslation();
+
+  const getDisplayValue = useCallback((item: LocationResponse) => {
+    return item.display || item.name || '';
+  }, []);
+
+  const getFieldValue = useCallback((item: LocationResponse) => {
+    return item.uuid || '';
+  }, []);
+
+  const handleSuggestionSelected = useCallback(
+    (field: string, value: string) => {
+      if (value) {
+        const selected = searchResults.find((item) => item.uuid === value);
+        if (selected) {
+          onLocationSelected(value, selected);
+        }
+      }
+    },
+    [onLocationSelected, searchResults],
+  );
+
+  const handleSearchResults = useCallback(async (query: string) => {
+    const results = await searchLocation(query);
+    setSearchResults(results);
+    return results;
+  }, []);
+
+  const renderSuggestionItem = useCallback((item: LocationResponse) => {
+    return (
+      <div>
+        <ResultsTile location={item} />
+      </div>
+    );
+  }, []);
+
+  const renderEmptyState = useCallback(
+    (value: string) => {
+      if (!value) {
+        return null;
+      }
+
+      return (
+        <div className={styles.tileContainer}>
+          <Tile className={styles.tileNoContent}>
+            <div className={styles.tileContents}>
+              <p className={styles.content}>{t('searchNoResults', `Found no matching results`)}</p>
+              <p className={styles.helper}>{t('searchNoResultsHelper', 'Try searching for a different term')}</p>
+            </div>
+          </Tile>
+        </div>
+      );
+    },
+    [t],
+  );
+
+  return (
+    <Autosuggest
+      id="location-autosuggest"
+      labelText={labelText}
+      placeholder={placeholder}
+      getDisplayValue={getDisplayValue}
+      getFieldValue={getFieldValue}
+      getSearchResults={handleSearchResults}
+      onSuggestionSelected={handleSuggestionSelected}
+      renderSuggestionItem={renderSuggestionItem}
+      renderEmptyState={renderEmptyState}
+      invalid={invalid}
+      invalidText={invalidText}
+    />
+  );
+};

package/src/location-management/components/auto-suggest/location-autosuggest.scss

@@ -0,0 +1,48 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.tileContainer {
+  background-color: colors.$white-0;
+  border-top: 1px solid colors.$gray-20;
+  padding: layout.$spacing-09 0;
+}
+
+.tileNoContent {
+  margin: auto;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: layout.$spacing-05;
+}
+
+.details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+}
+
+.illustrationPictogram {
+  width: layout.$spacing-07;
+  height: layout.$spacing-07;
+  fill: var(--brand-03);
+  flex-shrink: 0;
+}

package/src/location-management/components/custom-results-tile/results-tile.component.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Tag, Tile } from '@carbon/react';
+import { Hospital } from '@carbon/pictograms-react';
+import styles from './results-tile.scss';
+import { Close } from '@carbon/react/icons';
+import { type LocationResponse } from '../../types';
+
+interface ResultsTileProps {
+  location?: LocationResponse;
+  onClose?: () => void;
+}
+
+const ResultsTile: React.FC<ResultsTileProps> = ({ location, onClose }) => {
+  return (
+    <Tile className={styles.tile}>
+      <div className={styles.tileContent}>
+        {onClose && <Close size={16} className={styles.closeIcon} onClick={onClose} />}
+        <Hospital className={styles.illustrationPictogram} />
+        <div className={styles.details}>
+          <div className={styles.locationName}>{location.display || location.name}</div>
+          {location.description && <div className={styles.description}>{location.description}</div>}
+          {(location.stateProvince || location.country) && (
+            <div className={styles.locationDetails}>
+              {[location.stateProvince, location.country].filter(Boolean).join(', ')}
+            </div>
+          )}
+          {location.tags && (
+            <div className={styles.tags}>
+              {location.tags.map((tag, index) => (
+                <Tag key={index} className={styles.tag}>
+                  {tag.display || tag.name}
+                </Tag>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </Tile>
+  );
+};
+
+export default ResultsTile;

package/src/location-management/components/custom-results-tile/results-tile.scss

@@ -0,0 +1,86 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.tile {
+  position: relative;
+}
+
+.tileContainer {
+  background-color: colors.$white-0;
+  border-top: 1px solid colors.$gray-20;
+  padding: layout.$spacing-10 0;
+}
+
+.tileNoContent {
+  margin: auto;
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: layout.$spacing-05;
+}
+
+.details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+}
+
+.illustrationPictogram {
+  width: layout.$spacing-07;
+  height: layout.$spacing-07;
+  fill: var(--brand-03);
+  flex-shrink: 0;
+}
+
+.closeIcon {
+  position: absolute;
+  top: layout.$spacing-03;
+  right: layout.$spacing-03;
+  cursor: pointer;
+  color: colors.$gray-70;
+
+  &:hover {
+    color: colors.$gray-100;
+  }
+}
+
+.description {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+  margin-bottom: layout.$spacing-03;
+  font-size: layout.$spacing-01;
+}
+.locationName {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+  font-weight: bold;
+}
+.locationDetails {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+  font-size: layout.$spacing-01;
+}
+.tags {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+  font-size: layout.$spacing-01;
+}

package/src/location-management/forms/add-location/add-location.workspace.scss

@@ -0,0 +1,71 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.form {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.formContainer {
+  margin: layout.$spacing-05;
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-05;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    margin: layout.$spacing-03;
+    gap: layout.$spacing-03;
+  }
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    padding: layout.$spacing-05 layout.$spacing-03;
+  }
+}
+
+.desktop {
+  padding: 0;
+  margin: 0 layout.$spacing-05 layout.$spacing-05;
+
+  :global(.omrs-breakpoint-lt-desktop) & {
+    margin: 0 layout.$spacing-03 layout.$spacing-03;
+  }
+}
+
+.buttonContainer {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    max-width: none;
+    flex: 1;
+  }
+}
+
+.inlineLoading {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+
+  :global(.omrs-breakpoint-lt-tablet) & {
+    gap: layout.$spacing-02;
+  }
+}
+
+.button {
+  height: layout.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}