feat(user-update-form): Initilisiertes Formular

- Formularfelder mit Controllern für eail, prename, username, name und Buttons für speichern und löschen hinzugefügt.

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-update-form/user-update-form.component.html

@@ -1 +1,72 @@
-<p>user-update-form works!</p>
+<div class="container my-3">
+    <div class="row">
+        <div [ngClass]="formFieldBSClass">
+            <mat-form-field>
+                <mat-label>Benutzername</mat-label>
+                <input 
+                matInput
+                [formControl]="username"
+                (blur)="updateErrorMessage()" 
+                required />
+                @if (email.invalid) {
+                <mat-error>{{errorMessage()}}</mat-error>
+                }
+            </mat-form-field>
+        </div>
+        <div [ngClass]="formFieldBSClass">
+            <mat-form-field>
+                <mat-label>E-Mail</mat-label>
+                <input 
+                matInput placeholder="user@example.com"
+                [formControl]="email"
+                (blur)="updateMailErrorMessage()" 
+                required />
+                @if (email.invalid) {
+                <mat-error>{{mailErrorMessage()}}</mat-error>
+                }
+            </mat-form-field>
+        </div>
+        <div [ngClass]="formFieldBSClass">
+            <div [ngClass]="buttonBSClass">
+                <button mat-fab extended (click)="update()">
+                    <mat-icon>save</mat-icon>
+                    Speichern
+                  </button>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div [ngClass]="formFieldBSClass">
+            <mat-form-field>
+                <mat-label>Vorname</mat-label>
+                <input 
+                matInput
+                [formControl]="name"
+                (blur)="updateErrorMessage()" 
+                required />
+                @if (email.invalid) {
+                <mat-error>{{errorMessage()}}</mat-error>
+                }
+            </mat-form-field>
+        </div>
+        <div [ngClass]="formFieldBSClass">
+            <mat-form-field>
+                <mat-label>Nachname</mat-label>
+                <input 
+                matInput
+                [formControl]="surname"
+                (blur)="updateErrorMessage()" 
+                required />
+                @if (email.invalid) {
+                <mat-error>{{errorMessage()}}</mat-error>
+                }
+            </mat-form-field>
+        </div>
+        <div [ngClass]="formFieldBSClass">
+            <button mat-fab extended (click)="delete()">
+                <mat-icon>delete</mat-icon>
+                Löschen
+              </button>
+        </div>
+    </div>
+</div>

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/user-update-form/user-update-form.component.ts

@@ -1,19 +1,130 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { User } from '../../../models/user-management.api.models';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { merge } from 'rxjs';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
+import { MatTabsModule } from '@angular/material/tabs';
+import { UserGroupDirImportComponent } from "../../user-group-dir-import/user-group-dir-import.component";
+import { UserService } from '../../../services/api/user.service';
+import { RefreshService } from '../../../services/button/refresh.service';
+import Swal from 'sweetalert2';
 
 @Component({
   selector: 'app-user-update-form',
   standalone: true,
-  imports: [],
+  imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule, MatIconModule, MatButtonModule, CommonModule, MatTabsModule, UserGroupDirImportComponent],
   templateUrl: './user-update-form.component.html',
   styleUrl: './user-update-form.component.scss'
 })
 export class UserUpdateFormComponent {
 
+  readonly dialogRef: MatDialogRef<UserUpdateFormComponent> = inject(MatDialogRef<UserUpdateFormComponent>);
+
   readonly user: User = inject(MAT_DIALOG_DATA);
 
-  constructor() {
+  readonly username = new FormControl(this.user.username, [Validators.required]);
-    console.log(this.user)
+  readonly name = new FormControl(this.user.prename, [Validators.required]);
+  readonly surname = new FormControl(this.user.name, [Validators.required]);
+  readonly email = new FormControl(this.user.email, [Validators.required, Validators.email]);
+
+  mailErrorMessage = signal('');
+  errorMessage = signal('');
+
+  public readonly formFieldBSClass: string = "col d-flex justify-content-center mx-1 my-2"
+  public readonly buttonBSClass: string = "d-flex justify-content-center mx-1 my-2"
+
+  constructor(private uService: UserService, private rService: RefreshService) {
+    merge(
+      this.email.statusChanges, this.email.valueChanges)
+      .pipe(takeUntilDestroyed())
+      .subscribe(() => this.updateMailErrorMessage());
+
+    merge(
+      this.username.statusChanges, this.username.valueChanges,
+      this.name.statusChanges, this.name.valueChanges,
+      this.surname.statusChanges, this.surname.valueChanges)
+      .pipe(takeUntilDestroyed())
+      .subscribe(() => this.updateErrorMessage());
+  }
+
+  updateMailErrorMessage() {
+    if (this.email.hasError('required')) {
+      this.mailErrorMessage.set('Wert eingeben');
+    } else if (this.email.hasError('email')) {
+      this.mailErrorMessage.set('Ungültige E-Mail');
+    } else {
+      this.mailErrorMessage.set('');
+    }
+  }
+
+  updateErrorMessage() {
+    if (this.email.hasError('required')) {
+      this.errorMessage.set('Wert eingeben');
+    } else {
+      this.errorMessage.set('');
+    }
+  }
+
+  update() {
+    if (this.email.valid && this.username.valid && this.name.valid && this.surname.valid) {
+      this.user.email = this.email.value!;
+      this.user.prename = this.name.value!;
+      this.user.username = this.username.value!;
+      this.user.name = this.surname.value!;
+
+      this.uService.update(this.user).subscribe({
+        next: () => {
+          this.rService.executeAll();
+        },
+        error: err => {
+          console.error(err)
+          Swal.fire({
+            title: "Interner Dienstfehler",
+            text: "Bitte wenden Sie sich an das IT-Team, um den Fehler zu beheben.",
+            icon: "error"
+          });
+        }
+      })
+    }
+  }
+
+  delete() {
+    Swal.fire({
+      text: "Sind Sie sicher, dass Sie diesen Datensatz löschen wollen?",
+      icon: "question",
+      showDenyButton: true,
+      confirmButtonText: "Ja",
+      denyButtonText: `Nein`
+    }).then((result) => {
+      if (result.isConfirmed) {
+        if (this.user.id) {
+          this.uService.delete(this.user.id).subscribe({
+            next: () => {
+              this.rService.executeAll();
+              this.dialogRef.close();
+            },
+            error: err => {
+              Swal.fire({
+                title: "Interner Dienstfehler",
+                text: "Bitte wenden Sie sich an das IT-Team, um den Fehler zu beheben.",
+                icon: "error"
+              });
+            },
+          })
+        }
+        else
+          Swal.fire({
+            title: "Ein unerwarteter Fehler",
+            text: "Die Benutzer-ID existiert nicht (Nullwert).",
+            icon: "error"
+          });
+      }
+    });
   }
 }