@openmrs/esm-form-engine-lib 2.1.0-pre.1565 → 2.1.0-pre.1577

package/src/hooks/useFormWorkspaceSize.ts

@@ -0,0 +1,52 @@
+import { useLayoutEffect, useMemo, useState } from 'react';
+import { pxToRem } from '../utils/common-utils';
+
+/**
+ * The width of the supported workspace variants in rem
+ */
+const narrowWorkspaceWidth = 26.25;
+const widerWorkspaceWidth = 32.25;
+const extraWideWorkspaceWidth = 48.25;
+
+type WorkspaceSize = 'narrow' | 'wider' | 'extra-wide' | 'ultra-wide';
+
+/**
+ * This hook evaluates the size of the current workspace based on the width of the container element
+ */
+export function useFormWorkspaceSize(rootRef: React.RefObject<HTMLDivElement>): WorkspaceSize {
+  // width in rem
+  const [containerWidth, setContainerWidth] = useState(0);
+  const size = useMemo(() => {
+    if (containerWidth <= narrowWorkspaceWidth) {
+      return 'narrow';
+    } else if (containerWidth <= widerWorkspaceWidth) {
+      return 'wider';
+    } else if (containerWidth <= extraWideWorkspaceWidth) {
+      return 'extra-wide';
+    } else {
+      return 'ultra-wide';
+    }
+  }, [containerWidth]);
+
+  useLayoutEffect(() => {
+    const handleResize = () => {
+      const containerWidth = rootRef.current?.parentElement?.offsetWidth;
+      const rootFontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
+      containerWidth && setContainerWidth(pxToRem(containerWidth, rootFontSize));
+    };
+    handleResize();
+    const resizeObserver = new ResizeObserver((entries) => {
+      handleResize();
+    });
+
+    if (rootRef.current?.parentElement) {
+      resizeObserver.observe(rootRef.current?.parentElement);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [rootRef]);
+
+  return size;
+}

package/src/lifecycle.ts

@@ -1,3 +1,4 @@
+import { pageObserver } from './components/sidebar/page-observer';
 import setupFormEngineLibI18n from './setupI18n';
 import { type FormFieldValueAdapter } from './types';
 
@@ -30,4 +31,5 @@ export function teardown() {
     }
   });
   formFieldAdapters.clear();
+  pageObserver.clear();
 }

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

@@ -28,7 +28,6 @@ interface FormFactoryProviderContextProps {
   provider: OpenmrsResource;
   isFormExpanded: boolean;
   registerForm: (formId: string, isSubForm: boolean, context: FormContextProps) => void;
-  setCurrentPage: (page: string) => void;
   handleConfirmQuestionDeletion?: (question: Readonly<FormField>) => Promise<void>;
   setIsFormDirty: (isFormDirty: boolean) => void;
 }
@@ -52,7 +51,6 @@ interface FormFactoryProviderProps {
     handleClose: () => void;
   };
   hideFormCollapseToggle: () => void;
-  setCurrentPage: (page: string) => void;
   handleConfirmQuestionDeletion?: (question: Readonly<FormField>) => Promise<void>;
   setIsFormDirty: (isFormDirty: boolean) => void;
 }
@@ -72,7 +70,6 @@ export const FormFactoryProvider: React.FC<FormFactoryProviderProps> = ({
   children,
   formSubmissionProps,
   hideFormCollapseToggle,
-  setCurrentPage,
   handleConfirmQuestionDeletion,
   setIsFormDirty,
 }) => {
@@ -170,7 +167,6 @@ export const FormFactoryProvider: React.FC<FormFactoryProviderProps> = ({
         provider,
         isFormExpanded,
         registerForm,
-        setCurrentPage,
         handleConfirmQuestionDeletion,
         setIsFormDirty,
       }}>

package/src/transformers/default-schema-transformer.test.ts

@@ -9,6 +9,7 @@ const expectedTransformedSchema = {
     {
       label: 'Page 1',
       readonly: false,
+      id: 'page-Page1-0',
       sections: [
         {
           label: 'Section 1',
@@ -33,6 +34,7 @@ const expectedTransformedSchema = {
               ],
               meta: {
                 submission: null,
+                pageId: 'page-Page1-0',
               },
             },
             {
@@ -53,6 +55,7 @@ const expectedTransformedSchema = {
               ],
               meta: {
                 submission: null,
+                pageId: 'page-Page1-0',
               },
             },
             {
@@ -73,6 +76,7 @@ const expectedTransformedSchema = {
               ],
               meta: {
                 submission: null,
+                pageId: 'page-Page1-0',
               },
             },
             {
@@ -100,11 +104,13 @@ const expectedTransformedSchema = {
                   ],
                   meta: {
                     submission: null,
+                    pageId: 'page-Page1-0',
                   },
                 },
               ],
               meta: {
                 submission: null,
+                pageId: 'page-Page1-0',
               },
             },
             {
@@ -141,6 +147,7 @@ const expectedTransformedSchema = {
               ],
               meta: {
                 submission: null,
+                pageId: 'page-Page1-0',
               },
             },
           ],

package/src/transformers/default-schema-transformer.ts

@@ -1,4 +1,4 @@
-import { type FormField, type FormSchemaTransformer, type FormSchema, type RenderType } from '../types';
+import { type FormField, type FormSchema, type FormSchemaTransformer, type RenderType, type FormPage } from '../types';
 import { isTrue } from '../utils/boolean-utils';
 import { hasRendering } from '../utils/common-utils';
 
@@ -7,7 +7,9 @@ export type RenderTypeExtended = 'multiCheckbox' | 'numeric' | RenderType;
 export const DefaultFormSchemaTransformer: FormSchemaTransformer = {
   transform: (form: FormSchema) => {
     parseBooleanTokenIfPresent(form, 'readonly');
-    form.pages.forEach((page) => {
+    form.pages.forEach((page, index) => {
+      const label = page.label ?? '';
+      page.id = `page-${label.replace(/\s/g, '')}-${index}`;
       parseBooleanTokenIfPresent(page, 'readonly');
       if (page.sections) {
         page.sections.forEach((section) => {
@@ -15,7 +17,7 @@ export const DefaultFormSchemaTransformer: FormSchemaTransformer = {
           section.questions = handleQuestionsWithObsComments(section.questions);
           parseBooleanTokenIfPresent(section, 'readonly');
           parseBooleanTokenIfPresent(section, 'isExpanded');
-          section?.questions?.forEach((question, index) => handleQuestion(question, form));
+          section?.questions?.forEach((question, index) => handleQuestion(question, page, form));
         });
       }
     });
@@ -26,7 +28,7 @@ export const DefaultFormSchemaTransformer: FormSchemaTransformer = {
   },
 };
 
-function handleQuestion(question: FormField, form: FormSchema) {
+function handleQuestion(question: FormField, page: FormPage, form: FormSchema) {
   if (question.type === 'programState') {
     const formMeta = form.meta ?? {};
     formMeta.programs = formMeta.programs
@@ -40,8 +42,9 @@ function handleQuestion(question: FormField, form: FormSchema) {
     transformByType(question);
     transformByRendering(question);
     if (question?.questions?.length) {
-      question.questions.forEach((question) => handleQuestion(question, form));
+      question.questions.forEach((question) => handleQuestion(question, page, form));
     }
+    question.meta.pageId = page.id;
   } catch (error) {
     console.error(error);
   }

package/src/types/schema.ts

@@ -42,6 +42,7 @@ export interface FormPage {
     behaviours?: Array<any>;
     form: Omit<FormSchema, 'postSubmissionActions'>;
   };
+  id?: string;
 }
 
 export interface FormSection {
@@ -125,6 +126,7 @@ export interface QuestionMetaProps {
     wasDeleted?: boolean;
   };
   groupId?: string;
+  pageId?: string;
   [anythingElse: string]: any;
 }
 

package/src/utils/common-utils.ts

@@ -89,3 +89,13 @@ export function updateFormSectionReferences(formJson: FormSchema) {
   });
   return { ...formJson };
 }
+
+/**
+ * Converts a px value to a rem value
+ * @param px - The px value to convert
+ * @param fontSize - The font size to use for the conversion
+ * @returns The rem value
+ */
+export function pxToRem(px: number, fontSize: number = 16) {
+  return px / fontSize;
+}

package/src/utils/form-helper.test.ts

@@ -3,11 +3,12 @@ import {
   evaluateConditionalAnswered,
   evaluateFieldReadonlyProp,
   evaluateDisabled,
+  isPageContentVisible,
 } from './form-helper';
 import { DefaultValueValidator } from '../validators/default-value-validator';
 import { type LayoutType } from '@openmrs/esm-framework';
 import { ConceptTrue } from '../constants';
-import { type FormField, type OpenmrsEncounter, type SessionMode } from '../types';
+import { type FormPage, type FormField, type OpenmrsEncounter, type SessionMode } from '../types';
 
 jest.mock('../validators/default-value-validator');
 
@@ -444,4 +445,66 @@ describe('Form Engine Helper', () => {
       );
     });
   });
+
+  describe('isPageContentVisible', () => {
+    it('should return false if the page is hidden', () => {
+      const page = { isHidden: true, sections: [] } as FormPage;
+      expect(isPageContentVisible(page)).toBe(false);
+    });
+
+    it('should return false if all sections are hidden', () => {
+      const page = {
+        isHidden: false,
+        sections: [
+          { isHidden: true, questions: [] },
+          { isHidden: true, questions: [] },
+        ],
+      } as FormPage;
+      expect(isPageContentVisible(page)).toBe(false);
+    });
+
+    it('should return false if all questions in all sections are hidden', () => {
+      const page = {
+        isHidden: false,
+        sections: [
+          { isHidden: false, questions: [{ isHidden: true }, { isHidden: true }] },
+          { isHidden: false, questions: [{ isHidden: true }] },
+        ],
+      } as FormPage;
+      expect(isPageContentVisible(page)).toBe(false);
+    });
+
+    it('should return false when there are no form fields', () => {
+      const page = {
+        isHidden: false,
+        sections: [
+          { isHidden: true, questions: [] },
+          { isHidden: false, questions: [] },
+        ],
+      } as FormPage;
+      expect(isPageContentVisible(page)).toBe(false);
+    });
+
+    it('should return true if at least one question in a section is visible', () => {
+      const page = {
+        isHidden: false,
+        sections: [
+          {
+            isHidden: false,
+            questions: [{ isHidden: true }, { isHidden: false }],
+          },
+          {
+            isHidden: true,
+            questions: [{ isHidden: true }],
+          },
+        ],
+      } as FormPage;
+      expect(isPageContentVisible(page)).toBe(true);
+    });
+
+    it('should return false for an empty page with no sections', () => {
+      const page = { isHidden: false, sections: [] } as FormPage;
+      expect(isPageContentVisible(page)).toBe(false);
+    });
+  });
 });

package/src/utils/form-helper.ts

@@ -163,7 +163,7 @@ export function scrollIntoView(viewId: string, shouldFocus: boolean = false) {
   const currentElement = document.getElementById(viewId);
   currentElement?.scrollIntoView({
     behavior: 'smooth',
-    block: 'center',
+    block: 'start',
     inline: 'center',
   });
 
@@ -193,3 +193,22 @@ export const extractObsValueAndDisplay = (field: FormField, obs: OpenmrsObs) =>
     };
   }
 };
+
+/**
+ * Checks if a given form page has visible content.
+ *
+ * A page is considered to have visible content if:
+ * - The page itself is not hidden.
+ * - At least one section within the page is visible.
+ * - At least one question within each section is visible.
+ */
+export function isPageContentVisible(page: FormPage) {
+  if (page.isHidden) {
+    return false;
+  }
+  return (
+    page.sections?.some((section) => {
+      return !section.isHidden && section.questions?.some((question) => !question.isHidden);
+    }) ?? false
+  );
+}

package/src/hooks/useWorkspaceLayout.ts

@@ -1,29 +0,0 @@
-import { useLayoutEffect, useState } from 'react';
-
-/**
- * This hook evaluates the layout of the current workspace based on the width of the container element
- */
-export function useWorkspaceLayout(rootRef): 'minimized' | 'maximized' {
-  const [layout, setLayout] = useState<'minimized' | 'maximized'>('minimized');
-  const TABLET_MAX = 1023;
-  useLayoutEffect(() => {
-    const handleResize = () => {
-      const containerWidth = rootRef.current?.parentElement?.offsetWidth;
-      containerWidth && setLayout(containerWidth > TABLET_MAX ? 'maximized' : 'minimized');
-    };
-    handleResize();
-    const resizeObserver = new ResizeObserver((entries) => {
-      handleResize();
-    });
-
-    if (rootRef.current) {
-      resizeObserver.observe(rootRef.current?.parentElement);
-    }
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [rootRef]);
-
-  return layout;
-}