...

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

@@ -44,10 +44,12 @@ export class ArchiveComponent {
       },
       {
         width: 40,
-        cellRenderer: () => '<div class="icon-btn-sm restore" ></div>',
-        onCellClicked: (event) => { this.restoreKey(event.data);}
+        cellRenderer: () => '<div class="icon-btn-sm restore icon-btn-xs" ></div>',
+        onCellClicked: (event) => { this.restoreKey(event.data);},
+        sortable: false
       }
-    ]
+    ];
+    this.gridOptions.rowHeight = 36;
   }
 
   onGridReady(params: GridReadyEvent) {

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

@@ -5,6 +5,6 @@
 />
 
 <div class="floating-btn-container">
-  <button mat-raised-button class="btn-create" (click)="openCreateKey()" >Schlüssel anlegen</button>
+  <button mat-flat-button class="btn-create mat-elevation-z8" (click)="openCreateKey()" color="accent" >Schlüssel anlegen</button>
   <button mat-mini-fab (click)="openArchive()"><mat-icon>inventory_2</mat-icon></button>
 </div>

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

@@ -1,7 +1,7 @@
 .floating-btn-container {
   position: absolute;
-  bottom: 12px;
-  right: 12px;
+  bottom: 48px;
+  right: 24px;
   display: flex;
   gap: 12px;
 }

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

@@ -9,7 +9,6 @@ import { HotToastService } from '@ngxpert/hot-toast';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { CreateKeyComponent } from './create/create.component';
-import { AgOpenHandoutComponent } from '../../shared/ag-grid/components/ag-open-handout/ag-open-handout.component';
 import { AgDeleteKeyComponent } from '../../shared/ag-grid/components/ag-delete-key/ag-delete-key.component';
 import { MatIconModule } from '@angular/material/icon';
 import { ArchiveComponent } from './components/archive/archive.component';
@@ -37,14 +36,7 @@ export class KeysComponent {
     localeText: AG_GRID_LOCALE_DE,
     rowData: [],
     columnDefs: [
-      {
-        cellRenderer: AgOpenHandoutComponent,
-        width: 100,
-        headerName: 'Übergabe',
-        sortable: false,
-        colId: 'handover',
-      },
-      { colId: 'handedOut', field: 'handedOut' , headerName: 'Ausgegeben', width: 100, editable: false, filter: false, headerTooltip: 'Ausgegeben' },
+      
       { colId: 'name', field: 'name' , headerName: 'Name', flex: 1, editable: true, sort: 'asc', filter: true },
       { colId: 'nr', field: 'nr' , headerName: 'Schlüsselnummer', flex: 1, editable: true, filter: true },
       { colId: 'cylinder', field: 'cylinder' , headerName: 'Zylinder', flex: 1, editable: true, filter: true, cellRenderer: (data: any) => {return data.value?.name}, cellEditor: 'agSelectCellEditor',
@@ -54,8 +46,9 @@ export class KeysComponent {
           }
         },
         valueFormatter: (val) => {
-          return val.value?.name;
-        }
+          return val.value?.name + ` (${val.value?.system?.name})`;
+        },
+        cellEditorPopup: false
       },
       { colId: 'system', field: 'cylinder.system' , headerName: 'Schließanlage', flex: 1, editable: false, filter: true, cellRenderer: (data: any) => {return data.value?.name} },
       {
@@ -73,19 +66,20 @@ export class KeysComponent {
         , type: 'date'
         , cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value)) : '-'
         , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium')
-      }
-
-      ,{
-        colId: 'delete'
-        , headerName: 'Löschen'
+      },
+      { colId: 'handedOut', field: 'handedOut' , headerName: 'Ausgegeben', width: 100, editable: false, filter: false, headerTooltip: 'Ausgegeben' },
+      {
+        colId: 'actions'
+        , headerName: 'Aktionen'
         , width: 120
         , cellRenderer: AgDeleteKeyComponent
         // , onCellClicked: (event) => { this.deleteKey(event.data.id)}
       }
     ],
     loading: true,
-    rowHeight: 36,
-    loadingOverlayComponent: AgLoadingComponent
+    rowHeight: 54,
+    loadingOverlayComponent: AgLoadingComponent,
+    pagination: true,
   }
 
   deleteKey(id: string) {