create angefangen

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

@@ -6,11 +6,14 @@ import { CommonModule, DatePipe } from '@angular/common';
 import { ApiService } from '../../shared/api.service';
 import { IKey } from '../../model/interface/key.interface';
 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';
 
 @Component({
   selector: 'app-keys',
   standalone: true,
-  imports: [AgGridAngular],
+  imports: [AgGridAngular, MatButtonModule, MatDialogModule],
   providers: [DatePipe],
   templateUrl: './keys.component.html',
   styleUrl: './keys.component.scss'
@@ -19,6 +22,7 @@ export class KeysComponent {
   private api: ApiService = inject(ApiService);
   private datePipe = inject(DatePipe);
   private toast: HotToastService = inject(HotToastService);
+  private dialog: MatDialog = inject(MatDialog);
 
   cylinders: any[] = [{name: 'dummy'}];
 
@@ -54,7 +58,7 @@ export class KeysComponent {
         , headerName: 'Geändert'
         , width: 120
         , type: 'date'
-        , cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value), 'medium') : '-'
+        , cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value)) : '-'
         , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium')
       },
     ],
@@ -100,13 +104,14 @@ export class KeysComponent {
         error: 'Änderungen konnten nicht gespeichert werden!'
       })
     ).subscribe({
-      next: () => {
-        
-      this.gridApi.setGridOption("loading", false);
-      },
+      next: () => {this.gridApi.setGridOption("loading", false);},
       error: () => {
         this.loadKeys();
       }
     })
   }
+
+  openCreateKey() {
+    this.dialog.open(CreateKeyComponent)
+  }
 }