Archive

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

@@ -1,15 +1,21 @@
-<h2 mat-dialog-title>Schlüssel anlegen</h2>
+<h2 mat-dialog-title>Neuen Schlüssel anlegen</h2>
 <mat-dialog-content>
   <form [formGroup]="createForm" >
 
     <mat-form-field>
       <mat-label>Name</mat-label>
-      <input type="text" matInput formControlName="name">
+      <input type="text" matInput formControlName="name" maxlength="100">
+      @if ((createForm.controls.name.value || '').length > 20) {
+        <mat-hint>{{ (createForm.controls.name.value || '').length }} / 100 Zeichen</mat-hint>
+      } @else {
+        <mat-hint>Wie soll der Schlüssel heißen?</mat-hint>
+      }
     </mat-form-field>
 
     <mat-form-field>
       <mat-label>Schlüsselnummer</mat-label>
-      <input type="text" matInput formControlName="nr">
+      <input type="number" matInput formControlName="nr" min="0" max="999999999999">
+      <mat-hint>Nummer auf dem Schlüssel</mat-hint>
     </mat-form-field>
 
     <mat-form-field>
@@ -19,6 +25,7 @@
           <mat-option [value]="item">{{ item.name }}</mat-option>
         }
       </mat-select>
+      <mat-hint>Wo sperrt der Schlüssel?</mat-hint>
     </mat-form-field>
   </form>
 </mat-dialog-content>

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

@@ -1,4 +1,5 @@
 form {
   display: flex;
   flex-direction: column;
+  gap: 12px;
 }

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

@@ -1,24 +1,27 @@
 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 { 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';
 import { MatInputModule } from '@angular/material/input';
 import { map, Observable, startWith } from 'rxjs';
 import { MatSelectModule } from '@angular/material/select';
+import { HotToastService } from '@ngxpert/hot-toast';
 
 @Component({
   selector: 'app-create',
   standalone: true,
-  imports: [MatDialogModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule],
+  imports: [MatDialogModule, MatButtonModule, ReactiveFormsModule, FormsModule, MatFormFieldModule, MatInputModule, MatSelectModule, MatDialogModule],
   templateUrl: './create.component.html',
   styleUrl: './create.component.scss'
 })
 export class CreateKeyComponent {
 
   private api: ApiService = inject(ApiService);
+  private toast: HotToastService = inject(HotToastService);
+  readonly dialogRef = inject(MatDialogRef<CreateKeyComponent>);
 
   createForm = new FormGroup({
     name: new FormControl(null, Validators.required),
@@ -54,7 +57,19 @@ export class CreateKeyComponent {
   }
 
   save() {
-    console.log(this.createForm.value)
     this.api.createKey(this.createForm.value as any)
+    .pipe(
+      this.toast.observe({
+        error: 'Konnte nicht angelegt werden...',
+        loading: 'Speichern...',
+        success: 'Gespeichert'
+      })
+    )
+    .subscribe({
+      next: key => {
+        this.createForm.reset();
+        this.dialogRef.close(key);
+      }
+    })
   }
 }