mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
[ADF-2007] Info Drawer - currentTab event should return a key not the label (#2715)
* [ADF-2007] bug fix Info drawer will emit the current active tab instead of the tab label Also updated the test spec * Emit tab index on clicking
This commit is contained in:
parent
eba4399d6c
commit
eba46e4e44
@ -7,7 +7,7 @@
|
|||||||
<ng-container info-drawer-content *ngIf="showTabLayout(); then tabLayout else singleLayout"></ng-container>
|
<ng-container info-drawer-content *ngIf="showTabLayout(); then tabLayout else singleLayout"></ng-container>
|
||||||
|
|
||||||
<ng-template #tabLayout>
|
<ng-template #tabLayout>
|
||||||
<mat-tab-group class="adf-info-drawer-tabs" (selectChange)="onTabChange($event)">
|
<mat-tab-group class="adf-info-drawer-tabs" (selectedTabChange)="onTabChange($event)">
|
||||||
<ng-container *ngFor="let contentBlock of contentBlocks">
|
<ng-container *ngFor="let contentBlock of contentBlocks">
|
||||||
<mat-tab [label]="contentBlock.label" class="adf-info-drawer-tab">
|
<mat-tab [label]="contentBlock.label" class="adf-info-drawer-tab">
|
||||||
<ng-container *ngTemplateOutlet="contentBlock.content"></ng-container>
|
<ng-container *ngTemplateOutlet="contentBlock.content"></ng-container>
|
||||||
|
@ -17,6 +17,7 @@
|
|||||||
|
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
import { MatTabChangeEvent } from '@angular/material';
|
||||||
import { By } from '@angular/platform-browser';
|
import { By } from '@angular/platform-browser';
|
||||||
import { MaterialModule } from '../material.module';
|
import { MaterialModule } from '../material.module';
|
||||||
import { InfoDrawerLayoutComponent } from './info-drawer-layout.component';
|
import { InfoDrawerLayoutComponent } from './info-drawer-layout.component';
|
||||||
@ -57,9 +58,8 @@ describe('InfoDrawerComponent', () => {
|
|||||||
it('should emit when tab is changed', () => {
|
it('should emit when tab is changed', () => {
|
||||||
let tabEmitSpy = spyOn(component.currentTab, 'emit');
|
let tabEmitSpy = spyOn(component.currentTab, 'emit');
|
||||||
let event = {index: 1, tab: {textLabel: 'DETAILS'}};
|
let event = {index: 1, tab: {textLabel: 'DETAILS'}};
|
||||||
component.onTabChange(event);
|
component.onTabChange(<MatTabChangeEvent> event);
|
||||||
expect(tabEmitSpy).toHaveBeenCalled();
|
expect(tabEmitSpy).toHaveBeenCalledWith(1);
|
||||||
expect(tabEmitSpy).toHaveBeenCalledWith('DETAILS');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should render the title', () => {
|
it('should render the title', () => {
|
||||||
|
@ -16,6 +16,7 @@
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
import { Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
|
import { Component, ContentChildren, EventEmitter, Input, Output, QueryList, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
|
||||||
|
import { MatTabChangeEvent } from '@angular/material';
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'adf-info-drawer-tab',
|
selector: 'adf-info-drawer-tab',
|
||||||
template: '<ng-template><ng-content></ng-content></ng-template>'
|
template: '<ng-template><ng-content></ng-content></ng-template>'
|
||||||
@ -37,7 +38,7 @@ export class InfoDrawerComponent {
|
|||||||
title: string|null = null;
|
title: string|null = null;
|
||||||
|
|
||||||
@Output()
|
@Output()
|
||||||
currentTab: EventEmitter<any> = new EventEmitter<any>();
|
currentTab: EventEmitter<number> = new EventEmitter<number>();
|
||||||
|
|
||||||
@ContentChildren(InfoDrawerTabComponent)
|
@ContentChildren(InfoDrawerTabComponent)
|
||||||
contentBlocks: QueryList<InfoDrawerTabComponent>;
|
contentBlocks: QueryList<InfoDrawerTabComponent>;
|
||||||
@ -46,8 +47,7 @@ export class InfoDrawerComponent {
|
|||||||
return this.contentBlocks.length > 0;
|
return this.contentBlocks.length > 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
onTabChange(event: any) {
|
onTabChange(event: MatTabChangeEvent) {
|
||||||
const tab = event.tab;
|
this.currentTab.emit(event.index);
|
||||||
this.currentTab.emit(tab.textLabel);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user