diff --git a/src/components/section-collapsible-toggle/section-collapsible-toggle.component.tsx b/src/components/section-collapsible-toggle/section-collapsible-toggle.component.tsx deleted file mode 100644 index 49d0f53b6..000000000 --- a/src/components/section-collapsible-toggle/section-collapsible-toggle.component.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { useTranslation } from 'react-i18next'; -import { Toggle } from '@carbon/react'; -import { useExtensionSlotMeta } from '@openmrs/esm-framework'; -import styles from './section-collapsible-toggle.scss'; - -const SectionCollapsibleToggle = () => { - const { t } = useTranslation(); - const metas = useExtensionSlotMeta('patient-chart-workspace-header-slot'); - const callBack = metas['rfe-form-header-toggle-ext']?.handleCollapse; - - const toggleCollapsedStatus = (e) => { - callBack && callBack(e); - }; - - return ( -
- -
- ); -}; - -export default SectionCollapsibleToggle; diff --git a/src/components/section-collapsible-toggle/section-collapsible-toggle.scss b/src/components/section-collapsible-toggle/section-collapsible-toggle.scss deleted file mode 100644 index 9a3e07603..000000000 --- a/src/components/section-collapsible-toggle/section-collapsible-toggle.scss +++ /dev/null @@ -1,6 +0,0 @@ -.toggleContainer { - display: flex; - align-items: center; - height: var(--workspace-header-height); - margin-right: 0.5rem; -} diff --git a/src/components/sidebar/sidebar.component.tsx b/src/components/sidebar/sidebar.component.tsx index 1e83e9bb1..f90c61e04 100644 --- a/src/components/sidebar/sidebar.component.tsx +++ b/src/components/sidebar/sidebar.component.tsx @@ -18,6 +18,7 @@ const Sidebar = ({ setValues, allowUnspecifiedAll, defaultPage, + hideFormCollapseToggle, }) => { const { t } = useTranslation(); const [activeLink, setActiveLink] = useState(selectedPage); @@ -114,6 +115,7 @@ const Sidebar = ({ onClick={() => { onCancel && onCancel(); handleClose && handleClose(); + hideFormCollapseToggle(); }}> {mode === 'view' ? t('close', 'Close') : t('cancel', 'Cancel')} diff --git a/src/form-engine.component.tsx b/src/form-engine.component.tsx index 36b15c849..360948a07 100644 --- a/src/form-engine.component.tsx +++ b/src/form-engine.component.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'; -import { Formik, Form } from 'formik'; +import { Form, Formik } from 'formik'; import classNames from 'classnames'; import { Button, ButtonSet, InlineLoading } from '@carbon/react'; import { I18nextProvider, useTranslation } from 'react-i18next'; @@ -17,6 +17,7 @@ import { useWorkspaceLayout } from './hooks/useWorkspaceLayout'; import { usePatientData } from './hooks/usePatientData'; import { evaluatePostSubmissionExpression } from './utils/post-submission-action-helper'; import { moduleName } from './globals'; +import { useFormCollapse } from './hooks/useFormCollapse'; import EncounterForm from './components/encounter/encounter-form.component'; import PatientBanner from './components/patient-banner/patient-banner.component'; import MarkdownWrapper from './components/inputs/markdown/markdown-wrapper.component'; @@ -101,12 +102,12 @@ const FormEngine: React.FC = ({ const [initialValues, setInitialValues] = useState({}); const [scrollablePages, setScrollablePages] = useState(new Set()); const [selectedPage, setSelectedPage] = useState(''); - const [isFormExpanded, setIsFormExpanded] = useState(undefined); const [isLoadingFormDependencies, setIsLoadingFormDependencies] = useState(true); const [isSubmitting, setIsSubmitting] = useState(false); const [pagesWithErrors, setPagesWithErrors] = useState([]); const postSubmissionHandlers = usePostSubmissionAction(refinedFormJson?.postSubmissionActions); const sessionMode = mode ? mode : encounterUUID || encounterUuid ? 'edit' : 'enter'; + const { isFormExpanded, hideFormCollapseToggle } = useFormCollapse(sessionMode); const showSidebar = useMemo(() => { return workspaceLayout !== 'minimized' && scrollablePages.size > 1 && sessionMode !== 'embedded-view'; @@ -217,6 +218,7 @@ const FormEngine: React.FC = ({ ); } onSubmit?.(); + hideFormCollapseToggle(); }) .catch((error) => { const errorMessages = extractErrorMessagesFromResponse(error); @@ -272,6 +274,7 @@ const FormEngine: React.FC = ({ setValues={props.setValues} allowUnspecifiedAll={formJson.allowUnspecifiedAll} defaultPage={formJson.defaultPage} + hideFormCollapseToggle={hideFormCollapseToggle} /> )}
@@ -316,6 +319,7 @@ const FormEngine: React.FC = ({ onClick={() => { onCancel && onCancel(); handleClose && handleClose(); + hideFormCollapseToggle(); }}> {mode === 'view' ? t('close', 'Close') : t('cancel', 'Cancel')} diff --git a/src/hooks/useFormCollapse.tsx b/src/hooks/useFormCollapse.tsx new file mode 100644 index 000000000..d528a5e0a --- /dev/null +++ b/src/hooks/useFormCollapse.tsx @@ -0,0 +1,36 @@ +import { SessionMode } from '../types'; +import { useCallback, useEffect, useState } from 'react'; + +export function useFormCollapse(sessionMode: SessionMode) { + const [isFormExpanded, setIsFormExpanded] = useState(true); + + const hideFormCollapseToggle = useCallback(() => { + const HideFormCollapseToggle = new CustomEvent('openmrs:form-view-embedded', { detail: { value: false } }); + window.dispatchEvent(HideFormCollapseToggle); + }, []); + + const handleFormCollapseToggle = useCallback((event) => { + setIsFormExpanded(event.detail.value); + }, []); + + useEffect(() => { + const FormCollapseToggleVisibleEvent = new CustomEvent('openmrs:form-view-embedded', { + detail: { value: sessionMode != 'embedded-view' }, + }); + + window.dispatchEvent(FormCollapseToggleVisibleEvent); + }, [sessionMode]); + + useEffect(() => { + window.addEventListener('openmrs:form-collapse-toggle', handleFormCollapseToggle); + + return () => { + window.removeEventListener('openmrs:form-collapse-toggle', handleFormCollapseToggle); + }; + }, []); + + return { + isFormExpanded, + hideFormCollapseToggle, + }; +} diff --git a/src/hooks/useFormJson.tsx b/src/hooks/useFormJson.tsx index 327e41358..332e5a14b 100644 --- a/src/hooks/useFormJson.tsx +++ b/src/hooks/useFormJson.tsx @@ -33,6 +33,7 @@ export function useFormJson(formUuid: string, rawFormJson: any, encounterUuid: s formError: error, }; } + /** * Fetches a form JSON from OpenMRS and recursively fetches its subforms if they available. * @@ -95,6 +96,7 @@ function validateFormsArgs(formUuid: string, rawFormJson: any): Error { return new Error('InvalidArgumentsErr: Both formUuid and formJson cannot be provided at the same time.'); } } + /** * Refines the input form JSON object by parsing it, removing inline subforms, applying form schema transformers, setting the encounter type, and applying form intents if provided. * @param {any} formJson - The input form JSON object or string.