@digihmis/esm-administration-app 1.0.0

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

@@ -0,0 +1,199 @@
+import React, { useEffect, useMemo } from 'react';
+import {
+  type DefaultWorkspaceProps,
+  ResponsiveWrapper,
+  useLayoutType,
+  showSnackbar,
+  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('save', 'Save')
+          )}
+        </Button>
+      </ButtonSet>
+    </Form>
+  );
+};
+
+export default AddLocationWorkspace;

package/src/location-management/forms/search-location/search-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%;
+}

package/src/location-management/forms/search-location/search-location.workspace.tsx

@@ -0,0 +1,214 @@
+import { Button, ButtonSet, FilterableMultiSelect, Form, FormGroup, InlineLoading, Stack } from '@carbon/react';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  type DefaultWorkspaceProps,
+  ResponsiveWrapper,
+  restBaseUrl,
+  showSnackbar,
+  useLayoutType,
+} from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import React, { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { mutate } from 'swr';
+import { z } from 'zod';
+import { saveOrUpdateLocation } from '../../hooks/useLocation';
+import { useLocationTags } from '../../hooks/useLocationTags';
+import { LocationResponse } from '../../types';
+import styles from './search-location.workspace.scss';
+import { extractErrorMessagesFromResponse } from '../../helpers';
+import ResultsTile from '../../components/custom-results-tile/results-tile.component';
+import { LocationAutosuggest } from '../../components/auto-suggest/location-autosuggest.component';
+
+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(),
+});
+
+type LocationFormType = z.infer<typeof locationFormSchema>;
+
+const SearchLocationWorkspace: React.FC<AddLocationWorkspaceProps> = ({
+  closeWorkspace,
+  closeWorkspaceWithSavedChanges,
+  promptBeforeClosing,
+  location,
+}) => {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+  const { locationTagList: Tags } = useLocationTags();
+  const [selectedLocation, setSelectedLocation] = useState<LocationResponse | null>(null);
+
+  const handleMutation = () => {
+    const url = `${restBaseUrl}/location`;
+    mutate((key) => typeof key === 'string' && key.startsWith(url), undefined, { revalidate: true });
+  };
+
+  const {
+    handleSubmit,
+    control,
+    setValue,
+    reset,
+    formState: { isSubmitting, isDirty, errors },
+  } = useForm<LocationFormType>({
+    resolver: zodResolver(locationFormSchema),
+    defaultValues: {
+      name: location?.name || '',
+      tags: location?.tags || [],
+    },
+  });
+
+  const onSubmit = async (data: LocationFormType) => {
+    try {
+      const locationUuid = selectedLocation?.uuid || location?.uuid;
+
+      const locationTagsUuid = data.tags.map((tag) => tag.uuid);
+
+      const locationPayload = {
+        tags: locationTagsUuid,
+      };
+
+      await saveOrUpdateLocation(locationUuid, locationPayload);
+
+      showSnackbar({
+        title: t('success', 'Success'),
+        kind: 'success',
+        subtitle: t('locationUpdated', 'Location {{locationName}} was updated successfully.', {
+          locationName: selectedLocation?.name || location?.name || data.name,
+        }),
+      });
+
+      handleMutation();
+      closeWorkspaceWithSavedChanges();
+    } catch (error: any) {
+      console.error('Error saving location:', error);
+      const errorMessages = extractErrorMessagesFromResponse(error);
+      showSnackbar({
+        title: t('error', 'Error'),
+        kind: 'error',
+        subtitle: errorMessages.join(', ') || t('locationSaveError', 'Error saving location'),
+      });
+    }
+  };
+
+  const handleLocationSelected = (locationUuid: string, locationData: LocationResponse) => {
+    setSelectedLocation(locationData);
+
+    setValue('name', locationData.name || '', { shouldDirty: true });
+
+    if (locationData?.tags && locationData.tags.length > 0) {
+      const formattedTags = locationData.tags.map((tag) => ({
+        uuid: tag.uuid,
+        display: tag.display || tag.name || '',
+      }));
+      if (formattedTags.length > 0) {
+        setValue('tags', formattedTags as [(typeof formattedTags)[0], ...typeof formattedTags], { shouldDirty: true });
+      }
+    } else {
+      setValue('tags', [], { shouldDirty: true });
+    }
+  };
+
+  const handleClearSelection = () => {
+    setSelectedLocation(null);
+    reset();
+  };
+
+  const renderSelectedLocationTile = () => {
+    if (!selectedLocation) {
+      return null;
+    }
+
+    return (
+      <div>
+        <ResultsTile location={selectedLocation} onClose={handleClearSelection} />
+      </div>
+    );
+  };
+
+  useEffect(() => {
+    promptBeforeClosing(() => isDirty);
+  }, [isDirty, promptBeforeClosing]);
+
+  const isFormReady = (selectedLocation || location) && isDirty;
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+      <div className={styles.formContainer}>
+        <Stack gap={3}>
+          <ResponsiveWrapper>
+            <FormGroup legendText="">
+              {!selectedLocation ? (
+                <LocationAutosuggest
+                  onLocationSelected={handleLocationSelected}
+                  labelText={t('searchForLocation', 'Search for location')}
+                  placeholder={t('searchParentLocation', 'Search for location...')}
+                />
+              ) : (
+                renderSelectedLocationTile()
+              )}
+            </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 || !isFormReady} 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 SearchLocationWorkspace;

package/src/location-management/helpers/index.ts

@@ -0,0 +1,33 @@
+/**
+ * Extracts a list of error messages from an error object returned from an API call.
+ * Checks if the error object contains a fieldErrors property, and if so, extracts all the error messages from the field errors.
+ * If the error object does not contain a fieldErrors property, it returns the error message from the error object.
+ * @param errorObject an object containing an error response from an API call.
+ * @returns a list of error messages.
+ */
+
+interface FieldError {
+  message: string;
+}
+
+interface ErrorResponseBody {
+  error?: {
+    message?: string;
+    fieldErrors?: Record<string, FieldError[]>;
+  };
+}
+
+interface APIErrorObject {
+  responseBody?: ErrorResponseBody;
+  message?: string;
+}
+
+export function extractErrorMessagesFromResponse(errorObject: APIErrorObject) {
+  const fieldErrors = errorObject?.responseBody?.error?.fieldErrors;
+
+  if (!fieldErrors) {
+    return [errorObject?.responseBody?.error?.message ?? errorObject?.message];
+  }
+
+  return Object.values(fieldErrors).flatMap((errors: Array<Error>) => errors.map((error) => error.message));
+}

package/src/location-management/hooks/UseFacilityLocations.ts

@@ -0,0 +1,12 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type LocationResponse } from '../types';
+
+export const searchLocation = async (searchTerm: string) => {
+  const customPresentation =
+    'custom:(uuid,display,name,description,stateProvince,country,countyDistrict,address5,address6,tags,attributes:(uuid,attributeType:(uuid,display),value))';
+
+  const url = `${restBaseUrl}/location?v=${customPresentation}&q=${searchTerm}`;
+
+  const response = await openmrsFetch<{ results: Array<LocationResponse> }>(url);
+  return response?.data?.results ?? [];
+};

package/src/location-management/hooks/useLocation.ts

@@ -0,0 +1,18 @@
+import { restBaseUrl, openmrsFetch } from '@openmrs/esm-framework';
+
+export const saveOrUpdateLocation = async (locationPayload, locationUuid) => {
+  if (typeof locationPayload === 'string' && typeof locationUuid === 'object') {
+    const temp = locationPayload;
+    locationPayload = locationUuid;
+    locationUuid = temp;
+  }
+
+  const url = locationUuid ? `${restBaseUrl}/location/${locationUuid}` : `${restBaseUrl}/location`;
+  return await openmrsFetch(url, {
+    method: 'POST',
+    body: locationPayload,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};

package/src/location-management/hooks/useLocationTags.ts

@@ -0,0 +1,15 @@
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { type LocationTagsResponse } from '../types/index';
+
+export const useLocationTags = () => {
+  const customPresentation = 'custom:(uuid,display,name,description)';
+  const url = `${restBaseUrl}/locationtag?v=${customPresentation}`;
+  const { isLoading, error, data } = useSWR<FetchResponse<LocationTagsResponse>>(url, openmrsFetch);
+
+  return {
+    isLoading,
+    error,
+    locationTagList: data?.data?.results || [],
+  };
+};

package/src/location-management/location-management-dashboard.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ExtensionSlot, useConfig } from '@openmrs/esm-framework';
+import styles from './location-management-dashboard.scss';
+import { CustomPageHeader } from '../components/custom-page-header/custom-page-header.component';
+import { ConfigObject } from '../config-schema';
+import { useTranslation } from 'react-i18next';
+import LocationsTable from './tables/locations-table.component';
+
+const LocationManagementDashboard: React.FC = () => {
+  const { t } = useTranslation();
+  const { locationIcon } = useConfig<ConfigObject>();
+
+  return (
+    <div className={styles.dashboardContainer}>
+      <CustomPageHeader subTitle={t('manageLocations', 'Manage locations and tags')} iconSrc={locationIcon.src} />
+      <LocationsTable />
+    </div>
+  );
+};
+
+export default LocationManagementDashboard;

package/src/location-management/location-management-dashboard.scss

@@ -0,0 +1,3 @@
+.dashboardContainer {
+  background: var(--cds-field);
+}