@openmrs/esm-form-engine-lib 2.1.0-pre.1476 → 2.1.0-pre.1485

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-engine-lib",
-  "version": "2.1.0-pre.1476",
+  "version": "2.1.0-pre.1485",
   "description": "React Form Engine for O3",
   "browser": "dist/openmrs-esm-form-engine-lib.js",
   "main": "src/index.ts",

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

@@ -118,6 +118,7 @@ const DateField: React.FC<FormFieldInputProps> = ({ field, value: dateValue, err
                 disabled={field.datePickerFormat === 'timer' ? field.isDisabled : !dateValue ? true : false}
                 invalid={errors.length > 0}
                 invalidText={errors[0]?.message}
+                readOnly={isTrue(field.readonly)}
                 warning={warnings.length > 0}
                 warningText={warnings[0]?.message}
                 value={

package/src/components/inputs/multi-select/multi-select.component.tsx

@@ -25,6 +25,7 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
       label: answer.label,
       key: index,
       disabled: answer.disable?.isDisabled,
+      readonly: isTrue(field.readonly),
     }));
 
   const initiallySelectedQuestionItems = useMemo(() => {
@@ -110,10 +111,10 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
                 invalidText={errors[0]?.message}
                 warn={warnings.length > 0}
                 warnText={warnings[0]?.message}
-                readOnly={field.readonly}
+                readOnly={isTrue(field.readonly)}
               />
             ) : (
-              <CheckboxGroup legendText={label} name={field.id}>
+              <CheckboxGroup legendText={label} name={field.id} readOnly={isTrue(field.readonly)}>
                 {field.questionOptions.answers?.map((value, index) => {
                   return (
                     <Checkbox
@@ -129,6 +130,7 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
                       checked={initiallyCheckedQuestionItems.some((item) => item === value.concept)}
                       onBlur={onblur}
                       disabled={value.disable?.isDisabled}
+                      readOnly={isTrue(field.readonly)}
                     />
                   );
                 })}

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

@@ -65,7 +65,7 @@ const NumberField: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
           hideSteppers={true}
           onWheel={(e) => e.target.blur()}
           disabled={field.isDisabled}
-          readOnly={field.readonly}
+          readOnly={isTrue(field.readonly)}
           className={classNames(styles.controlWidthConstrained, styles.boldedLabel)}
           warn={warnings.length > 0}
           warnText={warnings[0]?.message}

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

@@ -42,6 +42,7 @@ const Radio: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings,
           name={field.id}
           valueSelected={value}
           onChange={handleChange}
+          readOnly={isTrue(field.readonly)}
           orientation={field.questionOptions?.orientation || 'vertical'}>
           {field.questionOptions.answers
             .filter((answer) => !answer.isHidden)

package/src/components/inputs/select/dropdown.component.tsx

@@ -69,7 +69,7 @@ const Dropdown: React.FC<FormFieldInputProps> = ({ field, value, errors, warning
             selectedItem={isEmpty(value) ? NullSelectOption : value}
             onChange={handleChange}
             disabled={field.isDisabled}
-            readOnly={field.readonly}
+            readOnly={isTrue(field.readonly)}
             invalid={errors.length > 0}
             invalidText={errors[0]?.message}
             warn={warnings.length > 0}

package/src/components/inputs/text-area/text-area.component.tsx

@@ -48,7 +48,7 @@ const TextArea: React.FC<FormFieldInputProps> = ({ field, value, errors, warning
             value={value || ''}
             rows={field.questionOptions.rows || 4}
             disabled={field.isDisabled}
-            readOnly={field.readonly}
+            readOnly={isTrue(field.readonly)}
             invalid={errors.length > 0}
             invalidText={errors[0]?.message}
             warn={warnings.length > 0}

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

@@ -56,7 +56,7 @@ const Toggle: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings,
           onToggle={handleChange}
           toggled={!!value}
           disabled={field.isDisabled}
-          readOnly={field.readonly}
+          readOnly={isTrue(field.readonly)}
         />
       </div>
     )

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

@@ -154,7 +154,7 @@ const UiSelectExtended: React.FC<FormFieldInputProps> = ({ field, errors, warnin
               setFieldValue(selectedItem?.uuid);
             }}
             disabled={field.isDisabled}
-            readOnly={field.readonly}
+            readOnly={isTrue(field.readonly)}
             invalid={errors.length > 0}
             invalidText={errors.length && errors[0].message}
             onInputChange={(value) => {

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

@@ -4,6 +4,7 @@ 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 { isTrue } from '../../../utils/boolean-utils';
 import styles from './workspace-launcher.scss';
 
 const WorkspaceLauncher: React.FC<FormFieldInputProps> = ({ field }) => {
@@ -27,7 +28,7 @@ const WorkspaceLauncher: React.FC<FormFieldInputProps> = ({ field }) => {
       <div>
         <div className={styles.label}>{t(field.label)}</div>
         <div className={styles.workspaceButton}>
-          <Button onClick={handleLaunchWorkspace}>{field.questionOptions?.buttonLabel ?? t('launchWorkspace')}</Button>
+          <Button disabled={isTrue(field.readonly)}  onClick={handleLaunchWorkspace}>{field.questionOptions?.buttonLabel ?? t('launchWorkspace')}</Button>
         </div>
       </div>
     )

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

@@ -113,6 +113,7 @@ const FormProcessorFactory = ({
         <FormRenderer
           processorContext={processorContext}
           initialValues={initialValues}
+          isSubForm={isSubForm}
           setIsLoadingFormDependencies={setIsLoadingFormDependencies}
         />
       )}

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

@@ -13,10 +13,16 @@ import { useFormStateHelpers } from '../../../hooks/useFormStateHelpers';
 export type FormRendererProps = {
   processorContext: FormProcessorContextProps;
   initialValues: Record<string, any>;
+  isSubForm: boolean;
   setIsLoadingFormDependencies: (isLoading: boolean) => void;
 };
 
-export const FormRenderer = ({ processorContext, initialValues, setIsLoadingFormDependencies }: FormRendererProps) => {
+export const FormRenderer = ({
+  processorContext,
+  initialValues,
+  isSubForm,
+  setIsLoadingFormDependencies,
+}: FormRendererProps) => {
   const { evaluatedFields, evaluatedFormJson } = useEvaluateFormFieldExpressions(initialValues, processorContext);
   const { registerForm, setIsFormDirty, workspaceLayout } = useFormFactory();
   const methods = useForm({
@@ -64,8 +70,8 @@ export const FormRenderer = ({ processorContext, initialValues, setIsLoadingForm
   }, [processorContext, workspaceLayout, methods, formFields, formJson, invalidFields]);
 
   useEffect(() => {
-    registerForm(formJson.name, context);
-  }, [formJson.name, context]);
+    registerForm(formJson.name, isSubForm, context);
+  }, [formJson.name, isSubForm, context]);
 
   useEffect(() => {
     setIsFormDirty(isDirty);
@@ -91,12 +97,7 @@ export const FormRenderer = ({ processorContext, initialValues, setIsLoadingForm
             />
           );
         }
-        return (
-          <PageRenderer
-            key={page.label}
-            page={page}
-          />
-        );
+        return <PageRenderer key={page.label} page={page} />;
       })}
     </FormProvider>
   );

package/src/form-engine.component.tsx

@@ -35,7 +35,6 @@ interface FormEngineProps {
 // TODOs:
 // - Implement sidebar
 // - Conditionally render the button set
-// - Patient banner
 const FormEngine = ({
   formJson,
   patientUUID,

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

@@ -26,7 +26,7 @@ interface FormFactoryProviderContextProps {
   visit: OpenmrsResource;
   location: OpenmrsResource;
   provider: OpenmrsResource;
-  registerForm: (formId: string, context: FormContextProps) => void;
+  registerForm: (formId: string, isSubForm: boolean, context: FormContextProps) => void;
   setCurrentPage: (page: string) => void;
   handleConfirmQuestionDeletion?: (question: Readonly<FormField>) => Promise<void>;
   setIsFormDirty: (isFormDirty: boolean) => void;
@@ -80,11 +80,11 @@ export const FormFactoryProvider: React.FC<FormFactoryProviderProps> = ({
 
   const abortController = new AbortController();
 
-  const registerForm = useCallback((formId: string, context: FormContextProps) => {
-    if (!rootForm.current) {
-      rootForm.current = context;
-    } else if (rootForm.current.formJson.name !== formId) {
+  const registerForm = useCallback((formId: string, isSubForm: boolean, context: FormContextProps) => {
+    if (isSubForm) {
       subForms.current[formId] = context;
+    } else {
+      rootForm.current = context;
     }
   }, []);