@olaboot/esm-patient-registration-app 9.2.0

package/src/patient-registration/field/person-attributes/coded-person-attribute-field.component.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Field } from 'formik';
+import { Layer, Select, SelectItem } from '@carbon/react';
+import { reportError } from '@openmrs/esm-framework';
+import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
+import { useConceptAnswers } from '../field.resource';
+import styles from './../field.scss';
+
+export interface CodedPersonAttributeFieldProps {
+  id: string;
+  personAttributeType: PersonAttributeTypeResponse;
+  answerConceptSetUuid: string;
+  label?: string;
+  customConceptAnswers: Array<{ uuid: string; label?: string }>;
+  required: boolean;
+}
+
+export function CodedPersonAttributeField({
+  id,
+  personAttributeType,
+  answerConceptSetUuid,
+  label,
+  customConceptAnswers,
+  required,
+}: CodedPersonAttributeFieldProps) {
+  const { data: conceptAnswers, isLoading: isLoadingConceptAnswers } = useConceptAnswers(
+    customConceptAnswers.length ? '' : answerConceptSetUuid,
+  );
+
+  const { t } = useTranslation();
+  const fieldName = `attributes.${personAttributeType.uuid}`;
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    if (!answerConceptSetUuid && !customConceptAnswers.length) {
+      reportError(
+        t(
+          'codedPersonAttributeNoAnswerSet',
+          `The person attribute field '{{codedPersonAttributeFieldId}}' is of type 'coded' but has been defined without an answer concept set UUID. The 'answerConceptSetUuid' key is required.`,
+          { codedPersonAttributeFieldId: id },
+        ),
+      );
+      setError(true);
+    }
+  }, [answerConceptSetUuid, customConceptAnswers, id, t]);
+
+  useEffect(() => {
+    if (!isLoadingConceptAnswers && !customConceptAnswers.length) {
+      if (!conceptAnswers) {
+        reportError(
+          t(
+            'codedPersonAttributeAnswerSetInvalid',
+            `The coded person attribute field '{{codedPersonAttributeFieldId}}' has been defined with an invalid answer concept set UUID '{{answerConceptSetUuid}}'.`,
+            { codedPersonAttributeFieldId: id, answerConceptSetUuid },
+          ),
+        );
+        setError(true);
+      }
+      if (conceptAnswers?.length == 0) {
+        reportError(
+          t(
+            'codedPersonAttributeAnswerSetEmpty',
+            `The coded person attribute field '{{codedPersonAttributeFieldId}}' has been defined with an answer concept set UUID '{{answerConceptSetUuid}}' that does not have any concept answers.`,
+            {
+              codedPersonAttributeFieldId: id,
+              answerConceptSetUuid,
+            },
+          ),
+        );
+        setError(true);
+      }
+    }
+  }, [isLoadingConceptAnswers, conceptAnswers, customConceptAnswers, t, id, answerConceptSetUuid]);
+
+  const answers = useMemo(() => {
+    if (customConceptAnswers.length) {
+      return customConceptAnswers;
+    }
+    return isLoadingConceptAnswers || !conceptAnswers
+      ? []
+      : conceptAnswers
+          .map((answer) => ({ ...answer, label: answer.display }))
+          .sort((a, b) => a.label.localeCompare(b.label));
+  }, [customConceptAnswers, conceptAnswers, isLoadingConceptAnswers]);
+
+  if (error) {
+    return null;
+  }
+
+  return (
+    <div className={classNames(styles.customField, styles.halfWidthInDesktopView)}>
+      {!isLoadingConceptAnswers ? (
+        <Layer>
+          <Field name={fieldName}>
+            {({ field, form: { touched, errors }, meta }) => {
+              return (
+                <>
+                  <Select
+                    id={id}
+                    name={`person-attribute-${personAttributeType.uuid}`}
+                    labelText={label ?? personAttributeType?.display}
+                    invalid={errors[fieldName] && touched[fieldName]}
+                    required={required}
+                    {...field}>
+                    <SelectItem value={''} text={t('selectAnOption', 'Select an option')} />
+                    {answers.map((answer) => (
+                      <SelectItem key={answer.uuid} value={answer.uuid} text={answer.label} />
+                    ))}
+                  </Select>
+                </>
+              );
+            }}
+          </Field>
+        </Layer>
+      ) : null}
+    </div>
+  );
+}

package/src/patient-registration/field/person-attributes/coded-person-attribute-field.test.tsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { Form, Formik } from 'formik';
+import { render, screen } from '@testing-library/react';
+import { useConceptAnswers } from '../field.resource';
+import { CodedPersonAttributeField } from './coded-person-attribute-field.component';
+
+const mockUseConceptAnswers = jest.mocked(useConceptAnswers);
+
+jest.mock('../field.resource', () => ({
+  ...jest.requireActual('../field.resource'),
+  useConceptAnswers: jest.fn(),
+}));
+
+describe('CodedPersonAttributeField', () => {
+  const conceptAnswers = [
+    { uuid: '1', display: 'Option 1' },
+    { uuid: '2', display: 'Option 2' },
+  ];
+
+  const personAttributeType = {
+    format: 'org.openmrs.Concept',
+    display: 'Referred by',
+    uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+    name: '',
+    description: '',
+  };
+
+  const answerConceptSetUuid = '6682d17f-0777-45e4-a39b-93f77eb3531c';
+  let consoleSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    mockUseConceptAnswers.mockReturnValue({
+      data: conceptAnswers,
+      isLoading: false,
+      error: null,
+    });
+
+    consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleSpy.mockRestore();
+  });
+
+  it('renders an error if there is no concept answer set provided', () => {
+    expect(() => {
+      render(
+        <Formik initialValues={{}} onSubmit={() => {}}>
+          <Form>
+            <CodedPersonAttributeField
+              answerConceptSetUuid={null}
+              customConceptAnswers={[]}
+              id="attributeId"
+              label={personAttributeType.display}
+              personAttributeType={personAttributeType}
+              required={false}
+            />
+          </Form>
+        </Formik>,
+      );
+    }).toThrow(expect.stringMatching(/has been defined without an answer concept set UUID/i));
+  });
+
+  it('renders an error if the concept answer set does not have any concept answers', () => {
+    mockUseConceptAnswers.mockReturnValue({
+      data: [],
+      isLoading: false,
+      error: null,
+    });
+
+    expect(() => {
+      render(
+        <Formik initialValues={{}} onSubmit={() => {}}>
+          <Form>
+            <CodedPersonAttributeField
+              id="attributeId"
+              personAttributeType={personAttributeType}
+              answerConceptSetUuid={answerConceptSetUuid}
+              label={personAttributeType.display}
+              customConceptAnswers={[]}
+              required={false}
+            />
+          </Form>
+        </Formik>,
+      );
+    }).toThrow(expect.stringMatching(/does not have any concept answers/i));
+  });
+
+  it('renders the conceptAnswers as select options', () => {
+    render(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <Form>
+          <CodedPersonAttributeField
+            id="attributeId"
+            personAttributeType={personAttributeType}
+            answerConceptSetUuid={answerConceptSetUuid}
+            label={personAttributeType.display}
+            customConceptAnswers={[]}
+            required={false}
+          />
+        </Form>
+      </Formik>,
+    );
+
+    expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
+    expect(screen.getByText(/Option 1/i)).toBeInTheDocument();
+    expect(screen.getByText(/Option 2/i)).toBeInTheDocument();
+  });
+
+  it('renders customConceptAnswers as select options when they are provided', () => {
+    render(
+      <Formik initialValues={{}} onSubmit={() => {}}>
+        <Form>
+          <CodedPersonAttributeField
+            id="attributeId"
+            personAttributeType={personAttributeType}
+            answerConceptSetUuid={answerConceptSetUuid}
+            label={personAttributeType.display}
+            customConceptAnswers={[
+              {
+                uuid: 'A',
+                label: 'Special Option A',
+              },
+              {
+                uuid: 'B',
+                label: 'Special Option B',
+              },
+            ]}
+            required={false}
+          />
+        </Form>
+      </Formik>,
+    );
+
+    expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
+    expect(screen.getByText(/Special Option A/i)).toBeInTheDocument();
+    expect(screen.getByText(/Special Option B/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Option 1/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/Option 2/i)).not.toBeInTheDocument();
+  });
+});

package/src/patient-registration/field/person-attributes/location-person-attribute-field.component.tsx

@@ -0,0 +1,105 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
+import { Field, useField } from 'formik';
+import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
+import styles from './../field.scss';
+import { useLocations } from './location-person-attribute-field.resource';
+import { ComboBox, InlineLoading, Layer } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+export interface LocationPersonAttributeFieldProps {
+  id: string;
+  personAttributeType: PersonAttributeTypeResponse;
+  label?: string;
+  locationTag: string;
+  required?: boolean;
+}
+
+export function LocationPersonAttributeField({
+  personAttributeType,
+  id,
+  label,
+  locationTag,
+  required,
+}: LocationPersonAttributeFieldProps) {
+  const { t } = useTranslation();
+  const fieldName = `attributes.${personAttributeType.uuid}`;
+  const [field, meta, { setValue }] = useField(`attributes.${personAttributeType.uuid}`);
+  const [searchQuery, setSearchQuery] = useState('');
+  const { locations, isLoading, loadingNewData } = useLocations(locationTag || null, searchQuery);
+  const prevLocationOptions = useRef([]);
+
+  const locationOptions = useMemo(() => {
+    if (!(isLoading && loadingNewData)) {
+      const newOptions = locations.map(({ resource: { id, name } }) => ({ value: id, label: name }));
+      prevLocationOptions.current = newOptions;
+      return newOptions;
+    }
+    return prevLocationOptions.current;
+  }, [locations, isLoading, loadingNewData]);
+
+  const selectedItem = useMemo(() => {
+    if (typeof meta.value === 'string') {
+      return locationOptions.find(({ value }) => value === meta.value) || null;
+    }
+    if (typeof meta.value === 'object' && meta.value) {
+      return locationOptions.find(({ value }) => value === meta.value.uuid) || null;
+    }
+    return null;
+  }, [locationOptions, meta.value]);
+
+  // Callback for when updating the combobox input
+  const handleInputChange = useCallback(
+    (value: string | null) => {
+      if (value) {
+        // If the value exists in the locationOptions (i.e. a label matches the input), exit the function
+        if (locationOptions.find(({ label }) => label === value)) return;
+        // If the input is a new value, set the search query
+        setSearchQuery(value);
+        // Clear the current selected value since the input doesn't match any existing options
+        setValue(null);
+      }
+    },
+    [locationOptions, setValue],
+  );
+  const handleSelect = useCallback(
+    ({ selectedItem }) => {
+      if (selectedItem) {
+        setValue(selectedItem.value);
+      }
+    },
+    [setValue],
+  );
+
+  return (
+    <div
+      className={classNames(styles.customField, styles.halfWidthInDesktopView, styles.locationAttributeFieldContainer)}>
+      <Layer>
+        <Field name={fieldName}>
+          {({ field, form: { touched, errors } }) => {
+            return (
+              <ComboBox
+                id={id}
+                name={`person-attribute-${personAttributeType.uuid}`}
+                titleText={label}
+                items={locationOptions}
+                placeholder={t('searchLocationPersonAttribute', 'Search location')}
+                onInputChange={handleInputChange}
+                required={required}
+                onChange={handleSelect}
+                selectedItem={selectedItem}
+                invalid={errors[fieldName] && touched[fieldName]}
+                typeahead
+              />
+            );
+          }}
+        </Field>
+      </Layer>
+      {loadingNewData && (
+        <div className={styles.loadingContainer}>
+          <InlineLoading />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/patient-registration/field/person-attributes/location-person-attribute-field.resource.tsx

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import { type FetchResponse, fhirBaseUrl, openmrsFetch, useDebounce } from '@openmrs/esm-framework';
+import { type LocationEntry, type LocationResponse } from '@openmrs/esm-service-queues-app/src/types';
+import useSWR from 'swr';
+
+interface UseLocationsResult {
+  locations: Array<LocationEntry>;
+  isLoading: boolean;
+  loadingNewData: boolean;
+}
+
+export function useLocations(locationTag: string | null, searchQuery: string = ''): UseLocationsResult {
+  const debouncedSearchQuery = useDebounce(searchQuery);
+
+  const constructUrl = useMemo(() => {
+    let url = `${fhirBaseUrl}/Location?`;
+    let urlSearchParameters = new URLSearchParams();
+    urlSearchParameters.append('_summary', 'data');
+
+    if (!debouncedSearchQuery) {
+      urlSearchParameters.append('_count', '10');
+    }
+
+    if (locationTag) {
+      urlSearchParameters.append('_tag', locationTag);
+    }
+
+    if (typeof debouncedSearchQuery === 'string' && debouncedSearchQuery != '') {
+      urlSearchParameters.append('name:contains', debouncedSearchQuery);
+    }
+
+    return url + urlSearchParameters.toString();
+  }, [locationTag, debouncedSearchQuery]);
+
+  const { data, error, isLoading, isValidating } = useSWR<FetchResponse<LocationResponse>, Error>(
+    constructUrl,
+    openmrsFetch,
+  );
+
+  return useMemo(
+    () => ({
+      locations: data?.data?.entry || [],
+      isLoading,
+      loadingNewData: isValidating,
+    }),
+    [data, isLoading, isValidating],
+  );
+}

package/src/patient-registration/field/person-attributes/person-attribute-field.component.tsx

@@ -0,0 +1,100 @@
+import React, { useMemo } from 'react';
+import { InlineNotification, TextInputSkeleton } from '@carbon/react';
+import { type FieldDefinition } from '../../../config-schema';
+import { CodedPersonAttributeField } from './coded-person-attribute-field.component';
+import { usePersonAttributeType } from './person-attributes.resource';
+import { TextPersonAttributeField } from './text-person-attribute-field.component';
+import { useTranslation } from 'react-i18next';
+import styles from '../field.scss';
+import { LocationPersonAttributeField } from './location-person-attribute-field.component';
+
+export interface PersonAttributeFieldProps {
+  fieldDefinition: FieldDefinition;
+}
+
+export function PersonAttributeField({ fieldDefinition }: PersonAttributeFieldProps) {
+  const { data: personAttributeType, isLoading, error } = usePersonAttributeType(fieldDefinition.uuid);
+  const { t } = useTranslation();
+
+  const personAttributeField = useMemo(() => {
+    if (!personAttributeType) {
+      return null;
+    }
+    switch (personAttributeType.format) {
+      case 'java.lang.String':
+        return (
+          <TextPersonAttributeField
+            personAttributeType={personAttributeType}
+            validationRegex={fieldDefinition.validation?.matches ?? ''}
+            label={fieldDefinition.label}
+            required={fieldDefinition.validation?.required ?? false}
+            id={fieldDefinition?.id}
+          />
+        );
+      case 'org.openmrs.Concept':
+        return (
+          <CodedPersonAttributeField
+            personAttributeType={personAttributeType}
+            answerConceptSetUuid={fieldDefinition.answerConceptSetUuid}
+            label={fieldDefinition.label}
+            id={fieldDefinition?.id}
+            customConceptAnswers={fieldDefinition.customConceptAnswers ?? []}
+            required={fieldDefinition.validation?.required ?? false}
+          />
+        );
+      case 'org.openmrs.Location':
+        return (
+          <LocationPersonAttributeField
+            personAttributeType={personAttributeType}
+            locationTag={fieldDefinition.locationTag}
+            label={fieldDefinition.label}
+            id={fieldDefinition?.id}
+            required={fieldDefinition.validation?.required ?? false}
+          />
+        );
+      default:
+        return (
+          <InlineNotification kind="error" title="Error">
+            {t(
+              'unknownPatientAttributeType',
+              'Patient attribute type has unknown format {{personAttributeTypeFormat}}',
+              {
+                personAttributeTypeFormat: personAttributeType.format,
+              },
+            )}
+          </InlineNotification>
+        );
+    }
+  }, [personAttributeType, fieldDefinition, t]);
+
+  if (isLoading) {
+    return (
+      <div>
+        {fieldDefinition.showHeading && <h4 className={styles.productiveHeading02Light}>{fieldDefinition?.label}</h4>}
+        <TextInputSkeleton />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div>
+        {fieldDefinition.showHeading && <h4 className={styles.productiveHeading02Light}>{fieldDefinition?.label}</h4>}
+        <InlineNotification kind="error" title={t('error', 'Error')}>
+          {t('unableToFetch', 'Unable to fetch person attribute type - {{personattributetype}}', {
+            personattributetype: fieldDefinition?.label ?? fieldDefinition?.id,
+          })}
+        </InlineNotification>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {fieldDefinition.showHeading && (
+        <h4 className={styles.productiveHeading02Light}>{fieldDefinition?.label ?? personAttributeType?.display}</h4>
+      )}
+      {personAttributeField}
+    </div>
+  );
+}