Multicylinders

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 { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { 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';
@@ -9,11 +9,13 @@ import { MatInputModule } from '@angular/material/input';
 import { map, Observable, startWith } from 'rxjs';
 import { MatSelectModule } from '@angular/material/select';
 import { HotToastService } from '@ngxpert/hot-toast';
+import { SelectKeyCylinderComponent } from './select-key-cylinder/select-key-cylinder.component';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   selector: 'app-create',
   standalone: true,
-  imports: [MatDialogModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatDialogModule],
+  imports: [MatDialogModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatDialogModule, MatIconModule],
   templateUrl: './create.component.html',
   styleUrl: './create.component.scss'
 })
@@ -22,6 +24,7 @@ export class CreateKeyComponent {
   private api: ApiService = inject(ApiService);
   private toast: HotToastService = inject(HotToastService);
   readonly dialogRef = inject(MatDialogRef<CreateKeyComponent>);
+  private readonly dialog = inject(MatDialog);
 
   createForm = new FormGroup({
     name: new FormControl(null, Validators.required),
@@ -57,6 +60,8 @@ export class CreateKeyComponent {
   }
 
   save() {
+    console.log(this.createForm.value)
+    
     this.api.createKey(this.createForm.value as any)
     .pipe(
       this.toast.observe({
@@ -72,4 +77,23 @@ export class CreateKeyComponent {
       }
     })
   }
+
+  openSelectMultipleCylinders() {
+    this.dialog.open(SelectKeyCylinderComponent, {
+      maxHeight: "calc(100vh - 24px)",
+      maxWidth: "calc(100vw - 24px)",
+      width: "50vw",
+      minWidth: "300px",
+      height: "70vh",
+      disableClose: true,
+      data: this.cylinders
+    }).afterClosed().subscribe({
+      next: c => {
+        if (c) {
+          this.createForm.controls.cylinder.patchValue(c);
+          console.log(c);
+        }
+      }
+    })
+  }
 }