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' },
+      { colId: 'handedOut', field: 'handedOut' , headerName: 'Ausgegeben', width: 100, editable: false, filter: false, headerTooltip: 'Ausgegeben' },
-      { field: 'name' , headerName: 'Name', flex: 1, editable: true, sort: 'asc', filter: true },
+      { colId: 'name', field: 'name' , headerName: 'Name', flex: 1, editable: true, sort: 'asc', filter: true },
-      { field: 'nr' , headerName: 'Schlüsselnummer', flex: 1, editable: true, filter: true },
+      { colId: 'nr', 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: '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'
 })

client/src/assets/img/key_2.svg

@@ -0,0 +1 @@
+<svg enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g id="_x31_277_x2C__Home_Access_x2C__Home_Keys_x2C__Home"><g><path d="m81.12 245.822 34.721 9.721c1.899.532 3.918.49 5.794-.122l188.575-61.448c14.462 16.231 33.988 27.325 55.154 31.611 9.32 41.045 35.012 58.366 59.421 58.366 5.647 0 11.228-.957 16.439-2.9 26.27-9.797 36.106-46.281 22.393-83.061-.744-1.995-1.55-3.893-2.387-5.739 21.813-25.802 29.957-61.52 18.82-95.692-13.456-41.296-51.658-69.042-95.06-69.042-51.489 0-94.622 39.303-99.571 90.395l-7.92 2.581c-1.877.612-3.531 1.766-4.753 3.315l-18.199 23.076-28.3-7.924c-3.888-1.09-8.049.268-10.548 3.436l-18.199 23.076-28.301-7.924c-3.889-1.087-8.048.268-10.548 3.438l-17.251 21.874-17.905-9.105c-2.366-1.202-5.11-1.415-7.63-.594l-19.016 6.196c-2.993.976-5.352 3.303-6.367 6.282l-16.132 47.329c-.887 2.602-.664 5.453.617 7.885s3.506 4.229 6.153 4.97zm353.115 16.488c-7.89 2.943-17.393 1.939-25.424-2.678-7.396-4.253-16.67-13.226-22.284-32.1 21.487-.339 42.248-7.614 59.099-20.442 8.437 24.723 3.425 49.694-11.391 55.22zm-326.437-65.486 10.323-3.364 21.521 10.942c4.25 2.161 9.433 1.023 12.384-2.722l18.199-23.075 28.301 7.923c3.887 1.087 8.048-.268 10.548-3.438l18.199-23.075 28.3 7.924c3.885 1.087 8.048-.267 10.548-3.438l20.453-25.933 11.505-3.75c4.029-1.313 6.793-5.023 6.898-9.26 1.076-43.431 36.773-78.044 80.012-78.044 34.719 0 65.279 22.198 76.045 55.238 8.211 25.195 3.312 51.313-11.055 71.431-9.807-11.724-21.784-18.625-33.032-22.654 7.537-10.077 10.241-23.536 6.056-36.383-6.92-21.236-29.578-32.432-50.426-25.64-20.971 6.834-32.472 29.455-25.638 50.426 6.455 19.811 26.813 31.187 46.89 26.608 13.893 1.647 30.695 7.136 42.376 22.472-14.493 12.075-32.813 18.55-51.246 18.55-24.69 0-48.412-11.698-63.457-31.294-2.581-3.361-7-4.73-11.03-3.418l-192.155 62.616-21.625-6.055zm277.167-49.276c-8.679 0-16.318-5.55-19.01-13.811-3.417-10.486 2.334-21.797 12.818-25.213 10.46-3.41 21.761 2.225 25.214 12.819 3.416 10.485-5.431 26.205-19.022 26.205z"/><path d="m488.085 404.645c-1.187-12.886-12.909-22.743-23.874-25.819-8.899-2.497-14.97-.226-22.814.502-1.912-.109-2.513.121-9.699 1.994-89.164 23.232-122.601 28.108-134.948 28.108-2.809 0-3.778-.265-3.793-.269-17.086-5.515-40.956-10.532-48.937-16.876 5.978-.785 13.884.652 19.786 2.453 10.093 3.08 21.42 4.642 33.667 4.641 30.462-.001 59.993-9.846 73.485-24.496 6.457-7.013 9.505-15.151 8.813-23.537-.556-6.744-4.225-15.51-18.542-18.968-22.878-5.524-68.04 3.912-94.375-19.129-27.805-24.326-59.93-36.66-95.485-36.66-25.082 0-46.17 6.262-59.02 11.262-3.865-11.791-14.968-20.333-28.035-20.333h-31c-16.267 0-29.5 13.233-29.5 29.5v131c0 16.267 13.233 29.5 29.5 29.5h31c13.046 0 24.134-8.516 28.016-20.277l77.313 33.817c18.672 8.909 42.471 13.427 70.735 13.427 85.948 0 190.393-41.701 203.182-47.994 21.711-10.683 25.321-23.215 24.525-31.846zm-394.27 23.373c0 5.238-4.262 9.5-9.5 9.5h-31c-5.238 0-9.5-4.262-9.5-9.5v-131c0-5.238 4.262-9.5 9.5-9.5h31c5.238 0 9.5 4.262 9.5 9.5v125.582zm360.915-9.473c-12.241 6.023-112.19 45.94-194.352 45.94-25.33 0-46.274-3.883-62.252-11.539-.325-.155 5.523 2.412-84.312-36.887v-107.159c9.432-4.216 31.003-12.311 57.554-12.311 30.568 0 58.264 10.67 82.315 31.713 23.456 20.521 56.017 21.269 79.792 21.813 9.316.214 23.288.534 26.364 2.89.084 1.023.316 4.083-3.596 8.33-9.627 10.454-34.345 18.043-58.773 18.044-10.122.001-19.745-1.303-27.829-3.77-7.583-2.314-15.204-3.536-22.039-3.536-14.215 0-20.4 5.36-23.086 9.857-1.845 3.089-4.228 9.593.542 18.45 8.385 15.568 36.309 19.6 61.752 27.813 2.612.843 5.77 1.235 9.938 1.235 30.62 0 115.412-22.479 145.05-30.067 6.592-.494 11.169-1.678 14.167-1.678.986 0 1.862.122 2.841.396 3.969 1.114 9.069 5.208 9.363 8.398.223 2.409-3.164 7.012-13.439 12.068z"/></g></g></svg>

client/src/styles.scss

@@ -29,11 +29,11 @@ html, body {
   padding: 4px;
   box-sizing: border-box;
   border-radius: 6px;
-  background-size: 28px;
+  background-size: 20px;
   background-position: center;
   background-repeat: no-repeat;
-  width: 38px;
+  width: 26px;
-  height: 38px;
+  height: 26px;
 
 }