@openmrs/esm-form-engine-lib 2.1.0-pre.1362

package/src/components/inputs/ui-select-extended/ui-select-extended.component.tsx

@@ -0,0 +1,187 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import debounce from 'lodash-es/debounce';
+import { ComboBox, DropdownSkeleton, Layer } from '@carbon/react';
+import { isTrue } from '../../../utils/boolean-utils';
+import { useTranslation } from 'react-i18next';
+import { getRegisteredDataSource } from '../../../registry/registry';
+import { getControlTemplate } from '../../../registry/inbuilt-components/control-templates';
+import { type FormFieldInputProps } from '../../../types';
+import { isEmpty } from '../../../validators/form-validator';
+import { shouldUseInlineLayout } from '../../../utils/form-helper';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './ui-select-extended.scss';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import FieldLabel from '../../field-label/field-label.component';
+import useDataSourceDependentValue from '../../../hooks/useDatasourceDependentValue';
+import { useWatch } from 'react-hook-form';
+
+const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnings, setFieldValue }) => {
+  const { t } = useTranslation();
+  const [items, setItems] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const isProcessingSelection = useRef(false);
+  const [dataSource, setDataSource] = useState(null);
+  const [config, setConfig] = useState({});
+  const [savedSearchableItem, setSavedSearchableItem] = useState({});
+  const dataSourceDependentValue = useDataSourceDependentValue(field);
+  const {
+    layoutType,
+    sessionMode,
+    workspaceLayout,
+    methods: { control },
+  } = useFormProviderContext();
+
+  const value = useWatch({ control, name: field.id, exact: true });
+
+  const isInline = useMemo(() => {
+    if (['view', 'embedded-view'].includes(sessionMode) || isTrue(field.readonly)) {
+      return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
+    }
+    return false;
+  }, [sessionMode, field.readonly, field.inlineRendering, layoutType, workspaceLayout]);
+
+  useEffect(() => {
+    const dataSource = field.questionOptions?.datasource?.name;
+    setConfig(
+      dataSource
+        ? field.questionOptions.datasource?.config
+        : getControlTemplate(field.questionOptions.rendering)?.datasource?.config,
+    );
+    getRegisteredDataSource(dataSource ? dataSource : field.questionOptions.rendering).then((ds) => setDataSource(ds));
+  }, [field.questionOptions?.datasource]);
+
+  const selectedItem = useMemo(() => items.find((item) => item.uuid == value), [items, value]);
+
+  const debouncedSearch = debounce((searchTerm, dataSource) => {
+    setItems([]);
+    setIsLoading(true);
+    dataSource
+      .fetchData(searchTerm, config)
+      .then((dataItems) => {
+        setItems(dataItems.map(dataSource.toUuidAndDisplay));
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsLoading(false);
+        setItems([]);
+      });
+  }, 300);
+
+  const processSearchableValues = (value) => {
+    dataSource
+      .fetchData(null, config, value)
+      .then((dataItem) => {
+        setSavedSearchableItem(dataItem);
+        setIsLoading(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsLoading(false);
+        setItems([]);
+      });
+  };
+
+  useEffect(() => {
+    // If not searchable, preload the items
+    if (dataSource && !isTrue(field.questionOptions.isSearchable)) {
+      setItems([]);
+      setIsLoading(true);
+      dataSource
+        .fetchData(null, { ...config, referencedValue: dataSourceDependentValue })
+        .then((dataItems) => {
+          setItems(dataItems.map(dataSource.toUuidAndDisplay));
+          setIsLoading(false);
+        })
+        .catch((err) => {
+          console.error(err);
+          setIsLoading(false);
+          setItems([]);
+        });
+    }
+  }, [dataSource, config, dataSourceDependentValue]);
+
+  useEffect(() => {
+    if (dataSource && isTrue(field.questionOptions.isSearchable) && !isEmpty(searchTerm)) {
+      debouncedSearch(searchTerm, dataSource);
+    }
+  }, [dataSource, searchTerm, config]);
+
+  useEffect(() => {
+    if (
+      dataSource &&
+      isTrue(field.questionOptions.isSearchable) &&
+      isEmpty(searchTerm) &&
+      value &&
+      !Object.keys(savedSearchableItem).length
+    ) {
+      setIsLoading(true);
+      processSearchableValues(value);
+    }
+  }, [value]);
+
+  if (isLoading) {
+    return <DropdownSkeleton />;
+  }
+
+  return sessionMode == 'view' || sessionMode == 'embedded-view' || isTrue(field.readonly) ? (
+    <FieldValueView
+      label={t(field.label)}
+      value={value ? items.find((item) => item.uuid == value)?.display : value}
+      conceptName={field.meta?.concept?.display}
+      isInline={isInline}
+    />
+  ) : (
+    !field.isHidden && (
+      <div className={styles.boldedLabel}>
+        <Layer>
+          <ComboBox
+            id={field.id}
+            titleText={<FieldLabel field={field} />}
+            items={items}
+            itemToString={(item) => item?.display}
+            selectedItem={selectedItem}
+            shouldFilterItem={({ item, inputValue }) => {
+              if (!inputValue) {
+                // Carbon's initial call at component mount
+                return true;
+              }
+              return item.display?.toLowerCase().includes(inputValue.toLowerCase());
+            }}
+            onChange={({ selectedItem }) => {
+              isProcessingSelection.current = true;
+              setFieldValue(selectedItem?.uuid);
+            }}
+            disabled={field.isDisabled}
+            readOnly={field.readonly}
+            invalid={errors.length > 0}
+            invalidText={errors.length && errors[0].message}
+            onInputChange={(value) => {
+              if (isProcessingSelection.current) {
+                // Notes:
+                // When the user selects a value, both the onChange and onInputChange functions are invoked sequentially.
+                // Issue: onInputChange modifies the search term, unnecessarily triggering a search.
+                isProcessingSelection.current = false;
+                return;
+              }
+              if (field.questionOptions['isSearchable']) {
+                setSearchTerm(value);
+              }
+            }}
+            onBlur={(event) => {
+              // Notes:
+              // There is an issue with the onBlur event where the value is not persistently set to null when the user clears the input field.
+              // This is a workaround to ensure that the value is set to null when the user clears the input field.
+              if (!event.target.value) {
+                setFieldValue(null);
+              }
+            }}
+          />
+        </Layer>
+      </div>
+    )
+  );
+};
+
+export default UiSelectExtended;

package/src/components/inputs/ui-select-extended/ui-select-extended.scss

@@ -0,0 +1,15 @@
+@use '@carbon/colors';
+
+.boldedLabel {
+  flex: 95%;
+
+  label {
+    font-weight: 600;
+    color: colors.$black-100;
+  }
+}
+
+.errorLabel label {
+  color: colors.$red-60;
+  font-weight: 600;
+}

package/src/components/inputs/ui-select-extended/ui-select-extended.test.tsx

@@ -0,0 +1,211 @@
+import React from 'react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import UiSelectExtended from './ui-select-extended.component';
+import { type EncounterContext, FormContext } from '../../../form-context';
+import { type FormField } from '../../../types';
+
+const questions: FormField[] = [
+  {
+    label: 'Transfer Location',
+    type: 'obs',
+    questionOptions: {
+      rendering: 'ui-select-extended',
+      concept: '160540AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      datasource: {
+        name: 'location_datasource',
+        config: {
+          tag: 'test-tag',
+        },
+      },
+    },
+    meta: {},
+    id: 'patient_transfer_location',
+  },
+  {
+    label: 'Select criteria for new WHO stage:',
+    type: 'obs',
+    questionOptions: {
+      concept: '250e87b6-beb7-44a1-93a1-d3dd74d7e372',
+      rendering: 'select-concept-answers',
+      datasource: {
+        name: 'select_concept_answers_datasource',
+        config: {
+          concept: '250e87b6-beb7-44a1-93a1-d3dd74d7e372',
+        },
+      },
+    },
+    validators: [],
+    id: '__sq5ELJr7p',
+  },
+];
+
+const encounterContext: EncounterContext = {
+  patient: {
+    id: '833db896-c1f0-11eb-8529-0242ac130003',
+  },
+  location: {
+    uuid: '41e6e516-c1f0-11eb-8529-0242ac130003',
+  },
+  encounter: {
+    uuid: '873455da-3ec4-453c-b565-7c1fe35426be',
+    obs: [],
+  },
+  sessionMode: 'enter',
+  encounterDate: new Date(2023, 8, 29),
+  setEncounterDate: (value) => {},
+  encounterProvider: '2c95f6f5-788e-4e73-9079-5626911231fa',
+  setEncounterProvider: jest.fn,
+  setEncounterLocation: jest.fn,
+  encounterRole: '8cb3a399-d18b-4b62-aefb-5a0f948a3809',
+  setEncounterRole: jest.fn,
+};
+
+const renderForm = (initialValues) => {
+  render(<></>);
+};
+
+// Mock the data source fetch behavior
+jest.mock('../../../registry/registry', () => ({
+  getRegisteredDataSource: jest.fn().mockResolvedValue({
+    fetchData: jest.fn().mockImplementation((...args) => {
+      if (args[1].concept) {
+        return Promise.resolve([
+          {
+            uuid: 'stage-1-uuid',
+            display: 'stage 1',
+          },
+          {
+            uuid: 'stage-2-uuid',
+            display: 'stage 2',
+          },
+        ]);
+      }
+
+      return Promise.resolve([
+        {
+          uuid: 'aaa-1',
+          display: 'Kololo',
+        },
+        {
+          uuid: 'aaa-2',
+          display: 'Naguru',
+        },
+        {
+          uuid: 'aaa-3',
+          display: 'Muyenga',
+        },
+      ]);
+    }),
+    toUuidAndDisplay: (data) => data,
+  }),
+}));
+
+describe.skip('UiSelectExtended Component', () => {
+  it('renders with items from the datasource', async () => {
+    await act(async () => {
+      await renderForm({});
+    });
+
+    // setup
+    const uiSelectExtendedWidget = screen.getByLabelText('Transfer Location');
+
+    // assert initial values
+    expect(questions[0].meta.submission).toBe(undefined);
+
+    //Click on the UiSelectExtendedWidget to open the dropdown
+    fireEvent.click(uiSelectExtendedWidget);
+
+    // Assert that all three items are displayed
+    expect(screen.getByText('Kololo')).toBeInTheDocument();
+    expect(screen.getByText('Naguru')).toBeInTheDocument();
+    expect(screen.getByText('Muyenga')).toBeInTheDocument();
+  });
+
+  it('renders with items from the datasource of select-concept-answers rendering', async () => {
+    await act(async () => {
+      await renderForm({});
+    });
+
+    const uiSelectExtendedWidget = screen.getByLabelText(/Select criteria for new WHO stage:/i);
+    fireEvent.click(uiSelectExtendedWidget);
+
+    // Assert that all items are displayed
+    expect(screen.getByText('stage 1')).toBeInTheDocument();
+    expect(screen.getByText('stage 2')).toBeInTheDocument();
+  });
+
+  it('Selects a value from the list', async () => {
+    await act(async () => {
+      await renderForm({});
+    });
+
+    // setup
+    const uiSelectExtendedWidget = screen.getByLabelText('Transfer Location');
+
+    //Click on the UiSelectExtendedWidget to open the dropdown
+    fireEvent.click(uiSelectExtendedWidget);
+
+    // Find the list item for 'Naguru' and click it to select
+    const naguruOption = screen.getByText('Naguru');
+    fireEvent.click(naguruOption);
+
+    // verify
+    await act(async () => {
+      expect(questions[0].meta.submission.newValue).toEqual({
+        concept: '160540AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        formFieldNamespace: 'rfe-forms',
+        formFieldPath: 'rfe-forms-patient_transfer_location',
+        value: 'aaa-2',
+      });
+    });
+  });
+
+  it('Filters items based on user input', async () => {
+    await act(async () => {
+      await renderForm({});
+    });
+
+    // setup
+    const uiSelectExtendedWidget = screen.getByLabelText('Transfer Location');
+
+    //Click on the UiSelectExtendedWidget to open the dropdown
+    fireEvent.click(uiSelectExtendedWidget);
+
+    // Type 'Nag' in the input field to filter items
+    fireEvent.change(uiSelectExtendedWidget, { target: { value: 'Nag' } });
+
+    // Wait for the filtered items to appear in the dropdown
+    await waitFor(() => {
+      // Verify that 'Naguru' is in the filtered items
+      expect(screen.getByText('Naguru')).toBeInTheDocument();
+
+      // Verify that 'Kololo' and 'Muyenga' are not in the filtered items
+      expect(screen.queryByText('Kololo')).not.toBeInTheDocument();
+      expect(screen.queryByText('Muyenga')).not.toBeInTheDocument();
+    });
+  });
+
+  it('Should set the correct value for the config parameter', async () => {
+    // Mock the data source fetch behavior
+    const expectedConfigValue = {
+      tag: 'test-tag',
+    };
+
+    // Mock the getRegisteredDataSource function
+    jest.mock('../../../registry/registry', () => ({
+      getRegisteredDataSource: jest.fn().mockResolvedValue({
+        fetchData: jest.fn().mockResolvedValue([]),
+        toUuidAndDisplay: (data) => data,
+        config: expectedConfigValue,
+      }),
+    }));
+
+    await act(async () => {
+      await renderForm({});
+    });
+    const config = questions[0].questionOptions.datasource.config;
+
+    // Assert that the config is set with the expected configuration value
+    expect(config).toEqual(expectedConfigValue);
+  });
+});

package/src/components/inputs/unspecified/unspecified.component.tsx

@@ -0,0 +1,74 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Checkbox } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { isEmpty } from '../../../validators/form-validator';
+import { type FormField } from '../../../types';
+import { isTrue } from '../../../utils/boolean-utils';
+
+import styles from './unspecified.scss';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import { isViewMode } from '../../../utils/common-utils';
+
+interface UnspecifiedFieldProps {
+  field: FormField;
+  fieldValue: any;
+  setFieldValue: (value: any) => void;
+  onAfterChange: (value: any) => void;
+}
+
+const UnspecifiedField: React.FC<UnspecifiedFieldProps> = ({ field, fieldValue, setFieldValue, onAfterChange }) => {
+  const { t } = useTranslation();
+  const [isUnspecified, setIsUnspecified] = useState(false);
+  const { sessionMode, updateFormField } = useFormProviderContext();
+
+  useEffect(() => {
+    if (isEmpty(fieldValue) && sessionMode === 'edit') {
+      // we assume that the field was previously unspecified
+      setIsUnspecified(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (field.meta.submission?.newValue) {
+      setIsUnspecified(false);
+      field.meta.submission.unspecified = false;
+      updateFormField({ ...field });
+    }
+  }, [field.meta?.submission]);
+
+  const handleOnChange = useCallback(
+    (value) => {
+      const rendering = field.questionOptions.rendering;
+      if (value.target.checked) {
+        const emptyValue = rendering === 'checkbox' ? [] : '';
+        field.meta.submission = { ...field.meta.submission, unspecified: true };
+        updateFormField({ ...field });
+        setIsUnspecified(true);
+        setFieldValue(emptyValue);
+        onAfterChange(emptyValue);
+      } else {
+        setIsUnspecified(false);
+      }
+    },
+    [field.questionOptions.rendering],
+  );
+
+  return (
+    !field.isHidden &&
+    !isTrue(field.readonly) &&
+    !isViewMode(sessionMode) && (
+      <div className={styles.unspecified}>
+        <Checkbox
+          id={`${field.id}-unspecified`}
+          labelText={t('unspecified', 'Unspecified')}
+          value={t('unspecified', 'Unspecified')}
+          onChange={handleOnChange}
+          checked={isUnspecified}
+          disabled={field.isDisabled}
+        />
+      </div>
+    )
+  );
+};
+
+export default UnspecifiedField;

package/src/components/inputs/unspecified/unspecified.scss

@@ -0,0 +1,7 @@
+@use '@carbon/colors';
+
+.unspecified > div label {
+  padding-top: 0.3rem;
+  font-size: 12px;
+  color: colors.$gray-70;
+}

package/src/components/inputs/unspecified/unspecified.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import dayjs from 'dayjs';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { OpenmrsDatePicker } from '@openmrs/esm-framework';
+import { type FormField, type EncounterContext } from '../../..';
+import { findTextOrDateInput } from '../../../utils/test-utils';
+
+const mockOpenmrsDatePicker = jest.mocked(OpenmrsDatePicker);
+
+mockOpenmrsDatePicker.mockImplementation(({ id, labelText, value, onChange }) => {
+  return (
+    <>
+      <label htmlFor={id}>{labelText}</label>
+      <input
+        id={id}
+        value={value ? dayjs(value.toString()).format('DD/MM/YYYY') : undefined}
+        onChange={(evt) => onChange(new Date(evt.target.value))}
+      />
+    </>
+  );
+});
+
+const question: FormField = {
+  label: 'Visit Date',
+  type: 'obs',
+  datePickerFormat: 'calendar',
+  questionOptions: {
+    rendering: 'date',
+    concept: '163260AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  id: 'visit-date',
+};
+
+const encounterContext: EncounterContext = {
+  patient: {
+    id: '833db896-c1f0-11eb-8529-0242ac130003',
+  },
+  location: {
+    uuid: '41e6e516-c1f0-11eb-8529-0242ac130003',
+  },
+  encounter: {
+    uuid: '873455da-3ec4-453c-b565-7c1fe35426be',
+    obs: [],
+  },
+  sessionMode: 'enter',
+  encounterDate: new Date(2020, 11, 29),
+  setEncounterDate: (value) => {},
+  encounterProvider: '2c95f6f5-788e-4e73-9079-5626911231fa',
+  setEncounterProvider: jest.fn,
+  setEncounterLocation: jest.fn,
+  encounterRole: '8cb3a399-d18b-4b62-aefb-5a0f948a3809',
+  setEncounterRole: jest.fn,
+};
+
+const renderForm = (initialValues) => {
+  render(<></>);
+};
+
+describe.skip('Unspecified', () => {
+  it('Should toggle the "Unspecified" checkbox on click', async () => {
+    // setup
+    renderForm({});
+    const unspecifiedCheckbox = screen.getByRole('checkbox', { name: /Unspecified/ });
+
+    // assert initial state
+    expect(unspecifiedCheckbox).not.toBeChecked();
+
+    // assert checked
+    fireEvent.click(unspecifiedCheckbox);
+    expect(unspecifiedCheckbox).toBeChecked();
+
+    // assert unchecked
+    fireEvent.click(unspecifiedCheckbox);
+    expect(unspecifiedCheckbox).not.toBeChecked();
+  });
+
+  it('Should clear field value when the "Unspecified" checkbox is clicked', async () => {
+    //setup
+    renderForm({});
+    const unspecifiedCheckbox = screen.getByRole('checkbox', { name: /Unspecified/ });
+    const visitDateField = await findTextOrDateInput(screen, 'Visit Date');
+
+    // assert initial state
+    expect(unspecifiedCheckbox).not.toBeChecked();
+    expect(visitDateField.value).toBe('');
+
+    fireEvent.change(visitDateField, { target: { value: '2023-09-09T00:00:00.000Z' } });
+
+    // assert checked
+    fireEvent.click(unspecifiedCheckbox);
+    expect(unspecifiedCheckbox).toBeChecked();
+    //TODO : Fix this test case - - https://openmrs.atlassian.net/browse/O3-3479s
+    // expect(visitDateField.value).toBe('');
+  });
+});

package/src/components/inputs/workspace-launcher/workspace-launcher.component.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { showSnackbar } from '@openmrs/esm-framework';
+import { useLaunchWorkspaceRequiringVisit } from '@openmrs/esm-patient-common-lib';
+import { Button } from '@carbon/react';
+import { type FormFieldInputProps } from '../../../types';
+import styles from './workspace-launcher.scss';
+
+const WorkspaceLauncher: React.FC<FormFieldInputProps> = ({ field }) => {
+  const { t } = useTranslation();
+  const launchWorkspace = useLaunchWorkspaceRequiringVisit(field.questionOptions?.workspaceName);
+
+  const handleLaunchWorkspace = () => {
+    if (!launchWorkspace) {
+      showSnackbar({
+        title: t('invalidWorkspaceName', 'Invalid workspace name.'),
+        subtitle: t('invalidWorkspaceNameSubtitle', 'Please provide a valid workspace name.'),
+        kind: 'error',
+        isLowContrast: true,
+      });
+    }
+    launchWorkspace();
+  };
+
+  return (
+    <div>
+      <div className={styles.label}>{t(field.label)}</div>
+      <div className={styles.workspaceButton}>
+        <Button onClick={handleLaunchWorkspace}>{field.questionOptions?.buttonLabel ?? t('launchWorkspace')}</Button>
+      </div>
+    </div>
+  );
+};
+
+export default WorkspaceLauncher;

package/src/components/inputs/workspace-launcher/workspace-launcher.scss

@@ -0,0 +1,15 @@
+@use '@carbon/colors';
+
+.label {
+  font-weight: 600;
+  color: colors.$black-100;
+}
+
+.errorLabel label {
+  color: colors.$red-60;
+  font-weight: 600;
+}
+
+.workspaceButton {
+  margin: 1rem 0;
+}

package/src/components/label/label.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { DefinitionTooltip } from '@carbon/react';
+import styles from './label.scss';
+
+type LabelProps = {
+  value: string;
+  tooltipText?: string;
+};
+
+const LabelField: React.FC<LabelProps> = ({ value, tooltipText }) => {
+  return (
+    <div className={styles.label}>
+      <DefinitionTooltip direction="bottom" tabIndex={0} tooltipText={tooltipText}>
+        <span className="cds--label">{`${value}:`}</span>
+      </DefinitionTooltip>
+    </div>
+  );
+};
+
+export default LabelField;

package/src/components/label/label.scss

@@ -0,0 +1,11 @@
+.label {
+  :global(.cds--assistive-text) {
+    max-width: 30rem !important;
+    font-size: 0.75rem;
+    white-space: pre-line !important;
+  }
+
+  :global(.cds--label) {
+    font-weight: bolder;
+  }
+}

package/src/components/loaders/loader.component.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { InlineLoading } from '@carbon/react';
+import styles from './loader.scss';
+
+const Loader: React.FC = () => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.loaderContainer}>
+      <InlineLoading className={styles.loader} description={`${t('loading', 'Loading')} ...`} />
+    </div>
+  );
+};
+
+export default Loader;