#25276 refactor tab buttons components

dotCMS · Aug 3, 2023 · 163a084 · 163a084
1 parent 9feffb5
commit 163a084
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 16 deletions.
diff --git a/...ents/dot-edit-page-state-controller-seo/dot-edit-page-state-controller-seo.component.html b/...ents/dot-edit-page-state-controller-seo/dot-edit-page-state-controller-seo.component.html
@@ -10,8 +10,8 @@
 <dot-tab-buttons
     [mode]="mode"
     [options]="options"
-    (eventOpen)="op.openMenu($event)"
-    (changeState)="stateSelectorHandler($event.target.value)"
+    (openMenu)="op.openMenu($event)"
+    (clickOption)="stateSelectorHandler($event.target.value)"
 ></dot-tab-buttons>
 <ng-container *ngIf="!variant">
     <p-inputSwitch

diff --git a/core-web/libs/ui/src/lib/dot-tab-buttons/dot-tab-buttons.component.html b/core-web/libs/ui/src/lib/dot-tab-buttons/dot-tab-buttons.component.html
@@ -1,6 +1,6 @@
 <div class="dot-tab-buttons">
-    <div *ngFor="let item of options" style="position: relative">
-        <div class="dot-tab-container" (click)="onChangeState($event)">
+    <div class="dot-tab-buttons-container" *ngFor="let item of options">
+        <div class="dot-tab-container" (click)="onClickOption($event)">
             <button
                 class="dot-tab-button"
                 [ngClass]="{
@@ -18,7 +18,7 @@
                 *ngIf="item.value === pageMode.PREVIEW"
                 [ngClass]="{ 'dot-tab-button-hover-dropdown': mode === pageMode.PREVIEW }"
             >
-                <i class="dot-tabs-dropdown-icon" [class]="icon"></i>
+                <i class="dot-tabs-dropdown-icon" [value]="'openMenu'" [class]="icon"></i>
             </button>
         </div>
         <div class="dot-tab-buttons-select" *ngIf="mode === item.value"></div>

diff --git a/core-web/libs/ui/src/lib/dot-tab-buttons/dot-tab-buttons.component.scss b/core-web/libs/ui/src/lib/dot-tab-buttons/dot-tab-buttons.component.scss
@@ -7,6 +7,10 @@
     margin-right: 2rem;
 }
 
+.dot-tab-buttons-container {
+    position: relative;
+}
+
 .dot-tab-container {
     display: flex;
     position: relative;

diff --git a/core-web/libs/ui/src/lib/dot-tab-buttons/dot-tab-buttons.component.ts b/core-web/libs/ui/src/lib/dot-tab-buttons/dot-tab-buttons.component.ts
@@ -7,6 +7,12 @@ import { SplitButtonModule } from 'primeng/splitbutton';
 
 import { DotPageMode } from '@dotcms/dotcms-models';
 
+/**
+ * This component is responsible to display the tab buttons for the edit page.
+ *
+ * @export
+ * @class DotTabButtonsComponent
+ */
 @Component({
     selector: 'dot-tab-buttons',
     standalone: true,
@@ -16,23 +22,32 @@ import { DotPageMode } from '@dotcms/dotcms-models';
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DotTabButtonsComponent {
-    @Output() eventOpen = new EventEmitter();
-    @Output() changeState = new EventEmitter();
+    @Output() openMenu = new EventEmitter();
+    @Output() clickOption = new EventEmitter();
     @Input() mode: DotPageMode;
     @Input() options: SelectItem[];
     pageMode = DotPageMode;
-    up = 'pi pi-angle-up';
-    down = 'pi pi-angle-down';
+    dropDownOpenIcon = 'pi pi-angle-up';
+    dropDownCloseIcon = 'pi pi-angle-down';
     toggle = false;
-    icon = this.down;
+    icon = this.dropDownCloseIcon;
+    OPEN_MENU = 'openMenu';
 
-    onChangeState(event) {
-        if (!event.target.value) {
-            this.eventOpen.emit(event);
-            this.toggle = !this.toggle;
-            this.icon = this.toggle ? this.up : this.down;
+    onClickOption(event) {
+        if (event.target.value === this.OPEN_MENU) {
+            this.showMenu(event);
         } else {
-            this.changeState.emit(event);
+            this.clickOption.emit(event);
         }
     }
+
+    showMenu(event) {
+        this.toggle = !this.toggle;
+        this.toggleIcon();
+        this.openMenu.emit(event);
+    }
+
+    toggleIcon() {
+        this.icon = this.toggle ? this.dropDownOpenIcon : this.dropDownCloseIcon;
+    }
 }