inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

added visibility filter for tab widget

Browse Source
This commit is contained in:
Vito Albano 2016-10-14 14:20:31 +01:00
parent b73ba81456
commit 8fb437e7d2
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.html
View File

@ -1,13 +1,13 @@
<div *ngIf="hasTabs()" class="alfresco-tabs-widget">
<div alfresco-mdl-tabs>
<div class="mdl-tabs__tab-bar">
<a *ngFor="let tab of tabs; let isFirst = first"
<a *ngFor="let tab of visibleTabs; let isFirst = first"
[href]="'#' + tab.id"
class="mdl-tabs__tab" [class.is-active]="isFirst">
{{tab.title}}
</a>
</div>
<div *ngFor="let tab of tabs; let isFirst = first"
<div *ngFor="let tab of visibleTabs; let isFirst = first"
class="mdl-tabs__panel"
[class.is-active]="isFirst"
[attr.id]="tab.id">

20
ng2-components/ng2-activiti-form/src/components/widgets/tabs/tabs.widget.ts
View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, Input, AfterViewInit, EventEmitter, Output } from '@angular/core';
import { Component, Input, AfterViewInit, AfterContentChecked, EventEmitter, Output } from '@angular/core';
import { TabModel, FormFieldModel } from './../core/index';
@Component({
@ -23,7 +23,7 @@ import { TabModel, FormFieldModel } from './../core/index';
selector: 'tabs-widget',
templateUrl: './tabs.widget.html'
})
export class TabsWidget implements AfterViewInit {
export class TabsWidget implements AfterContentChecked, AfterViewInit {
@Input()
tabs: TabModel[] = [];
@ -31,14 +31,26 @@ export class TabsWidget implements AfterViewInit {
@Output()
formTabChanged: EventEmitter<FormFieldModel> = new EventEmitter<FormFieldModel>();
visibleTabs: TabModel[] = [];
hasTabs() {
return this.tabs && this.tabs.length > 0;
}
ngAfterContentChecked() {
this.filterVisibleTabs();
}
ngAfterViewInit() {
this.setupMaterialComponents();
}
filterVisibleTabs() {
this.visibleTabs = this.tabs.filter(tab => {
return tab.isVisible;
});
}
setupMaterialComponents(): boolean {
// workaround for MDL issues with dynamic components
if (componentHandler) {
@ -48,8 +60,8 @@ export class TabsWidget implements AfterViewInit {
return false;
}
tabChanged( field: FormFieldModel ) {
this.formTabChanged.emit(field);
tabChanged(field: FormFieldModel) {
this.formTabChanged.emit(field);
}
}