fix(edit-page-2): Fixed contentlets inserts in wrong position when us…

…ing contentlet tools (#28189) * Hide menus on contentlet change * Changed position on methods * Added test to contentlet-tools on editor --------- Co-authored-by: KevinDavilaDotCMS <kfariid@gmail.com>
dotCMS · Apr 11, 2024 · 81c7817 · 81c7817
1 parent 91c572a
commit 81c7817
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 3 deletions.
diff --git a/...c/lib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.html b/...c/lib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.html
@@ -9,7 +9,7 @@
     (click)="setPositionFlag('after'); menu.toggle($event)"
     data-testId="add-bottom-button"
     icon="pi pi-plus"></p-button>
-<p-menu #menu [model]="items" [popup]="true" appendTo="body"></p-menu>
+<p-menu #menu [model]="items" [popup]="true" appendTo="body" data-testId="menu-add"></p-menu>
 
 <div
     class="actions"

diff --git a/...ib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.spec.ts b/...ib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.spec.ts
@@ -72,6 +72,29 @@ describe('EmaContentletToolsComponent', () => {
             expect(spectator.query(byTestId('drag-image'))).toHaveText('test');
         });
 
+        it('should close menus when contentlet @input was changed', () => {
+            const spyHideMenus = jest.spyOn(spectator.component, 'hideMenus');
+
+            const hideMenu = jest.spyOn(spectator.component.menu, 'hide');
+            // Open menu
+            spectator.click('[data-testId="menu-add"]');
+
+            //Change contentlet hover
+            spectator.setInput('contentlet', {
+                ...contentletAreaMock,
+                payload: {
+                    ...contentletAreaMock.payload,
+                    contentlet: {
+                        ...contentletAreaMock.payload.contentlet,
+                        identifier: 'new-identifier'
+                    }
+                }
+            });
+
+            expect(spyHideMenus).toHaveBeenCalled();
+            expect(hideMenu).toHaveBeenCalled();
+        });
+
         describe('events', () => {
             it('should emit delete on delete button click', () => {
                 const deleteSpy = jest.spyOn(spectator.component.delete, 'emit');

diff --git a/...src/lib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.ts b/...src/lib/edit-ema-editor/components/ema-contentlet-tools/ema-contentlet-tools.component.ts
@@ -6,15 +6,17 @@ import {
     EventEmitter,
     HostBinding,
     Input,
+    OnChanges,
     OnInit,
     Output,
+    SimpleChanges,
     ViewChild,
     inject
 } from '@angular/core';
 
 import { MenuItem } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
-import { MenuModule } from 'primeng/menu';
+import { Menu, MenuModule } from 'primeng/menu';
 
 import { DotMessageService } from '@dotcms/data-access';
 
@@ -33,7 +35,9 @@ const ACTIONS_CONTAINER_HEIGHT = 40;
     styleUrls: ['./ema-contentlet-tools.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class EmaContentletToolsComponent implements OnInit {
+export class EmaContentletToolsComponent implements OnInit, OnChanges {
+    @ViewChild('menu') menu: Menu;
+    @ViewChild('menuVTL') menuVTL: Menu;
     @ViewChild('dragImage') dragImage: ElementRef;
     private dotMessageService = inject(DotMessageService);
 
@@ -90,6 +94,19 @@ export class EmaContentletToolsComponent implements OnInit {
         this.ACTIONS_CONTAINER_WIDTH = this.contentlet.payload.vtlFiles ? 178 : 128;
     }
 
+    ngOnChanges(changes: SimpleChanges): void {
+        if (!changes.contentlet) {
+            return;
+        }
+
+        if (
+            changes.contentlet.currentValue?.payload.contentlet.identifier !==
+            changes.contentlet.previousValue?.payload.contentlet.identifier
+        ) {
+            this.hideMenus();
+        }
+    }
+
     /**
      * Sets the VTL files for the component.
      *
@@ -196,6 +213,16 @@ export class EmaContentletToolsComponent implements OnInit {
         };
     }
 
+    /**
+     * Hide all context menus when the contentlet changes
+     *
+     * @memberof EmaContentletToolsComponent
+     */
+    hideMenus() {
+        this.menu?.hide();
+        this.menuVTL?.hide();
+    }
+
     /**
      *
      * Checks if the container is empty, based on the identifier