...

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) {