@kenyaemr/esm-admin-app 5.4.2-pre.2269 → 5.4.2-pre.2272

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

@@ -0,0 +1,202 @@
+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 { editLocation, saveLocation } from '../../hooks/useLocation';
+import { LocationResponse, type AdmissionLocationResponse } from '../../types';
+import { extractErrorMessagesFromResponse } from '../../helpers';
+import { useLocationTags } from '../../hooks/useLocationTags';
+import { mutate } from 'swr';
+
+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 {
+      if (location?.uuid) {
+        await editLocation(location.uuid, locationPayload);
+      } else {
+        await saveLocation(locationPayload);
+      }
+
+      showSnackbar({
+        title: t('success', 'Success'),
+        kind: 'success',
+        subtitle: location?.uuid
+          ? 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;
+}

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 { editLocation } 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 editLocation(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/index.json

@@ -0,0 +1,35 @@
+{
+    "results": [
+        {
+            "uuid": "45a10dd9-edaa-4e50-a2d7-343fef0415eb",
+            "display": "10 Engineer VCT",
+            "name": "10 Engineer VCT",
+            "description": "Dispensary",
+            "stateProvince": "Laikipia",
+            "country": "Kenya",
+            "countyDistrict": "Laikipia",
+            "address5": "Nanyuki",
+            "address6": "Laikipia East",
+            "tags": [],
+
+            "attributes": [
+                {
+                    "display": "Master Facility Code: 14180",
+                    "uuid": "21e6dc68-46e7-4f2e-916c-4281c62dad6b",
+                    "attributeType": {
+                        "uuid": "8a845a89-6aa5-4111-81d3-0af31c45c002",
+                        "display": "Master Facility Code",
+                        "links": [
+                            {
+                                "rel": "self",
+                                "uri": "https://qa.kenyahmis.org/openmrs/ws/rest/v1/locationattributetype/8a845a89-6aa5-4111-81d3-0af31c45c002",
+                                "resourceAlias": "locationattributetype"
+                            }
+                        ]
+                    },
+                    "value": "14180"
+                }
+            ]
+        }
+    ]
+}