update

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

@@ -1,7 +1,7 @@
 import { Component, inject } from '@angular/core';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { ApiService } from '../../../shared/api.service';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -12,6 +12,8 @@ import { HotToastService } from '@ngxpert/hot-toast';
 import { SelectKeyCylinderComponent } from './select-key-cylinder/select-key-cylinder.component';
 import { MatIconModule } from '@angular/material/icon';
 import {MatCheckboxModule} from '@angular/material/checkbox';
+import { IKey } from '../../../model/interface/key.interface';
+import { ICylinder } from '../../../model/interface/cylinder.interface';
 
 @Component({
   selector: 'app-create',
@@ -26,24 +28,33 @@ export class CreateKeyComponent {
   private toast: HotToastService = inject(HotToastService);
   readonly dialogRef = inject(MatDialogRef<CreateKeyComponent>);
   private readonly dialog = inject(MatDialog);
+  readonly key = inject<IKey>(MAT_DIALOG_DATA);
 
   createForm = new FormGroup({
-    name: new FormControl(null, Validators.required),
-    nr: new FormControl(null, Validators.required),
+    name: new FormControl<string | null>(null, Validators.required),
+    nr: new FormControl<number | null>(null, Validators.required),
     digital: new FormControl(false, Validators.required),
-    cylinder: new FormControl(null, Validators.required),
+    cylinder: new FormControl<any>(null, Validators.required),
   })
 
   cylinders: any[] = [];
   filteredCylinders!: Observable<any[]>;
 
   ngOnInit(): void {
-    this.loadCylinders();
+    this.doSetup();
+  }
+
+  async doSetup() {
+    await this.loadCylinders();
 
     this.filteredCylinders = this.createForm.controls.cylinder.valueChanges.pipe(
       startWith(''),
       map(value => this._filter(value || '')),
     );
+
+    if (this.key) {
+      this.setEditKey(this.key)
+    }
   }
 
   private _filter(value: string): string[] {
@@ -53,16 +64,19 @@ export class CreateKeyComponent {
   }
 
   loadCylinders() {
-    this.api.getCylinders().subscribe({
+    return new Promise(resolve => {
+      this.api.getCylinders().subscribe({
       next: n => {
         this.cylinders = n;
         this.createForm.controls.cylinder.patchValue(null);
+        resolve(null)
       }
+    });
     })
+    
   }
 
   save() {
-    
     this.api.createKey(this.createForm.value as any)
     .pipe(
       this.toast.observe({
@@ -96,4 +110,10 @@ export class CreateKeyComponent {
       }
     })
   }
+
+  async setEditKey(key: IKey) {
+    this.createForm.patchValue(key as any);
+    this.createForm.controls.cylinder.patchValue(this.cylinders.filter(c => key.cylinder.some(v => v.id == c.id)));
+    console.log(this.createForm.value)
+  }
 }

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

@@ -17,6 +17,7 @@ import { map, of } from 'rxjs';
 import { ICylinder } from '../../model/interface/cylinder.interface';
 import { LostKeysComponent } from './components/lost-keys/lost-keys.component';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { SelectKeyCylinderComponent } from './create/select-key-cylinder/select-key-cylinder.component';
 
 @Component({
   selector: 'app-keys',
@@ -44,10 +45,13 @@ export class KeysComponent {
       { 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: false, filter: true,
+        valueFormatter: (data: any) => { return data; },
         cellRenderer: (data: any) => {return data.value?.map((m: ICylinder) => m.name).join(', ')},
-        tooltipValueGetter: (data: any) => data.value?.map((m: ICylinder) => m.name).join(', '),
-        cellEditor: 'agSelectCellEditor',
-        cellEditorPopup: false,
+        tooltipValueGetter: (data: any) => data.value?.map((m: ICylinder) => m.name).join(','),
+        onCellDoubleClicked(event) {
+
+        },
+        cellEditorPopup: true,
         filterValueGetter: (params: any) => {return params.data.cylinder?.map((m: ICylinder) => m.name).join(', ')},
       },
       { colId: 'system', field: 'cylinder' , headerName: 'Schließanlage', flex: 1, editable: false, filter: true, cellRenderer: (data: any) => {
@@ -57,11 +61,13 @@ export class KeysComponent {
         filterValueGetter: (params: any) => {
           const s = new Set<string>(params.data.cylinder?.map((m: ICylinder) => m.system?.name));
           return [...s].join(', ')
-        }
+        },
+        valueFormatter: (data: any) => { return data; },
       },
       { colId: 'customer', field: 'customer' , headerName: 'Kunde', flex: 1, editable: false, filter: true, 
         cellRenderer: (data: any) => {return data.value?.name},
         filterValueGetter: (params: any) => {return params.data.customer?.name},
+        valueFormatter: (data: any) => { return data; },
       },
       {
         field: 'createdAt'
@@ -69,7 +75,8 @@ export class KeysComponent {
         , width: 120
         // , type: 'date'
         , cellRenderer: (data: any) => this.datePipe.transform(new Date(data.value))
-        , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium')
+        , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium'),
+        valueFormatter: (data: any) => { return data; },
       },{
         colId: 'updatedAt',
         field: 'updatedAt'
@@ -86,6 +93,7 @@ export class KeysComponent {
         , width: 140
         , cellRenderer: AgDeleteKeyComponent
         // , onCellClicked: (event) => { this.deleteKey(event.data.id)}
+        ,valueFormatter: (data: any) => { return data; },
       }
     ],
     loading: true,
@@ -98,6 +106,10 @@ export class KeysComponent {
     this.api.deleteKey(id).subscribe()
   }
 
+  editKey(id: string) {
+    
+  }
+
   ngOnInit(): void {
     this.api.getCylinders().subscribe({
       next: n => {
@@ -168,6 +180,19 @@ export class KeysComponent {
     })
   }
 
+  openSelectCylinder(params: any) {
+    this.dialog.open(SelectKeyCylinderComponent, {
+      maxWidth: "calc(100vw - 24px)",
+      width: "30vw",
+      minWidth: "200px",
+      disableClose: true
+    }).afterClosed().subscribe({
+      next: key => {
+        console.log(key)
+      }
+    })
+  }
+
   openArchive() {
     this.dialog.open(ArchiveComponent, {
       maxHeight: "calc(100vh - 24px)",