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

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

@@ -0,0 +1,215 @@
+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 { LocationAutosuggest } from '../../auto-suggest/location-autosuggest.component';
+import ResultsTile from '../../common/results-tile.component';
+import { extractErrorMessagesFromResponse } from '../../helpers';
+import { saveOrUpdateLocation } from '../../hooks/useLocation';
+import { useLocationTags } from '../../hooks/useLocationTags';
+import { LocationResponse } from '../../types';
+import styles from './search-location.workspace.scss';
+
+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,
+    getValues,
+    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/components/locations/header/header.component.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, Location } from '@carbon/react/icons';
+import {
+  ConfigurableLink,
+  formatDate,
+  InPatientPictogram,
+  PageHeader,
+  PageHeaderContent,
+  useSession,
+} from '@openmrs/esm-framework';
+import styles from './header.scss';
+import { EuropeAfrica } from '@carbon/pictograms-react';
+
+type HeaderProps = {
+  title: string;
+};
+
+const Header: React.FC<HeaderProps> = ({ title }) => {
+  const { t } = useTranslation();
+  const userSession = useSession();
+  const userLocation = userSession?.sessionLocation?.display;
+
+  return (
+    <PageHeader className={styles.header}>
+      <PageHeaderContent
+        illustration={
+          <ConfigurableLink to={`${window.getOpenmrsSpaBase()}bed-management`}>
+            <EuropeAfrica className={styles.illustrationPictogram} />
+          </ConfigurableLink>
+        }
+        title={title}
+        className={styles.leftJustifiedItems}
+      />
+      <div className={styles.rightJustifiedItems}>
+        <div className={styles.dateAndLocation}>
+          <Location size={16} />
+          <span className={styles.value}>{userLocation}</span>
+          <span className={styles.middot}>&middot;</span>
+          <Calendar size={16} />
+          <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
+        </div>
+      </div>
+    </PageHeader>
+  );
+};
+
+export default Header;

package/src/components/locations/header/header.scss

@@ -0,0 +1,58 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.header {
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-70;
+  height: layout.$spacing-12;
+  background-color: colors.$white-0;
+  display: flex;
+  padding-left: layout.$spacing-03;
+  justify-content: space-between;
+  border-bottom: 1px solid colors.$gray-20;
+}
+
+.leftJustifiedItems {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+
+  & > div:nth-child(2) {
+    margin: layout.$spacing-05;
+
+    & > p:last-child {
+      white-space: nowrap;
+      @include type.type-style('heading-04');
+    }
+  }
+}
+
+.illustrationPictogram {
+  width: 4.5rem;
+  height: 4.5rem;
+  fill: var(--brand-03);
+}
+
+.rightJustifiedItems {
+  @include type.type-style('body-compact-02');
+  color: colors.$gray-70;
+  margin: layout.$spacing-03;
+  padding-top: layout.$spacing-04;
+}
+
+.dateAndLocation {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-right: layout.$spacing-05;
+}
+
+.value {
+  margin-left: layout.$spacing-02;
+}
+
+.middot {
+  margin: 0 layout.$spacing-03;
+}

package/src/components/locations/helpers/index.ts

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ */
+export function extractErrorMessagesFromResponse(errorObject) {
+  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/components/locations/home/home-locations.component.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Header from '../header/header.component';
+import LocationsTable from '../tables/locations-table.component';
+import styles from './home-locations.scss';
+const HomeComponent: React.FC = () => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      <Header title={t('locations', 'Locations')} />
+      <div className={styles.tableContainer}>
+        <LocationsTable />
+      </div>
+    </div>
+  );
+};
+
+export default HomeComponent;

package/src/components/locations/home/home-locations.scss

@@ -0,0 +1,8 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+@use '@carbon/type';
+
+.tableContainer {
+  margin-top: layout.$spacing-05;
+  margin-right: layout.$spacing-04;
+}

package/src/components/locations/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/components/locations/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/components/locations/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/components/locations/tables/locations-table.component.tsx

@@ -0,0 +1,243 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  InlineLoading,
+  Pagination,
+  Search,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+  Tag,
+} from '@carbon/react';
+import { Add } from '@carbon/react/icons';
+import { WorkspaceContainer, isDesktop as desktopLayout, launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
+import styles from './locations-table.scss';
+import { CardHeader } from '@openmrs/esm-patient-common-lib';
+import { useFacilitiesTagged } from './locations-table.resource';
+import { useLocationTags } from '../hooks/useLocationTags';
+
+const LocationsTable: React.FC = () => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isTablet = layout === 'tablet';
+  const isDesktop = desktopLayout(layout);
+  const [pageSize, setPageSize] = useState(10);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const { locationTagList, isLoading: tagsLoading, error: tagsError } = useLocationTags();
+  const { facilityList, isLoading: taggedLoading } = useFacilitiesTagged({ results: locationTagList });
+
+  const handleAddLocationWorkspace = () => {
+    launchWorkspace('add-location-workspace', {
+      workspaceTitle: t('addLocation', 'Add Location'),
+    });
+  };
+
+  const handleSearchLocationWorkspace = () => {
+    launchWorkspace('search-location-workspace', {
+      workspaceTitle: t('tagLocation', 'Tag Location'),
+    });
+  };
+
+  const tableHeaders = [
+    {
+      key: 'name',
+      header: t('locationName', 'Location Name'),
+    },
+    {
+      key: 'description',
+      header: t('description', 'Description'),
+    },
+    {
+      key: 'tags',
+      header: t('tags', 'Tags'),
+    },
+  ];
+
+  const getLocationTags = (resource) => {
+    if (!resource?.meta?.tag) {
+      return [];
+    }
+
+    return resource.meta.tag.filter((tag) => tag.system && tag.system.includes('location-tag')).map((tag) => tag.code);
+  };
+
+  const rows = useMemo(() => {
+    const uniqueFacilities = new Map();
+
+    facilityList.forEach((facility) => {
+      const resource = facility.resource;
+      const uuid = resource?.id;
+
+      if (uuid && !uniqueFacilities.has(uuid)) {
+        uniqueFacilities.set(uuid, facility);
+      }
+    });
+
+    return Array.from(uniqueFacilities.values()).map((facility) => {
+      const resource = facility.resource;
+      const tags = getLocationTags(resource);
+
+      return {
+        id: resource?.id,
+        name: resource?.name || resource?.partOf?.display || '--',
+        description: resource?.description || '--',
+        tags: tags.length > 0 ? tags.join(', ') : '--',
+      };
+    });
+  }, [facilityList]);
+
+  const filteredRows = useMemo(() => {
+    if (!searchTerm) {
+      return rows;
+    }
+
+    return rows.filter(
+      (row) =>
+        row.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        row.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        row.tags.toLowerCase().includes(searchTerm.toLowerCase()),
+    );
+  }, [rows, searchTerm]);
+
+  const paginatedRows = useMemo(() => {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    return filteredRows.slice(startIndex, endIndex);
+  }, [filteredRows, currentPage, pageSize]);
+
+  if (tagsLoading || (taggedLoading && !facilityList.length)) {
+    return (
+      <>
+        <div className={styles.widgetCard}>
+          <DataTableSkeleton role="progressbar" compact={isDesktop} zebra />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className={styles.widgetCard}>
+        <CardHeader title={t('locations', 'Locations')}>
+          <span className={styles.backgroundDataFetchingIndicator}>
+            <span>{tagsLoading ? <InlineLoading /> : null}</span>
+          </span>
+          <div className={styles.headerActions}>
+            <>
+              <div className={styles.filterContainer}>
+                <Search
+                  onChange={(e) => {
+                    setSearchTerm(e.target.value);
+                    setCurrentPage(1);
+                  }}
+                  placeholder={t('search', 'Search location')}
+                  value={searchTerm}
+                  labelText={t('search', 'Search location')}
+                />
+              </div>
+              <Button
+                kind="ghost"
+                renderIcon={(props) => <Add size={16} {...props} />}
+                onClick={handleAddLocationWorkspace}>
+                {t('addLocation', 'Add Location')}
+              </Button>
+              <Button
+                kind="ghost"
+                renderIcon={(props) => <Add size={16} {...props} />}
+                onClick={handleSearchLocationWorkspace}>
+                {t('tagLocation', 'Tag Location')}
+              </Button>
+            </>
+          </div>
+        </CardHeader>
+
+        <DataTable rows={paginatedRows} headers={tableHeaders} isSortable size={isTablet ? 'lg' : 'sm'} useZebraStyles>
+          {({ rows, headers, getTableProps }) => {
+            return (
+              <TableContainer>
+                <Table {...getTableProps()}>
+                  <TableHead>
+                    <TableRow>
+                      {headers.map((header) => (
+                        <TableHeader key={header.key}>{header.header}</TableHeader>
+                      ))}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {rows.map((row) => (
+                      <TableRow key={row.id}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>
+                            {cell.id.includes('tags') && cell.value !== 'No tags' ? (
+                              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
+                                {cell.value.split(', ').map((tag, index) => (
+                                  <Tag key={index} type="blue" size="sm">
+                                    {tag}
+                                  </Tag>
+                                ))}
+                              </div>
+                            ) : (
+                              cell.value
+                            )}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+                {rows.length === 0 ? (
+                  <div className={styles.tileContainer}>
+                    <Tile className={styles.tile}>
+                      <div className={styles.tileContent}>
+                        <p className={styles.content}>
+                          {searchTerm
+                            ? t('noSearchResults', `No results found for "${searchTerm}"`)
+                            : t('noData', 'No data to display')}
+                        </p>
+                        <p className={styles.helper}>
+                          {searchTerm
+                            ? t('tryDifferentSearch', 'Try a different search term')
+                            : t('checkFilters', 'Check the filters above')}
+                        </p>
+                      </div>
+                    </Tile>
+                  </div>
+                ) : null}
+                <Pagination
+                  backwardText="Previous page"
+                  forwardText="Next page"
+                  page={currentPage}
+                  pageSize={pageSize}
+                  pageSizes={[10, 20, 30, 40, 50]}
+                  totalItems={filteredRows.length}
+                  onChange={({ pageSize: newPageSize, page }) => {
+                    if (newPageSize !== pageSize) {
+                      setPageSize(newPageSize);
+                      setCurrentPage(1);
+                    }
+                    if (page !== currentPage) {
+                      setCurrentPage(page);
+                    }
+                  }}
+                />
+              </TableContainer>
+            );
+          }}
+        </DataTable>
+      </div>
+      <WorkspaceContainer contextKey="locations" />
+    </>
+  );
+};
+
+export default LocationsTable;

package/src/components/locations/tables/locations-table.resource.ts

@@ -0,0 +1,26 @@
+import { useFhirFetchAll } from '@openmrs/esm-framework';
+import { type FHIRLocation, type LocationTagsResponse } from '../types';
+
+/**
+ * Custom hook that fetches all facilities with specified location tags.
+ * Uses the framework's useFhirFetchAll hook which handles pagination automatically.
+ *
+ * @param locationTags The location tags response containing tags to filter by
+ * @returns Object containing loading state, error, and the list of facilities
+ */
+export const useFacilitiesTagged = (locationTags: LocationTagsResponse) => {
+  const tagNames = locationTags?.results
+    ?.map((tag) => encodeURIComponent(tag.name || tag.display))
+    .filter(Boolean)
+    .join(',');
+
+  const url = tagNames ? `ws/fhir2/R4/Location?_summary=data&_tag=${tagNames}` : null;
+
+  const { data, isLoading, error } = useFhirFetchAll<FHIRLocation>(url);
+
+  return {
+    isLoading,
+    error,
+    facilityList: data?.map((resource) => ({ resource })) || [],
+  };
+};