feat(tabs): adiciona reordenação visual das abas

Permite a reordenação das abas visíveis quando uma aba do dropdown é selecionada.
Ao selecionar uma aba do dropdown, ela se torna visível, e a última aba visível anteriormente é movida para o dropdown.

Isso proporciona uma melhor experiência de usuário ao gerenciar um grande número de abas.

Fixes DTHFUI-8578

Author: pedrodominguesp

projects/ui/src/lib/components/po-tabs/po-tab/po-tab-base.component.ts

@@ -26,6 +26,7 @@ export abstract class PoTabBaseComponent {
   private _active?: boolean = false;
   private _disabled?: boolean = false;
   private _hide?: boolean = false;
+  widthButton;
 
   /**
    * @optional

projects/ui/src/lib/components/po-tabs/po-tab/po-tab.component.spec.ts

@@ -2,6 +2,7 @@ import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testin
 
 import { PoTabsService } from '../po-tabs.service';
 import { PoTabComponent } from './po-tab.component';
+import { SimpleChange, SimpleChanges } from '@angular/core';
 
 describe('PoTabComponent:', () => {
   let component: PoTabComponent;
@@ -48,7 +49,11 @@ describe('PoTabComponent:', () => {
     it('should trigger onChanges after 100ms delay', fakeAsync(() => {
       spyOn(tabsService, 'triggerOnChanges');
 
-      component.ngOnChanges();
+      const changes: SimpleChanges = {
+        active: new SimpleChange(null, true, true)
+      };
+
+      component.ngOnChanges(changes);
       tick(101);
 
       expect(tabsService.triggerOnChanges).toHaveBeenCalled();

projects/ui/src/lib/components/po-tabs/po-tab/po-tab.component.ts

@@ -22,9 +22,12 @@ export class PoTabComponent extends PoTabBaseComponent implements AfterContentIn
     this.setDisplayOnActive();
   }
 
-  ngOnChanges(): void {
+  ngOnChanges(changes: SimpleChanges): void {
     setTimeout(() => {
       this.tabsService.triggerOnChanges();
+      if (changes?.active?.currentValue) {
+        this.tabsService.triggerActiveOnChanges(this);
+      }
     }, 100);
   }
 

projects/ui/src/lib/components/po-tabs/po-tabs.component.html

@@ -30,9 +30,8 @@
         [p-label]="literals.moreTabs"
         [p-small]="small"
         [p-tabs]="overflowedTabs"
-        (p-activated)="onTabActive($event)"
         (p-change-state)="onTabChangeState($event)"
-        (p-click)="selectedTab($event)"
+        (p-click)="onTabActiveByDropdown($event)"
       >
       </po-tab-dropdown>
     </div>

projects/ui/src/lib/components/po-tabs/po-tabs.component.spec.ts

@@ -3,6 +3,8 @@ import { By } from '@angular/platform-browser';
 
 import { PoTabsComponent } from './po-tabs.component';
 import { PoTabsService } from './po-tabs.service';
+import { PoTabComponent } from './po-tab/po-tab.component';
+import { EventEmitter, QueryList } from '@angular/core';
 
 describe('PoTabsComponent:', () => {
   let component: PoTabsComponent;
@@ -49,13 +51,28 @@ describe('PoTabsComponent:', () => {
       expect(component.handleKeyboardNavigationTab).toHaveBeenCalled();
     });
 
+    it('ngOnInit: should call `onTabActiveByDropdown` if tab is active in tabsDropdown', () => {
+      const tabMock = jasmine.createSpyObj('PoTabComponent', ['id'], { id: 'tab-id' });
+
+      spyOn(component, 'onTabActiveByDropdown');
+
+      component.tabsDropdown = [tabMock];
+      component.ngOnInit();
+
+      component['tabsService'].triggerActiveOnChanges(tabMock);
+
+      expect(component.onTabActiveByDropdown).toHaveBeenCalledWith(tabMock);
+    });
+
     it('ngOnInit: should unsubscribe', () => {
       spyOn(component['subscription'], 'unsubscribe');
       spyOn(component['subscriptionTabsService'], 'unsubscribe');
+      spyOn(component['subscriptionTabActive'], 'unsubscribe');
       component.ngOnDestroy();
 
       expect(component['subscription'].unsubscribe).toHaveBeenCalled();
       expect(component['subscriptionTabsService'].unsubscribe).toHaveBeenCalled();
+      expect(component['subscriptionTabActive'].unsubscribe).toHaveBeenCalled();
     });
 
     it('isVisibleTab: should return `false` if `visibleTabs` is greater than `maxNumberOfTabs`', () => {
@@ -498,6 +515,130 @@ describe('PoTabsComponent:', () => {
       component.setQuantityTabsButton(1);
       expect(component.quantityTabsButton).toBe(1);
     });
+
+    it('onTabActiveByDropdown: should correctly call methods and update styles when called', () => {
+      const tabMock = jasmine.createSpyObj('PoTabComponent', ['id'], { id: 'tab-id' });
+      component.defaultLastTabWidth = 100;
+
+      const nativeElementMock = { style: { width: '' }, getBoundingClientRect: () => ({ width: 100 }) };
+      const queryListMock = jasmine.createSpyObj('QueryList', ['last'], { last: { nativeElement: nativeElementMock } });
+      queryListMock.last = { nativeElement: nativeElementMock };
+      component.tabButton = queryListMock;
+
+      component.tabsChildren = new QueryList<PoTabComponent>();
+      component.tabsChildren.reset([tabMock]);
+
+      component.tabsDefault = [tabMock];
+      component.tabsDropdown = [tabMock];
+
+      spyOn(component, 'handleKeyboardNavigationTab');
+
+      component.onTabActiveByDropdown(tabMock);
+
+      expect(component.tabButton.last.nativeElement.style.width).toBe('100px');
+      expect(component.handleKeyboardNavigationTab).toHaveBeenCalled();
+      expect(component.tabsDefault.includes(tabMock)).toBe(true);
+      expect(component.tabsDropdown.length).toBe(1);
+    });
+
+    it('reorderTabs: should reorder tabs if tabIndex is not -1', () => {
+      const tabMock = jasmine.createSpyObj('PoTabComponent', ['id'], { id: 'tab4', widthButton: '130' });
+      const tabsArrayMock = [
+        jasmine.createSpyObj('PoTabComponent', ['id'], { id: 'tab1', widthButton: '100' }),
+        jasmine.createSpyObj('PoTabComponent', ['id'], { id: 'tab2', widthButton: '110' }),
+        jasmine.createSpyObj('PoTabComponent', ['id'], { id: 'tab3', widthButton: '120' }),
+        tabMock
+      ];
+
+      const tabsChildrenMock = new QueryList<PoTabComponent>();
+      tabsChildrenMock.reset(tabsArrayMock);
+      Object.defineProperty(component, 'tabsChildren', { value: tabsChildrenMock });
+
+      component.quantityTabsButton = 3;
+
+      spyOn(component, <any>'changeTabPositionByDropdown').and.callFake((tab: PoTabComponent) => {
+        const tabIndex = component.tabsChildren.toArray().indexOf(tab);
+        if (tabIndex !== -1) {
+          const reorderedTabs = component.tabsChildren.toArray();
+          reorderedTabs.splice(tabIndex, 1);
+          reorderedTabs.splice(component.quantityTabsButton - 1, 0, tab);
+          component.tabsChildren.reset(reorderedTabs);
+        }
+      });
+
+      component.onTabActiveByDropdown(tabMock);
+
+      fixture.detectChanges();
+
+      const reorderedTabs = component.tabsChildren.toArray();
+
+      expect(reorderedTabs.map(tab => tab.id)).toEqual(['tab1', 'tab2', 'tab4', 'tab3']);
+      expect(component.tabButton.last.nativeElement.style.width).toBe('130px');
+    });
+
+    it('updateTabsState: should update tabs state correctly', () => {
+      const nativeElementMock = {
+        getBoundingClientRect: () => ({ width: 100 })
+      };
+      component.quantityTabsButton = 2;
+
+      const queryListMock = jasmine.createSpyObj('QueryList', [], { last: { nativeElement: nativeElementMock } });
+      component.tabButton = queryListMock;
+
+      const tabsArrayMock = [
+        jasmine.createSpyObj('PoTabComponent', ['id'], { id: 'tab1', widthButton: 0 }),
+        jasmine.createSpyObj('PoTabComponent', ['id'], { id: 'tab2', widthButton: 100 }),
+        jasmine.createSpyObj('PoTabComponent', ['id'], { id: 'tab3', widthButton: 0 })
+      ];
+
+      const tabsChildrenMock = new QueryList<PoTabComponent>();
+      tabsChildrenMock.reset(tabsArrayMock);
+      Object.defineProperty(component, 'tabsChildrenArray', { value: tabsArrayMock });
+      component.quantityTabsButton = 2;
+
+      (component as any).updateTabsState();
+
+      expect(component.defaultLastTabWidth).toBe(100);
+      expect(tabsArrayMock[1].widthButton).toBe(100);
+      expect(component.tabsDefault).toEqual(tabsArrayMock.slice(0, 2));
+      expect(component.tabsDropdown).toEqual(tabsArrayMock.slice(2));
+    });
+
+    it('selectedTab: should correctly handle a tab in the dropdown', () => {
+      const clickEventMock = new EventEmitter<any>();
+      component.quantityTabsButton = 2;
+
+      const tabMock1 = { id: 'tab1', active: false, click: clickEventMock };
+      const tabMock2 = { id: 'tab2', active: false, click: clickEventMock };
+      const tabMockInDropdown = { id: 'tab3', active: false, click: clickEventMock };
+
+      component['tabsDefault'] = [tabMock1, tabMock2];
+      component['tabsDropdown'] = [tabMockInDropdown];
+
+      spyOn(component, 'onTabActiveByDropdown');
+      const changeDetectorSpy = spyOn(component['changeDetector'], 'detectChanges');
+
+      component.selectedTab(tabMockInDropdown);
+
+      expect(tabMockInDropdown.active).toBeTrue();
+      expect(changeDetectorSpy).toHaveBeenCalled();
+      clickEventMock.subscribe(tab => {
+        expect(tab).toBe(tabMockInDropdown);
+      });
+      clickEventMock.emit(tabMockInDropdown);
+    });
+
+    it('updateTabsState: should set defaultLastTabWidth to 0 if getBoundingClientRect().width is <= 0', () => {
+      const nativeElementMock = {
+        getBoundingClientRect: () => ({ width: 0 })
+      };
+      const queryListMock = jasmine.createSpyObj('QueryList', [], { last: { nativeElement: nativeElementMock } });
+      component.tabButton = queryListMock;
+
+      (component as any).updateTabsState();
+
+      expect(component.defaultLastTabWidth).toBe(0);
+    });
   });
 
   describe('Templates:', () => {