Handle toggle box opening, code cleanup

superdesk · Jan 17, 2025 · 1ceef02 · 1ceef02
1 parent 7ebea4a
commit 1ceef02
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 15 deletions.
diff --git a/client/components/Main/ItemEditor/Editor.tsx b/client/components/Main/ItemEditor/Editor.tsx
@@ -237,7 +237,9 @@ export class EditorComponent extends React.Component<IEditorProps, IEditorState>
                     }
                 },
                 onIgnore: () => {
-                    this.itemManager.unlockAndCancel();
+                    this.itemManager.unlockAndCancel(
+                        embeddedPlanningHasUnsavedChanges() ? 'HANDLE_UNSAVED_CHANGES' : 'DISCARD',
+                    );
                 },
                 onSave: onSave,
                 onSaveAndPost: onSaveAndPost,
@@ -262,7 +264,9 @@ export class EditorComponent extends React.Component<IEditorProps, IEditorState>
             this.props.onCancel();
         }
 
-        return this.itemManager.unlockAndCancel();
+        return this.itemManager.unlockAndCancel(
+            embeddedPlanningHasUnsavedChanges() ? 'HANDLE_UNSAVED_CHANGES' : 'DISCARD',
+        );
     }
 
     setActiveTab(tab) {

diff --git a/client/components/Main/ItemEditor/ItemManager.ts b/client/components/Main/ItemEditor/ItemManager.ts
@@ -29,8 +29,8 @@ import {AutoSave} from './AutoSave';
 import {EditorGroup} from '../../Editor/EditorGroup';
 import * as selectors from '../../../selectors';
 import {
-    embeddedPlanningHasUnsavedChanges,
     handleEmbeddedPlannings,
+    IEmbeddedPlanningsActionType,
 } from '../../../components/editor-standalone/save-handling';
 
 export class ItemManager {
@@ -830,10 +830,10 @@ export class ItemManager {
             ));
     }
 
-    unlockAndCancel() {
+    unlockAndCancel(embeddedEditorAction?: IEmbeddedPlanningsActionType) {
         return handleEmbeddedPlannings(
             this.props.editorType,
-            embeddedPlanningHasUnsavedChanges() ? 'HANDLE_UNSAVED_CHANGES' : 'DISCARD',
+            embeddedEditorAction,
         ).then(() => {
             const {session, currentWorkspace} = this.props;
             const {initialValues, diff} = this.state;

diff --git a/client/components/editor-standalone/save-handling.ts b/client/components/editor-standalone/save-handling.ts
@@ -5,7 +5,7 @@ import {planningApi} from '../../superdeskApi';
 import {RelatedPlanningItem} from '../../components/fields/editor/EventRelatedPlannings/RelatedPlanningItem';
 
 type IRelatedPlanningRefs = {[id: string]: RelatedPlanningItem};
-type IEmbeddedPlanningsActionType = 'SAVE' | 'HANDLE_UNSAVED_CHANGES' | 'DISCARD';
+export type IEmbeddedPlanningsActionType = 'SAVE' | 'HANDLE_UNSAVED_CHANGES' | 'DISCARD';
 
 const getEmbeddedAuthoringRefs = (editorType: EDITOR_TYPE) => {
     const embeddedEditorRef = planningApi.editor(editorType).dom.fields['related_plannings']?.current;
@@ -31,13 +31,18 @@ const getEmbeddedPlanningExposed = (editorType: EDITOR_TYPE): Array<IExposedFrom
 const FIRST_ERROR = 0;
 
 const handleErrors = (editorType: EDITOR_TYPE, editorIndex: number) => {
-    const firstRelatedPlanningRef = getEmbeddedAuthoringRefs(editorType)[editorIndex];
+    const relatedPlanningRef = getEmbeddedAuthoringRefs(editorType)[editorIndex];
     const firstEditorRef =
-        firstRelatedPlanningRef.standaloneEditorRef.current.planningEditorRef.current.editorRef.current;
+        relatedPlanningRef.standaloneEditorRef.current.planningEditorRef.current.editorRef.current;
     const fieldErrors = firstEditorRef.getExposed().getValidationErrors();
     const fieldToFocus = firstEditorRef?.fieldRefs[Object.keys(fieldErrors)[FIRST_ERROR]].current as HTMLDivElement;
+    const toggleBoxRef = relatedPlanningRef.toggleBoxRef.current;
 
-    fieldToFocus?.scrollIntoView?.();
+    if (toggleBoxRef.isOpen() === false) {
+        toggleBoxRef.toggle();
+    }
+
+    fieldToFocus?.scrollIntoView?.({behavior: 'smooth'});
 
     return Promise.reject();
 };
@@ -47,7 +52,7 @@ const handleErrors = (editorType: EDITOR_TYPE, editorIndex: number) => {
  * Execution is cancelled on the first encounter of an editor error.
  * If an error occurs the first encountered embedded planning editor and the first error field is focused.
  */
-export const handleEmbeddedPlannings = (editorType: EDITOR_TYPE, action: IEmbeddedPlanningsActionType) => {
+export const handleEmbeddedPlannings = (editorType: EDITOR_TYPE, action: IEmbeddedPlanningsActionType = 'SAVE') => {
     return getEmbeddedPlanningExposed(editorType).reduce<Promise<any>>(
         (promise, editorExposed, editorIndex) => promise.then(() => {
             if (editorExposed.hasUnsavedChanges()) {

diff --git a/client/components/fields/editor/EventRelatedPlannings/RelatedPlanningItem.tsx b/client/components/fields/editor/EventRelatedPlannings/RelatedPlanningItem.tsx
@@ -102,7 +102,7 @@ export class RelatedPlanningItem extends React.PureComponent<IProps> {
                 tabIndex={0}
             >
                 <ToggleBox
-                    ref={this.toggleBoxRef}
+                    toggleBoxRef={this.toggleBoxRef}
                     variant="custom-header"
                     getToggleButtonLabel={(isOpen) => isOpen ? gettext('Show less') : gettext('Show more')}
                     header={

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -69,7 +69,7 @@
     "sinon": "^4.5.0",
     "superdesk-code-style": "1.5.0",
     "superdesk-core": "github:superdesk/superdesk-client-core#develop",
-    "superdesk-ui-framework": "^4.0.7",
+    "superdesk-ui-framework": "^4.0.9",
     "ts-node": "~7.0.1",
     "tslint": "5.11.0",
     "typescript-eslint-parser": "^18.0.0"