AppStd/DigitalData.UserManager
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Benutzererstellungsformular erstellt und unter demselben Tab wie der Benutzerimport aus Active Directory hinzugefügt.

Browse Source
This commit is contained in:
Developer 02 2024-08-01 10:11:25 +02:00
parent 67ff181400
commit 9dea7a1198
8 changed files with 203 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/req-form-field/req-form-field.component.html Normal file
View File

0
DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/req-form-field/req-form-field.component.scss Normal file
View File

23
DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/req-form-field/req-form-field.component.spec.ts Normal file
View File

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

41
DigitalData.UserManager.API/ClientApp/user_manager_ui/src/app/components/forms/req-form-field/req-form-field.component.ts Normal file
View File

@ -0,0 +1,41 @@
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';
@Component({
selector: 'app-req-form-field',
standalone: true,
imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule, MatIconModule, MatButtonModule, CommonModule],
templateUrl: './req-form-field.component.html',
styleUrl: './req-form-field.component.scss'
})
export class ReqFormFieldComponent {
readonly formControl = new FormControl('', [Validators.required, Validators.email]);
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() {
merge(this.formControl.statusChanges, this.formControl.valueChanges)
.pipe(takeUntilDestroyed())
.subscribe(() => this.updateErrorMessage());
}
updateErrorMessage() {
if (this.formControl.hasError('required')) {
this.errorMessage.set('You must enter a value');
} else if (this.formControl.hasError('email')) {
this.errorMessage.set('Not a valid email');
} else {
this.errorMessage.set('');
}
}
}

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

@ -1 +1,74 @@
<p>user-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>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)="updateErrorMessage()"
required />
@if (email.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]="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"></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>

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

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

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

@ -1,12 +1,63 @@
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 { 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';
@Component({
selector: 'app-user-form',
standalone: true,
imports: [],
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]);
}
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,
this.username.statusChanges, this.username.valueChanges,
this.name.statusChanges, this.name.valueChanges,
this.surname.statusChanges, this.surname.valueChanges)
.pipe(takeUntilDestroyed())
.subscribe(() => this.updateErrorMessage());
}
updateErrorMessage() {
if (this.email.hasError('required')) {
this.errorMessage.set('Wert eingeben');
} else if (this.email.hasError('email')) {
this.errorMessage.set('Ungültige E-Mail');
} 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()
}
}
}

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

@ -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,20 @@ 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;
this.creationService.openDialog()
}
@ViewChild("userTable") userTable!: UserTableComponent
@ -49,7 +54,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)
}