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

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

@@ -4,4 +4,6 @@
       (gridReady)="onGridReady($event)"
       [gridOptions]="gridOptions!"
   />
-}
+}
+
+<button mat-flat-button class="btn-create" (click)="openCreateKey()" >Schlüssel anlegen</button>

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

@@ -0,0 +1,5 @@
+.btn-create {
+  position: absolute;
+  bottom: 12px;
+  right: 12px;
+}

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

@@ -6,11 +6,14 @@ import { CommonModule, DatePipe } from '@angular/common';
 import { ApiService } from '../../shared/api.service';
 import { IKey } from '../../model/interface/key.interface';
 import { HotToastService } from '@ngxpert/hot-toast';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { CreateKeyComponent } from './create/create.component';
 
 @Component({
   selector: 'app-keys',
   standalone: true,
-  imports: [AgGridAngular],
+  imports: [AgGridAngular, MatButtonModule, MatDialogModule],
   providers: [DatePipe],
   templateUrl: './keys.component.html',
   styleUrl: './keys.component.scss'
@@ -19,6 +22,7 @@ export class KeysComponent {
   private api: ApiService = inject(ApiService);
   private datePipe = inject(DatePipe);
   private toast: HotToastService = inject(HotToastService);
+  private dialog: MatDialog = inject(MatDialog);
 
   cylinders: any[] = [{name: 'dummy'}];
 
@@ -54,7 +58,7 @@ export class KeysComponent {
         , headerName: 'Geändert'
         , width: 120
         , type: 'date'
-        , cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value), 'medium') : '-'
+        , cellRenderer: (data: any) => data.value ? this.datePipe.transform(new Date(data.value)) : '-'
         , tooltipValueGetter: (data: any) => this.datePipe.transform(new Date(data.value), 'medium')
       },
     ],
@@ -100,13 +104,14 @@ export class KeysComponent {
         error: 'Änderungen konnten nicht gespeichert werden!'
       })
     ).subscribe({
-      next: () => {
-        
-      this.gridApi.setGridOption("loading", false);
-      },
+      next: () => {this.gridApi.setGridOption("loading", false);},
       error: () => {
         this.loadKeys();
       }
     })
   }
+
+  openCreateKey() {
+    this.dialog.open(CreateKeyComponent)
+  }
 }