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

AAE-29501 Filter columns clears previously selected columns (#10505)

Browse Source 
* AAE-29501 Filter columns clears previously selected columns

* update
This commit is contained in:
Bartosz Sekula 2024-12-18 10:43:18 -05:00 committed by GitHub
parent bb036cbf6e
commit 76d4c6a0c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 143 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
lib/core/src/lib/datatable/components/columns-selector/columns-search-filter.pipe.spec.ts Normal file
View File

@ -0,0 +1,65 @@
/*!
* @license
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* 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 { ColumnsSearchFilterPipe } from './columns-search-filter.pipe';
import { DataColumn } from '../../data/data-column.model';
import { NoopTranslateModule } from '@alfresco/adf-core';
import { TestBed } from '@angular/core/testing';
describe('ColumnsSeearchFilterPipe', () => {
let pipe: ColumnsSearchFilterPipe;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [NoopTranslateModule, ColumnsSearchFilterPipe],
providers: [ColumnsSearchFilterPipe]
});
pipe = TestBed.inject(ColumnsSearchFilterPipe);
});
it('should filter columns', () => {
const columns: DataColumn[] = [
{
title: 'Column 1',
key: '',
type: 'text'
},
{
title: 'Column 2',
key: '',
type: 'number'
},
{
title: 'Column 3',
key: '',
type: 'number'
}
];
const filteredColumns = pipe.transform(columns, '1');
expect(filteredColumns.length).toBe(1);
expect(filteredColumns).toEqual([
{
title: 'Column 1',
key: '',
type: 'text'
}
]);
});
});

56
lib/core/src/lib/datatable/components/columns-selector/columns-search-filter.pipe.ts Normal file
View File

@ -0,0 +1,56 @@
/*!
* @license
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* 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 { inject, Pipe, PipeTransform } from '@angular/core';
import { DataColumn } from '../../data/data-column.model';
import { TranslationService } from '../../../translation';
@Pipe({
name: 'columnsSearchFilter',
standalone: true
})
export class ColumnsSearchFilterPipe implements PipeTransform {
private translationService = inject(TranslationService);
transform(columns: DataColumn[], searchByName: string): DataColumn[] {
const result = [];
for (const column of columns) {
if (!column.title) {
continue;
}
if (!searchByName) {
result.push(column);
continue;
}
const title = this.translationService.instant(column.title);
if (this.filterString(title, searchByName)) {
result.push(column);
}
}
return result;
}
private filterString(value: string = '', filterBy: string = ''): string {
const testResult = filterBy ? value.toLowerCase().indexOf(filterBy.toLowerCase()) > -1 : true;
return testResult ? value : '';
}
}

2
lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.html
View File

@ -37,7 +37,7 @@
</div>
<div class="adf-columns-selector-list-container">
<div *ngFor="let column of columnItems" class="adf-columns-selector-list-item">
<div *ngFor="let column of (columnItems | columnsSearchFilter: searchQuery)" class="adf-columns-selector-list-item">
<mat-checkbox
color="primary"
class="adf-columns-selector-column-checkbox"

62
lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.ts
View File

@ -26,20 +26,28 @@ import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatDividerModule } from '@angular/material/divider';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { TranslationService } from '../../../translation';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { clone } from 'lodash-es';
import { ColumnsSearchFilterPipe } from './columns-search-filter.pipe';
@Component({
selector: 'adf-datatable-column-selector',
standalone: true,
imports: [CommonModule, TranslateModule, MatButtonModule, MatIconModule, MatDividerModule, ReactiveFormsModule, MatCheckboxModule],
imports: [
CommonModule,
TranslateModule,
MatButtonModule,
MatIconModule,
MatDividerModule,
ReactiveFormsModule,
MatCheckboxModule,
ColumnsSearchFilterPipe
],
templateUrl: './columns-selector.component.html',
styleUrls: ['./columns-selector.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ColumnsSelectorComponent implements OnInit {
private translationService = inject(TranslationService);
@Input()
columns: DataColumn[] = [];
@ -72,50 +80,16 @@ export class ColumnsSelectorComponent implements OnInit {
this.searchInputControl.valueChanges.pipe(debounceTime(300), takeUntilDestroyed(this.destroyRef)).subscribe((searchQuery) => {
this.searchQuery = searchQuery;
this.updateColumnItems();
});
}
private updateColumnItems(): void {
let columns = this.columns.map((column) => ({ ...column }));
columns = this.filterColumnItems(columns, this.searchQuery);
columns = this.sortColumns(columns);
this.columnItems = columns;
}
closeMenu(): void {
this.mainMenuTrigger.closeMenu();
}
private filterString(value: string = '', filterBy: string = ''): string {
const testResult = filterBy ? value.toLowerCase().indexOf(filterBy.toLowerCase()) > -1 : true;
return testResult ? value : '';
}
private filterColumnItems(columns: DataColumn[], query: string): DataColumn[] {
const result = [];
for (const column of columns) {
if (!column.title) {
continue;
}
if (!query) {
result.push(column);
continue;
}
const title = this.translationService.instant(column.title);
if (this.filterString(title, query)) {
result.push(column);
}
}
return result;
}
changeColumnVisibility(column: DataColumn): void {
column.isHidden = !column.isHidden;
changeColumnVisibility(dataColumn: DataColumn): void {
const selectedColumn = this.columnItems.find((column) => column.id === dataColumn.id);
selectedColumn.isHidden = !selectedColumn.isHidden;
}
apply(): void {
@ -131,6 +105,12 @@ export class ColumnsSelectorComponent implements OnInit {
);
}
private updateColumnItems(): void {
let columns = clone(this.columns);
columns = this.sortColumns(columns);
this.columnItems = columns;
}
private sortColumns(columns: DataColumn[]): DataColumn[] {
if (this.columnsSorting) {
const shownColumns = columns.filter((column) => !column.isHidden);