Grid Size

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

@@ -4,9 +4,10 @@
   </div>
 }
 <h2 mat-dialog-title>Übergaben {{ data.name }}</h2>
-<mat-dialog-content>
+
 <mat-tab-group mat-stretch-tabs="true" mat-align-tabs="start" [dynamicHeight]="true" >
   <mat-tab label="Neue Übergabe"  >
+    <mat-dialog-content>
     <form [formGroup]="handoverForm" class="flex-column" style="margin-top: 12px;">
       <!-- <h6>Neue Übergabe anlegen:</h6> -->
   
@@ -40,9 +41,15 @@
         <mat-datepicker #picker></mat-datepicker>
       </mat-form-field>
     </form>
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button (click)="save()" [disabled]="handoverForm.invalid">Speichern</button>
+    <button mat-button mat-dialog-close color="warn" >Schließen</button>
+  </mat-dialog-actions>
   </mat-tab>
 
   <mat-tab label="Historie">
+  <mat-dialog-content>
     <table class="handouts">
       <tr>
         <th>Kunde</th>
@@ -69,12 +76,10 @@
 
         
     </table>
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button mat-dialog-close color="warn" >Schließen</button>
+  </mat-dialog-actions>
   </mat-tab>
 </mat-tab-group> 
 
-  
-</mat-dialog-content>
-<mat-dialog-actions>
-  <button mat-button mat-dialog-close color="warn" >Schließen</button>
-  <button mat-button (click)="save()" [disabled]="handoverForm.invalid">Speichern</button>
-</mat-dialog-actions>

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

@@ -20,13 +20,12 @@ import {MatListModule} from '@angular/material/list';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatRadioModule} from '@angular/material/radio';
 import { HotToastService } from '@ngxpert/hot-toast';
-import {MatExpansionModule} from '@angular/material/expansion';
 import {MatTabsModule} from '@angular/material/tabs';
 
 @Component({
   selector: 'app-handover-dialog',
   standalone: true,
-  imports: [FormsModule, MatExpansionModule, MatTabsModule, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, CommonModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule],
+  imports: [FormsModule, MatTabsModule, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, CommonModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule],
   providers: [
     provideNativeDateAdapter(),
     { provide: LOCALE_ID, useValue: 'de-DE' },

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

@@ -36,12 +36,14 @@ export class KeysComponent {
       {
         cellRenderer: AgOpenHandoutComponent,
         width: 100,
-        headerName: 'Übergabe'
+        headerName: 'Übergabe',
+        sortable: false,
+        colId: 'handover',
       },
-      { field: 'handedOut' , headerName: 'Ausgegeben', width: 100, editable: false, filter: false, headerTooltip: 'Ausgegeben' },
-      { field: 'name' , headerName: 'Name', flex: 1, editable: true, sort: 'asc', filter: true },
-      { field: 'nr' , headerName: 'Schlüsselnummer', flex: 1, editable: true, filter: true },
-      { field: 'cylinder' , headerName: 'Zylinder', flex: 1, editable: true, filter: true, cellRenderer: (data: any) => {return data.value?.name}, cellEditor: 'agSelectCellEditor',
+      { 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',
         cellEditorParams: () => {
           return {
             values: this.cylinders,
@@ -51,7 +53,7 @@ export class KeysComponent {
           return val.value?.name;
         }
       },
-      { field: 'cylinder.system' , headerName: 'Schließanlage', flex: 1, editable: false, filter: true, cellRenderer: (data: any) => {return data.value?.name} },
+      { colId: 'system', field: 'cylinder.system' , headerName: 'Schließanlage', flex: 1, editable: false, filter: true, cellRenderer: (data: any) => {return data.value?.name} },
       {
         field: 'createdAt'
         , headerName: 'Erstellt'
@@ -60,6 +62,7 @@ export class KeysComponent {
         , cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value))
         , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium')
       },{
+        colId: 'updatedAt',
         field: 'updatedAt'
         , headerName: 'Geändert'
         , width: 120
@@ -69,7 +72,7 @@ export class KeysComponent {
       }
     ],
     loading: true,
-    rowHeight: 48,
+    rowHeight: 36,
   }
 
   ngOnInit(): void {

client/src/app/shared/ag-grid/components/ag-open-handout/ag-open-handout.component.html

@@ -1 +1 @@
-<div class="handover icon-btn-sm" (click)="openDialog()"></div>
+<div class="handover icon-btn-sm" (click)="openDialog()" matTooltip="Schlüsselübergaben" [matTooltipShowDelay]="600"></div>

client/src/app/shared/ag-grid/components/ag-open-handout/ag-open-handout.component.scss

@@ -7,5 +7,5 @@
 }
 
 .handover {
-  background-image: url('../../../../../assets/img/handover.svg');
+  background-image: url('../../../../../assets/img/key_2.svg');
 }

client/src/app/shared/ag-grid/components/ag-open-handout/ag-open-handout.component.ts

@@ -4,11 +4,12 @@ import { ICellRendererParams } from 'ag-grid-community';
 import { IKey } from '../../../../model/interface/key.interface';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { HandoverDialogComponent } from '../../../../modules/keys/components/handover-dialog/handover-dialog.component';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 @Component({
   selector: 'app-ag-open-handout',
   standalone: true,
-  imports: [MatDialogModule],
+  imports: [MatDialogModule, MatTooltipModule],
   templateUrl: './ag-open-handout.component.html',
   styleUrl: './ag-open-handout.component.scss'
 })