feat: added Component and Environment input filtering

package.json

@@ -24,18 +24,18 @@
   "license": "MIT",
   "private": true,
   "dependencies": {
-    "@angular/animations": "~21.0.5",
-    "@angular/cdk": "~21.0.3",
-    "@angular/common": "~21.0.5",
-    "@angular/compiler": "~21.0.5",
-    "@angular/core": "~21.0.5",
-    "@angular/forms": "~21.0.5",
-    "@angular/material": "~21.0.3",
-    "@angular/platform-browser": "~21.0.5",
-    "@angular/platform-browser-dynamic": "~21.0.5",
-    "@angular/router": "~21.0.5",
-    "@angular/service-worker": "~21.0.5",
-    "@angular/localize": "~21.0.5",
+    "@angular/animations": "~21.0.6",
+    "@angular/cdk": "~21.0.5",
+    "@angular/common": "~21.0.6",
+    "@angular/compiler": "~21.0.6",
+    "@angular/core": "~21.0.6",
+    "@angular/forms": "~21.0.6",
+    "@angular/material": "~21.0.5",
+    "@angular/platform-browser": "~21.0.6",
+    "@angular/platform-browser-dynamic": "~21.0.6",
+    "@angular/router": "~21.0.6",
+    "@angular/service-worker": "~21.0.6",
+    "@angular/localize": "~21.0.6",
     "@apollo/client": "^4.0.11",
     "@ng-bootstrap/ng-bootstrap": "~20.0.0",
     "@types/grecaptcha": "^3.0.9",
@@ -49,10 +49,10 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@angular/build": "^21.0.3",
-    "@angular/cli": "^21.0.3",
-    "@angular/compiler-cli": "~21.0.5",
-    "@types/node": "^25.0.2",
+    "@angular/build": "^21.0.4",
+    "@angular/cli": "^21.0.4",
+    "@angular/compiler-cli": "~21.0.6",
+    "@types/node": "^25.0.3",
     "@types/react": "^19.2.7",
     "angular-eslint": "21.1.0",
     "eslint": "^9.39.2",

src/app/dashboard-module/domain-module/components/components.component.html

@@ -27,7 +27,7 @@
     </div>
     @if (!loading()) {
     <div>
-        @for (component of components(); track component) {
+        @for (component of filteredComponents(); track component) {
         <div class="grid-container">
             <label class="label-env-name" for="inputComponentName">
                 <mat-icon>devices_other</mat-icon>

src/app/dashboard-module/domain-module/components/components.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, inject, signal } from '@angular/core';
+import { Component, OnInit, OnDestroy, inject, signal, computed } from '@angular/core';
 import { Subject } from 'rxjs';
 import { FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ToastService } from 'src/app/_helpers/toast.service';
@@ -50,6 +50,8 @@ export class ComponentsComponent extends BasicComponent implements OnInit, OnDes
   private readonly unsubscribe = new Subject<void>();
 
   components = signal<SwitcherComponent[]>([]);
+  filterText = signal<string>('');
+  filteredComponents = computed(() => this.filterComponents());
 
   compFormControl = new FormControl('', [
     Validators.required,
@@ -85,6 +87,11 @@ export class ComponentsComponent extends BasicComponent implements OnInit, OnDes
     this.loadComponents();
     this.readPermissionToObject();
     this.updateRoute();
+
+    // Subscribe to form control changes for filtering
+    this.compFormControl.valueChanges
+      .pipe(takeUntil(this.unsubscribe))
+      .subscribe(value => this.filterText.set(value || ''));
   }
 
   ngOnDestroy() {
@@ -131,6 +138,18 @@ export class ComponentsComponent extends BasicComponent implements OnInit, OnDes
     });
   }
 
+  private filterComponents(): SwitcherComponent[] {
+    const filter = this.filterText().toLowerCase().trim();
+
+    if (!filter) {
+      return this.components();
+    }
+
+    return this.components().filter(component => 
+      component.name.toLowerCase().includes(filter)
+    );
+  }
+
   createComponent() {
     const { valid } = this.compFormControl;
 

src/app/dashboard-module/domain-module/environments/environments.component.html

@@ -27,7 +27,7 @@
     </div>
     @if (!loading()) {
     <div>
-        @for (environment of environments(); track environment) {
+        @for (environment of filteredEnvironments(); track environment) {
         <div class="grid-container">
             <label class="label-env-name" for="inputEnvironmentName">
                 <mat-icon>apps</mat-icon>

src/app/dashboard-module/domain-module/environments/environments.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, OnDestroy, inject, signal } from '@angular/core';
+import { Component, OnInit, OnDestroy, inject, signal, computed } from '@angular/core';
 import { Subject } from 'rxjs';
 import { map, takeUntil } from 'rxjs/operators';
 import { FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -42,6 +42,8 @@ export class EnvironmentsComponent implements OnInit, OnDestroy {
   private readonly unsubscribe = new Subject<void>();
 
   environments = signal<Environment[]>([]);
+  filterText = signal<string>('');
+  filteredEnvironments = computed(() => this.filterEnvironments());
 
   envFormControl = new FormControl('', [
     Validators.required,
@@ -76,6 +78,11 @@ export class EnvironmentsComponent implements OnInit, OnDestroy {
     this.loadEnvironments();
     this.readPermissionToObject();
     this.updateRoute();
+
+    // Subscribe to form control changes for filtering
+    this.envFormControl.valueChanges
+      .pipe(takeUntil(this.unsubscribe))
+      .subscribe(value => this.filterText.set(value || ''));
   }
 
   ngOnDestroy() {
@@ -214,4 +221,16 @@ export class EnvironmentsComponent implements OnInit, OnDestroy {
     }
   }
 
+  private filterEnvironments(): Environment[] {
+    const filter = this.filterText().toLowerCase().trim();
+
+    if (!filter) {
+      return this.environments();
+    }
+
+    return this.environments().filter(environment => 
+      environment.name.toLowerCase().includes(filter)
+    );
+  }
+
 }

src/app/services/api.service.ts

@@ -1,24 +1,24 @@
-import { throwError } from "rxjs";
+import { throwError } from 'rxjs';
 
 export class ApiService {
 
     handleError(error: any) {
-        let errorMessage = '';
-
         if (error.error instanceof ErrorEvent) {
-            errorMessage = `Error: ${error.error.message}`;
-        } else if (error.status === 401) {
-            return throwError(() => error);
-        } else if (error.status === 422) {
-            errorMessage = 'Invalid arguments';
-        } else if (error.status === 404) {
-            errorMessage = error.error ?? 'Value not found';
-        } else if (error.status === 503 || error.status === 0) {
-            errorMessage = 'Switcher API is offline';
-        } else {
-            errorMessage = error.error;
+            return throwError(() => `Error: ${error.error.message}`);
         }
 
-        return throwError(() => errorMessage);
+        switch (error.status) {
+            case 401:
+                return throwError(() => error);
+            case 422:
+                return throwError(() => 'Invalid arguments');
+            case 404:
+                return throwError(() => error.error ?? 'Value not found');
+            case 503:
+            case 0:
+                return throwError(() => 'Switcher API is offline');
+            default:
+                return throwError(() => error.error);
+        }
     }
 }