group management, add trash icon on each group to delete it

src/app/app.module.ts

@@ -276,6 +276,7 @@ import { LoggedUserComponent } from './components/users/logged-user/logged-user.
 import { GroupManagementComponent } from './components/group-management/group-management.component';
 import { GroupFilterPipe } from './filters/group-filter.pipe';
 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 { AddUserDialogComponent } from './components/user-management/add-user-dialog/add-user-dialog.component';
 import { UserFilterPipe } from './filters/user-filter.pipe';
 
@@ -466,6 +467,7 @@ import { UserFilterPipe } from './filters/user-filter.pipe';
     EditNetworkConfigurationDialogComponent,
     UserManagementComponent,
     ProjectReadmeComponent,
+    DeleteGroupDialogComponent,
     AddGroupDialogComponent,
     GroupFilterPipe,
     GroupManagementComponent,

src/app/components/group-management/add-group-dialog/GroupNameValidator.ts

@@ -1,3 +1,15 @@
+/*
+* Software Name : GNS3 Web UI
+* Version: 3
+* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services
+* SPDX-License-Identifier: GPL-3.0-or-later
+*
+* This software is distributed under the GPL-3.0 or any later version,
+* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt
+* or see the "LICENSE" file for more details.
+*
+* Author: Sylvain MATHIEU, Elise LEBEAU
+*/
 import { Injectable } from '@angular/core';
 
 @Injectable()

src/app/components/group-management/add-group-dialog/add-group-dialog.component.ts

@@ -1,3 +1,15 @@
+/*
+* Software Name : GNS3 Web UI
+* Version: 3
+* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services
+* SPDX-License-Identifier: GPL-3.0-or-later
+*
+* This software is distributed under the GPL-3.0 or any later version,
+* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt
+* or see the "LICENSE" file for more details.
+*
+* Author: Sylvain MATHIEU, Elise LEBEAU
+*/
 import {Component, Inject, OnInit} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
 import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";

src/app/components/group-management/add-group-dialog/groupNameAsyncValidator.ts

@@ -1,3 +1,15 @@
+/*
+* Software Name : GNS3 Web UI
+* Version: 3
+* SPDX-FileCopyrightText: Copyright (c) 2022 Orange Business Services
+* SPDX-License-Identifier: GPL-3.0-or-later
+*
+* This software is distributed under the GPL-3.0 or any later version,
+* the text of which is available at https://www.gnu.org/licenses/gpl-3.0.txt
+* or see the "LICENSE" file for more details.
+*
+* Author: Sylvain MATHIEU, Elise LEBEAU
+*/
 import { FormControl } from '@angular/forms';
 import { timer } from 'rxjs';
 import {map, switchMap, tap} from 'rxjs/operators';

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

@@ -0,0 +1,7 @@
+<h1 mat-dialog-title>Are you sure to delete group named: '{{data.groupName}}' ?</h1>
+<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">
+    Yes, delete!
+  </button>
+</div>

src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.scss

@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

src/app/components/group-management/delete-group-dialog/delete-group-dialog.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeleteGroupDialogComponent } from './delete-group-dialog.component';
+
+describe('DeleteGroupDialogComponent', () => {
+  let component: DeleteGroupDialogComponent;
+  let fixture: ComponentFixture<DeleteGroupDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DeleteGroupDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeleteGroupDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,25 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {Server} from "@models/server";
+
+@Component({
+  selector: 'app-delete-group-dialog',
+  templateUrl: './delete-group-dialog.component.html',
+  styleUrls: ['./delete-group-dialog.component.scss']
+})
+export class DeleteGroupDialogComponent implements OnInit {
+
+  constructor(private dialogRef: MatDialogRef<DeleteGroupDialogComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: { groupName: string }) { }
+
+  ngOnInit(): void {
+  }
+
+  onCancel() {
+    this.dialogRef.close();
+  }
+
+  onDelete() {
+    this.dialogRef.close(true);
+  }
+}

src/app/components/group-management/group-management.component.html

@@ -41,7 +41,7 @@
 
       <ng-container matColumnDef="delete">
         <th mat-header-cell *matHeaderCellDef> </th>
-        <td mat-cell *matCellDef="let element"><mat-icon>delete</mat-icon></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>

src/app/components/group-management/group-management.component.ts

@@ -20,6 +20,7 @@ import {Group} from "../../models/groups/group";
 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";
 
 @Component({
   selector: 'app-group-management',
@@ -95,4 +96,23 @@ export class GroupManagementComponent implements OnInit {
         }
       });
   }
+
+  onDelete(group: Group) {
+    this.dialog
+      .open(DeleteGroupDialogComponent, {width: '500px', height: '250px', data: {groupName: group.name}})
+      .afterClosed()
+      .subscribe((isDeletedConfirm) => {
+        if (isDeletedConfirm) {
+          this.groupService.delete(this.server, group.user_group_id)
+            .subscribe(() => {
+              this.groupService.getGroups(this.server).subscribe((groups: Group[]) => {
+                this.groups = groups;
+                this.sortedGroups = groups;
+              });
+            }, (error) => {
+              this.toasterService.error(`An error occur while trying to delete group ${group.name}`);
+            });
+        }
+      });
+  }
 }

src/app/services/group.service.ts

@@ -38,4 +38,8 @@ export class GroupService {
   addGroup(server: Server, name: string): Observable<Group> {
     return this.httpServer.post<Group>(server, `/groups`, {name});
   }
+
+  delete(server: Server, user_group_id: string) {
+    return this.httpServer.delete(server, `/groups/${user_group_id}`);
+  }
 }