RED-10659: implemented filtering, sorted filters and added search.

apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.html

@@ -3,7 +3,7 @@
     <iqser-popup-filter [primaryFiltersSlug]="'componentLogFilters'" [attr.help-mode-key]="'filter_components'"></iqser-popup-filter>
 </div>
 
-<div *ngIf="componentLogService.all$ | async as components" class="components-container" id="components-view">
+<div class="components-container" id="components-view">
     <div class="component-row">
         <div class="header">
             <div class="component">{{ 'component-management.table-header.component' | translate }}</div>
@@ -12,7 +12,7 @@
         <div class="row-separator"></div>
     </div>
 
-    <div *ngFor="let entry of components" class="component-row">
+    <div *ngFor="let entry of filteredComponents()" class="component-row">
         <redaction-editable-structured-component-value
             #editableComponent
             [entry]="entry"

apps/red-ui/src/app/modules/file-preview/components/structured-component-management/structured-component-management.component.ts

@@ -1,21 +1,22 @@
-import { Component, effect, Input, OnInit, signal, ViewChildren } from '@angular/core';
+import { Component, computed, effect, Input, OnInit, ViewChildren } from '@angular/core';
 import { List } from '@common-ui/utils';
 import { IconButtonTypes, LoadingService } from '@iqser/common-ui';
 import { ComponentLogEntry, Dictionary, File, IComponentLogEntry, WorkflowFileStatuses } from '@red/domain';
-import { combineLatest, firstValueFrom, Observable } from 'rxjs';
+import { firstValueFrom, map } from 'rxjs';
 import { EditableStructuredComponentValueComponent } from '../editable-structured-component-value/editable-structured-component-value.component';
 import { FilterService, PopupFilterComponent } from '@common-ui/filtering';
 import { ComponentLogFilterService } from '../../services/component-log-filter.service';
-import { AsyncPipe, NgForOf, NgIf } from '@angular/common';
+import { NgForOf } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { FilePreviewStateService } from '../../services/file-preview-state.service';
 import { ComponentLogService } from '@services/entity-services/component-log.service';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 @Component({
     selector: 'redaction-structured-component-management',
     templateUrl: './structured-component-management.component.html',
     styleUrls: ['./structured-component-management.component.scss'],
-    imports: [PopupFilterComponent, NgIf, AsyncPipe, TranslateModule, NgForOf, EditableStructuredComponentValueComponent],
+    imports: [PopupFilterComponent, TranslateModule, NgForOf, EditableStructuredComponentValueComponent],
 })
 export class StructuredComponentManagementComponent implements OnInit {
     protected readonly iconButtonTypes = IconButtonTypes;
@@ -23,6 +24,12 @@ export class StructuredComponentManagementComponent implements OnInit {
     @Input() dictionaries: Dictionary[];
     @ViewChildren('editableComponent') editableComponents: List<EditableStructuredComponentValueComponent>;
 
+    readonly filteredComponents = computed(() => this.#filteredComponents);
+    readonly #displayedComponents = toSignal(this.componentLogService.all$);
+    readonly #filterModel = toSignal(
+        this._filterService.getFilterModels$('componentLogFilters').pipe(map(filters => (filters ? [...filters] : []))),
+    );
+
     constructor(
         private readonly _loadingService: LoadingService,
         private readonly _componentLogFilterService: ComponentLogFilterService,
@@ -40,6 +47,13 @@ export class StructuredComponentManagementComponent implements OnInit {
         return this.file.workflowStatus !== WorkflowFileStatuses.APPROVED;
     }
 
+    get #filteredComponents() {
+        if (this.#filterModel() && this.#displayedComponents()) {
+            return this._componentLogFilterService.filterComponents(this.#displayedComponents(), this.#filterModel());
+        }
+        return this.#displayedComponents();
+    }
+
     async ngOnInit(): Promise<void> {
         await this.#loadData();
     }

apps/red-ui/src/app/modules/file-preview/services/component-log-filter.service.ts

@@ -1,15 +1,19 @@
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ComponentLogEntry } from '@red/domain';
-import { INestedFilter, NestedFilter } from '@common-ui/filtering';
+import { IFilterGroup, INestedFilter, keyChecker, NestedFilter } from '@common-ui/filtering';
+import { TranslateService } from '@ngx-translate/core';
+import { sortArray } from '@utils/sorters/custom-sort';
 
 @Injectable()
 export class ComponentLogFilterService {
+    readonly #translateService = inject(TranslateService);
+
     filterGroups(entities: ComponentLogEntry[]) {
         const allDistinctComponentLogs = new Set<string>();
 
         entities?.forEach(entry => allDistinctComponentLogs.add(entry.name));
 
-        const componentLogFilters = [...allDistinctComponentLogs].map(
+        const componentLogFilters = sortArray([...allDistinctComponentLogs]).map(
             id =>
                 new NestedFilter({
                     id: id,
@@ -21,7 +25,9 @@ export class ComponentLogFilterService {
             {
                 slug: 'componentLogFilters',
                 filters: componentLogFilters,
-            },
+                checker: keyChecker('name'),
+                filterceptionPlaceholder: this.#translateService.instant('component-management.filter.search-placeholder'),
+            } as IFilterGroup,
         ];
     }
 

apps/red-ui/src/assets/i18n/redact/de.json

@@ -560,6 +560,9 @@
       "undo": "Zurücksetzen"
     },
     "components": "Komponenten",
+    "filter": {
+      "search-placeholder": "Suche nach Komponente..."
+    },
     "table-header": {
       "component": "Komponente",
       "value": "Wert"

apps/red-ui/src/assets/i18n/redact/en.json

@@ -560,6 +560,9 @@
       "undo": "Undo"
     },
     "components": "Components",
+    "filter": {
+      "search-placeholder": "Search by component..."
+    },
     "table-header": {
       "component": "Component",
       "value": "Value"

apps/red-ui/src/assets/i18n/scm/de.json

@@ -560,6 +560,9 @@
       "undo": "Zurücksetzen"
     },
     "components": "Komponenten",
+    "filter": {
+      "search-placeholder": "Suche nach Komponente..."
+    },
     "table-header": {
       "component": "Komponente",
       "value": "Wert"

apps/red-ui/src/assets/i18n/scm/en.json

@@ -560,6 +560,9 @@
       "undo": "Undo"
     },
     "components": "Components",
+    "filter": {
+      "search-placeholder": "Search by component..."
+    },
     "table-header": {
       "component": "Component",
       "value": "Value"