create angefangen

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

@@ -0,0 +1,60 @@
+import { Component, inject } from '@angular/core';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { ApiService } from '../../../shared/api.service';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { map, Observable, startWith } from 'rxjs';
+import { MatSelectModule } from '@angular/material/select';
+
+@Component({
+  selector: 'app-create',
+  standalone: true,
+  imports: [MatDialogModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule],
+  templateUrl: './create.component.html',
+  styleUrl: './create.component.scss'
+})
+export class CreateKeyComponent {
+
+  private api: ApiService = inject(ApiService);
+
+  createForm = new FormGroup({
+    name: new FormControl(null, Validators.required),
+    nr: new FormControl(null, Validators.required),
+    cylinder: new FormControl(null, Validators.required),
+  })
+
+  cylinders: any[] = [];
+  filteredCylinders!: Observable<any[]>;
+
+  ngOnInit(): void {
+    this.loadCylinders();
+
+    this.filteredCylinders = this.createForm.controls.cylinder.valueChanges.pipe(
+      startWith(''),
+      map(value => this._filter(value || '')),
+    );
+  }
+
+  private _filter(value: string): string[] {
+    const filterValue = value.toLowerCase();
+
+    return this.cylinders.filter(option => option.name.toLowerCase().includes(filterValue));
+  }
+
+  loadCylinders() {
+    this.api.getCylinders().subscribe({
+      next: n => {
+        this.cylinders = n;
+        this.createForm.controls.cylinder.patchValue(null);
+      }
+    })
+  }
+
+  save() {
+    console.log(this.createForm.value)
+    this.api.createKey(this.createForm.value as any)
+  }
+}