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

[DW-50]: New features for accordion-group component (#1851)

Browse Source 
[ADF-557] -  Add a new property called showIcon as input to hide/show filter icons.
This commit is contained in:
Infad Kachancheri 2017-05-09 18:10:17 +05:30 committed by Eugenio Romano
parent 664565a42a
commit 22bbffdb21
3 changed files with 66 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.html
View File

@ -1,15 +1,17 @@
<div class="adf-panel adf-panel-default" [ngClass]="{'adf-panel-open': isOpen}">
<div class="adf-panel-heading" [ngClass]="{'adf-panel-heading-selected': isSelected}">
<div *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon">
<i class="material-icons">{{headingIcon}}</i>
<div (click)="onHeadingClick()">
<div id="heading-icon" *ngIf="hasHeadingIcon()" class="adf-panel-heading-icon">
<i class="material-icons">{{headingIcon}}</i>
</div>
<div id="heading-text" class="adf-panel-heading-text">{{heading}}</div>
</div>
<div class="adf-panel-heading-text">{{heading}}</div>
<div id="accordion-button" class="adf-panel-heading-toggle" (click)="toggleOpen($event)">
<div id="accordion-button" *ngIf="!isGroupContentEmpty()" class="adf-panel-heading-toggle" (click)="toggleOpen($event)">
<i class="material-icons">{{getAccordionIcon()}}</i>
</div>
</div>
<div class="adf-panel-collapse" [hidden]="!isOpen">
<div class="adf-panel-body">
<div class="adf-panel-body" #contentWrapper>
<ng-content></ng-content>
</div>
</div>

51
ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.spec.ts
View File

@ -45,14 +45,15 @@ describe('AccordionGroupComponent', () => {
it('should be closed by default', () => {
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
fixture.whenStable().then(() => {
fixture.detectChanges();
let headerToggle = fixture.nativeElement.querySelector('.adf-panel-heading-toggle .material-icons');
expect(headerToggle.innerText).toEqual('expand_more');
let headerText = fixture.nativeElement.querySelector('.adf-panel-heading-text');
let headerText = element.querySelector('#heading-text');
expect(headerText.innerText).toEqual('Fake Header');
let headerIcon = fixture.nativeElement.querySelector('.adf-panel-heading-icon .material-icons');
let headerIcon = element.querySelector('#heading-icon .material-icons');
expect(headerIcon.innerText).toEqual('fake-icon');
let headerToggle = element.querySelector('#accordion-button .material-icons');
expect(headerToggle.innerText).toEqual('expand_more');
});
});
@ -60,17 +61,53 @@ describe('AccordionGroupComponent', () => {
component.isSelected = true;
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
fixture.detectChanges();
element.querySelector('#accordion-button').click();
fixture.whenStable().then(() => {
fixture.detectChanges();
let headerText = fixture.nativeElement.querySelector('.adf-panel-heading-text');
let headerText = element.querySelector('#heading-text');
expect(headerText.innerText).toEqual('Fake Header');
let headerIcon = fixture.nativeElement.querySelector('.adf-panel-heading-icon .material-icons');
let headerIcon = element.querySelector('#heading-icon .material-icons');
expect(headerIcon.innerText).toEqual('fake-icon');
let headerToggle = fixture.nativeElement.querySelector('.adf-panel-heading-toggle .material-icons');
let headerToggle = element.querySelector('#accordion-button .material-icons');
expect(headerToggle.innerText).toEqual('expand_less');
});
});
it('should hide expand icon by default', () => {
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
component.contentWrapper.nativeElement.innerHTML = '';
fixture.whenStable().then(() => {
fixture.detectChanges();
let headerIcon = element.querySelector('#accordion-button');
expect(headerIcon).toBeNull();
});
});
it('should show expand icon by default', () => {
component.heading = 'Fake Header';
component.headingIcon = 'fake-icon';
component.contentWrapper.nativeElement.innerHTML = '<a>Test</a>';
fixture.whenStable().then(() => {
fixture.detectChanges();
let headerIcon = element.querySelector('#accordion-button');
expect(headerIcon).toBeDefined();
});
});
it('should emit an event when a heading clicked', (done) => {
component.heading = 'Fake Header';
fixture.detectChanges();
let heading: string = component.heading;
component.headingClick.subscribe((headName: string) => {
expect(headName).toBeDefined();
expect(headName).toEqual(heading);
done();
});
component.onHeadingClick();
});
});

16
ng2-components/ng2-alfresco-core/src/components/collapsable/accordion-group.component.ts
View File

@ -15,7 +15,7 @@
* limitations under the License.
*/
import { Component, Input, OnDestroy } from '@angular/core';
import { Component, Input, OnDestroy, Output, EventEmitter, ViewChild } from '@angular/core';
import { AccordionComponent } from './accordion.component';
@Component({
@ -28,12 +28,18 @@ export class AccordionGroupComponent implements OnDestroy {
private _isOpen: boolean = false;
private _isSelected: boolean = false;
@ViewChild('contentWrapper')
contentWrapper: any;
@Input()
heading: string;
@Input()
headingIcon: string;
@Output()
headingClick: EventEmitter<any> = new EventEmitter<any>();
@Input()
set isOpen(value: boolean) {
this._isOpen = value;
@ -75,4 +81,12 @@ export class AccordionGroupComponent implements OnDestroy {
getAccordionIcon(): string {
return this.isOpen ? 'expand_less' : 'expand_more';
}
onHeadingClick() {
this.headingClick.emit(this.heading);
}
isGroupContentEmpty() {
return this.contentWrapper.nativeElement.innerHTML.trim().length === 0;
}
}