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

* AAE-29501 Filter columns clears previously selected columns

* update

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

@@ -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 {
+    changeColumnVisibility(dataColumn: DataColumn): void {
-        const testResult = filterBy ? value.toLowerCase().indexOf(filterBy.toLowerCase()) > -1 : true;
+        const selectedColumn = this.columnItems.find((column) => column.id === dataColumn.id);
-        return testResult ? value : '';
+        selectedColumn.isHidden = !selectedColumn.isHidden;
-    }
-
-    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;
     }
 
     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);