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 *ngIf="hasTabs()" class="alfresco-tabs-widget">
<div alfresco-mdl-tabs> <div alfresco-mdl-tabs>
<div class="mdl-tabs__tab-bar"> <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" [href]="'#' + tab.id"
class="mdl-tabs__tab" [class.is-active]="isFirst"> class="mdl-tabs__tab" [class.is-active]="isFirst">
{{tab.title}} {{tab.title}}
</a> </a>
</div> </div>
<div *ngFor="let tab of tabs; let isFirst = first" <div *ngFor="let tab of visibleTabs; let isFirst = first"
class="mdl-tabs__panel" class="mdl-tabs__panel"
[class.is-active]="isFirst" [class.is-active]="isFirst"
[attr.id]="tab.id"> [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. * 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'; import { TabModel, FormFieldModel } from './../core/index';
@Component({ @Component({
@ -23,7 +23,7 @@ import { TabModel, FormFieldModel } from './../core/index';
selector: 'tabs-widget', selector: 'tabs-widget',
templateUrl: './tabs.widget.html' templateUrl: './tabs.widget.html'
}) })
export class TabsWidget implements AfterViewInit { export class TabsWidget implements AfterContentChecked, AfterViewInit {
@Input() @Input()
tabs: TabModel[] = []; tabs: TabModel[] = [];
@ -31,14 +31,26 @@ export class TabsWidget implements AfterViewInit {
@Output() @Output()
formTabChanged: EventEmitter<FormFieldModel> = new EventEmitter<FormFieldModel>(); formTabChanged: EventEmitter<FormFieldModel> = new EventEmitter<FormFieldModel>();
visibleTabs: TabModel[] = [];
hasTabs() { hasTabs() {
return this.tabs && this.tabs.length > 0; return this.tabs && this.tabs.length > 0;
} }
ngAfterContentChecked() {
this.filterVisibleTabs();
}
ngAfterViewInit() { ngAfterViewInit() {
this.setupMaterialComponents(); this.setupMaterialComponents();
} }
filterVisibleTabs() {
this.visibleTabs = this.tabs.filter(tab => {
return tab.isVisible;
});
}
setupMaterialComponents(): boolean { setupMaterialComponents(): boolean {
// workaround for MDL issues with dynamic components // workaround for MDL issues with dynamic components
if (componentHandler) { if (componentHandler) {
@ -48,8 +60,8 @@ export class TabsWidget implements AfterViewInit {
return false; return false;
} }
tabChanged( field: FormFieldModel ) { tabChanged(field: FormFieldModel) {
this.formTabChanged.emit(field); this.formTabChanged.emit(field);
} }
} }