chore(edit-page-2): Enhance performance in contentlet tools #28331 (#…

…28387) * refactor to not make function calls inside the HTML * add consts * Update ema-contentlet-tools.component.ts
dotCMS · May 6, 2024 · 3152c9c · 3152c9c
1 parent 31f820f
commit 3152c9c
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 44 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
@@ -1,21 +1,17 @@
 <p-button
-    [ngStyle]="getTopButtonPosition()"
+    [ngStyle]="styles.topButton"
     (click)="setPositionFlag('before'); menu.toggle($event)"
     data-testId="add-top-button"
     icon="pi pi-plus"></p-button>
 <p-button
     *ngIf="!isContainerEmpty"
-    [ngStyle]="getBottomButtonPosition()"
+    [ngStyle]="styles.bottomButton"
     (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" data-testId="menu-add"></p-menu>
 
-<div
-    class="actions"
-    *ngIf="!isContainerEmpty"
-    [ngStyle]="getActionPosition()"
-    data-testId="actions">
+<div class="actions" *ngIf="!isContainerEmpty" [ngStyle]="styles.actions" data-testId="actions">
     @if (contentletArea.payload.vtlFiles?.length) {
     <p-menu #menuVTL [model]="vtlFiles" [popup]="true" appendTo="body" />
     <p-button
@@ -51,7 +47,7 @@
         icon="pi pi-pencil" />
 </div>
 
-<div class="bounds" [ngStyle]="getPosition()" data-testId="bounds"></div>
+<div class="bounds" [ngStyle]="styles.bounds" data-testId="bounds"></div>
 <div class="drag-image" #dragImage *ngIf="contentletArea" data-testId="drag-image">
     {{ contentletArea.payload.contentlet.contentType }}
 </div>
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
@@ -7,9 +7,7 @@ import {
     HostBinding,
     Input,
     OnChanges,
-    OnInit,
     Output,
-    SimpleChange,
     SimpleChanges,
     ViewChild,
     inject
@@ -28,6 +26,9 @@ const BUTTON_WIDTH = 40;
 const BUTTON_HEIGHT = 40;
 const ACTIONS_CONTAINER_HEIGHT = 40;
 
+const ACTIONS_CONTAINER_WIDTH_WITH_VTL = 178;
+const INITIAL_ACTIONS_CONTAINER_WIDTH = 128;
+
 @Component({
     selector: 'dot-ema-contentlet-tools',
     standalone: true,
@@ -36,7 +37,7 @@ const ACTIONS_CONTAINER_HEIGHT = 40;
     styleUrls: ['./ema-contentlet-tools.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class EmaContentletToolsComponent implements OnInit, OnChanges {
+export class EmaContentletToolsComponent implements OnChanges {
     @ViewChild('menu') menu: Menu;
     @ViewChild('menuVTL') menuVTL: Menu;
     @ViewChild('dragImage') dragImage: ElementRef;
@@ -85,21 +86,29 @@ export class EmaContentletToolsComponent implements OnInit, OnChanges {
 
     vtlFiles: MenuItem[] = [];
 
-    ACTIONS_CONTAINER_WIDTH: number; // Now is dynamic based on the page type (Headless - VTL)
+    ACTIONS_CONTAINER_WIDTH = INITIAL_ACTIONS_CONTAINER_WIDTH; // Now is dynamic based on the page type (Headless - VTL)
 
-    ngOnInit() {
-        this.setVtlFiles();
-        this.ACTIONS_CONTAINER_WIDTH = this.contentletArea.payload.vtlFiles ? 178 : 128;
-    }
+    protected styles: Record<string, { [klass: string]: unknown }> = {};
 
     ngOnChanges(changes: SimpleChanges): void {
         if (!changes.contentletArea) {
             return;
         }
 
-        if (this.hasContentletOrContainerChanged(changes.contentletArea)) {
-            this.hideMenus();
-        }
+        this.hideMenus(); // We need to hide the menu if the contentlet changes
+        this.setVtlFiles(); // Set the VTL files for the component
+
+        this.ACTIONS_CONTAINER_WIDTH = this.contentletArea.payload.vtlFiles
+            ? ACTIONS_CONTAINER_WIDTH_WITH_VTL
+            : INITIAL_ACTIONS_CONTAINER_WIDTH; // Set the width of the actions container
+
+        // If the contentlet changed, we need to update the styles
+        this.styles = {
+            bounds: this.getBoundsPosition(),
+            topButton: this.getTopButtonPosition(),
+            bottomButton: this.getBottomButtonPosition(),
+            actions: this.getActionPosition()
+        };
     }
 
     /**
@@ -136,7 +145,7 @@ export class EmaContentletToolsComponent implements OnInit, OnChanges {
      * @return {*}  {Record<string, string>}
      * @memberof EmaContentletToolsComponent
      */
-    getPosition(): Record<string, string> {
+    private getBoundsPosition(): Record<string, string> {
         return {
             left: `${this.contentletArea.x}px`,
             top: `${this.contentletArea.y}px`,
@@ -151,7 +160,7 @@ export class EmaContentletToolsComponent implements OnInit, OnChanges {
      * @return {*}  {Record<string, string>}
      * @memberof EmaContentletToolsComponent
      */
-    getTopButtonPosition(): Record<string, string> {
+    private getTopButtonPosition(): Record<string, string> {
         const contentletCenterX = this.contentletArea.x + this.contentletArea.width / 2;
         const buttonLeft = contentletCenterX - BUTTON_WIDTH / 2;
         const buttonTop = this.contentletArea.y - BUTTON_HEIGHT / 2;
@@ -173,7 +182,7 @@ export class EmaContentletToolsComponent implements OnInit, OnChanges {
      * @return {*}  {Record<string, string>}
      * @memberof EmaContentletToolsComponent
      */
-    getBottomButtonPosition(): Record<string, string> {
+    private getBottomButtonPosition(): Record<string, string> {
         const contentletCenterX = this.contentletArea.x + this.contentletArea.width / 2;
         const buttonLeft = contentletCenterX - BUTTON_WIDTH / 2;
         const buttonTop = this.contentletArea.y + this.contentletArea.height - BUTTON_HEIGHT / 2;
@@ -192,7 +201,7 @@ export class EmaContentletToolsComponent implements OnInit, OnChanges {
      * @return {*}  {Record<string, string>}
      * @memberof EmaContentletToolsComponent
      */
-    getActionPosition(): Record<string, string> {
+    private getActionPosition(): Record<string, string> {
         const contentletCenterX = this.contentletArea.x + this.contentletArea.width;
         const left = contentletCenterX - this.ACTIONS_CONTAINER_WIDTH - 8;
         const top = this.contentletArea.y - ACTIONS_CONTAINER_HEIGHT / 2;
@@ -205,27 +214,6 @@ export class EmaContentletToolsComponent implements OnInit, OnChanges {
         };
     }
 
-    /**
-     * Check if Contentlet or Container are changed
-     *
-     * @private
-     * @param {SimpleChange} contentletChange
-     * @return {*}  {boolean}
-     * @memberof EmaContentletToolsComponent
-     */
-    private hasContentletOrContainerChanged(contentletChange: SimpleChange): boolean {
-        const currentValue = contentletChange.currentValue?.payload;
-        const previousValue = contentletChange.previousValue?.payload;
-
-        const hasContentletIdentifierChanged =
-            currentValue?.contentlet.identifier !== previousValue?.contentlet.identifier;
-        const hasUUIDChanged = currentValue?.container.uuid !== previousValue?.container.uuid;
-        const hasContainerIdentifierChanged =
-            currentValue?.container.identifier !== previousValue?.container.identifier;
-
-        return hasContentletIdentifierChanged || hasUUIDChanged || hasContainerIdentifierChanged;
-    }
-
     /**
      * Hide all context menus when the contentlet changes
      *