feat: Löschfunktionalität mit Bestätigungsdialog hinzufügen und Tastatur-Delete-Ereignis verarbeiten
- `@HostListener` für das `window:keydown.delete`-Ereignis hinzugefügt, um die Löschung von Elementen über die Tastatur zu verarbeiten. - `deleteItem`-Methode implementiert, um den Benutzer vor dem Löschen ausgewählter Elemente mit SweetAlert2 zur Bestätigung aufzufordern. - `forkJoin` integriert, um mehrere Löschanfragen gleichzeitig zu bearbeiten und Erfolg- oder Fehlermeldungen je nach Ergebnis anzuzeigen.
This commit is contained in:
parent
754c9bd5db
commit
7de506d390
@ -1,15 +1,14 @@
|
|||||||
import { AfterViewInit, Component, ViewChild } from '@angular/core';
|
import { AfterViewInit, Component, ViewChild, HostListener } from '@angular/core';
|
||||||
import { GuiCellEdit, GuiSelectedRow } from '@generic-ui/ngx-grid';
|
import { GuiCellEdit, GuiSelectedRow } from '@generic-ui/ngx-grid';
|
||||||
import { UserTableComponent } from '../../components/tables/user-table/user-table.component';
|
import { UserTableComponent } from '../../components/tables/user-table/user-table.component';
|
||||||
import { RefreshService } from '../../services/refresh.service';
|
|
||||||
import { MatTabsModule } from '@angular/material/tabs';
|
import { MatTabsModule } from '@angular/material/tabs';
|
||||||
import { GroupTableComponent } from '../../components/tables/group-table/group-table.component';
|
import { GroupTableComponent } from '../../components/tables/group-table/group-table.component';
|
||||||
import { ModuleTableComponent } from '../../components/tables/module-table/module-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';
|
import { UserFormComponent } from '../../components/forms/user-form/user-form.component';
|
||||||
import { BasePageComponent } from '../base-page/base-page.component';
|
import { BasePageComponent } from '../base-page/base-page.component';
|
||||||
import { User } from '../../models/user-management.api.models';
|
import { User } from '../../models/user-management.api.models';
|
||||||
import { firstValueFrom } from 'rxjs';
|
import { firstValueFrom, forkJoin } from 'rxjs';
|
||||||
|
import Swal from 'sweetalert2';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
standalone: true,
|
standalone: true,
|
||||||
@ -63,4 +62,39 @@ export class UserComponent extends BasePageComponent implements AfterViewInit {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@HostListener('window:keydown.delete', ['$event'])
|
||||||
|
handleDelete(event: KeyboardEvent) {
|
||||||
|
this.deleteItem();
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteItem() {
|
||||||
|
const sRows = this.userTable.selectedRows;
|
||||||
|
if (sRows.length > 0)
|
||||||
|
Swal.fire({
|
||||||
|
title: "Löschen bestätigen",
|
||||||
|
html: `<p class="text-start">Dieser Vorgang ist unwiderruflich. Möchten Sie fortfahren?<br><br>Anzahl der zu löschenden Einträge: ${sRows.length}</p>`,
|
||||||
|
showDenyButton: true,
|
||||||
|
confirmButtonText: "Ja",
|
||||||
|
denyButtonText: `Nein`
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
const deleteRequests = sRows.map(sRow => this.userTable.service.delete(sRow.source.id!));
|
||||||
|
forkJoin(deleteRequests).subscribe({
|
||||||
|
next: () => {
|
||||||
|
this.refreshService.executeAll(),
|
||||||
|
Swal.fire({
|
||||||
|
text: `${sRows.length} Einträge wurden erfolgreich gelöscht.`,
|
||||||
|
icon: "success"
|
||||||
|
})
|
||||||
|
},
|
||||||
|
error: err => Swal.fire({
|
||||||
|
title: "Fehler",
|
||||||
|
text: `${err.message}`,
|
||||||
|
icon: "error"
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user