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)
+  }
 }