@olaboot/esm-form-engine-lib 4.1.0

package/src/provider/form-factory-provider.tsx

@@ -0,0 +1,211 @@
+import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  showSnackbar,
+  type LayoutType,
+  type OpenmrsResource,
+  type SnackbarDescriptor,
+  type Visit,
+  useLayoutType,
+} from '@openmrs/esm-framework';
+
+import { EncounterFormProcessor } from '../processors/encounter/encounter-form-processor';
+import { processPostSubmissionActions, validateForm } from './form-factory-helper';
+import { type FormContextProps } from './form-provider';
+import { type FormField, type FormSchema, type SessionMode } from '../types';
+import { type FormProcessorConstructor } from '../processors/form-processor';
+import { useExternalFormAction } from '../hooks/useExternalFormAction';
+import { usePostSubmissionActions } from '../hooks/usePostSubmissionActions';
+
+interface FormFactoryProviderContextProps {
+  patient: fhir.Patient;
+  sessionMode: SessionMode;
+  sessionDate: Date;
+  formJson: FormSchema;
+  formProcessors: Record<string, FormProcessorConstructor>;
+  layoutType: LayoutType;
+  workspaceLayout: 'minimized' | 'maximized';
+  visit: Visit;
+  location: OpenmrsResource;
+  provider: OpenmrsResource;
+  isFormExpanded: boolean;
+  registerForm: (formId: string, isSubForm: boolean, context: FormContextProps) => void;
+  handleConfirmQuestionDeletion?: (question: Readonly<FormField>) => Promise<void>;
+  setIsFormDirty: (isFormDirty: boolean) => void;
+}
+
+interface FormFactoryProviderProps {
+  patient: fhir.Patient;
+  patientUUID: string;
+  sessionMode: SessionMode;
+  sessionDate: Date;
+  formJson: FormSchema;
+  workspaceLayout: 'minimized' | 'maximized';
+  location: OpenmrsResource;
+  provider: OpenmrsResource;
+  visit: Visit;
+  isFormExpanded: boolean;
+  children: React.ReactNode;
+  formSubmissionProps: {
+    isSubmitting: boolean;
+    setIsSubmitting: (isSubmitting: boolean) => void;
+    onSubmit: (data: any) => void;
+    onError: (error: any) => void;
+    handleClose: () => void;
+  };
+  hideFormCollapseToggle: () => void;
+  handleConfirmQuestionDeletion?: (question: Readonly<FormField>) => Promise<void>;
+  setIsFormDirty: (isFormDirty: boolean) => void;
+}
+
+const FormFactoryProviderContext = createContext<FormFactoryProviderContextProps | undefined>(undefined);
+
+export const FormFactoryProvider: React.FC<FormFactoryProviderProps> = ({
+  patient,
+  patientUUID,
+  sessionMode,
+  sessionDate,
+  formJson,
+  workspaceLayout,
+  location,
+  provider,
+  visit,
+  isFormExpanded = true,
+  children,
+  formSubmissionProps,
+  hideFormCollapseToggle,
+  handleConfirmQuestionDeletion,
+  setIsFormDirty,
+}) => {
+  const { t } = useTranslation();
+  const rootForm = useRef<FormContextProps>();
+  const subForms = useRef<Record<string, FormContextProps>>({});
+  const layoutType = useLayoutType();
+  const { isSubmitting, setIsSubmitting, onSubmit, onError, handleClose } = formSubmissionProps;
+  const [isValidating, setIsValidating] = useState(false);
+  const postSubmissionHandlers = usePostSubmissionActions(formJson.postSubmissionActions);
+
+  const abortController = new AbortController();
+
+  const registerForm = useCallback((formId: string, isSubForm: boolean, context: FormContextProps) => {
+    if (isSubForm) {
+      subForms.current[formId] = context;
+    } else {
+      rootForm.current = context;
+    }
+  }, []);
+
+  // TODO: Manage and load processors from the registry
+  const formProcessors = useRef<Record<string, FormProcessorConstructor>>({
+    EncounterFormProcessor: EncounterFormProcessor,
+  });
+
+  const validateAllForms = useCallback(() => {
+    const forms = [rootForm.current, ...Object.values(subForms.current)];
+    const isValid = forms.every((formContext) => validateForm(formContext));
+    return {
+      forms: forms,
+      isValid: isValid,
+    };
+  }, []);
+
+  useExternalFormAction({
+    patientUuid: patientUUID,
+    formUuid: formJson?.uuid,
+    setIsSubmitting: setIsSubmitting,
+    setIsValidating: setIsValidating,
+  });
+
+  useEffect(() => {
+    if (isValidating) {
+      validateAllForms();
+      setIsValidating(false);
+    }
+  }, [isValidating, validateAllForms]);
+
+  useEffect(() => {
+    if (isSubmitting) {
+      // TODO: find a dynamic way of managing the form processing order
+      // validate all forms
+      const { forms, isValid } = validateAllForms();
+      if (isValid) {
+        Promise.all(forms.map((formContext) => formContext.processor.processSubmission(formContext, abortController)))
+          .then(async (results) => {
+            formSubmissionProps.setIsSubmitting(false);
+            if (sessionMode === 'edit') {
+              showSnackbar({
+                title: t('updatedRecord', 'Record updated'),
+                subtitle: t('updatedRecordDescription', 'The patient encounter was updated'),
+                kind: 'success',
+                isLowContrast: true,
+              });
+            } else {
+              showSnackbar({
+                title: t('submittedForm', 'Form submitted'),
+                subtitle: t('submittedFormDescription', 'Form submitted successfully'),
+                kind: 'success',
+                isLowContrast: true,
+              });
+            }
+            if (postSubmissionHandlers) {
+              await processPostSubmissionActions(postSubmissionHandlers, results, patient, sessionMode, t);
+            }
+            hideFormCollapseToggle();
+            if (onSubmit) {
+              onSubmit(results);
+            } else {
+              handleClose();
+            }
+          })
+          .catch((errorObject: Error | SnackbarDescriptor) => {
+            setIsSubmitting(false);
+            if (errorObject instanceof Error) {
+              showSnackbar({
+                title: t('errorProcessingFormSubmission', 'Error processing form submission'),
+                kind: 'error',
+                subtitle: errorObject.message,
+                isLowContrast: false,
+              });
+            } else {
+              showSnackbar(errorObject);
+            }
+          });
+      } else {
+        setIsSubmitting(false);
+      }
+    }
+    return () => {
+      abortController.abort();
+    };
+  }, [isSubmitting, validateAllForms]);
+
+  return (
+    <FormFactoryProviderContext.Provider
+      value={{
+        patient,
+        sessionMode,
+        sessionDate,
+        formJson,
+        formProcessors: formProcessors.current,
+        layoutType,
+        workspaceLayout,
+        visit,
+        location,
+        provider,
+        isFormExpanded,
+        registerForm,
+        handleConfirmQuestionDeletion,
+        setIsFormDirty,
+      }}>
+      {formProcessors.current && children}
+    </FormFactoryProviderContext.Provider>
+  );
+};
+
+export const useFormFactory = () => {
+  const context = useContext(FormFactoryProviderContext);
+  if (!context) {
+    throw new Error('useFormFactoryContext must be used within a FormFactoryProvider');
+  }
+  return context;
+};

package/src/provider/form-provider.tsx

@@ -0,0 +1,39 @@
+import React, { type ReactNode } from 'react';
+import { type UseFormReturn } from 'react-hook-form';
+import { type FormProcessorContextProps } from '../types';
+import { type FormSchema, type FormField } from '../types/schema';
+
+export interface FormContextProps extends FormProcessorContextProps {
+  methods: UseFormReturn<any>;
+  workspaceLayout: 'minimized' | 'maximized';
+  isSubmitting?: boolean;
+  deletedFields: FormField[];
+  getFormField?: (field: string) => FormField;
+  addFormField?: (field: FormField) => void;
+  updateFormField?: (field: FormField) => void;
+  removeFormField?: (fieldId: string) => void;
+  addInvalidField?: (field: FormField) => void;
+  removeInvalidField?: (fieldId: string) => void;
+  setInvalidFields?: (fields: FormField[]) => void;
+  setForm?: (formJson: FormSchema) => void;
+  setDeletedFields?: (fields: FormField[]) => void;
+}
+
+export interface FormProviderProps extends FormContextProps {
+  children: ReactNode;
+}
+
+export const FormContext = React.createContext<FormContextProps | undefined>(undefined);
+
+export const FormProvider = ({ methods, children, ...contextProps }: FormProviderProps) => {
+  return <FormContext.Provider value={{ ...contextProps, methods }}>{children}</FormContext.Provider>;
+};
+
+export const useFormProviderContext = () => {
+  const context = React.useContext(FormContext);
+  if (!context) {
+    throw new Error('FormProviderContext must be used within a FormProviderContext');
+  }
+
+  return context;
+};

package/src/registry/inbuilt-components/InbuiltPostSubmissionActions.ts

@@ -0,0 +1,13 @@
+import { type PostSubmissionAction } from '../../types';
+import { type ComponentRegistration } from '../registry';
+
+export const inbuiltPostSubmissionActions: Array<ComponentRegistration<PostSubmissionAction>> = [
+  {
+    name: 'ProgramEnrollmentSubmissionAction',
+    load: () => import('../../post-submission-actions/program-enrollment-action'),
+  },
+  {
+    name: 'MarkPatientAsDeceasedAction',
+    load: () => import('../../post-submission-actions/mark-patient-deceased-action'),
+  },
+];

package/src/registry/inbuilt-components/control-templates.ts

@@ -0,0 +1,57 @@
+import { type ControlTemplate } from '../../types';
+
+export const controlTemplates: Array<ControlTemplate> = [
+  {
+    name: 'drug',
+    datasource: {
+      name: 'drug_datasource',
+      config: {
+        class: '8d490dfc-c2cc-11de-8d13-0010c6dffd0f',
+      },
+    },
+  },
+  {
+    name: 'select-concept-answers',
+    datasource: {
+      name: 'select_concept_answers_datasource',
+      config: {
+        concept: '',
+      },
+    },
+  },
+  {
+    name: 'encounter-provider',
+    datasource: {
+      name: 'provider_datasource',
+    },
+  },
+  {
+    name: 'encounter-role',
+    datasource: {
+      name: 'encounter_role_datasource',
+    },
+  },
+  {
+    name: 'encounter-location',
+    datasource: {
+      name: 'location_datasource',
+    },
+  },
+  {
+    name: 'problem',
+    datasource: {
+      name: 'problem_datasource',
+      config: {
+        class: [
+          '8d4918b0-c2cc-11de-8d13-0010c6dffd0f',
+          '8d492954-c2cc-11de-8d13-0010c6dffd0f',
+          '8d492b2a-c2cc-11de-8d13-0010c6dffd0f',
+        ],
+      },
+    },
+  },
+];
+
+export const getControlTemplate = (name: string) => {
+  return controlTemplates.find((template) => template.name === name);
+};

package/src/registry/inbuilt-components/inbuiltControls.ts

@@ -0,0 +1,99 @@
+import ObsGroup from '../../components/group/obs-group.component';
+import ContentSwitcher from '../../components/inputs/content-switcher/content-switcher.component';
+import DateField from '../../components/inputs/date/date.component';
+import FixedValue from '../../components/inputs/fixed-value/fixed-value.component';
+import Markdown from '../../components/inputs/markdown/markdown.component';
+import MultiSelect from '../../components/inputs/multi-select/multi-select.component';
+import NumberField from '../../components/inputs/number/number.component';
+import Radio from '../../components/inputs/radio/radio.component';
+import Dropdown from '../../components/inputs/select/dropdown.component';
+import TextArea from '../../components/inputs/text-area/text-area.component';
+import TextField from '../../components/inputs/text/text.component';
+import Toggle from '../../components/inputs/toggle/toggle.component';
+import UiSelectExtended from '../../components/inputs/ui-select-extended/ui-select-extended.component';
+import WorkspaceLauncher from '../../components/inputs/workspace-launcher/workspace-launcher.component';
+import Repeat from '../../components/repeat/repeat.component';
+import File from '../../components/inputs/file/file.component';
+import { type FormFieldInputProps } from '../../types';
+import { type RegistryItem } from '../registry';
+import { controlTemplates } from './control-templates';
+import { templateToComponentMap } from './template-component-map';
+
+/**
+ * @internal
+ */
+
+export const inbuiltControls: Array<RegistryItem<React.ComponentType<FormFieldInputProps>>> = [
+  {
+    name: 'text',
+    component: TextField,
+  },
+  {
+    name: 'textarea',
+    component: TextArea,
+  },
+  {
+    name: 'select',
+    component: Dropdown,
+  },
+  {
+    name: 'checkbox',
+    component: MultiSelect,
+  },
+  {
+    name: 'radio',
+    component: Radio,
+  },
+  {
+    name: 'date',
+    component: DateField,
+  },
+  {
+    name: 'datetime',
+    component: DateField,
+  },
+  {
+    name: 'number',
+    component: NumberField,
+  },
+  {
+    name: 'content-switcher',
+    component: ContentSwitcher,
+  },
+  {
+    name: 'toggle',
+    component: Toggle,
+  },
+  {
+    name: 'workspace-launcher',
+    component: WorkspaceLauncher,
+  },
+  {
+    name: 'group',
+    component: ObsGroup,
+  },
+  {
+    name: 'repeating',
+    component: Repeat,
+  },
+  {
+    name: 'markdown',
+    component: Markdown,
+  },
+  {
+    name: 'fixed-value',
+    component: FixedValue,
+  },
+  {
+    name: 'ui-select-extended',
+    component: UiSelectExtended,
+  },
+  {
+    name: 'file',
+    component: File,
+  },
+  ...controlTemplates.map((template) => ({
+    name: template.name,
+    component: templateToComponentMap.find((component) => component.name === template.name).baseControlComponent,
+  })),
+];

package/src/registry/inbuilt-components/inbuiltDataSources.ts

@@ -0,0 +1,41 @@
+import { type DataSource } from '../../types';
+import { type RegistryItem } from '../registry';
+import { ConceptDataSource } from '../../datasources/concept-data-source';
+import { LocationDataSource } from '../../datasources/location-data-source';
+import { ProviderDataSource } from '../../datasources/provider-datasource';
+import { SelectConceptAnswersDatasource } from '../../datasources/select-concept-answers-datasource';
+import { EncounterRoleDataSource } from '../../datasources/encounter-role-datasource';
+
+/**
+ * @internal
+ */
+export const inbuiltDataSources: Array<RegistryItem<DataSource<any>>> = [
+  {
+    name: 'location_datasource',
+    component: new LocationDataSource(),
+  },
+  {
+    name: 'drug_datasource',
+    component: new ConceptDataSource(),
+  },
+  {
+    name: 'problem_datasource',
+    component: new ConceptDataSource(),
+  },
+  {
+    name: 'select_concept_answers_datasource',
+    component: new SelectConceptAnswersDatasource(),
+  },
+  {
+    name: 'provider_datasource',
+    component: new ProviderDataSource(),
+  },
+  {
+    name: 'encounter_role_datasource',
+    component: new EncounterRoleDataSource(),
+  },
+];
+
+export const validateInbuiltDatasource = (name: string) => {
+  return inbuiltDataSources.some((datasource) => datasource.name === name);
+};

package/src/registry/inbuilt-components/inbuiltFieldValueAdapters.ts

@@ -0,0 +1,74 @@
+import { type RegistryItem } from '../..';
+import { ControlAdapter } from '../../adapters/control-adapter';
+import { EncounterDatetimeAdapter } from '../../adapters/encounter-datetime-adapter';
+import { EncounterLocationAdapter } from '../../adapters/encounter-location-adapter';
+import { EncounterProviderAdapter } from '../../adapters/encounter-provider-adapter';
+import { EncounterRoleAdapter } from '../../adapters/encounter-role-adapter';
+import { InlineDateAdapter } from '../../adapters/inline-date-adapter';
+import { ObsAdapter } from '../../adapters/obs-adapter';
+import { ObsCommentAdapter } from '../../adapters/obs-comment-adapter';
+import { OrdersAdapter } from '../../adapters/orders-adapter';
+import { PatientIdentifierAdapter } from '../../adapters/patient-identifier-adapter';
+import { PersonAttributeAdapter } from '../../adapters/person-attribute-adapter';
+import { ProgramStateAdapter } from '../../adapters/program-state-adapter';
+import { EncounterDiagnosisAdapter } from '../../adapters/encounter-diagnosis-adapter';
+import { type FormFieldValueAdapter } from '../../types';
+
+export const inbuiltFieldValueAdapters: RegistryItem<FormFieldValueAdapter>[] = [
+  {
+    type: 'obs',
+    component: ObsAdapter,
+  },
+  {
+    type: 'control',
+    component: ControlAdapter,
+  },
+  {
+    type: 'obsGroup',
+    component: ObsAdapter,
+  },
+  {
+    type: 'testOrder',
+    component: OrdersAdapter,
+  },
+  {
+    type: 'programState',
+    component: ProgramStateAdapter,
+  },
+  {
+    type: 'encounterLocation',
+    component: EncounterLocationAdapter,
+  },
+  {
+    type: 'encounterProvider',
+    component: EncounterProviderAdapter,
+  },
+  {
+    type: 'encounterRole',
+    component: EncounterRoleAdapter,
+  },
+  {
+    type: 'obsComment',
+    component: ObsCommentAdapter,
+  },
+  {
+    type: 'encounterDatetime',
+    component: EncounterDatetimeAdapter,
+  },
+  {
+    type: 'inlineDate',
+    component: InlineDateAdapter,
+  },
+  {
+    type: 'patientIdentifier',
+    component: PatientIdentifierAdapter,
+  },
+  {
+    type: 'personAttribute',
+    component: PersonAttributeAdapter,
+  },
+  {
+    type: 'diagnosis',
+    component: EncounterDiagnosisAdapter,
+  },
+];

package/src/registry/inbuilt-components/inbuiltTransformers.ts

@@ -0,0 +1,10 @@
+import { DefaultFormSchemaTransformer } from '../../transformers/default-schema-transformer';
+import { type FormSchemaTransformer } from '../../types';
+import { type RegistryItem } from '../registry';
+
+export const inbuiltFormTransformers: Array<RegistryItem<FormSchemaTransformer>> = [
+  {
+    name: 'DefaultFormSchemaTransformer',
+    component: DefaultFormSchemaTransformer,
+  },
+];

package/src/registry/inbuilt-components/inbuiltValidators.ts

@@ -0,0 +1,33 @@
+import { conditionalAnsweredValidator } from '../../validators/conditional-answered-validator';
+import { type FormFieldValidator } from '../../types';
+import { DateValidator } from '../../validators/date-validator';
+import { DefaultValueValidator } from '../../validators/default-value-validator';
+import { FieldValidator } from '../../validators/form-validator';
+import { ExpressionValidator } from '../../validators/js-expression-validator';
+import { type RegistryItem } from '../registry';
+
+/**
+ * @internal
+ */
+export const inbuiltValidators: Array<RegistryItem<FormFieldValidator>> = [
+  {
+    name: 'default_value',
+    component: DefaultValueValidator,
+  },
+  {
+    name: 'form_field',
+    component: FieldValidator,
+  },
+  {
+    name: 'date',
+    component: DateValidator,
+  },
+  {
+    name: 'js_expression',
+    component: ExpressionValidator,
+  },
+  {
+    name: 'conditionalAnswered',
+    component: conditionalAnsweredValidator,
+  },
+];

package/src/registry/inbuilt-components/template-component-map.ts

@@ -0,0 +1,28 @@
+import UiSelectExtended from '../../components/inputs/ui-select-extended/ui-select-extended.component';
+
+export const templateToComponentMap = [
+  {
+    name: 'drug',
+    baseControlComponent: UiSelectExtended,
+  },
+  {
+    name: 'problem',
+    baseControlComponent: UiSelectExtended,
+  },
+  {
+    name: 'encounter-provider',
+    baseControlComponent: UiSelectExtended,
+  },
+  {
+    name: 'encounter-location',
+    baseControlComponent: UiSelectExtended,
+  },
+  {
+    name: 'select-concept-answers',
+    baseControlComponent: UiSelectExtended,
+  },
+  {
+    name: 'encounter-role',
+    baseControlComponent: UiSelectExtended,
+  },
+];