ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-03-11 15:04:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

group management, add multiple delete

Browse Source
This commit is contained in:
Sylvain MATHIEU 2021-12-15 09:02:38 +01:00
parent 2e2a59f6f2
commit eb5437d005
4 changed files with 57 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.html
View File

@ -1,4 +1,5 @@
<h1 mat-dialog-title>Are you sure to delete group named: '{{data.groupName}}' ?</h1>
<h1 mat-dialog-title>Are you sure to delete group named: </h1>
<p *ngFor="let group of data.groups">{{group.name}}</p>
<div mat-dialog-actions>
<button mat-button (click)="onCancel()" color="accent">No, cancel</button>
<button mat-button (click)="onDelete()" tabindex="2" class="add-project-button" mat-raised-button color="primary">

4
src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.ts
View File

@ -12,7 +12,7 @@
*/
import {Component, Inject, OnInit} from '@angular/core';
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
import {Server} from "@models/server";
import {Group} from "@models/groups/group";
@Component({
selector: 'app-delete-group-dialog',
@ -22,7 +22,7 @@ import {Server} from "@models/server";
export class DeleteGroupDialogComponent implements OnInit {
constructor(private dialogRef: MatDialogRef<DeleteGroupDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: { groupName: string }) { }
@Inject(MAT_DIALOG_DATA) public data: { groups: Group[] }) { }
ngOnInit(): void {
}

20
src/app/components/group-management/group-management.component.html
View File

@ -2,6 +2,9 @@
<div class="default-header">
<div class="row">
<h1 class="col">Groups management</h1>
<button class="col" mat-raised-button color="primary" (click)="onDelete(selection.selected)" class="add-group-button" [disabled]="selection.selected.length == 0">
Delete selected groups
</button>
<button class="col" mat-raised-button color="primary" (click)="addGroup()" class="add-group-button">
Add group
</button>
@ -17,6 +20,21 @@
<div class="default-content">
<table mat-table [dataSource]="sortedGroups | groupFilter: searchText" class="mat-elevation-z8" matSort (matSortChange)="sort($event)">
<ng-container matColumnDef="select" >
<mat-header-cell *matHeaderCellDef class="small-col">
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row" class="small-col">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name</th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
@ -41,7 +59,7 @@
<ng-container matColumnDef="delete">
<th mat-header-cell *matHeaderCellDef> </th>
<td mat-cell *matCellDef="let element"><button mat-button (click)="onDelete(element)"><mat-icon>delete</mat-icon></button></td>
<td mat-cell *matCellDef="let element"><button mat-button (click)="onDelete([element])"><mat-icon>delete</mat-icon></button></td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

48
src/app/components/group-management/group-management.component.ts
View File

@ -21,6 +21,10 @@ import {Sort} from "@angular/material/sort";
import {MatDialog} from "@angular/material/dialog";
import {AddGroupDialogComponent} from "@components/group-management/add-group-dialog/add-group-dialog.component";
import {DeleteGroupDialogComponent} from "@components/group-management/delete-group-dialog/delete-group-dialog.component";
import {SelectionModel} from "@angular/cdk/collections";
import {DeleteUserDialogComponent} from "@components/user-management/delete-user-dialog/delete-user-dialog.component";
import {User} from "@models/users/user";
import {forkJoin} from "rxjs";
@Component({
selector: 'app-group-management',
@ -30,7 +34,8 @@ import {DeleteGroupDialogComponent} from "@components/group-management/delete-gr
export class GroupManagementComponent implements OnInit {
server: Server;
public displayedColumns = ['name', 'created_at', 'updated_at', 'is_builtin', 'delete'];
public displayedColumns = ['select', 'name', 'created_at', 'updated_at', 'is_builtin', 'delete'];
selection = new SelectionModel<Group>(true, []);
groups: Group[];
sortedGroups: Group[];
searchText: string;
@ -84,6 +89,17 @@ export class GroupManagementComponent implements OnInit {
}
}
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.groups.length;
return numSelected === numRows;
}
masterToggle() {
this.isAllSelected() ?
this.selection.clear() :
this.groups.forEach(row => this.selection.select(row));
}
addGroup() {
this.dialog
@ -93,10 +109,7 @@ export class GroupManagementComponent implements OnInit {
if (name) {
this.groupService.addGroup(this.server, name)
.subscribe(() => {
this.groupService.getGroups(this.server).subscribe((groups: Group[]) => {
this.groups = groups;
this.sortedGroups = groups;
});
this.refresh();
}, (error) => {
this.toasterService.error(`An error occur while trying to create new group ${name}`);
});
@ -104,21 +117,28 @@ export class GroupManagementComponent implements OnInit {
});
}
onDelete(group: Group) {
refresh() {
this.groupService.getGroups(this.server).subscribe((groups: Group[]) => {
this.groups = groups;
this.sortedGroups = groups;
this.selection.clear();
});
}
onDelete(groupsToDelete: Group[]) {
this.dialog
.open(DeleteGroupDialogComponent, {width: '500px', height: '250px', data: {groupName: group.name}})
.open(DeleteGroupDialogComponent, {width: '500px', height: '250px', data: {groups: groupsToDelete}})
.afterClosed()
.subscribe((isDeletedConfirm) => {
if (isDeletedConfirm) {
this.groupService.delete(this.server, group.user_group_id)
const observables = groupsToDelete.map((group: Group) => this.groupService.delete(this.server, group.user_group_id));
forkJoin(observables)
.subscribe(() => {
this.groupService.getGroups(this.server).subscribe((groups: Group[]) => {
this.groups = groups;
this.sortedGroups = groups;
this.refresh();
},
(error) => {
this.toasterService.error(`An error occur while trying to delete group`);
});
}, (error) => {
this.toasterService.error(`An error occur while trying to delete group ${group.name}`);
});
}
});
}