Styling

client/src/app/core/layout/layout.component.html

@@ -12,9 +12,9 @@
 
 <mat-drawer-container class="example-container" autosize>
   <mat-drawer #drawer class="main_sidenav" mode="side" opened="true">
-    <button mat-button routerLink="/">Home</button>
-    <button mat-button routerLink="/keys">Schlüssel</button>
-    <button mat-button routerLink="/users">Alle User</button>
+    <button mat-button routerLink="/" routerLinkActive="mat-elevation-z1" [routerLinkActiveOptions]="{exact: true}">Home</button>
+    <button mat-button routerLink="/keys" routerLinkActive="mat-elevation-z1">Schlüssel</button>
+    <button mat-button routerLink="/users" routerLinkActive="mat-elevation-z1">Alle User</button>
   </mat-drawer>
 
   

client/src/app/core/layout/layout.component.scss

@@ -23,11 +23,12 @@ mat-drawer, mat-toolbar {
 
 .main_sidenav{
   width: 200px;
+  padding: 0 2px;
 }
 
 mat-drawer {
   button {
-    width: 100%;
+    width: calc(100% - 4px);
   }
 }
 

client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html

@@ -49,33 +49,14 @@
   </mat-tab>
 
   <mat-tab label="Historie">
-  <mat-dialog-content>
-    <table class="handouts">
-      <tr>
-        <th>Kunde</th>
-        <th >Datum</th>
-        <th>
-          Übergabe
-        </th>
-      </tr>
-    
-      @if (handovers.length == 0) {
-        <tr>
-          <td>-</td>
-          <td>-</td>
-          <td>-</td>
-        </tr>
-      }
-      @for (item of handovers; track $index) {
-        <tr>
-          <td>{{ item.customer.name }}</td>
-          <td>{{ item.timestamp | date}}</td>
-          <td>{{ item.direction == 'out' ? 'Ausgabe' : 'Rückgabe'}}</td>
-        </tr>
-      }
-
-        
-    </table>
+  <mat-dialog-content class="no-padding">
+    <div style="height: 300px; padding: 12px 0 0 0;">
+      <ag-grid-angular
+      style="width: 100%; height: 100%;"
+      (gridReady)="onGridReady($event)"
+      [gridOptions]="gridOptions!"
+    />
+    </div>
   </mat-dialog-content>
   <mat-dialog-actions>
     <button mat-button mat-dialog-close color="warn" >Schließen</button>

client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.scss

@@ -21,4 +21,8 @@ form {
 
 th, td {
   text-align: start;
+}
+
+.no-padding {
+  padding: 0 !important;
 }

client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts

@@ -8,7 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
 import { MatButtonModule } from '@angular/material/button';
-import { CommonModule } from '@angular/common';
+import { CommonModule, DatePipe } from '@angular/common';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { map, Observable, startWith, timestamp } from 'rxjs';
 import {
@@ -21,15 +21,19 @@ import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatRadioModule} from '@angular/material/radio';
 import { HotToastService } from '@ngxpert/hot-toast';
 import {MatTabsModule} from '@angular/material/tabs';
+import { GridApi, GridOptions, GridReadyEvent } from 'ag-grid-community';
+import { AG_GRID_LOCALE_DE } from '@ag-grid-community/locale';
+import { AgGridAngular } from 'ag-grid-angular';
 
 @Component({
   selector: 'app-handover-dialog',
   standalone: true,
-  imports: [FormsModule, MatTabsModule, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, CommonModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule],
+  imports: [FormsModule, MatTabsModule, AgGridAngular, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, CommonModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule],
   providers: [
     provideNativeDateAdapter(),
     { provide: LOCALE_ID, useValue: 'de-DE' },
     { provide: MAT_DATE_LOCALE, useValue: 'de-DE' },
+    DatePipe
   ],
   templateUrl: './handover-dialog.component.html',
   styleUrl: './handover-dialog.component.scss'
@@ -40,17 +44,43 @@ export class HandoverDialogComponent {
   readonly dialogRef = inject(MatDialogRef<HandoverDialogComponent>);
   readonly data = inject<IKey>(MAT_DIALOG_DATA);
   private _bottomSheet = inject(MatBottomSheet);
+  private datePipe = inject(DatePipe);
   private toast: HotToastService = inject(HotToastService);
 
+  gridApi!: GridApi;
+  gridOptions: GridOptions = {
+    localeText: AG_GRID_LOCALE_DE,
+    rowData: [],
+    columnDefs: [   
+      { colId: 'customer', field: 'customer.name' , headerName: 'Kunde', flex: 1, editable: false, filter: false},
+      { 
+        colId: 'handedOut', 
+        field: 'direction' , 
+        headerName: 'Richtung', 
+        flex: 1, 
+        editable: false, 
+        filter: false, 
+        headerTooltip: 'Wurde der Schlüssel ausgegeben oder zurückgegeben?',
+        cellRenderer: (data: any) => data.value == 'out' ? 'Ausgegeben' : 'Zurückgegeben'
+      },
+      {
+        field: 'timestamp'
+        , headerName: 'Übergabe'
+        , flex: 1
+        , type: 'date'
+        , sortable: true
+        , sort: 'desc'
+        , cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value))
+      },
+    
+    ]
+  }
+
   isLoading: boolean = false;
-  readonly panelOpenState = signal(false);
 
   customers: { name: string, id: string }[] = [];
   filteredCustomers: Observable<any[]> = new Observable();
 
-  handovers: any[] = [];
-  
-
   handoverForm = new FormGroup({
     customer: new FormControl<any>(null, Validators.required),
     key: new FormControl(this.data),
@@ -80,7 +110,7 @@ export class HandoverDialogComponent {
     
     promise.subscribe({
       next: n => {
-        this.handovers = n;
+        this.gridApi.setGridOption("rowData", n);
         if (n && n.length > 0) {
           this.handoverForm.controls.customer.patchValue(n[0].customer.name);
           this.handoverForm.controls.direction.patchValue(n[0].direction == 'out' ? 'return' : 'out')
@@ -162,6 +192,11 @@ export class HandoverDialogComponent {
   }
   
 
+  onGridReady(params: GridReadyEvent) {
+    this.gridApi = params.api;
+    this.gridApi.addEventListener("cellEditingStopped", evt => {})
+  }
+
 }
 
 

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

@@ -2,7 +2,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 { CommonModule, DatePipe } from '@angular/common';
+import { DatePipe } from '@angular/common';
 import { ApiService } from '../../shared/api.service';
 import { IKey } from '../../model/interface/key.interface';
 import { HotToastService } from '@ngxpert/hot-toast';