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

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;
+}

package/src/components/processor-factory/form-processor-factory.component.tsx

@@ -0,0 +1,127 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import useProcessorDependencies from '../../hooks/useProcessorDependencies';
+import useInitialValues from '../../hooks/useInitialValues';
+import { FormRenderer } from '../renderer/form/form-renderer.component';
+import { type FormSchema, type FormProcessorContextProps } from '../../types';
+import { CustomHooksRenderer } from '../renderer/custom-hooks-renderer.component';
+import { useFormFields } from '../../hooks/useFormFields';
+import { useConcepts } from '../../hooks/useConcepts';
+import { useFormFieldValidators } from '../../hooks/useFormFieldValidators';
+import { useFormFieldsMeta } from '../../hooks/useFormFieldsMeta';
+import { useFormFactory } from '../../provider/form-factory-provider';
+import { useFormFieldValueAdapters } from '../../hooks/useFormFieldValueAdapters';
+import { EncounterFormProcessor } from '../../processors/encounter/encounter-form-processor';
+import { reportError } from '../../utils/error-utils';
+import { useTranslation } from 'react-i18next';
+import Loader from '../loaders/loader.component';
+import { registerFormFieldAdaptersForCleanUp } from '../../lifecycle';
+
+interface FormProcessorFactoryProps {
+  formJson: FormSchema;
+  isSubForm?: boolean;
+  setIsLoadingFormDependencies: (isLoading: boolean) => void;
+}
+
+const FormProcessorFactory = ({
+  formJson,
+  isSubForm = false,
+  setIsLoadingFormDependencies,
+}: FormProcessorFactoryProps) => {
+  const { patient, sessionMode, formProcessors, layoutType, location, provider, sessionDate, visit } = useFormFactory();
+
+  const processor = useMemo(() => {
+    const ProcessorClass = formProcessors[formJson.processor];
+    if (processor) {
+      return processor;
+    }
+    if (ProcessorClass) {
+      return new ProcessorClass(formJson);
+    }
+    console.error(`Form processor ${formJson.processor} not found, defaulting to EncounterFormProcessor`);
+    return new EncounterFormProcessor(formJson);
+  }, [formProcessors, formJson.processor]);
+
+  const [processorContext, setProcessorContext] = useState<FormProcessorContextProps>({
+    patient,
+    formJson,
+    sessionMode,
+    layoutType,
+    location,
+    currentProvider: provider,
+    processor,
+    sessionDate,
+    visit,
+    formFields: [],
+    formFieldAdapters: {},
+    formFieldValidators: {},
+  });
+  const { t } = useTranslation();
+  const { formFields: rawFormFields, conceptReferences } = useFormFields(formJson);
+  const { concepts: formFieldsConcepts, isLoading: isLoadingConcepts } = useConcepts(conceptReferences);
+  const formFieldsWithMeta = useFormFieldsMeta(rawFormFields, formFieldsConcepts);
+  const formFieldAdapters = useFormFieldValueAdapters(rawFormFields);
+  const formFieldValidators = useFormFieldValidators(rawFormFields);
+  const { isLoading: isLoadingCustomDeps } = useProcessorDependencies(processor, processorContext, setProcessorContext);
+  const useCustomHooks = processor.getCustomHooks().useCustomHooks;
+  const [isLoadingCustomHooks, setIsLoadingCustomHooks] = useState(!!useCustomHooks);
+  const [isLoadingProcessorDependencies, setIsLoadingProcessorDependencies] = useState(true);
+
+  const {
+    isLoadingInitialValues,
+    initialValues,
+    error: initialValuesError,
+  } = useInitialValues(processor, isLoadingCustomDeps || isLoadingCustomHooks || isLoadingConcepts, processorContext);
+
+  useEffect(() => {
+    const isLoading = isLoadingCustomDeps || isLoadingCustomHooks || isLoadingConcepts || isLoadingInitialValues;
+    setIsLoadingFormDependencies(isLoading);
+    setIsLoadingProcessorDependencies(isLoading);
+  }, [isLoadingCustomDeps, isLoadingCustomHooks, isLoadingConcepts, isLoadingInitialValues]);
+
+  useEffect(() => {
+    setProcessorContext((prev) => ({
+      ...prev,
+      ...(formFieldAdapters && { formFieldAdapters }),
+      ...(formFieldValidators && { formFieldValidators }),
+      ...(formFieldsWithMeta?.length
+        ? { formFields: formFieldsWithMeta }
+        : rawFormFields?.length
+        ? { formFields: rawFormFields }
+        : {}),
+    }));
+  }, [formFieldAdapters, formFieldValidators, rawFormFields, formFieldsWithMeta]);
+
+  useEffect(() => {
+    reportError(initialValuesError, t('errorLoadingInitialValues', 'Error loading initial values'));
+  }, [initialValuesError]);
+
+  useEffect(() => {
+    if (formFieldAdapters) {
+      registerFormFieldAdaptersForCleanUp(formFieldAdapters);
+    }
+  }, [formFieldAdapters]);
+
+  return (
+    <>
+      {useCustomHooks && (
+        <CustomHooksRenderer
+          context={processorContext}
+          setContext={setProcessorContext}
+          useCustomHooks={useCustomHooks}
+          setIsLoadingCustomHooks={setIsLoadingCustomHooks}
+        />
+      )}
+      {isLoadingProcessorDependencies && !isSubForm ? (
+        <Loader />
+      ) : (
+        <FormRenderer
+          processorContext={processorContext}
+          initialValues={initialValues}
+          setIsLoadingFormDependencies={setIsLoadingFormDependencies}
+        />
+      )}
+    </>
+  );
+};
+
+export default FormProcessorFactory;

package/src/components/renderer/custom-hooks-renderer.component.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { type FormProcessorContextProps } from '../../types';
+
+export const CustomHooksRenderer = ({
+  context,
+  setContext,
+  useCustomHooks,
+  setIsLoadingCustomHooks,
+}: {
+  context: FormProcessorContextProps;
+  setContext: (context: FormProcessorContextProps) => void;
+  useCustomHooks: (context: FormProcessorContextProps) => {
+    data: any;
+    isLoading: boolean;
+    error: any;
+    updateContext: (setContext: (context: FormProcessorContextProps) => void) => void;
+  };
+  setIsLoadingCustomHooks: (isLoading: boolean) => void;
+}) => {
+  const { isLoading = false, error = null, data, updateContext } = useCustomHooks(context);
+
+  useEffect(() => {
+    if (!isLoading && updateContext) {
+      updateContext(setContext);
+      setIsLoadingCustomHooks(false);
+    }
+  }, [isLoading]);
+
+  return null;
+};

package/src/components/renderer/field/fieldLogic.ts

@@ -0,0 +1,214 @@
+import { codedTypes } from '../../../constants';
+import { type FormContextProps } from '../../../provider/form-provider';
+import { type FormField } from '../../../types';
+import { isTrue } from '../../../utils/boolean-utils';
+import { hasRendering } from '../../../utils/common-utils';
+import { evaluateAsyncExpression, evaluateExpression } from '../../../utils/expression-runner';
+import { evalConditionalRequired, evaluateDisabled, evaluateHide } from '../../../utils/form-helper';
+import { isEmpty } from '../../../validators/form-validator';
+
+export function handleFieldLogic(field: FormField, context: FormContextProps) {
+  const {
+    methods: { getValues },
+  } = context;
+  const values = getValues();
+  if (codedTypes.includes(field.questionOptions.rendering)) {
+    evaluateFieldAnswerDisabled(field, values, context);
+  }
+  evaluateFieldDependents(field, values, context);
+}
+
+function evaluateFieldAnswerDisabled(field: FormField, values: Record<string, any>, context: FormContextProps) {
+  const { sessionMode, formFields, patient } = context;
+  field.questionOptions.answers.forEach((answer) => {
+    const disableExpression = answer.disable?.disableWhenExpression;
+    if (disableExpression && disableExpression.includes('myValue')) {
+      answer.disable.isDisabled = evaluateExpression(
+        answer.disable?.disableWhenExpression,
+        { value: field, type: 'field' },
+        formFields,
+        values,
+        {
+          mode: sessionMode,
+          patient,
+        },
+      );
+    }
+  });
+}
+
+function evaluateFieldDependents(field: FormField, values: any, context: FormContextProps) {
+  const {
+    sessionMode,
+    formFields,
+    patient,
+    formFieldValidators,
+    formJson,
+    methods: { setValue },
+    updateFormField,
+    setForm,
+  } = context;
+  // handle fields
+  if (field.fieldDependents) {
+    field.fieldDependents.forEach((dep) => {
+      const dependent = formFields.find((f) => f.id == dep);
+      // evaluate calculated value
+      if (dependent.questionOptions.calculate?.calculateExpression) {
+        evaluateAsyncExpression(
+          dependent.questionOptions.calculate.calculateExpression,
+          { value: dependent, type: 'field' },
+          formFields,
+          values,
+          {
+            mode: sessionMode,
+            patient,
+          },
+        ).then((result) => {
+          setValue(dependent.id, result);
+        });
+      }
+      // evaluate hide
+      if (dependent.hide) {
+        evaluateHide({ value: dependent, type: 'field' }, formFields, values, sessionMode, patient, evaluateExpression);
+      }
+      // evaluate disabled
+      if (typeof dependent.disabled === 'object' && dependent.disabled.disableWhenExpression) {
+        dependent.isDisabled = evaluateDisabled(
+          { value: dependent, type: 'field' },
+          formFields,
+          values,
+          sessionMode,
+          patient,
+          evaluateExpression,
+        );
+      }
+      // evaluate conditional required
+      if (typeof dependent.required === 'object' && dependent.required?.type === 'conditionalRequired') {
+        dependent.isRequired = evalConditionalRequired(dependent, formFields, values);
+      }
+      // evaluate conditional answered
+      if (dependent.validators?.some((validator) => validator.type === 'conditionalAnswered')) {
+        const fieldValidatorConfig = dependent.validators?.find(
+          (validator) => validator.type === 'conditionalAnswered',
+        );
+
+        const validationResults = formFieldValidators['conditionalAnswered'].validate(
+          dependent,
+          dependent.meta.submission?.newValue,
+          {
+            ...fieldValidatorConfig,
+            expressionContext: { patient, mode: sessionMode },
+            values,
+            formFields,
+          },
+        );
+        dependent.meta.submission = { ...dependent.meta.submission, errors: validationResults };
+      }
+      // evaluate hide for answers
+      dependent?.questionOptions.answers
+        ?.filter((answer) => !isEmpty(answer.hide?.hideWhenExpression))
+        .forEach((answer) => {
+          answer.isHidden = evaluateExpression(
+            answer.hide?.hideWhenExpression,
+            { value: dependent, type: 'field' },
+            formFields,
+            values,
+            {
+              mode: sessionMode,
+              patient,
+            },
+          );
+        });
+      // evaluate disabled
+      dependent?.questionOptions.answers
+        ?.filter((answer) => !isEmpty(answer.disable?.isDisabled))
+        .forEach((answer) => {
+          answer.disable.isDisabled = evaluateExpression(
+            answer.disable?.disableWhenExpression,
+            { value: dependent, type: 'field' },
+            formFields,
+            values,
+            {
+              mode: sessionMode,
+              patient,
+            },
+          );
+        });
+      // evaluate readonly
+      if (!dependent.isHidden && dependent.meta.readonlyExpression) {
+        dependent.readonly = evaluateExpression(
+          dependent.meta.readonlyExpression,
+          { value: dependent, type: 'field' },
+          formFields,
+          values,
+          {
+            mode: sessionMode,
+            patient,
+          },
+        );
+      }
+      // evaluate repeat limit
+      if (hasRendering(dependent, 'repeating') && !isEmpty(dependent.questionOptions.repeatOptions?.limitExpression)) {
+        dependent.questionOptions.repeatOptions.limit = evaluateExpression(
+          dependent.questionOptions.repeatOptions?.limitExpression,
+          { value: dependent, type: 'field' },
+          formFields,
+          values,
+          {
+            mode: sessionMode,
+            patient,
+          },
+        );
+      }
+      updateFormField(dependent);
+    });
+  }
+
+  let shouldUpdateForm = false;
+
+  // handle sections
+  if (field.sectionDependents) {
+    field.sectionDependents.forEach((sectionId) => {
+      for (let i = 0; i < formJson.pages.length; i++) {
+        const section = formJson.pages[i].sections.find((section) => section.label == sectionId);
+        if (section) {
+          evaluateHide(
+            { value: section, type: 'section' },
+            formFields,
+            values,
+            sessionMode,
+            patient,
+            evaluateExpression,
+          );
+          if (isTrue(section.isHidden)) {
+            section.questions.forEach((field) => {
+              field.isParentHidden = true;
+            });
+          }
+          shouldUpdateForm = true;
+          break;
+        }
+      }
+    });
+  }
+
+  // handle pages
+  if (field.pageDependents) {
+    field.pageDependents?.forEach((dep) => {
+      const dependent = formJson.pages.find((f) => f.label == dep);
+      evaluateHide({ value: dependent, type: 'page' }, formFields, values, sessionMode, patient, evaluateExpression);
+      if (isTrue(dependent.isHidden)) {
+        dependent.sections.forEach((section) => {
+          section.questions.forEach((field) => {
+            field.isParentHidden = true;
+          });
+        });
+      }
+      shouldUpdateForm = true;
+    });
+
+    if (shouldUpdateForm) {
+      setForm({ ...formJson });
+    }
+  }
+}