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

package/src/components/renderer/field/form-field-renderer.component.tsx

@@ -0,0 +1,281 @@
+import React, { useEffect, useState } from 'react';
+import {
+  type FormField,
+  type RenderType,
+  type ValidationResult,
+  type FormFieldValidator,
+  type SessionMode,
+  type ValueAndDisplay,
+} from '../../../types';
+import { Controller, useWatch } from 'react-hook-form';
+import { ToastNotification } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { ErrorBoundary } from 'react-error-boundary';
+import { type FormFieldValueAdapter, type FormFieldInputProps } from '../../../types';
+import { hasRendering } from '../../../utils/common-utils';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import { isEmpty } from '../../../validators/form-validator';
+import PreviousValueReview from '../../previous-value-review/previous-value-review.component';
+import { getRegisteredControl } from '../../../registry/registry';
+import styles from './form-field-renderer.scss';
+import { isTrue } from '../../../utils/boolean-utils';
+import UnspecifiedField from '../../inputs/unspecified/unspecified.component';
+import { getFieldControlWithFallback } from '../../../utils/form-helper';
+import { handleFieldLogic } from './fieldLogic';
+
+export interface FormFieldRendererProps {
+  field: FormField;
+  valueAdapter: FormFieldValueAdapter;
+  repeatOptions?: {
+    targetRendering: RenderType;
+  };
+}
+
+export const FormFieldRenderer = ({ field, valueAdapter, repeatOptions }: FormFieldRendererProps) => {
+  const [inputComponentWrapper, setInputComponentWrapper] = useState<{
+    value: React.ComponentType<FormFieldInputProps>;
+  }>(null);
+  const [errors, setErrors] = useState<ValidationResult[]>([]);
+  const [warnings, setWarnings] = useState<ValidationResult[]>([]);
+  const [historicalValue, setHistoricalValue] = useState<ValueAndDisplay>(null);
+  const context = useFormProviderContext();
+
+  const {
+    methods: { control, getValues, getFieldState },
+    patient,
+    sessionMode,
+    formFields,
+    formFieldValidators,
+    addInvalidField,
+    removeInvalidField,
+  } = context;
+
+  const fieldValue = useWatch({ control, name: field.id, exact: true });
+  const noop = () => {};
+
+  useEffect(() => {
+    if (hasRendering(field, 'repeating') && repeatOptions?.targetRendering) {
+      getRegisteredControl(repeatOptions.targetRendering).then((component) => {
+        if (component) {
+          setInputComponentWrapper({ value: component });
+        }
+      });
+    } else {
+      getFieldControlWithFallback(field).then((component) => {
+        if (component) {
+          setInputComponentWrapper({ value: component });
+        }
+      });
+    }
+    if (sessionMode === 'enter' && (field.historicalExpression || context.previousDomainObjectValue)) {
+      try {
+        context.processor.getHistoricalValue(field, context).then((value) => {
+          setHistoricalValue(value);
+        });
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    const { isDirty, isTouched } = getFieldState(field.id);
+    const { submission, unspecified } = field.meta;
+    const { calculate, defaultValue } = field.questionOptions;
+    if (
+      !isEmpty(fieldValue) &&
+      !submission?.newValue &&
+      !isDirty &&
+      !unspecified &&
+      (calculate?.calculateExpression || defaultValue)
+    ) {
+      valueAdapter.transformFieldValue(field, fieldValue, context);
+    }
+    if (isDirty || isTouched) {
+      onAfterChange(fieldValue);
+    }
+  }, [fieldValue]);
+
+  useEffect(() => {
+    if (field.meta.submission?.errors) {
+      setErrors(field.meta.submission.errors);
+    }
+    if (field.meta.submission?.warnings) {
+      setWarnings(field.meta.submission.warnings);
+    }
+  }, [field.meta.submission]);
+
+  const onAfterChange = (value: any) => {
+    const { errors: validationErrors, warnings: validationWarnings } = validateFieldValue(
+      field,
+      value,
+      formFieldValidators,
+      {
+        fields: formFields,
+        values: getValues(),
+        expressionContext: { patient, mode: sessionMode },
+      },
+    );
+    if (errors.length && !validationErrors.length) {
+      removeInvalidField(field.id);
+      setErrors([]);
+    } else if (validationErrors.length) {
+      setErrors(validationErrors);
+      addInvalidField(field);
+    }
+    if (!validationErrors.length) {
+      valueAdapter.transformFieldValue(field, value, context);
+    }
+    setWarnings(validationWarnings);
+    handleFieldLogic(field, context);
+  };
+
+  if (!inputComponentWrapper) {
+    return null;
+  }
+
+  const InputComponent = inputComponentWrapper.value;
+
+  if (!repeatOptions?.targetRendering && isGroupField(field.questionOptions.rendering)) {
+    return (
+      <InputComponent
+        key={field.id}
+        field={field}
+        value={null}
+        errors={errors}
+        warnings={warnings}
+        setFieldValue={null}
+      />
+    );
+  }
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback} onReset={noop}>
+      <Controller
+        control={control}
+        name={field.id}
+        render={({ field: { value, onChange, onBlur } }) => (
+          <div>
+            <InputComponent
+              key={`${field.id}-input-component`}
+              field={field}
+              value={value}
+              errors={errors}
+              warnings={warnings}
+              setFieldValue={(val) => {
+                onChange(val);
+                onAfterChange(val);
+                onBlur();
+              }}
+            />
+            {isUnspecifiedSupported(field) && (
+              <div className={styles.unspecifiedContainer}>
+                {field.unspecified && (
+                  <UnspecifiedField
+                    key={`${field.id}-unspecified`}
+                    field={field}
+                    setFieldValue={onChange}
+                    onAfterChange={onAfterChange}
+                    fieldValue={value}
+                  />
+                )}
+              </div>
+            )}
+            {historicalValue?.value && (
+              <div>
+                <PreviousValueReview
+                  key={`${field.id}-previous-value-review`}
+                  previousValue={historicalValue.value}
+                  displayText={historicalValue.display}
+                  onAfterChange={onAfterChange}
+                  field={field}
+                />
+              </div>
+            )}
+          </div>
+        )}
+      />
+    </ErrorBoundary>
+  );
+};
+
+function ErrorFallback({ error }) {
+  const { t } = useTranslation();
+  return (
+    <ToastNotification
+      aria-label={t('closesNotification', 'Closes notification')}
+      caption=""
+      hideCloseButton
+      lowContrast
+      onClose={function noRefCheck() {}}
+      onCloseButtonClick={function noRefCheck() {}}
+      statusIconDescription={t('notification', 'Notification')}
+      subtitle={error.message}
+      title={t('errorRenderingField', 'Error rendering field')}
+    />
+  );
+}
+
+export interface ValidatorConfig {
+  fields: FormField[];
+  values: Record<string, any>;
+  expressionContext: {
+    patient: fhir.Patient;
+    mode: SessionMode;
+  };
+}
+
+function validateFieldValue(
+  field: FormField,
+  value: any,
+  validators: Record<string, FormFieldValidator>,
+  context: ValidatorConfig,
+): { errors: ValidationResult[]; warnings: ValidationResult[] } {
+  const errors: ValidationResult[] = [];
+  const warnings: ValidationResult[] = [];
+
+  if (field.meta.submission?.unspecified) {
+    return { errors: [], warnings: [] };
+  }
+
+  try {
+    field.validators.forEach((validatorConfig) => {
+      const results = validators[validatorConfig.type]?.validate?.(field, value, {
+        ...validatorConfig,
+        ...context,
+      });
+      if (results) {
+        results.forEach((result) => {
+          if (result.resultType === 'error') {
+            errors.push(result);
+          } else if (result.resultType === 'warning') {
+            warnings.push(result);
+          }
+        });
+      }
+    });
+  } catch (error) {
+    console.error(error);
+  }
+
+  return { errors, warnings };
+}
+
+/**
+ * Determines whether a field can be unspecified
+ */
+export function isUnspecifiedSupported(question: FormField) {
+  const { rendering } = question.questionOptions;
+  return (
+    isTrue(question.unspecified) &&
+    rendering != 'toggle' &&
+    rendering != 'group' &&
+    rendering != 'repeating' &&
+    rendering != 'markdown' &&
+    rendering != 'extension-widget' &&
+    rendering != 'workspace-launcher'
+  );
+}
+
+function isGroupField(rendering: RenderType) {
+  return rendering === 'group' || rendering === 'repeating';
+}

package/src/components/renderer/field/form-field-renderer.scss

@@ -0,0 +1,5 @@
+.unspecifiedContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

package/src/components/renderer/form/form-renderer.component.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useMemo, useReducer } from 'react';
+import { useForm } from 'react-hook-form';
+import PageRenderer from '../page/page.renderer.component';
+import FormProcessorFactory from '../../processor-factory/form-processor-factory.component';
+import { formStateReducer, initialState } from './state';
+import { useEvaluateFormFieldExpressions } from '../../../hooks/useEvaluateFormFieldExpressions';
+import { useFormFactory } from '../../../provider/form-factory-provider';
+import { FormProvider, type FormContextProps } from '../../../provider/form-provider';
+import { isTrue } from '../../../utils/boolean-utils';
+import { type FormProcessorContextProps } from '../../../types';
+import { useFormStateHelpers } from '../../../hooks/useFormStateHelpers';
+
+export type FormRendererProps = {
+  processorContext: FormProcessorContextProps;
+  initialValues: Record<string, any>;
+  setIsLoadingFormDependencies: (isLoading: boolean) => void;
+};
+
+export const FormRenderer = ({ processorContext, initialValues, setIsLoadingFormDependencies }: FormRendererProps) => {
+  const { evaluatedFields, evaluatedFormJson } = useEvaluateFormFieldExpressions(initialValues, processorContext);
+  const { registerForm, workspaceLayout } = useFormFactory();
+  const methods = useForm({
+    defaultValues: initialValues,
+  });
+  const [{ formFields, invalidFields, formJson }, dispatch] = useReducer(formStateReducer, {
+    ...initialState,
+    formFields: evaluatedFields,
+    formJson: evaluatedFormJson,
+  });
+
+  const {
+    addFormField,
+    updateFormField,
+    getFormField,
+    removeFormField,
+    setInvalidFields,
+    addInvalidField,
+    removeInvalidField,
+    setForm,
+  } = useFormStateHelpers(dispatch, formFields);
+
+  const context: FormContextProps = useMemo(() => {
+    return {
+      ...processorContext,
+      workspaceLayout,
+      methods,
+      formFields,
+      formJson,
+      invalidFields,
+      addFormField,
+      updateFormField,
+      getFormField,
+      removeFormField,
+      setInvalidFields,
+      addInvalidField,
+      removeInvalidField,
+      setForm,
+    };
+  }, [processorContext, workspaceLayout, methods, formFields, formJson, invalidFields]);
+
+  useEffect(() => {
+    registerForm(formJson.name, context);
+  }, [formJson.name, context]);
+
+  return (
+    <FormProvider {...context}>
+      {formJson.pages.map((page) => {
+        const pageHasNoVisibleContent =
+          page.sections?.every((section) => section.isHidden) ||
+          page.sections?.every((section) => section.questions?.every((question) => question.isHidden)) ||
+          isTrue(page.isHidden);
+        if (!page.isSubform && pageHasNoVisibleContent) {
+          return null;
+        }
+        if (page.isSubform && page.subform?.form) {
+          return (
+            <FormProcessorFactory
+              key={page.subform.form.uuid}
+              formJson={page.subform.form}
+              isSubForm={true}
+              setIsLoadingFormDependencies={setIsLoadingFormDependencies}
+            />
+          );
+        }
+        return <PageRenderer page={page} />;
+      })}
+    </FormProvider>
+  );
+};

package/src/components/renderer/form/state.ts

@@ -0,0 +1,54 @@
+import { type FormField, type FormSchema } from '../../../types';
+
+type FormState = {
+  formFields: FormField[];
+  invalidFields: FormField[];
+  formJson: FormSchema;
+};
+
+type Action =
+  | { type: 'SET_FORM_FIELDS'; value: FormField[] }
+  | { type: 'ADD_FORM_FIELD'; value: FormField }
+  | { type: 'UPDATE_FORM_FIELD'; value: FormField }
+  | { type: 'REMOVE_FORM_FIELD'; value: string }
+  | { type: 'SET_INVALID_FIELDS'; value: FormField[] }
+  | { type: 'ADD_INVALID_FIELD'; value: FormField }
+  | { type: 'REMOVE_INVALID_FIELD'; value: string }
+  | { type: 'CLEAR_INVALID_FIELDS' }
+  | { type: 'SET_FORM_JSON'; value: any };
+
+const initialState: FormState = {
+  formFields: [],
+  invalidFields: [],
+  formJson: null,
+};
+
+const formStateReducer = (state: FormState, action: Action): FormState => {
+  switch (action.type) {
+    case 'SET_FORM_FIELDS':
+      return { ...state, formFields: action.value };
+    case 'ADD_FORM_FIELD':
+      return { ...state, formFields: [...state.formFields, action.value] };
+    case 'UPDATE_FORM_FIELD':
+      return {
+        ...state,
+        formFields: state.formFields.map((field) => (field.id === action.value.id ? action.value : field)),
+      };
+    case 'REMOVE_FORM_FIELD':
+      return { ...state, formFields: state.formFields.filter((field) => field.id !== action.value) };
+    case 'SET_INVALID_FIELDS':
+      return { ...state, invalidFields: action.value };
+    case 'ADD_INVALID_FIELD':
+      return { ...state, invalidFields: [...state.invalidFields, action.value] };
+    case 'REMOVE_INVALID_FIELD':
+      return { ...state, invalidFields: state.invalidFields.filter((field) => field.id !== action.value) };
+    case 'CLEAR_INVALID_FIELDS':
+      return { ...state, invalidFields: [] };
+    case 'SET_FORM_JSON':
+      return { ...state, formJson: action.value };
+    default:
+      return state;
+  }
+};
+
+export { formStateReducer, initialState, FormState, Action };

package/src/components/renderer/page/page.renderer.component.tsx

@@ -0,0 +1,50 @@
+import React, { useMemo } from 'react';
+import { type FormPage } from '../../../types';
+import { isTrue } from '../../../utils/boolean-utils';
+import { useTranslation } from 'react-i18next';
+import { SectionRenderer } from '../section/section-renderer.component';
+import { Waypoint } from 'react-waypoint';
+import styles from './page.renderer.scss';
+import { Accordion, AccordionItem } from '@carbon/react';
+import { useFormFactory } from '../../../provider/form-factory-provider';
+
+interface PageRendererProps {
+  page: FormPage;
+}
+
+function PageRenderer({ page }: PageRendererProps) {
+  const { t } = useTranslation();
+  const pageId = useMemo(() => page.label.replace(/\s/g, ''), [page.label]);
+
+  const { setCurrentPage } = useFormFactory();
+  const visibleSections = page.sections.filter((section) => {
+    const hasVisibleQuestions = section.questions.some((question) => !isTrue(question.isHidden));
+    return !isTrue(section.isHidden) && hasVisibleQuestions;
+  });
+  return (
+    <div>
+      <Waypoint onEnter={() => setCurrentPage(pageId)} topOffset="50%" bottomOffset="60%">
+        <div className={styles.pageContent}>
+          <div className={styles.pageHeader}>
+            <p className={styles.pageTitle}>{t(page.label)}</p>
+          </div>
+          <Accordion>
+            {visibleSections.map((section) => (
+              <AccordionItem
+                title={t(section.label)}
+                open={true}
+                className={styles.sectionContainer}
+                key={`section-${section.label}`}>
+                <div className={styles.formSection}>
+                  <SectionRenderer section={section} />
+                </div>
+              </AccordionItem>
+            ))}
+          </Accordion>
+        </div>
+      </Waypoint>
+    </div>
+  );
+}
+
+export default PageRenderer;

package/src/components/renderer/page/page.renderer.scss

@@ -0,0 +1,36 @@
+@use '@carbon/colors';
+
+.pageContent:last-child > hr {
+  display: none;
+}
+
+.pageHeader {
+  display: flex;
+  flex-direction: row;
+  margin: 0.5rem 1rem;
+}
+
+.pageTitle {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.4;
+  color: colors.$gray-100;
+  width: 100%;
+}
+
+.sectionContainer > div {
+  background-color: colors.$gray-10;
+}
+
+.formSection {
+  flex: 1 1 65%;
+}
+
+.formSection > div > fieldset {
+  margin-bottom: 0 !important;
+}
+
+// TODO: try removing this when upgrading @carbon/react. Added at 1.37
+:global(.cds--accordion__wrapper) {
+  max-block-size: unset !important;
+}

package/src/components/renderer/section/section-renderer.component.tsx

@@ -0,0 +1,21 @@
+import React, { useMemo } from 'react';
+import { type FormSection } from '../../../types';
+import { useFormProviderContext } from '../../../provider/form-provider';
+import { FormFieldRenderer } from '../field/form-field-renderer.component';
+import styles from './section-renderer.scss';
+
+export const SectionRenderer = ({ section }: { section: FormSection }) => {
+  const { formFieldAdapters } = useFormProviderContext();
+  const sectionId = useMemo(() => section.label.replace(/\s/g, ''), [section.label]);
+  return (
+    <div className={styles.section}>
+      {section.questions.map((question) =>
+        formFieldAdapters[question.type] ? (
+          <div key={`${sectionId}-${question.id}`} className={styles.sectionBody}>
+            <FormFieldRenderer key={question.id} field={question} valueAdapter={formFieldAdapters[question.type]} />
+          </div>
+        ) : null,
+      )}
+    </div>
+  );
+};

package/src/components/renderer/section/section-renderer.scss

@@ -0,0 +1,19 @@
+@use '@carbon/colors';
+
+.section {
+  margin-top: 1rem;
+  width: 100%;
+}
+
+.sectionBody {
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.flexFullWidth {
+  flex-basis: 100%;
+}
+
+.questionInfoDefault {
+  display: flex;
+}

package/src/components/repeat/helpers.test.ts

@@ -0,0 +1,29 @@
+import { updateFieldIdInExpression } from './helpers';
+
+describe('RepeatingFieldComponent - handleExpressionFieldIdUpdate', () => {
+  it('Should handle update of expression with ids in repeat group', () => {
+    const expression =
+      "infantStatus !== '151849AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' && infantStatus !== '154223AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'";
+    const fieldIds = ['birthDate', 'infantStatus', 'deathDate'];
+    const index = 2;
+
+    const updatedExpression = updateFieldIdInExpression(expression, index, fieldIds);
+
+    expect(updatedExpression).toEqual(
+      "infantStatus_2 !== '151849AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' && infantStatus_2 !== '154223AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'",
+    );
+  });
+
+  it('Should handle update of expression with ids not in repeat group', () => {
+    const expression =
+      "myValue > today() || myValue <= '1/1/1890' || myValue > useFieldValue('visit_date') || myValue < useFieldValue('visit_date')";
+    const fieldIds = ['birthDate', 'infantStatus', 'deathDate'];
+    const index = 1;
+
+    const updatedExpression = updateFieldIdInExpression(expression, index, fieldIds);
+
+    expect(updatedExpression).toEqual(
+      "myValue > today() || myValue <= '1/1/1890' || myValue > useFieldValue('visit_date') || myValue < useFieldValue('visit_date')",
+    );
+  });
+});

package/src/components/repeat/helpers.ts

@@ -0,0 +1,68 @@
+import { cloneDeep } from 'lodash-es';
+import { type FormField } from '../../types';
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+import { isEmpty } from '../../validators/form-validator';
+import { clearSubmission } from '../../utils/common-utils';
+
+export function cloneRepeatField(srcField: FormField, value: OpenmrsResource, idSuffix: number) {
+  const originalGroupMembersIds: string[] = [];
+  const clonedField = cloneDeep(srcField) as FormField;
+  clonedField.questionOptions.repeatOptions = { ...(clonedField.questionOptions.repeatOptions ?? {}) };
+  clonedField.meta = { repeat: { ...(clonedField.meta ?? {}), isClone: true }, previousValue: value };
+  clonedField.id = `${clonedField.id}_${idSuffix}`;
+  clonedField.questions?.forEach((childField) => {
+    originalGroupMembersIds.push(childField.id);
+    childField.id = `${childField.id}_${idSuffix}`;
+    childField.meta.groupId = clonedField.id;
+    childField.meta.previousValue = null;
+    clearSubmission(childField);
+
+    // cleanup expressions
+
+    if (childField['hide'] && childField['hide'].hideWhenExpression) {
+      childField['hide'].hideWhenExpression = updateFieldIdInExpression(
+        childField['hide'].hideWhenExpression,
+        idSuffix,
+        originalGroupMembersIds,
+      );
+    }
+
+    if (childField.validators?.length) {
+      childField.validators.forEach((validator) => {
+        if (validator.type === 'js_expression') {
+          validator.failsWhenExpression = updateFieldIdInExpression(
+            validator.failsWhenExpression,
+            idSuffix,
+            originalGroupMembersIds,
+          );
+        }
+      });
+    }
+    if (childField.questionOptions.calculate?.calculateExpression) {
+      childField.questionOptions.calculate.calculateExpression = updateFieldIdInExpression(
+        childField.questionOptions.calculate?.calculateExpression,
+        idSuffix,
+        originalGroupMembersIds,
+      );
+    }
+  });
+  return clonedField;
+}
+
+export function updateFieldIdInExpression(expression: string, index: number, questionIds: string[]) {
+  let uniqueQuestionIds = [...new Set(questionIds)];
+  uniqueQuestionIds.forEach((id) => {
+    if (expression.match(id)) {
+      expression = expression.replace(new RegExp(id, 'g'), `${id}_${index}`);
+    }
+  });
+  return expression;
+}
+
+export function disableRepeatAddButton(limit: string | number, counter: number) {
+  const repeatLimit = Number(limit);
+  if (isEmpty(limit) || isNaN(repeatLimit)) {
+    return false;
+  }
+  return counter >= repeatLimit;
+}