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

[AAE-7817] Show hide columns on datatable (#7580)

Browse Source 
* [AAE-7817]  Show hide columns for data-table

* Update

* update tests and uses material harness

* added pipes test

* update

* update

* added tests for datatable

* update

* Added documentation

* Fix for drop column header

* lint fix

* fix lint
This commit is contained in:
Bartosz Sekuła
2022-05-10 19:09:26 +02:00
committed by GitHub
parent 3a5daf960c
commit 7629797408
25 changed files with 862 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
lib/core/datatable/components/columns-selector/columns-selector.component.html Normal file
View File

@@ -0,0 +1,52 @@
<div class="adf-columns-selector" (click)="$event.stopPropagation();">
<div class="adf-columns-selector-header">
<span class="adf-columns-selector-header-label">
{{"ADF-DATATABLE.COLUMNS_SELECTOR.COLUMNS" | translate}}
</span>
<button mat-icon-button (click)="closeMenu()">
<mat-icon>close</mat-icon>
</button>
</div>
<mat-divider class="adf-columns-selector-divider"></mat-divider>
<div class="adf-columns-selector-search-input-container">
<mat-icon
class="adf-columns-selector-search-input-icon">
search
</mat-icon>
<input
[formControl]="searchInputControl"
class="adf-columns-selector-search-input"
type="text"
[placeholder]='"ADF-DATATABLE.COLUMNS_SELECTOR.SEARCH" | translate'>
</div>
<ng-container *ngFor="let column of columnItems">
<div
*ngIf="(column.title | translate | filterString:searchQuery) as translatedTitle"
class="adf-columns-selector-list-item-container">
<mat-checkbox
color="primary"
class="adf-columns-selector-column-checkbox"
[attr.data-automation-id]="'adf-columns-selector-column-checkbox-' + column.title"
[checked]="!column.isHidden"
(change)="changeColumnVisibility(column)">
<div class="adf-columns-selector-list-content">{{translatedTitle}}</div>
</mat-checkbox>
</div>
</ng-container>
<mat-divider class="adf-columns-selector-divider"></mat-divider>
<div class="adf-columns-selector-footer">
<button
mat-flat-button
color="primary"
(click)="apply()">
{{"ADF-DATATABLE.COLUMNS_SELECTOR.APPLY" | translate}}
</button>
</div>
</div>

87
lib/core/datatable/components/columns-selector/columns-selector.component.scss Normal file
View File

@@ -0,0 +1,87 @@
$adf-columns-selector-space: 12px;
@mixin adf-columns-selector-side-padding {
padding: 0 $adf-columns-selector-space;
}
@mixin adf-columns-selector-top-bottom-padding {
padding: $adf-columns-selector-space 0;
}
.adf-columns-selector {
@include adf-columns-selector-top-bottom-padding;
min-width: 277px;
&-header {
@include adf-columns-selector-side-padding;
display: flex;
justify-content: space-between;
align-items: center;
}
&-header-label {
font-size: var(--theme-body-1-font-size);
}
&-list-item-container {
margin-top: 10px;
&:hover {
background-color: var(--theme-bg-hover-color);
}
}
&-list-content {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
width: 210px;
}
&-column-checkbox {
padding: 0 20px;
}
&-footer {
@include adf-columns-selector-side-padding;
display: flex;
justify-content: flex-end;
}
&-divider {
margin: 16px 0;
}
&-search-input-container {
@include adf-columns-selector-side-padding;
position: relative;
display: flex;
align-items: center;
margin-bottom: 15px;
}
&-search-input {
padding: 10px 10px 10px 29px;
width: 100%;
outline: 0;
border-radius: 6px;
border: 1px solid var(--theme-background-color);
background: var(--theme-background-color);
:focus {
outline: none !important;
}
}
&-search-input-icon {
position: absolute;
left: 17px;
top: 10px;
font-size: var(--theme-adf-icon-1-font-size);
}
}

162
lib/core/datatable/components/columns-selector/columns-selector.component.spec.ts Normal file
View File

@@ -0,0 +1,162 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { ColumnsSelectorComponent } from './columns-selector.component';
import { DataColumn } from '../../data/data-column.model';
import { Observable, Subject } from 'rxjs';
import { MatMenuTrigger } from '@angular/material/menu';
import { CoreTestingModule } from 'core/testing';
import { TranslateModule } from '@ngx-translate/core';
import { By } from '@angular/platform-browser';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { HarnessLoader } from '@angular/cdk/testing';
import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
describe('ColumnsSelectorComponent', () => {
let fixture: ComponentFixture<ColumnsSelectorComponent>;
let loader: HarnessLoader;
let component: ColumnsSelectorComponent;
let inputColumns: DataColumn[] = [];
const menuOpenedTrigger = new Subject<void>();
const menuClosedTrigger = new Subject<void>();
let mainMenuTrigger: { menuOpened: Observable<void>; menuClosed: Observable<void> };
beforeEach(() => {
TestBed.configureTestingModule({
imports: [
TranslateModule.forRoot(),
CoreTestingModule
],
declarations: [ColumnsSelectorComponent]
}).compileComponents();
fixture = TestBed.createComponent(ColumnsSelectorComponent);
loader = TestbedHarnessEnvironment.loader(fixture);
component = fixture.componentInstance;
inputColumns = [{
id: 'id0',
key: 'key0',
title: 'title0',
type: 'text'
}, {
id: 'id1',
key: 'key1',
title: 'title1',
type: 'text'
}, {
id: 'id2',
key: 'key2',
title: 'title2',
type: 'text'
}, {
id: 'id3',
key: 'NoTitle',
type: 'text'
}, {
id: 'id4',
key: 'IsHidden',
type: 'text',
title: 'title4',
isHidden: true
}];
mainMenuTrigger = {
menuOpened: menuOpenedTrigger.asObservable(),
menuClosed: menuClosedTrigger.asObservable()
};
component.columns = inputColumns;
component.mainMenuTrigger = mainMenuTrigger as MatMenuTrigger;
fixture.detectChanges();
});
it('should clear search after closing menu', fakeAsync(() => {
menuOpenedTrigger.next();
fixture.detectChanges();
let searchInput = fixture.debugElement.query(By.css('.adf-columns-selector-search-input')).nativeElement;
searchInput.value = 'TEST';
searchInput.dispatchEvent(new Event('input'));
tick(300);
expect(searchInput.value).toBe('TEST');
menuClosedTrigger.next();
tick(300);
searchInput = fixture.debugElement.query(By.css('.adf-columns-selector-search-input')).nativeElement;
expect(searchInput.value).toBe('');
}));
it('should list only columns with title', async () => {
menuOpenedTrigger.next();
fixture.detectChanges();
const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness);
expect(checkboxes.length).toBe(4);
expect(await checkboxes[0].getLabelText()).toBe(inputColumns[0].title);
expect(await checkboxes[1].getLabelText()).toBe(inputColumns[1].title);
expect(await checkboxes[2].getLabelText()).toBe(inputColumns[2].title);
expect(await checkboxes[3].getLabelText()).toBe(inputColumns[4].title);
});
it('should filter columns by search text', fakeAsync(async () => {
fixture.detectChanges();
menuOpenedTrigger.next();
const searchInput = fixture.debugElement.query(By.css('.adf-columns-selector-search-input')).nativeElement;
searchInput.value = inputColumns[0].title;
searchInput.dispatchEvent(new Event('input'));
tick(400);
fixture.detectChanges();
const columnCheckboxes = await loader.getAllHarnesses(MatCheckboxHarness);
expect(columnCheckboxes.length).toBe(1);
expect(await columnCheckboxes[0].getLabelText()).toBe(inputColumns[0].title);
}));
it('should change column visibility', async () => {
menuOpenedTrigger.next();
fixture.detectChanges();
const firstColumnCheckbox = await loader.getHarness(MatCheckboxHarness);
await firstColumnCheckbox.toggle();
expect(component.columnItems[0].isHidden).toBe(true);
});
it('should set proper default state for checkboxes', async () => {
menuOpenedTrigger.next();
fixture.detectChanges();
const checkboxes = await loader.getAllHarnesses(MatCheckboxHarness);
expect(await checkboxes[0].isChecked()).toBe(true);
expect(await checkboxes[1].isChecked()).toBe(true);
expect(await checkboxes[2].isChecked()).toBe(true);
expect(await checkboxes[3].isChecked()).toBe(false);
});
});

83
lib/core/datatable/components/columns-selector/columns-selector.component.ts Normal file
View File

@@ -0,0 +1,83 @@
/*!
* @license
* Copyright 2019 Alfresco Software, Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatMenuTrigger } from '@angular/material/menu';
import { Subject } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';
import { DataColumn } from '../../data/data-column.model';
@Component({
selector: 'adf-datatable-column-selector',
templateUrl: './columns-selector.component.html',
styleUrls: ['./columns-selector.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ColumnsSelectorComponent implements OnInit, OnDestroy {
@Input()
columns: DataColumn[] = [];
@Input()
mainMenuTrigger: MatMenuTrigger;
@Output()
submitColumnsVisibility = new EventEmitter<DataColumn[]>();
onDestroy$ = new Subject();
columnItems: DataColumn[] = [];
searchInputControl = new FormControl('');
searchQuery = '';
ngOnInit(): void {
this.mainMenuTrigger.menuOpened.pipe(
takeUntil(this.onDestroy$)
).subscribe(() => {
this.columnItems = this.columns.map(column => ({...column}));
});
this.mainMenuTrigger.menuClosed.pipe(
takeUntil(this.onDestroy$)
).subscribe(() => {
this.searchInputControl.setValue('');
});
this.searchInputControl.valueChanges.pipe(
debounceTime(300),
takeUntil(this.onDestroy$)
).subscribe((searchQuery) => {
this.searchQuery = searchQuery;
});
}
ngOnDestroy() {
this.onDestroy$.next(true);
this.onDestroy$.complete();
}
closeMenu(): void {
this.mainMenuTrigger.closeMenu();
}
changeColumnVisibility(column: DataColumn): void {
column.isHidden = !column.isHidden;
}
apply(): void {
this.submitColumnsVisibility.emit(this.columnItems);
this.closeMenu();
}
}