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

refactor(user-update-form.component.css): Angeordnete CSSS anstatt Bootstrap zu verwenden

Browse Source
This commit is contained in:
Developer 02 2024-10-31 07:03:26 +01:00
parent 80a3f96404
commit 4d38cce459
3 changed files with 73 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,72 +1,45 @@
<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()"
<div class="dd-container">
<div class="dd-row input-row">
<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>
<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>{{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>
@if (email.invalid) {
<mat-error>{{mailErrorMessage()}}</mat-error>
}
</mat-form-field>
</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 class="dd-row input-row">
<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>
<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 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>

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

@ -0,0 +1,32 @@
.dd-container {
display: flex;
flex-direction: column;
padding: 0;
margin: 1rem 0 1rem 0;
justify-content: space-evenly;
}
.dd-row {
display: flex;
flex-direction: row;
padding: 0;
margin: 0;
}
.input-row {
justify-content: space-evenly;
}
.button-row {
align-items: center;
justify-content: center;
}
mat-form-field {
width: 100%;
margin: 0 1rem 0 1rem;
}
button {
margin: 0 1rem 0 1rem;
}

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

@ -36,9 +36,6 @@ export class UserUpdateFormComponent {
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)