AAE-29501 Filter columns clears previously selected columns

lib/core/src/lib/datatable/components/columns-selector/columns-search-filter.pipe.spec.ts

@@ -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'
+            }
+        ]);
+    });
+});

lib/core/src/lib/datatable/components/columns-selector/columns-search-filter.pipe.ts

@@ -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 : '';
+    }
+}

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

@@ -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"

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

@@ -28,11 +28,22 @@ 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
@@ -72,19 +83,37 @@ export class ColumnsSelectorComponent implements OnInit {
 
         this.searchInputControl.valueChanges.pipe(debounceTime(300), takeUntilDestroyed(this.destroyRef)).subscribe((searchQuery) => {
             this.searchQuery = searchQuery;
-            this.updateColumnItems();
         });
     }
 
+    closeMenu(): void {
+        this.mainMenuTrigger.closeMenu();
+    }
+
+    changeColumnVisibility(dataColumn: DataColumn): void {
+        const selectedColumn = this.columnItems.find((column) => column.id === dataColumn.id);
+        selectedColumn.isHidden = !selectedColumn.isHidden;
+    }
+
+    apply(): void {
+        this.submitColumnsVisibility.emit(this.columnItems);
+        this.closeMenu();
+    }
+
+    isCheckboxDisabled(column: DataColumn): boolean {
+        return (
+            this.maxColumnsVisible &&
+            column.isHidden &&
+            this.maxColumnsVisible >= this.columnItems.filter((dataColumn) => !dataColumn.isHidden).length
+        );
+    }
+
     private updateColumnItems(): void {
-        let columns = this.columns.map((column) => ({ ...column }));
+        let columns = clone(this.columns);
         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;
@@ -114,23 +143,6 @@ export class ColumnsSelectorComponent implements OnInit {
         return result;
     }
 
-    changeColumnVisibility(column: DataColumn): void {
-        column.isHidden = !column.isHidden;
-    }
-
-    apply(): void {
-        this.submitColumnsVisibility.emit(this.columnItems);
-        this.closeMenu();
-    }
-
-    isCheckboxDisabled(column: DataColumn): boolean {
-        return (
-            this.maxColumnsVisible &&
-            column.isHidden &&
-            this.maxColumnsVisible >= this.columnItems.filter((dataColumn) => !dataColumn.isHidden).length
-        );
-    }
-
     private sortColumns(columns: DataColumn[]): DataColumn[] {
         if (this.columnsSorting) {
             const shownColumns = columns.filter((column) => !column.isHidden);