@palladium-ethiopia/esm-admin-app 5.4.2-pre.100

package/src/components/locations/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/components/locations/auto-suggest/location-autosuggest.component.tsx

@@ -0,0 +1,94 @@
+import { Tile } from '@carbon/react';
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import ResultsTile from '../common/results-tile.component';
+import { searchLocation } from '../hooks/UseFacilityLocations';
+import { LocationResponse } from '../types';
+import { Autosuggest } from './autosuggest.component';
+import styles from './location-autosuggest.scss';
+
+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>
+    );
+  }, []);
+
+  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/components/locations/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/components/locations/common/results-tile.component.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type LocationResponse } from '../types';
+import { Tag, Tile } from '@carbon/react';
+import { Hospital } from '@carbon/pictograms-react';
+import styles from './results-tile.scss';
+import { Close } from '@carbon/react/icons';
+
+interface ResultsTileProps {
+  location?: LocationResponse;
+  onClose?: () => void;
+}
+
+const ResultsTile: React.FC<ResultsTileProps> = ({ location, onClose }) => {
+  const { t } = useTranslation();
+
+  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/components/locations/common/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/components/locations/forms/add-location/add-location.workspace.scss

@@ -0,0 +1,34 @@
+@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;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktop {
+  padding: 0;
+}
+.buttonContainer {
+  max-width: 50%;
+}
+.inlineLoading {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+}

package/src/components/locations/forms/add-location/add-location.workspace.tsx

@@ -0,0 +1,200 @@
+import React, { useEffect, useMemo } from 'react';
+import {
+  type DefaultWorkspaceProps,
+  ResponsiveWrapper,
+  useLayoutType,
+  showSnackbar,
+  useConfig,
+  restBaseUrl,
+} from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { Controller, useForm } from 'react-hook-form';
+import {
+  ButtonSet,
+  Button,
+  InlineLoading,
+  TextInput,
+  FormGroup,
+  Stack,
+  Form,
+  FilterableMultiSelect,
+} from '@carbon/react';
+import classNames from 'classnames';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import styles from './add-location.workspace.scss';
+import { type LocationResponse } from '../../types';
+import { extractErrorMessagesFromResponse } from '../../helpers';
+import { useLocationTags } from '../../hooks/useLocationTags';
+import { mutate } from 'swr';
+import { saveOrUpdateLocation } from '../../hooks/useLocation';
+
+type AddLocationWorkspaceProps = DefaultWorkspaceProps & {
+  location?: LocationResponse;
+};
+
+const locationFormSchema = z.object({
+  name: z.string().min(1, { message: 'Location name is required' }),
+  tags: z
+    .object({
+      uuid: z.string().uuid(),
+      display: z.string(),
+    })
+    .array()
+    .nonempty('At least one tag is required'),
+});
+
+type LocationFormType = z.infer<typeof locationFormSchema>;
+
+const AddLocationWorkspace: React.FC<AddLocationWorkspaceProps> = ({
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+  location,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { locationTagList: Tags } = useLocationTags();
+
+  const hasLocationAttributes = useMemo(() => {
+    return location?.attributes && location.attributes.length > 0;
+  }, [location?.attributes]);
+
+  const handleMutation = () => {
+    const url = `${restBaseUrl}/location`;
+    mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
+  };
+
+  const {
+    handleSubmit,
+    control,
+    getValues,
+    formState: { isSubmitting, isDirty, errors },
+  } = useForm<LocationFormType>({
+    resolver: zodResolver(locationFormSchema),
+    defaultValues: {
+      name: location?.name || '',
+      tags: location?.tags || [],
+    },
+  });
+
+  const onSubmit = async (data: LocationFormType) => {
+    const formDataFormSubmission = getValues();
+
+    const locationTagsUuid = formDataFormSubmission?.tags?.map((tag) => tag.uuid) || [];
+
+    const locationPayload = {
+      name: formDataFormSubmission.name,
+      tags: locationTagsUuid,
+    };
+
+    try {
+      const locationUuid = location?.uuid && typeof location.uuid === 'string' ? location.uuid : undefined;
+
+      await saveOrUpdateLocation(locationPayload, locationUuid);
+
+      showSnackbar({
+        title: t('success', 'Success'),
+        kind: 'success',
+        subtitle: locationUuid
+          ? t('locationUpdated', 'Location {{locationName}} was updated successfully.', {
+              locationName: data.name,
+            })
+          : t('locationCreated', 'Location {{locationName}} was created successfully.', {
+              locationName: data.name,
+            }),
+      });
+      handleMutation();
+      closeWorkspaceWithSavedChanges();
+    } catch (error: any) {
+      const errorMessages = extractErrorMessagesFromResponse(error);
+      showSnackbar({
+        title: t('error', 'Error'),
+        kind: 'error',
+        subtitle: errorMessages.join(', ') || t('locationSaveError', 'Error saving location'),
+      });
+    }
+  };
+
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+  }, [isDirty, promptBeforeClosing]);
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+      <div className={styles.formContainer}>
+        <Stack gap={3}>
+          <ResponsiveWrapper>
+            <FormGroup legendText="">
+              <Controller
+                control={control}
+                name="name"
+                render={({ field }) => (
+                  <TextInput
+                    id="locationName"
+                    placeholder={t('locationPlaceholder', 'Add a location')}
+                    labelText={t('locationName', 'Location Name')}
+                    value={field.value}
+                    onChange={field.onChange}
+                    invalid={!!errors.name?.message}
+                    invalidText={errors.name?.message}
+                    disabled={hasLocationAttributes}
+                  />
+                )}
+              />
+            </FormGroup>
+          </ResponsiveWrapper>
+
+          <ResponsiveWrapper>
+            <FormGroup legendText="">
+              <Controller
+                control={control}
+                name="tags"
+                render={({ field: { onChange, value, ref } }) => (
+                  <FilterableMultiSelect
+                    id="locationTags"
+                    titleText={t('selectTags', 'Select tag(s)')}
+                    placeholder={t('selectTagPlaceholder', 'Select a tag')}
+                    items={Tags || []}
+                    selectedItems={(value || []).map(
+                      (selected) => Tags?.find((tag) => tag.uuid === selected.uuid) || selected,
+                    )}
+                    onChange={({ selectedItems }) => onChange(selectedItems || [])}
+                    itemToString={(item) => (item && typeof item === 'object' ? item.display : '')}
+                    selectionFeedback="top-after-reopen"
+                    invalid={!!errors.tags?.message}
+                    invalidText={errors.tags?.message}
+                    disabled={!Tags?.length}
+                    ref={ref}
+                  />
+                )}
+              />
+            </FormGroup>
+          </ResponsiveWrapper>
+        </Stack>
+      </div>
+
+      <ButtonSet
+        className={classNames({
+          [styles.tablet]: isTablet,
+          [styles.desktop]: !isTablet,
+        })}>
+        <Button className={styles.buttonContainer} kind="secondary" onClick={() => closeWorkspace()}>
+          {t('cancel', 'Cancel')}
+        </Button>
+        <Button className={styles.buttonContainer} disabled={isSubmitting || !isDirty} kind="primary" type="submit">
+          {isSubmitting ? (
+            <span className={styles.inlineLoading}>
+              {t('submitting', 'Submitting' + '...')}
+              <InlineLoading status="active" iconDescription="Loading" />
+            </span>
+          ) : (
+            t('saveAndClose', 'Save & close')
+          )}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default AddLocationWorkspace;

package/src/components/locations/forms/search-location/search-location.workspace.scss

@@ -0,0 +1,79 @@
+@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;
+}
+
+.tablet {
+  padding: layout.$spacing-06 layout.$spacing-05;
+  background-color: colors.$white;
+}
+
+.desktop {
+  padding: 0;
+}
+.buttonContainer {
+  max-width: 50%;
+}
+.inlineLoading {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+}
+
+.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; // Changed from column to row
+  align-items: center; // Center items vertically
+  gap: layout.$spacing-05; // Add gap between pictogram and details
+}
+
+.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;
+}