create angefangen

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

@@ -0,0 +1,28 @@
+<h2 mat-dialog-title>Schlüssel anlegen</h2>
+<mat-dialog-content>
+  <form [formGroup]="createForm" >
+
+    <mat-form-field>
+      <mat-label>Name</mat-label>
+      <input type="text" matInput formControlName="name">
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Schlüsselnummer</mat-label>
+      <input type="text" matInput formControlName="nr">
+    </mat-form-field>
+
+    <mat-form-field>
+      <mat-label>Schließzylinder</mat-label>
+      <mat-select formControlName="cylinder">
+        @for (item of cylinders; track $index) {
+          <mat-option [value]="item">{{ item.name }}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </form>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button mat-dialog-close >Abbrechen</button>
+  <button mat-button (click)="save()" [disabled]="createForm.disabled">Speichern</button>
+</mat-dialog-actions>

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

@@ -0,0 +1,4 @@
+form {
+  display: flex;
+  flex-direction: column;
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateKeyComponent } from './create.component';
+
+describe('CreateComponent', () => {
+  let component: CreateKeyComponent;
+  let fixture: ComponentFixture<CreateKeyComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CreateKeyComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CreateKeyComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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