@olaboot/esm-form-engine-lib 4.1.0

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

@@ -0,0 +1,208 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { debounce } from 'lodash-es';
+import { ComboBox, DropdownSkeleton, Layer, InlineLoading } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useWatch } from 'react-hook-form';
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+import { getControlTemplate } from '../../../registry/inbuilt-components/control-templates';
+import { getRegisteredDataSource } from '../../../registry/registry';
+import { isEmpty } from '../../../validators/form-validator';
+import { isTrue } from '../../../utils/boolean-utils';
+import { isViewMode } from '../../../utils/common-utils';
+import { shouldUseInlineLayout } from '../../../utils/form-helper';
+import { type DataSource, type FormFieldInputProps } from '../../../types';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import useDataSourceDependentValue from '../../../hooks/useDataSourceDependentValue';
+import FieldLabel from '../../field-label/field-label.component';
+import FieldValueView from '../../value/view/field-value-view.component';
+import styles from './ui-select-extended.scss';
+
+const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnings, setFieldValue }) => {
+  const { t } = useTranslation();
+  const [items, setItems] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSearching, setIsSearching] = useState(false);
+  const [searchTerm, setSearchTerm] = useState('');
+  const isProcessingSelection = useRef(false);
+  const [dataSource, setDataSource] = useState(null);
+  const [config, setConfig] = useState({});
+  const dataSourceDependentValue = useDataSourceDependentValue(field);
+  const isSearchable = isTrue(field.questionOptions.isSearchable);
+  const {
+    layoutType,
+    sessionMode,
+    workspaceLayout,
+    methods: { control, getFieldState },
+  } = useFormProviderContext();
+
+  const value = useWatch({ control, name: field.id, exact: true });
+  const { isDirty } = getFieldState(field.id);
+
+  const isInline = useMemo(() => {
+    if (isViewMode(sessionMode) || isTrue(field.readonly)) {
+      return shouldUseInlineLayout(field.inlineRendering, layoutType, workspaceLayout, sessionMode);
+    }
+    return false;
+  }, [sessionMode, field.readonly, field.inlineRendering, layoutType, workspaceLayout]);
+
+  const selectedItem = useMemo(() => items.find((item) => item.uuid == value) || null, [items, value]);
+
+  const debouncedSearch = debounce((searchTerm: string, dataSource: DataSource<OpenmrsResource>) => {
+    setIsSearching(true);
+
+    dataSource
+      .fetchData(searchTerm, config)
+      .then((dataItems) => {
+        if (dataItems.length) {
+          const currentSelectedItem = items.find((item) => item.uuid == value);
+          const newItems = dataItems.map(dataSource.toUuidAndDisplay);
+          if (currentSelectedItem && !newItems.some((item) => item.uuid == currentSelectedItem.uuid)) {
+            newItems.unshift(currentSelectedItem);
+          }
+          setItems(newItems);
+        }
+        setIsSearching(false);
+      })
+      .catch((err) => {
+        console.error(err);
+        setIsSearching(false);
+      });
+  }, 300);
+
+  const searchTermHasMatchingItem = useCallback(
+    (searchTerm: string) => {
+      return items.some((item) => item.display?.toLowerCase().includes(searchTerm.toLowerCase()));
+    },
+    [items],
+  );
+
+  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]);
+
+  useEffect(() => {
+    let ignore = false;
+
+    // If not searchable, preload the items
+    if (dataSource && !isTrue(field.questionOptions.isSearchable)) {
+      setItems([]);
+      setIsLoading(true);
+
+      dataSource
+        .fetchData(null, { ...config, referencedValue: dataSourceDependentValue })
+        .then((dataItems) => {
+          if (!ignore) {
+            setItems(dataItems.map(dataSource.toUuidAndDisplay));
+            setIsLoading(false);
+          }
+        })
+        .catch((err) => {
+          if (!ignore) {
+            console.error(err);
+            setIsLoading(false);
+            setItems([]);
+          }
+        });
+    }
+
+    return () => {
+      ignore = true;
+    };
+  }, [dataSource, config, dataSourceDependentValue]);
+
+  useEffect(() => {
+    if (dataSource && isSearchable && !isEmpty(searchTerm) && !searchTermHasMatchingItem(searchTerm)) {
+      debouncedSearch(searchTerm, dataSource);
+    }
+  }, [dataSource, searchTerm, config]);
+
+  useEffect(() => {
+    let ignore = false;
+    if (value && !isDirty && dataSource && isSearchable && sessionMode !== 'enter' && !items.length) {
+      // While in edit mode, search-based instances should fetch the initial item (previously selected value) to resolve its display property
+      setIsLoading(true);
+      try {
+        dataSource.fetchSingleItem(value).then((item) => {
+          if (!ignore) {
+            setItems([dataSource.toUuidAndDisplay(item)]);
+            setIsLoading(false);
+          }
+        });
+      } catch (error) {
+        if (!ignore) {
+          console.error(error);
+          setIsLoading(false);
+        }
+      }
+    }
+
+    return () => {
+      ignore = true;
+    };
+  }, [value, isDirty, sessionMode, dataSource, isSearchable, items]);
+
+  if (isLoading) {
+    return <DropdownSkeleton />;
+  }
+
+  return isViewMode(sessionMode) || 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}
+            placeholder={isSearchable ? t('search', 'Search') + '...' : null}
+            onChange={({ selectedItem }) => {
+              isProcessingSelection.current = true;
+              setFieldValue(selectedItem?.uuid);
+            }}
+            disabled={field.isDisabled}
+            readOnly={isTrue(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);
+              }
+            }}
+          />
+          {isSearching && <InlineLoading className={styles.loader} description={t('searching', 'Searching') + '...'} />}
+        </Layer>
+      </div>
+    )
+  );
+};
+
+export default UiSelectExtended;

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

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

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

@@ -0,0 +1,84 @@
+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 { clearSubmission, 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);
+      if (!field.meta.submission) {
+        field.meta.submission = {};
+      }
+      field.meta.submission.unspecified = true;
+    }
+  }, []);
+
+  useEffect(() => {
+    if (field.meta.submission?.unspecified && (field.meta.submission.newValue || !isEmpty(fieldValue))) {
+      setIsUnspecified(false);
+      field.meta.submission.unspecified = false;
+      updateFormField(field);
+    }
+  }, [field.meta?.submission, fieldValue]);
+
+  const handleOnChange = useCallback(
+    (value) => {
+      const rendering = field.questionOptions.rendering;
+      if (value.target.checked) {
+        setIsUnspecified(true);
+        const emptyValue = rendering === 'checkbox' ? [] : '';
+        clearSubmission(field);
+        field.meta.submission.unspecified = true;
+        // clear stale validation results
+        field.meta.submission.errors = [];
+        field.meta.submission.warnings = [];
+        updateFormField(field);
+        setFieldValue(emptyValue);
+        onAfterChange(emptyValue);
+      } else {
+        setIsUnspecified(false);
+        field.meta.submission.unspecified = false;
+        updateFormField(field);
+      }
+    },
+    [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/workspace-launcher/workspace-launcher.component.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { launchWorkspace2, showSnackbar } from '@openmrs/esm-framework';
+import { Button, InlineNotification } from '@carbon/react';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import { type FormFieldInputProps } from '../../../types';
+import { isTrue } from '../../../utils/boolean-utils';
+import { isViewMode } from '../../../utils/common-utils';
+import FieldLabel from '../../field-label/field-label.component';
+import styles from './workspace-launcher.scss';
+
+const WorkspaceLauncher: React.FC<FormFieldInputProps> = ({ field }) => {
+  const { t } = useTranslation();
+  const { sessionMode, patient, visit } = useFormProviderContext();
+
+  const handleLaunchWorkspace = async () => {
+    const workspaceName = field.questionOptions?.workspaceName;
+    if (!workspaceName) {
+      showSnackbar({
+        title: t('invalidWorkspaceName', 'Invalid workspace name.'),
+        subtitle: t('invalidWorkspaceNameSubtitle', 'Please provide a valid workspace name.'),
+        kind: 'error',
+        isLowContrast: true,
+      });
+      return;
+    }
+
+    // Pass any additional workspace props from field configuration
+    const workspaceProps = field.questionOptions?.workspaceProps ?? {};
+
+    // Pass patient and visit context as window props
+    const windowProps = {
+      patient,
+      patientUuid: patient?.id,
+      visitContext: visit,
+    };
+
+    try {
+      await launchWorkspace2(workspaceName, workspaceProps, windowProps);
+    } catch (error) {
+      showSnackbar({
+        title: t('errorLaunchingWorkspace', 'Error launching workspace'),
+        subtitle:
+          (error as Error)?.message ??
+          t('errorLaunchingWorkspaceSubtitle', 'An unexpected error occurred while launching the workspace.'),
+        kind: 'error',
+        isLowContrast: true,
+      });
+    }
+  };
+
+  if (field.isHidden || isViewMode(sessionMode)) {
+    return null;
+  }
+
+  return (
+    <div>
+      <div className={styles.label}>{<FieldLabel field={field} />}</div>
+      <div className={styles.workspaceButton}>
+        <Button disabled={isTrue(field.readonly ?? false) || !patient} onClick={handleLaunchWorkspace}>
+          {field.questionOptions.buttonLabel
+            ? t(field.questionOptions.buttonLabel)
+            : t('launchWorkspace', 'Launch Workspace')}
+        </Button>
+        {!patient && (
+          <InlineNotification
+            className={styles.noPatientNotification}
+            kind="info"
+            lowContrast
+            hideCloseButton
+            title={t('noPatientContext', 'No patient selected')}
+            subtitle={t('noPatientContextSubtitle', 'This button is only active when a patient chart is open.')}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default WorkspaceLauncher;

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

@@ -0,0 +1,21 @@
+@use '@carbon/colors';
+@use '@carbon/layout';
+
+.label {
+  font-weight: 600;
+  color: colors.$black-100;
+}
+
+.errorLabel label {
+  color: colors.$red-60;
+  font-weight: 600;
+}
+
+.workspaceButton {
+  margin: layout.$spacing-05 0;
+}
+
+.noPatientNotification {
+  margin-top: layout.$spacing-03;
+  max-width: 32rem;
+}

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 autoAlign tabIndex={0} definition={tooltipText ?? ''}>
+        <span className="cds--label">{`${value}:`}</span>
+      </DefinitionTooltip>
+    </div>
+  );
+};
+
+export default LabelField;

package/src/components/label/label.scss

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

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;

package/src/components/loaders/loader.scss

@@ -0,0 +1,20 @@
+.loaderContainer {
+  height: var(--desktop-workspace-window-height);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// tablet
+:global(.omrs-breakpoint-lt-desktop) {
+  .loaderContainer {
+    height: var(--tablet-workspace-window-height);
+  }
+}
+
+.loader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 50%;
+}

package/src/components/patient-banner/patient-banner.component.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ExtensionSlot } from '@openmrs/esm-framework';
+import styles from './patient-banner.scss';
+
+const PatientBanner: React.FC<{ patient: any; hideActionsOverflow?: any }> = ({ patient, hideActionsOverflow }) => {
+  return (
+    <div className={styles.patientBannerContainer}>
+      <ExtensionSlot
+        name="patient-header-slot"
+        state={{
+          patient,
+          patientUuid: patient.id,
+          hideActionsOverflow,
+        }}
+      />
+    </div>
+  );
+};
+
+export default PatientBanner;

package/src/components/patient-banner/patient-banner.scss

@@ -0,0 +1,12 @@
+.patientBannerContainer {
+  display: flex;
+  width: 100%;
+  position: sticky;
+  flex-direction: row;
+  align-items: baseline;
+  padding: 0;
+}
+
+.patientBannerContainer > div {
+  width: 100%;
+}

package/src/components/previous-value-review/previous-value-review.component.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { ValueDisplay } from '../value/value.component';
+import styles from './previous-value-review.scss';
+import { type FormField } from '../../types';
+import { useFormProviderContext } from '../../provider/form-provider';
+
+type PreviousValueReviewProps = {
+  previousValue: any;
+  displayText: string;
+  field: FormField;
+  hideHeader?: boolean;
+  onAfterChange: (value) => void;
+};
+
+const PreviousValueReview: React.FC<PreviousValueReviewProps> = ({
+  previousValue,
+  displayText,
+  field,
+  hideHeader,
+  onAfterChange,
+}) => {
+  const { t } = useTranslation();
+  const {
+    methods: { setValue },
+  } = useFormProviderContext();
+
+  const onReuseValue = (e) => {
+    e.preventDefault();
+    setValue(field.id, previousValue);
+    onAfterChange(previousValue);
+  };
+
+  return (
+    <div className={styles.formField}>
+      <div className={styles.row}>
+        {!hideHeader && <div>{t('previousValue', 'Previous value:')}</div>}
+        <div className={styles.value}>
+          <ValueDisplay value={displayText} />
+        </div>
+      </div>
+      <div className={styles.reuseButton} role="button" tabIndex={0} onClick={onReuseValue}>
+        {t('reuseValue', 'Reuse value')}
+      </div>
+    </div>
+  );
+};
+
+export default PreviousValueReview;

package/src/components/previous-value-review/previous-value-review.scss

@@ -0,0 +1,36 @@
+@use '@carbon/colors';
+
+.formField {
+  display: flex;
+  margin-top: 0.25rem;
+  margin-bottom: 0.25rem;
+  align-items: center;
+
+  > div > div > label {
+    color: colors.$gray-70;
+  }
+}
+
+.row {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  color: colors.$gray-60;
+  font-size: 0.8rem;
+}
+
+.value {
+  display: flex;
+  align-items: baseline;
+  padding-left: 0.5rem;
+}
+
+.reuseButton {
+  font-size: 0.8rem;
+  margin: 0 1rem;
+  color: colors.$blue-60;
+}
+
+.reuseButton:hover {
+  cursor: pointer;
+}