feat: Die Schaltfläche zum Hinzufügen von Gruppen wurde abgeschlossen und zur gleichen Tabelle wie der Gruppenimport hinzugefügt.

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

@@ -1 +1,54 @@
-<p>group-form works!</p>
+<mat-tab-group>
+    <mat-tab label="Erstellen">
+        <div class="container my-3">
+            <div class="row">
+                <div [ngClass]="formFieldBSClass">
+                    <mat-form-field>
+                        <mat-label>Gruppenname</mat-label>
+                        <input matInput [formControl]="groupname" (blur)="updateErrorMessage()" required />
+                        @if (groupname.invalid) {
+                        <mat-error>{{errorMessage()}}</mat-error>
+                        }
+                    </mat-form-field>
+                </div>
+                <div [ngClass]="formFieldBSClass">
+                    <mat-form-field>
+                        <mat-label>ECM FK ID</mat-label>
+                        <input matInput type="number" [formControl]="ecmFkId" (blur)="updateErrorMessage()" required />
+                        @if (groupname.invalid) {
+                        <mat-error>{{errorMessage()}}</mat-error>
+                        }
+                    </mat-form-field>
+                </div>
+                <div [ngClass]="formFieldBSClass">
+                    <div [ngClass]="buttonBSClass">
+                        <button mat-fab extended (click)="create()">
+                            <mat-icon>playlist_add</mat-icon>
+                            Erstellen
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="row">
+                <div [ngClass]="checkBoxBSClass(3)">
+                    <mat-checkbox [formControl]="adSync">Ad Sync</mat-checkbox>
+                </div>
+                <div [ngClass]="checkBoxBSClass(3)">
+                    <mat-checkbox [formControl]="internal">Internal</mat-checkbox>
+                </div>
+                <div [ngClass]="checkBoxBSClass(2)">
+                    <mat-checkbox [formControl]="active">Active</mat-checkbox>
+                </div>
+                <div class="col d-flex justify-content-center me-4 my-2">
+                    <button mat-fab extended (click)="delete()">
+                        <mat-icon>delete</mat-icon>
+                        Löschen
+                    </button>
+                </div>
+            </div>
+        </div>
+    </mat-tab>
+    <mat-tab label="Import über AD">
+        <app-group-dir-import></app-group-dir-import>
+    </mat-tab>
+</mat-tab-group>

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

@@ -1,12 +1,85 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormControl, FormsModule, ReactiveFormsModule, Validators } 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 { MatCheckboxModule } from '@angular/material/checkbox';
+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/user.service';
+import { RefreshService } from '../../../services/refresh.service';
+import { GroupDirImportComponent } from "../../group-dir-import/group-dir-import.component";
+import { GroupService } from '../../../services/group.service';
+import Swal from 'sweetalert2';
 
 @Component({
   selector: 'app-group-form',
   standalone: true,
-  imports: [],
+  imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule, MatIconModule, MatButtonModule, MatCheckboxModule, CommonModule, MatTabsModule, UserGroupDirImportComponent, GroupDirImportComponent],
   templateUrl: './group-form.component.html',
   styleUrl: './group-form.component.scss'
 })
 export class GroupFormComponent {
+  readonly groupname = new FormControl('', [Validators.required]);
+  readonly ecmFkId = new FormControl<number>(1, [Validators.required]);
+  readonly adSync = new FormControl<boolean>(false);
+  readonly internal = new FormControl<boolean>(true);
+  readonly active = new FormControl<boolean>(true);
 
-}
+  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"
+  public readonly checkBoxBSClass: (colCount: number | undefined) => string = (colCount: number = 2) => `col-${colCount} d-flex justify-content-left mx-1 my-2`
+
+  constructor(private uService: UserService, private rService: RefreshService, private gService: GroupService) {
+    merge(
+      this.groupname.statusChanges, this.groupname.valueChanges,
+      this.ecmFkId.statusChanges, this.ecmFkId.valueChanges)
+      .pipe(takeUntilDestroyed())
+      .subscribe(() => this.updateErrorMessage());
+  }
+
+
+  updateErrorMessage() {
+    if (this.groupname.hasError('required')) {
+      this.errorMessage.set('Wert eingeben');
+    } else {
+      this.errorMessage.set('');
+    }
+  }
+
+  create() {
+    if (this.groupname.valid && this.ecmFkId.valid) {
+      this.gService.create({
+        name: this.groupname.value!,
+        ecmFkId: (this.ecmFkId.value!),
+        adSync: this.adSync.value!,
+        internal: this.internal.value!,
+        active: this.active.value!
+      }).subscribe({
+        next: () => {
+          this.delete()
+          this.rService.executeAll();
+          Swal.fire({
+            title: "Vorgang erfolgreich!",
+            text: "Gruppe erfolgreich erstellt!",
+            icon: "success"
+          });
+        }
+      })
+    }
+  }
+
+  delete() {
+    this.groupname.setValue('')
+    this.ecmFkId.setValue(1)
+    this.adSync.setValue(false)
+    this.internal.setValue(true)
+    this.active.setValue(true)
+  }
+}

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/group/group.component.ts

@@ -27,7 +27,6 @@ export class GroupComponent implements AfterViewInit {
         this.userTable.fetchDataByGroupId(this.sGroupId);
     });
     this.creationService.component = GroupFormComponent
-    this.creationService.openDialog();
   }
 
   @ViewChild("groupTable") groupTable!: GroupTableComponent;

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

@@ -17,6 +17,7 @@ export interface User {
 
 export interface Group {
     id?: number;
+    ecmFkId: number;
     name?: string;
     adSync?: boolean;
     internal?: boolean;

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/environments/environment.ts

@@ -41,7 +41,7 @@ export const env = {
                 },
                 {
                     header: "Kommentar",
-                    field: "comment"
+                    field: (group: any) => group.comment ?? ""
                 },
                 {
                     header: "AD Sync",

DigitalData.UserManager.Application/DTOs/Group/GroupCreateDto.cs

@@ -8,6 +8,7 @@
         bool? Active,
         string? Comment,
         string? AddedWho,
-        string? ChangedWho
+        string? ChangedWho,
+        int EcmFkId
     );
 }

DigitalData.UserManager.Application/Services/GroupService.cs

@@ -17,6 +17,11 @@ namespace DigitalData.UserManager.Application.Services
             _localizer = localizer;
         }
 
+        public override Task<DataResult<int>> CreateAsync(GroupCreateDto createDto)
+        {
+            return base.CreateAsync(createDto);
+        }
+
         public async Task<DataResult<int>> CreateAsync(DirectoryGroupDto adGroup)
         {
             var group = _mapper.MapOrThrow<Group>(adGroup);

DigitalData.UserManager.Domain/Entities/Group.cs

@@ -43,7 +43,7 @@ namespace DigitalData.UserManager.Domain.Entities
         [Required]
         [Column("ECM_FK_ID")]
         [DefaultValue(0)]
-        public int? EcmFkId { get; set; }
+        public int EcmFkId { get; set; }
 
         #region IGNORED COLUMNS
         //[Column(TypeName = "datetime")]