feat: erweitere GroupUpdateFormComponent um Dialogintegration und Formularkontrollen
- Abhängigkeiten für Angular Material-Komponenten, Formularsteuerung und RxJS-Utilities hinzugefügt. - MatDialogRef und MAT_DIALOG_DATA für die Dialoginteraktion innerhalb der Komponente injiziert. - FormControl-Instanzen zur Verwaltung der Felder 'name' und 'comment' des Group-Modells integriert. - Update-Funktionalität implementiert, die Änderungen über GroupService übermittelt und bei Erfolg ein Refresh auslöst. - Löschfunktion mit Bestätigungsaufforderung über SweetAlert2 hinzugefügt, mit Verarbeitung erfolgreicher Löschungen und Fehlerfällen. - Verbesserte Fehlerbehandlung mit aussagekräftigen Meldungen für eine bessere Benutzererfahrung.
This commit is contained in:
parent
1b5fa1f52c
commit
b997ea4cce
@ -1,12 +1,103 @@
|
|||||||
import { Component } from '@angular/core';
|
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 { 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 { GroupService } from '../../../services/api/group.service';
|
||||||
|
import { RefreshService } from '../../../services/button/refresh.service';
|
||||||
|
import Swal from 'sweetalert2';
|
||||||
|
import { MatSelectModule } from '@angular/material/select';
|
||||||
|
import { env } from '../../../../environments/environment'
|
||||||
|
import { MatDividerModule } from '@angular/material/divider';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-group-update-form',
|
selector: 'app-group-update-form',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [],
|
imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule, MatIconModule, MatButtonModule, CommonModule, MatTabsModule, MatSelectModule, MatDividerModule],
|
||||||
templateUrl: './group-update-form.component.html',
|
templateUrl: './group-update-form.component.html',
|
||||||
styleUrl: './group-update-form.component.scss'
|
styleUrl: './group-update-form.component.scss'
|
||||||
})
|
})
|
||||||
export class GroupUpdateFormComponent {
|
export class GroupUpdateFormComponent {
|
||||||
|
|
||||||
}
|
readonly dialogRef: MatDialogRef<GroupUpdateFormComponent> = inject(MatDialogRef<GroupUpdateFormComponent>);
|
||||||
|
|
||||||
|
readonly group: Group = inject(MAT_DIALOG_DATA);
|
||||||
|
|
||||||
|
get allowedDateFormats(): Array<{ value: string, name: string }> {
|
||||||
|
return env.constants.date_formats;
|
||||||
|
}
|
||||||
|
|
||||||
|
get allowedLanguages(): Array<{ value: string, name: string }> {
|
||||||
|
return env.constants.languages;
|
||||||
|
}
|
||||||
|
|
||||||
|
readonly name = new FormControl(this.group.name);
|
||||||
|
readonly comment = new FormControl(this.group.comment);
|
||||||
|
|
||||||
|
mailErrorMessage = signal('');
|
||||||
|
errorMessage = signal('');
|
||||||
|
|
||||||
|
constructor(private uService: GroupService, private rService: RefreshService) {
|
||||||
|
}
|
||||||
|
|
||||||
|
update() {
|
||||||
|
|
||||||
|
this.group.name = this.name.value!;
|
||||||
|
this.group.comment = this.comment.value!;
|
||||||
|
|
||||||
|
this.uService.update(this.group).subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.rService.executeAll();
|
||||||
|
},
|
||||||
|
error: err => {
|
||||||
|
console.error(err)
|
||||||
|
Swal.fire({
|
||||||
|
title: "Interner Dienstfehler",
|
||||||
|
text: "Bitte wenden Sie sich an das IT-Team, um den Fehler zu beheben.",
|
||||||
|
icon: "error"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
delete() {
|
||||||
|
Swal.fire({
|
||||||
|
text: "Sind Sie sicher, dass Sie diesen Datensatz löschen wollen?",
|
||||||
|
icon: "question",
|
||||||
|
showDenyButton: true,
|
||||||
|
confirmButtonText: "Ja",
|
||||||
|
denyButtonText: `Nein`
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
if (this.group.id) {
|
||||||
|
this.uService.delete(this.group.id).subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.rService.executeAll();
|
||||||
|
this.dialogRef.close();
|
||||||
|
},
|
||||||
|
error: err => {
|
||||||
|
Swal.fire({
|
||||||
|
title: "Interner Dienstfehler",
|
||||||
|
text: "Bitte wenden Sie sich an das IT-Team, um den Fehler zu beheben.",
|
||||||
|
icon: "error"
|
||||||
|
});
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
else
|
||||||
|
Swal.fire({
|
||||||
|
title: "Ein unerwarteter Fehler",
|
||||||
|
text: "Die Benutzer-ID existiert nicht (Nullwert).",
|
||||||
|
icon: "error"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -10,7 +10,7 @@ import { MatIconModule } from '@angular/material/icon';
|
|||||||
import { MatButtonModule } from '@angular/material/button';
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { MatTabsModule } from '@angular/material/tabs';
|
import { MatTabsModule } from '@angular/material/tabs';
|
||||||
import { UserGroupDirImportComponent } from "../../user-group-dir-import/user-group-dir-import.component";
|
|
||||||
import { UserService } from '../../../services/api/user.service';
|
import { UserService } from '../../../services/api/user.service';
|
||||||
import { RefreshService } from '../../../services/button/refresh.service';
|
import { RefreshService } from '../../../services/button/refresh.service';
|
||||||
import Swal from 'sweetalert2';
|
import Swal from 'sweetalert2';
|
||||||
@ -21,7 +21,7 @@ import {MatDividerModule} from '@angular/material/divider';
|
|||||||
@Component({
|
@Component({
|
||||||
selector: 'app-user-update-form',
|
selector: 'app-user-update-form',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule, MatIconModule, MatButtonModule, CommonModule, MatTabsModule, UserGroupDirImportComponent, MatSelectModule, MatDividerModule],
|
imports: [MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule, MatIconModule, MatButtonModule, CommonModule, MatTabsModule, MatSelectModule, MatDividerModule],
|
||||||
templateUrl: './user-update-form.component.html',
|
templateUrl: './user-update-form.component.html',
|
||||||
styleUrl: './user-update-form.component.scss'
|
styleUrl: './user-update-form.component.scss'
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user