(feat) O3-3112: Add form collapse toggle to the esm-form-engine-app (…

…#1814)

* feat: form collapse

* refactor: rename formCollapseToggle

* refactor: remove redundant add lister

* refactor: use usecallback for handleFormEmbedded

---------

Co-authored-by: Dennis Kigen <kigen.work@gmail.com>

packages/esm-form-engine-app/src/form-collapse-toggle/form-collapse-toggle.component.tsx

@@ -0,0 +1,46 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Toggle } from '@carbon/react';
+import styles from './styles.scss';
+
+const FormCollapseToggle = () => {
+  const { t } = useTranslation();
+  const [isFormEmbedded, setIsFormEmbedded] = useState<boolean>(false);
+
+  const handleFormEmbedded = useCallback((event) => {
+    setIsFormEmbedded(event?.detail?.value || false);
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('openmrs:form-view-embedded', handleFormEmbedded);
+
+    return () => {
+      window.removeEventListener('openmrs:form-view-embedded', handleFormEmbedded);
+    };
+  }, [handleFormEmbedded]);
+
+  const handleOnToggle = (value: boolean) => {
+    const FormCollapseToggleEvent = new CustomEvent('openmrs:form-collapse-toggle', { detail: { value } });
+    window.dispatchEvent(FormCollapseToggleEvent);
+  };
+
+  if (!isFormEmbedded) {
+    return null;
+  }
+
+  return (
+    <div className={styles.toggleContainer}>
+      <Toggle
+        size="sm"
+        aria-label={t('toggleCollapseOrExpand', 'Toggle collapse or expand')}
+        defaultToggled
+        id="collapsable-toggle"
+        labelA={t('expandAll', 'Expand all')}
+        labelB={t('collapseAll', 'Collapse all')}
+        onToggle={handleOnToggle}
+      />
+    </div>
+  );
+};
+
+export default FormCollapseToggle;

packages/esm-form-engine-app/src/form-collapse-toggle/styles.scss

@@ -0,0 +1,6 @@
+.toggleContainer {
+  display: flex;
+  align-items: center;
+  height: var(--workspace-header-height);
+  margin-right: 0.5rem;
+}

packages/esm-form-engine-app/src/index.ts

@@ -1,5 +1,4 @@
 import { defineConfigSchema, getAsyncLifecycle } from '@openmrs/esm-framework';
-import { registerWorkspace } from '@openmrs/esm-patient-common-lib';
 import { configSchema } from './config-schema';
 
 const moduleName = '@openmrs/esm-form-engine-app';
@@ -16,3 +15,11 @@ export function startupApp() {
 }
 
 export const formRenderer = getAsyncLifecycle(() => import('./form-renderer/form-renderer.component'), options);
+
+export const formCollapseToggle = getAsyncLifecycle(
+  () => import('./form-collapse-toggle/form-collapse-toggle.component'),
+  {
+    featureName: 'rfe-form-collapse-toggle',
+    moduleName,
+  },
+);

packages/esm-form-engine-app/src/routes.json

@@ -8,6 +8,11 @@
       "name": "react-form-engine-widget",
       "component": "formRenderer",
       "slot": "form-widget-slot"
+    },
+    {
+      "name": "rfe-form-collapse-toggle",
+      "component": "formCollapseToggle",
+      "slot": "patient-chart-workspace-header-slot"
     }
   ],
   "pages": []

packages/esm-form-engine-app/translations/en.json

@@ -1,8 +1,11 @@
 {
   "closeThisPanel": "Close this panel",
+  "collapseAll": "Collapse all",
   "errorTitle": "There was an error with this form",
+  "expandAll": "Expand all",
   "loading": "Loading",
   "or": "or",
   "thisList": "this list",
+  "toggleCollapseOrExpand": "Toggle collapse or expand",
   "tryAgainMessage": "Try opening another form from"
 }