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/proxy.conf.json

@@ -1,6 +1,6 @@
 {
     "/api": {
-        "target": "https://localhost:7202",
+        "target": "https://localhost:7103",
         "secure": false,
         "changeOrigin": true
     }

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

@@ -0,0 +1,54 @@
+<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.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GroupFormComponent } from './group-form.component';
+
+describe('GroupFormComponent', () => {
+  let component: GroupFormComponent;
+  let fixture: ComponentFixture<GroupFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GroupFormComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(GroupFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,85 @@
+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: [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/forms/user-form/user-form.component.html

@@ -0,0 +1,79 @@
+<mat-tab-group>
+    <mat-tab label="Erstellen">
+        <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)="create()">
+                            <mat-icon>playlist_add</mat-icon>
+                            Erstellen
+                          </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>
+    </mat-tab>
+    <mat-tab label="Import über AD">
+        <app-user-group-dir-import></app-user-group-dir-import>
+    </mat-tab>
+</mat-tab-group>

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

@@ -0,0 +1,3 @@
+.col{
+    margin: 50px;
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserFormComponent } from './user-form.component';
+
+describe('UserFormComponent', () => {
+  let component: UserFormComponent;
+  let fixture: ComponentFixture<UserFormComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [UserFormComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(UserFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,94 @@
+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 { 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 Swal from 'sweetalert2';
+
+@Component({
+  selector: 'app-user-form',
+  standalone: true,
+  imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule, MatIconModule, MatButtonModule, CommonModule, MatTabsModule, UserGroupDirImportComponent],
+  templateUrl: './user-form.component.html',
+  styleUrl: './user-form.component.scss'
+})
+export class UserFormComponent {
+  readonly email = new FormControl('', [Validators.required, Validators.email]);
+  readonly username = new FormControl('', [Validators.required]);
+  readonly name = new FormControl('', [Validators.required]);
+  readonly surname = new FormControl('', [Validators.required]);
+
+  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('');
+    }
+  }
+
+  create() {
+    if (this.email.valid && this.username.valid && this.name.valid && this.surname.valid) {
+      this.uService.create({
+        email: this.email.value!,
+        prename: this.name.value!,
+        username: this.username.value!,
+        name: this.surname.value!,
+      }).subscribe({
+        next: () => {
+          this.delete()
+          this.rService.executeAll();
+          Swal.fire({
+            title: "Vorgang erfolgreich!",
+            text: "Benutzer erfolgreich erstellt!",
+            icon: "success"
+          });
+        }
+      })
+    }
+  }
+
+  delete(){
+    this.email.setValue('')
+    this.username.setValue('')
+    this.name.setValue('')
+    this.surname.setValue('')
+  }
+}

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

@@ -4,6 +4,8 @@ import { UserTableComponent } from '../../components/tables/user-table/user-tabl
 import { RefreshService } from '../../services/refresh.service';
 import { MatTabsModule } from '@angular/material/tabs';
 import { GuiSelectedRow } from '@generic-ui/ngx-grid';
+import { CreationService } from '../../services/creation.service';
+import { GroupFormComponent } from '../forms/group-form/group-form.component';
 
 @Component({
   standalone: true,
@@ -15,7 +17,7 @@ import { GuiSelectedRow } from '@generic-ui/ngx-grid';
 export class GroupComponent implements AfterViewInit {
   initWithoutData = () => { }
   private sGroupId = null;
-  constructor(private refreshService: RefreshService) { }
+  constructor(private refreshService: RefreshService, private creationService: CreationService) { }
 
   ngAfterViewInit(): void {
     this.refreshService.removeAll()
@@ -24,6 +26,7 @@ export class GroupComponent implements AfterViewInit {
       if(this.sGroupId)
         this.userTable.fetchDataByGroupId(this.sGroupId);
     });
+    this.creationService.component = GroupFormComponent
   }
 
   @ViewChild("groupTable") groupTable!: GroupTableComponent;

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/user-group-dir-import/user-group-dir-import.component.ts

@@ -8,6 +8,7 @@ import { DirGroupTableComponent } from '../tables/dir-group-table/dir-group-tabl
 import { DirUserTableComponent } from '../tables/dir-user-table/dir-user-table.component';
 import { UserService } from '../../services/user.service';
 import { User } from '../../models/user-management.api.models'
+import { RefreshService } from '../../services/refresh.service';
 
 @Component({
   standalone: true,
@@ -20,7 +21,7 @@ export class UserGroupDirImportComponent implements OnInit, AfterViewInit {
 
   initWithoutData = () => { }
 
-  constructor(private gService: GroupService, private uService: UserService) {
+  constructor(private gService: GroupService, private uService: UserService, private rService: RefreshService) {
   }
 
   ngOnInit(): void {
@@ -81,6 +82,7 @@ export class UserGroupDirImportComponent implements OnInit, AfterViewInit {
       })
     ).subscribe({
       next: (results) => {
+        this.rService.executeAll();
         numAdded += results.filter(result => result !== null).length;
       },
       error: (err) => {

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

@@ -5,6 +5,8 @@ import { RefreshService } from '../../services/refresh.service';
 import { MatTabsModule } from '@angular/material/tabs';
 import { GroupTableComponent } from '../../components/tables/group-table/group-table.component';
 import { ModuleTableComponent } from '../../components/tables/module-table/module-table.component';
+import { CreationService } from '../../services/creation.service';
+import { UserFormComponent } from '../../components/forms/user-form/user-form.component';
 
 @Component({
   standalone: true,
@@ -28,17 +30,19 @@ export class UserComponent implements AfterViewInit {
 
   private sUsername = null;
 
-  constructor(private refreshService: RefreshService) { }
+  constructor(private refreshService: RefreshService, private creationService: CreationService) { }
 
   ngAfterViewInit(): void {
     this.refreshService.removeAll()
     this.refreshService.add(() => {
       this.userTable.fetchData();
-      if (this.sUsername != null){
+      if (this.sUsername != null) {
         this.groupTable.fetchDataByUsername(this.sUsername);
         this.moduleTable.fetchDataByUsername(this.sUsername)
       }
     });
+
+    this.creationService.component = UserFormComponent;
   }
 
   @ViewChild("userTable") userTable!: UserTableComponent
@@ -49,7 +53,7 @@ export class UserComponent implements AfterViewInit {
     if (rows.length > 0) {
       this.sUsername = rows[0].source.username;
 
-      if (this.sUsername != null){
+      if (this.sUsername != null) {
         this.groupTable.fetchDataByUsername(this.sUsername);
         this.moduleTable.fetchDataByUsername(this.sUsername)
       }

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/app/nav-menu/nav-menu.component.html

@@ -31,7 +31,7 @@
       <div class="navbar-collapse justify-content-end me-5">
         <a class="navbar-brand" [routerLink]="['/']">User Manager Portal</a>
         <button class="btn">
-          <mat-icon class="scale-pulse">add_to_photos</mat-icon>
+          <mat-icon class="scale-pulse" (click)="creationService.openDialog()">add_to_photos</mat-icon>
         </button>
         <button class="btn" (click)="refreshService.executeAll()">
           <mat-icon class="turn-360">sync</mat-icon>

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/nav-menu/nav-menu.component.ts

@@ -9,6 +9,7 @@ import { CommonModule } from '@angular/common';
 import { ColorModeBttnComponent } from '../components/common/color-mode-bttn/color-mode-bttn.component';
 import { MatIconModule } from '@angular/material/icon';
 import { RefreshService } from '../services/refresh.service';
+import { CreationService } from '../services/creation.service';
 
 @Component({
   standalone: true,
@@ -23,7 +24,7 @@ export class NavMenuComponent {
   }
   isExpanded = false;
 
-  constructor(public dialog: MatDialog, private authService: AuthenticationService, public refreshService: RefreshService) {
+  constructor(private dialog: MatDialog, private authService: AuthenticationService, public refreshService: RefreshService, public creationService : CreationService) {
     this.authService.isAuthenticated().then().catch()
   }
 

DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/services/creation.service.ts

@@ -1,6 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { GroupDirImportComponent } from '../components/group-dir-import/group-dir-import.component';
 import { ComponentType } from '@angular/cdk/portal';
 
 @Injectable({
@@ -8,13 +7,17 @@ import { ComponentType } from '@angular/cdk/portal';
 })
 export class CreationService {
 
-  private component: ComponentType<T> = null
+  public component: ComponentType<unknown> | undefined
+  public width: string = "50vw";
 
-  constructor(private dialog: MatDialog) { }
+  constructor(private readonly dialog: MatDialog) {
+  }
 
-  importGroup() {
+  openDialog(): MatDialogRef<unknown, any> | undefined {
-    const dialogRef = this.dialog.open(GroupDirImportComponent, {
+    return this.component
-      width: "50vw"
+      ? this.dialog.open(this.component, {
-    });
+        width: this.width
+      })
+      : undefined;
   }
 }

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.API/Properties/launchSettings.json

@@ -1,12 +1,41 @@
 {
+  "$schema": "https://json.schemastore.org/launchsettings.json",
+  "iisSettings": {
+    "windowsAuthentication": false,
+    "anonymousAuthentication": true,
+    "iisExpress": {
+      "applicationUrl": "http://localhost:2351",
+      "sslPort": 44313
+    }
+  },
   "profiles": {
-    "DigitalData.UserManager.API": {
+    "http": {
       "commandName": "Project",
+      "dotnetRunMessages": true,
       "launchBrowser": true,
+      "launchUrl": "swagger",
+      "applicationUrl": "http://localhost:5137",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
-      },
+      }
-      "applicationUrl": "https://localhost:57319;http://localhost:57320"
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "launchUrl": "swagger",
+      "applicationUrl": "https://localhost:7103;http://localhost:5137",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "IIS Express": {
+      "commandName": "IISExpress",
+      "launchBrowser": true,
+      "launchUrl": "swagger",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
     }
   }
 }

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")]