mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
ACS-8220: replace filterOutEvery pipe with simple api (#10147)
* replace filterOutEvery pipe with simple api * reuse the new api
This commit is contained in:
@@ -28,7 +28,7 @@
|
|||||||
<div
|
<div
|
||||||
class="adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-header adf-datatable-cell-data"
|
class="adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-header adf-datatable-cell-data"
|
||||||
*ngFor="
|
*ngFor="
|
||||||
let col of (data.getColumns() | filterOutEvery:'isHidden':true);
|
let col of getVisibleColumns();
|
||||||
let columnIndex = index
|
let columnIndex = index
|
||||||
let lastColumn = last"
|
let lastColumn = last"
|
||||||
[attr.data-automation-id]="'auto_id_' + col.key"
|
[attr.data-automation-id]="'auto_id_' + col.key"
|
||||||
@@ -202,9 +202,7 @@
|
|||||||
{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate }}
|
{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate }}
|
||||||
</mat-checkbox>
|
</mat-checkbox>
|
||||||
</label>
|
</label>
|
||||||
<div *ngFor="
|
<div *ngFor="let col of getVisibleColumns(); let lastColumn = last;"
|
||||||
let col of (data.getColumns() | filterOutEvery:'isHidden':true),
|
|
||||||
let lastColumn = last;"
|
|
||||||
role="gridcell"
|
role="gridcell"
|
||||||
class="adf-datatable-cell adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-data"
|
class="adf-datatable-cell adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-data"
|
||||||
[attr.title]="col.title | translate"
|
[attr.title]="col.title | translate"
|
||||||
|
@@ -156,6 +156,41 @@ describe('DataTable', () => {
|
|||||||
fixture.destroy();
|
fixture.destroy();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should return only visible columns', () => {
|
||||||
|
const columns = [
|
||||||
|
{ key: 'col1', isHidden: false },
|
||||||
|
{ key: 'col2', isHidden: true },
|
||||||
|
{ key: 'col3', isHidden: false }
|
||||||
|
] as DataColumn[];
|
||||||
|
dataTable.data = new ObjectDataTableAdapter([], columns);
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
const visibleColumns = dataTable.getVisibleColumns();
|
||||||
|
expect(visibleColumns.length).toBe(2);
|
||||||
|
expect(visibleColumns[0].key).toBe('col1');
|
||||||
|
expect(visibleColumns[1].key).toBe('col3');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return an empty array if all columns are hidden', () => {
|
||||||
|
const columns = [
|
||||||
|
{ key: 'col1', isHidden: true },
|
||||||
|
{ key: 'col2', isHidden: true }
|
||||||
|
] as DataColumn[];
|
||||||
|
dataTable.data = new ObjectDataTableAdapter([], columns);
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
const visibleColumns = dataTable.getVisibleColumns();
|
||||||
|
expect(visibleColumns.length).toBe(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return an empty array if there are no columns', () => {
|
||||||
|
dataTable.data = new ObjectDataTableAdapter([], []);
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
const visibleColumns = dataTable.getVisibleColumns();
|
||||||
|
expect(visibleColumns.length).toBe(0);
|
||||||
|
});
|
||||||
|
|
||||||
it('should preserve the historical selection order', () => {
|
it('should preserve the historical selection order', () => {
|
||||||
spyOn(dataTable.selectedItemsCountChanged, 'emit');
|
spyOn(dataTable.selectedItemsCountChanged, 'emit');
|
||||||
dataTable.data = new ObjectDataTableAdapter([{ id: 0 }, { id: 1 }, { id: 2 }], [new ObjectDataColumn({ key: 'id' })]);
|
dataTable.data = new ObjectDataTableAdapter([{ id: 0 }, { id: 1 }, { id: 2 }], [new ObjectDataColumn({ key: 'id' })]);
|
||||||
|
@@ -50,7 +50,6 @@ import { DataRow } from '../../data/data-row.model';
|
|||||||
import { DataSorting } from '../../data/data-sorting.model';
|
import { DataSorting } from '../../data/data-sorting.model';
|
||||||
import { DataTableAdapter } from '../../data/datatable-adapter';
|
import { DataTableAdapter } from '../../data/datatable-adapter';
|
||||||
import { DataTableRowComponent } from '../datatable-row/datatable-row.component';
|
import { DataTableRowComponent } from '../datatable-row/datatable-row.component';
|
||||||
|
|
||||||
import { ObjectDataRow } from '../../data/object-datarow.model';
|
import { ObjectDataRow } from '../../data/object-datarow.model';
|
||||||
import { ObjectDataColumn } from '../../data/object-datacolumn.model';
|
import { ObjectDataColumn } from '../../data/object-datacolumn.model';
|
||||||
import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
|
import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
|
||||||
@@ -63,7 +62,7 @@ import { DomSanitizer } from '@angular/platform-browser';
|
|||||||
import { ResizeEvent } from '../../directives/resizable/types';
|
import { ResizeEvent } from '../../directives/resizable/types';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { TranslateModule } from '@ngx-translate/core';
|
import { TranslateModule } from '@ngx-translate/core';
|
||||||
import { FileTypePipe, FilterOutArrayObjectsByPropPipe, LocalizedDatePipe } from '../../../pipes';
|
import { FileTypePipe, LocalizedDatePipe } from '../../../pipes';
|
||||||
import { DropZoneDirective } from '../../directives/drop-zone.directive';
|
import { DropZoneDirective } from '../../directives/drop-zone.directive';
|
||||||
import { ResizableDirective } from '../../directives/resizable/resizable.directive';
|
import { ResizableDirective } from '../../directives/resizable/resizable.directive';
|
||||||
import { IconComponent } from '../../../icon';
|
import { IconComponent } from '../../../icon';
|
||||||
@@ -97,7 +96,6 @@ export enum ShowHeaderMode {
|
|||||||
CdkDropList,
|
CdkDropList,
|
||||||
TranslateModule,
|
TranslateModule,
|
||||||
MatCheckboxModule,
|
MatCheckboxModule,
|
||||||
FilterOutArrayObjectsByPropPipe,
|
|
||||||
CdkDrag,
|
CdkDrag,
|
||||||
DropZoneDirective,
|
DropZoneDirective,
|
||||||
ResizableDirective,
|
ResizableDirective,
|
||||||
@@ -407,6 +405,10 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
|
|||||||
return column.key === this.data.getSorting().key;
|
return column.key === this.data.getSorting().key;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getVisibleColumns(): DataColumn[] {
|
||||||
|
return this.data.getColumns().filter((column) => !column.isHidden);
|
||||||
|
}
|
||||||
|
|
||||||
onDropHeaderColumn(event: CdkDragDrop<unknown>): void {
|
onDropHeaderColumn(event: CdkDragDrop<unknown>): void {
|
||||||
const allColumns = this.data.getColumns();
|
const allColumns = this.data.getColumns();
|
||||||
const shownColumns = allColumns.filter((column) => !column.isHidden);
|
const shownColumns = allColumns.filter((column) => !column.isHidden);
|
||||||
@@ -984,7 +986,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
|
|||||||
|
|
||||||
onResizing({ rectangle: { width } }: ResizeEvent, colIndex: number): void {
|
onResizing({ rectangle: { width } }: ResizeEvent, colIndex: number): void {
|
||||||
const timeoutId = setTimeout(() => {
|
const timeoutId = setTimeout(() => {
|
||||||
const allColumns = this.data.getColumns().filter((column) => !column.isHidden);
|
const allColumns = this.getVisibleColumns();
|
||||||
allColumns[colIndex].width = width;
|
allColumns[colIndex].width = width;
|
||||||
this.data.setColumns(allColumns);
|
this.data.setColumns(allColumns);
|
||||||
|
|
||||||
|
@@ -1,75 +0,0 @@
|
|||||||
/*!
|
|
||||||
* @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 { FilterOutArrayObjectsByPropPipe } from './filter-out-every-object-by-prop.pipe';
|
|
||||||
|
|
||||||
describe('FilterOutArrayObjectsByPropPipe', () => {
|
|
||||||
let pipe: FilterOutArrayObjectsByPropPipe<any>;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
pipe = new FilterOutArrayObjectsByPropPipe();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should filter out object', () => {
|
|
||||||
const testArray = [{
|
|
||||||
id: 1
|
|
||||||
}, {
|
|
||||||
id: 2
|
|
||||||
}, {
|
|
||||||
id: 3
|
|
||||||
}];
|
|
||||||
|
|
||||||
const result = pipe.transform(testArray, 'id', 3);
|
|
||||||
|
|
||||||
expect(result.length).toBe(testArray.length - 1);
|
|
||||||
expect(result[0]).toEqual(testArray[0]);
|
|
||||||
expect(result[1]).toEqual(testArray[1]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should filter out multiple objects', () => {
|
|
||||||
const testArray = [{
|
|
||||||
isHidden: true
|
|
||||||
}, {
|
|
||||||
isHidden: true
|
|
||||||
}, {
|
|
||||||
isHidden: true
|
|
||||||
}, {
|
|
||||||
isHidden: false
|
|
||||||
}];
|
|
||||||
|
|
||||||
const result = pipe.transform(testArray, 'isHidden', true);
|
|
||||||
|
|
||||||
expect(result.length).toBe(1);
|
|
||||||
expect(result[0]).toEqual(testArray[3]);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should work with empty array', () => {
|
|
||||||
const testArray = [];
|
|
||||||
|
|
||||||
const result = pipe.transform(testArray, 'prop', true);
|
|
||||||
|
|
||||||
expect(result.length).toBe(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should work with non existing prop', () => {
|
|
||||||
const testArray = [{ prop: 1 }];
|
|
||||||
|
|
||||||
const result = pipe.transform(testArray, 'nonExistionProp', 1);
|
|
||||||
|
|
||||||
expect(result.length).toBe(1);
|
|
||||||
});
|
|
||||||
});
|
|
@@ -1,28 +0,0 @@
|
|||||||
/*!
|
|
||||||
* @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 { Pipe, PipeTransform } from '@angular/core';
|
|
||||||
|
|
||||||
@Pipe({
|
|
||||||
name: 'filterOutEvery',
|
|
||||||
standalone: true
|
|
||||||
})
|
|
||||||
export class FilterOutArrayObjectsByPropPipe<T> implements PipeTransform {
|
|
||||||
transform(values: T[], filterKey: string, filterValue: any): T[] {
|
|
||||||
return (values ?? []).filter((value) => value[filterKey] !== filterValue);
|
|
||||||
}
|
|
||||||
}
|
|
@@ -32,7 +32,6 @@ import { LocalizedRolePipe } from './localized-role.pipe';
|
|||||||
import { MomentDatePipe } from './moment-date.pipe';
|
import { MomentDatePipe } from './moment-date.pipe';
|
||||||
import { MomentDateTimePipe } from './moment-datetime.pipe';
|
import { MomentDateTimePipe } from './moment-datetime.pipe';
|
||||||
import { FilterStringPipe } from './filter-string.pipe';
|
import { FilterStringPipe } from './filter-string.pipe';
|
||||||
import { FilterOutArrayObjectsByPropPipe } from './filter-out-every-object-by-prop.pipe';
|
|
||||||
import { DateTimePipe } from './date-time.pipe';
|
import { DateTimePipe } from './date-time.pipe';
|
||||||
|
|
||||||
export const CORE_PIPES = [
|
export const CORE_PIPES = [
|
||||||
@@ -51,7 +50,6 @@ export const CORE_PIPES = [
|
|||||||
MomentDateTimePipe,
|
MomentDateTimePipe,
|
||||||
DateTimePipe,
|
DateTimePipe,
|
||||||
FilterStringPipe,
|
FilterStringPipe,
|
||||||
FilterOutArrayObjectsByPropPipe,
|
|
||||||
InitialUsernamePipe
|
InitialUsernamePipe
|
||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
|
@@ -32,4 +32,3 @@ export * from './moment-date.pipe';
|
|||||||
export * from './moment-datetime.pipe';
|
export * from './moment-datetime.pipe';
|
||||||
export * from './date-time.pipe';
|
export * from './date-time.pipe';
|
||||||
export * from './filter-string.pipe';
|
export * from './filter-string.pipe';
|
||||||
export * from './filter-out-every-object-by-prop.pipe';
|
|
||||||
|
Reference in New Issue
Block a user