ACS-8220: replace filterOutEvery pipe with simple api

lib/core/src/lib/datatable/components/datatable/datatable.component.html

@@ -28,7 +28,7 @@
             <div
                 class="adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-header adf-datatable-cell-data"
                  *ngFor="
-                    let col of (data.getColumns() | filterOutEvery:'isHidden':true);
+                    let col of getVisibleColumns();
                     let columnIndex = index
                     let lastColumn = last"
                  [attr.data-automation-id]="'auto_id_' + col.key"
@@ -202,9 +202,7 @@
                         {{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_FILE' | translate }}
                     </mat-checkbox>
                 </label>
-                <div *ngFor="
-                let col of (data.getColumns() | filterOutEvery:'isHidden':true),
-                let lastColumn = last;"
+                <div *ngFor="let col of getVisibleColumns(); let lastColumn = last;"
                      role="gridcell"
                      class="adf-datatable-cell adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-data"
                      [attr.title]="col.title | translate"

lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts

@@ -156,6 +156,41 @@ describe('DataTable', () => {
         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', () => {
         spyOn(dataTable.selectedItemsCountChanged, 'emit');
         dataTable.data = new ObjectDataTableAdapter([{ id: 0 }, { id: 1 }, { id: 2 }], [new ObjectDataColumn({ key: 'id' })]);
@@ -930,7 +965,7 @@ describe('DataTable', () => {
         );
         const rows = dataTable.data.getRows();
         const event = new MouseEvent('click');
-        Object.defineProperty(event, 'target', { value: { hasAttribute: () => null, closest: () => null} });
+        Object.defineProperty(event, 'target', { value: { hasAttribute: () => null, closest: () => null } });
         spyOn(dataTable, 'onRowClick');
 
         dataTable.onCheckboxLabelClick(rows[0], event);
@@ -943,7 +978,7 @@ describe('DataTable', () => {
         const event = new MouseEvent('click');
         Object.defineProperty(event, 'target', {
             value: {
-                getAttribute: (attr: string) => attr === 'data-adf-datatable-row-checkbox' ? 'data-adf-datatable-row-checkbox' : null,
+                getAttribute: (attr: string) => (attr === 'data-adf-datatable-row-checkbox' ? 'data-adf-datatable-row-checkbox' : null),
                 hasAttribute: (attr: string) => attr === 'data-adf-datatable-row-checkbox',
                 closest: () => null
             }
@@ -958,7 +993,7 @@ describe('DataTable', () => {
         const data = new ObjectDataTableAdapter([{}, {}], []);
         const rows = data.getRows();
         const event = new MouseEvent('click');
-        Object.defineProperty(event, 'target', { value: { hasAttribute: () => null, closest: () => 'element'} });
+        Object.defineProperty(event, 'target', { value: { hasAttribute: () => null, closest: () => 'element' } });
         spyOn(dataTable, 'onRowClick');
 
         dataTable.onCheckboxLabelClick(rows[0], event);

lib/core/src/lib/datatable/components/datatable/datatable.component.ts

@@ -50,7 +50,6 @@ import { DataRow } from '../../data/data-row.model';
 import { DataSorting } from '../../data/data-sorting.model';
 import { DataTableAdapter } from '../../data/datatable-adapter';
 import { DataTableRowComponent } from '../datatable-row/datatable-row.component';
-
 import { ObjectDataRow } from '../../data/object-datarow.model';
 import { ObjectDataColumn } from '../../data/object-datacolumn.model';
 import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
@@ -63,7 +62,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import { ResizeEvent } from '../../directives/resizable/types';
 import { CommonModule } from '@angular/common';
 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 { ResizableDirective } from '../../directives/resizable/resizable.directive';
 import { IconComponent } from '../../../icon';
@@ -97,7 +96,6 @@ export enum ShowHeaderMode {
         CdkDropList,
         TranslateModule,
         MatCheckboxModule,
-        FilterOutArrayObjectsByPropPipe,
         CdkDrag,
         DropZoneDirective,
         ResizableDirective,
@@ -407,6 +405,10 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
         return column.key === this.data.getSorting().key;
     }
 
+    getVisibleColumns(): DataColumn[] {
+        return this.data.getColumns().filter((column) => !column.isHidden);
+    }
+
     onDropHeaderColumn(event: CdkDragDrop<unknown>): void {
         const allColumns = this.data.getColumns();
         const shownColumns = allColumns.filter((column) => !column.isHidden);
@@ -982,7 +984,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
 
     onResizing({ rectangle: { width } }: ResizeEvent, colIndex: number): void {
         const timeoutId = setTimeout(() => {
-            const allColumns = this.data.getColumns().filter((column) => !column.isHidden);
+            const allColumns = this.getVisibleColumns();
             allColumns[colIndex].width = width;
             this.data.setColumns(allColumns);
 

lib/core/src/lib/pipes/pipe.module.ts

@@ -32,7 +32,6 @@ import { LocalizedRolePipe } from './localized-role.pipe';
 import { MomentDatePipe } from './moment-date.pipe';
 import { MomentDateTimePipe } from './moment-datetime.pipe';
 import { FilterStringPipe } from './filter-string.pipe';
-import { FilterOutArrayObjectsByPropPipe } from './filter-out-every-object-by-prop.pipe';
 import { DateTimePipe } from './date-time.pipe';
 
 export const CORE_PIPES = [
@@ -51,7 +50,6 @@ export const CORE_PIPES = [
     MomentDateTimePipe,
     DateTimePipe,
     FilterStringPipe,
-    FilterOutArrayObjectsByPropPipe,
     InitialUsernamePipe
 ] as const;
 

lib/core/src/lib/pipes/public-api.ts

@@ -32,4 +32,3 @@ export * from './moment-date.pipe';
 export * from './moment-datetime.pipe';
 export * from './date-time.pipe';
 export * from './filter-string.pipe';
-export * from './filter-out-every-object-by-prop.pipe';