feat: aktualisiere das Template von GroupUpdateFormComponent mit Formularfeldern und Steuerungen

- Platzhaltertext durch eine strukturierte Formularanordnung ersetzt, einschließlich Felder für 'Id', 'Gruppe' und 'Kommentar' mit mat-form-field-Komponenten.
- Slide-Toggles für die Statussteuerungen 'Aktiv', 'Interne Gruppe' und 'Mit Active Directory' hinzugefügt.
- Schreibgeschützte Felder für 'Hinzugefügt wer', 'Hinzugefügt wann', 'Geändert wer' und 'Geändert wann' mit Datumsformatierung hinzugefügt.
- Speichern- und Löschen-Schaltflächen mit Icons für verbesserte Benutzerinteraktion integriert.
- Formularbenutzerfreundlichkeit und visuelles Layout für eine konsistente Benutzererfahrung verbessert.

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

@@ -1 +1,64 @@
-<p>group-update-form works!</p>
+<div class="dd-container">
+    <!-- id, name -->
+    <div class="dd-row input-row">
+        <mat-form-field class="w20p">
+            <mat-label>Id</mat-label>
+            <input matInput readonly [value]="group.id" />
+        </mat-form-field>
+        <mat-form-field class="w80p">
+            <mat-label>Gruppe</mat-label>
+            <input matInput [formControl]="name" />
+        </mat-form-field>
+    </div>
+    <!-- comment -->
+    <div class="dd-row input-row">
+        <mat-form-field>
+            <mat-label>Kommentar</mat-label>
+            <textarea matInput [formControl]="comment"></textarea>
+        </mat-form-field>
+    </div>
+    <mat-divider></mat-divider>
+    <!-- active, internal, async -->
+    <div class="dd-row input-row">
+        <mat-slide-toggle [(ngModel)]="group.active">
+            Aktiv
+        </mat-slide-toggle>
+        <mat-slide-toggle [(ngModel)]="group.internal" disabled>
+            Interne Gruppe
+        </mat-slide-toggle>
+        <mat-slide-toggle [(ngModel)]="group.adSync" disabled>
+            Mit Active Directory
+        </mat-slide-toggle>
+    </div>
+    <!-- addedWho, addedWhen, changedWho and changedWhen -->
+    <div class="dd-row input-row">
+        <mat-form-field>
+            <mat-label>Hinzugefügt wer</mat-label>
+            <input matInput readonly [value]="group.addedWho" />
+        </mat-form-field>
+        <mat-form-field>
+            <mat-label>Hinzugefügt wann</mat-label>
+            <input matInput readonly [value]="group.addedWhen | date:'dd.MM.yyyy'" />
+        </mat-form-field>
+        <mat-form-field>
+            <mat-label>Geändert wer</mat-label>
+            <input matInput readonly [value]="group.changedWho" />
+        </mat-form-field>
+        <mat-form-field>
+            <mat-label>Geändert wann</mat-label>
+            <input matInput readonly [value]="group.changedWhen | date:'dd.MM.yyyy'" />
+        </mat-form-field>
+    </div>
+    <mat-divider></mat-divider>
+    <!-- save-button, delete-button -->
+    <div class="dd-row button-row">
+        <button mat-fab extended (click)="update()">
+            <mat-icon>save</mat-icon>
+            Speichern
+        </button>
+        <button mat-fab extended (click)="delete()">
+            <mat-icon>delete</mat-icon>
+            Löschen
+        </button>
+    </div>
+</div>

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

@@ -1,11 +1,9 @@
 import { Component, inject, signal } from '@angular/core';
 import { Group } from '../../../models/user-management.api.models';
 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 { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 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';
@@ -16,11 +14,13 @@ import Swal from 'sweetalert2';
 import { MatSelectModule } from '@angular/material/select';
 import { env } from '../../../../environments/environment'
 import { MatDividerModule } from '@angular/material/divider';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 
 @Component({
   selector: 'app-group-update-form',
   standalone: true,
-  imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule, MatIconModule, MatButtonModule, CommonModule, MatTabsModule, MatSelectModule, MatDividerModule],
+  imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule, MatIconModule, MatButtonModule, CommonModule, MatTabsModule, MatSelectModule, MatDividerModule, MatCheckboxModule, MatSlideToggleModule],
   templateUrl: './group-update-form.component.html',
   styleUrl: './group-update-form.component.scss'
 })

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

@@ -10,7 +10,6 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { CommonModule } from '@angular/common';
 import { MatTabsModule } from '@angular/material/tabs';
-
 import { UserService } from '../../../services/api/user.service';
 import { RefreshService } from '../../../services/button/refresh.service';
 import Swal from 'sweetalert2';

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/models/user-management.api.models.ts

@@ -25,7 +25,9 @@ export interface Group {
     active?: boolean;
     comment?: string;
     addedWho?: string;
+    addedWhen?: Date;
     changedWho?: string;
+    changedWhen?: Date;
 }
 
 export interface Module {

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/styles.scss

@@ -45,7 +45,7 @@ code {
   color: rgb(100, 95, 95) !important;
 }
 
-.mdc-tab__text-label{
+.mdc-tab__text-label {
   font-size: medium;
 }
 
@@ -74,11 +74,21 @@ code {
   justify-content: center;
 }
 
-mat-form-field {
+.dd-row mat-form-field {
   width: 100%;
   margin: 0 1rem 0 1rem;
 }
 
+.dd-row mat-checkbox {
+  width: 100%;
+  margin: 0 1rem 1rem 1rem;
+}
+
+.dd-row mat-slide-toggle {
+  width: 100%;
+  margin: 0 1rem 1rem 1rem;
+}
+
 .dd-row button {
   margin: 0 1rem 0 1rem;
 }
@@ -90,6 +100,6 @@ mat-form-field {
 
 @for $i from 1 through 20 {
   .w#{$i * 5}p {
-      width: #{$i * 5 + "%"};
+    width: #{$i * 5 + "%"};
   }
 }