queryparams aus url

client/src/app/modules/dashboard/dashboard.component.html

@@ -59,7 +59,7 @@
                 <p>Derzeit ausgegebene Schlüssel</p>
             </mat-card-content>
             <mat-card-actions>
-                <button matButton routerLink="/keys">Verwalten</button>
+                <button matButton routerLink="/keys" [queryParams]="{handedOut: true }">Verwalten</button>
             </mat-card-actions>
         </mat-card>
     </div>

client/src/app/modules/keys/keys.component.ts

@@ -1,7 +1,7 @@
 import { Component, inject } from '@angular/core';
 import { AG_GRID_LOCALE_DE } from '@ag-grid-community/locale';
 import { AgGridAngular } from 'ag-grid-angular';
-import { GridOptions,GridApi, GridReadyEvent, CellEditingStoppedEvent, ICellEditorParams } from 'ag-grid-community';
+import { GridOptions,GridApi, GridReadyEvent, CellEditingStoppedEvent, ICellEditorParams, FilterActionParams, FilterAction } from 'ag-grid-community';
 import { DatePipe } from '@angular/common';
 import { ApiService } from '../../shared/api.service';
 import { IKey } from '../../model/interface/key.interface';
@@ -18,11 +18,13 @@ import { ICylinder } from '../../model/interface/cylinder.interface';
 import { LostKeysComponent } from './components/lost-keys/lost-keys.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { SelectKeyCylinderComponent } from './create/select-key-cylinder/select-key-cylinder.component';
+import { ActivatedRoute, Route } from '@angular/router';
+import { ModuleRegistry } from 'ag-grid-community'; 
 
 @Component({
     selector: 'app-keys',
     imports: [AgGridAngular, MatButtonModule, MatDialogModule, MatIconModule, MatTooltipModule],
-    providers: [DatePipe],
+    providers: [DatePipe, ModuleRegistry],
     templateUrl: './keys.component.html',
     styleUrl: './keys.component.scss'
 })
@@ -31,6 +33,7 @@ export class KeysComponent {
   private datePipe = inject(DatePipe);
   private toast: HotToastService = inject(HotToastService);
   private dialog: MatDialog = inject(MatDialog);
+  private route: ActivatedRoute = inject(ActivatedRoute)
 
   cylinders: any[] = [];
 
@@ -83,7 +86,7 @@ export class KeysComponent {
         , cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value)) : '-'
         , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium')
       },
-      { colId: 'handedOut', field: 'handedOut' , headerName: 'Ausgegeben', width: 100, editable: false, filter: false, headerTooltip: 'Ausgegeben' },
+      { colId: 'handedOut', field: 'handedOut' , headerName: 'Ausgegeben', width: 100, editable: false,  filter: true, headerTooltip: 'Ausgegeben' },
       {
         colId: 'actions'
         , headerName: 'Aktionen'
@@ -100,6 +103,7 @@ export class KeysComponent {
     pagination: true,
   }
 
+
   deleteKey(id: string) {
     this.api.deleteKey(id).subscribe()
   }
@@ -112,6 +116,8 @@ export class KeysComponent {
     this.api.getCylinders().subscribe({
       next: n => {
         this.cylinders = n;
+
+        this.setFilterToParams();
       },
       error: () => {
         this.cylinders = [];
@@ -119,6 +125,22 @@ export class KeysComponent {
     })
   }
 
+  private setFilterToParams() {
+    console.log(this.route.snapshot.queryParams);
+    const params = this.route.snapshot.queryParams;
+
+    if (Object.keys(params).includes('handedOut')) {
+      this.gridApi.setFilterModel({
+            handedOut: {
+              filterType: 'text',
+              type: params['handedOut']   
+            }
+          })
+    }
+
+   
+  }
+
   loadKeys() {
     this.gridApi.setGridOption("loading", true);
     this.api.getKeys().subscribe({