user management, add delete button on each row

src/app/app.module.ts

@@ -273,12 +273,13 @@ import { HttpRequestsInterceptor } from './interceptors/http.interceptor';
 import { UserManagementComponent } from './components/user-management/user-management.component';
 import { UserService } from './services/user.service';
 import { LoggedUserComponent } from './components/users/logged-user/logged-user.component';
+import { AddUserDialogComponent } from './components/user-management/add-user-dialog/add-user-dialog.component';
+import { UserFilterPipe } from './filters/user-filter.pipe';
 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 { DeleteUserDialogComponent } from './components/user-management/delete-user-dialog/delete-user-dialog.component';
-import { UserFilterPipe } from './filters/user-filter.pipe';
 
 @NgModule({
   declarations: [
@@ -467,12 +468,13 @@ import { UserFilterPipe } from './filters/user-filter.pipe';
     EditNetworkConfigurationDialogComponent,
     UserManagementComponent,
     ProjectReadmeComponent,
-    DeleteGroupDialogComponent,
     AddGroupDialogComponent,
     GroupFilterPipe,
     GroupManagementComponent,
     AddUserDialogComponent,
     UserFilterPipe,
+    DeleteGroupDialogComponent,
+    DeleteUserDialogComponent
   ],
   imports: [
     BrowserModule,

src/app/components/group-management/delete-group-dialog/delete-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 {Server} from "@models/server";

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

@@ -0,0 +1,7 @@
+<h1 mat-dialog-title>Are you sure to delete user named: '{{data.user.username}}' ?</h1>
+<div mat-dialog-actions class="button-div">
+  <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/user-management/delete-user-dialog/delete-user-dialog.component.scss

@@ -0,0 +1,3 @@
+.button-div {
+  float: right;
+}

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

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

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

@@ -0,0 +1,26 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {User} from "@models/users/user";
+import {UserService} from "@services/user.service";
+
+@Component({
+  selector: 'app-delete-user-dialog',
+  templateUrl: './delete-user-dialog.component.html',
+  styleUrls: ['./delete-user-dialog.component.scss']
+})
+export class DeleteUserDialogComponent implements OnInit {
+
+  constructor(private dialogRef: MatDialogRef<DeleteUserDialogComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: { user: User }) { }
+
+  ngOnInit(): void {
+  }
+
+  onCancel() {
+    this.dialogRef.close();
+  }
+
+  onDelete() {
+    this.dialogRef.close(true);
+  }
+}

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

@@ -35,11 +35,16 @@
           <mat-header-cell *matHeaderCellDef mat-sort-header> Admin </mat-header-cell>
           <mat-cell *matCellDef="let row">{{row.is_superadmin}}</mat-cell>
         </ng-container>
-        <ng-container matColumnDef="last">
+        <ng-container matColumnDef="updated_at">
           <mat-header-cell *matHeaderCellDef mat-sort-header> Last Update </mat-header-cell>
           <mat-cell *matCellDef="let row">{{row.updated_at ? row.updated_at : row.created_at}}</mat-cell>
         </ng-container>
 
+        <ng-container matColumnDef="delete">
+          <mat-header-cell *matHeaderCellDef> </mat-header-cell>
+          <mat-cell *matCellDef="let row"><button mat-button (click)="onDelete(row)"><mat-icon>delete</mat-icon></button></mat-cell>
+        </ng-container>
+
         <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
         <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
       </mat-table>

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

@@ -20,9 +20,10 @@ import {User} from "@models/users/user";
 import {BehaviorSubject, merge, Observable} from "rxjs";
 import {DataSource} from "@angular/cdk/collections";
 import {map} from "rxjs/operators";
-import {AddBlankProjectDialogComponent} from "@components/projects/add-blank-project-dialog/add-blank-project-dialog.component";
 import {AddUserDialogComponent} from "@components/user-management/add-user-dialog/add-user-dialog.component";
 import {MatDialog} from "@angular/material/dialog";
+import {DeleteUserDialogComponent} from "@components/user-management/delete-user-dialog/delete-user-dialog.component";
+import {ToasterService} from "@services/toaster.service";
 
 @Component({
   selector: 'app-user-management',
@@ -33,7 +34,7 @@ export class UserManagementComponent implements OnInit {
   server: Server;
   dataSource: UserDataSource;
   userDatabase = new UserDatabase();
-  displayedColumns = ['name', 'email', 'is_active', 'is_superadmin', 'last'];
+  displayedColumns = ['name', 'email', 'is_active', 'is_superadmin', 'updated_at', 'delete'];
 
   searchText: string = '';
 
@@ -44,7 +45,8 @@ export class UserManagementComponent implements OnInit {
     private router: Router,
     private userService: UserService,
     private progressService: ProgressService,
-    public dialog: MatDialog) { }
+    public dialog: MatDialog,
+    private toasterService: ToasterService) { }
 
   ngOnInit() {
     this.server = this.route.snapshot.data['server'];
@@ -80,6 +82,21 @@ export class UserManagementComponent implements OnInit {
     dialogRef.afterClosed().subscribe(() => this.refresh());
   }
 
+  onDelete(user: User) {
+    this.dialog
+      .open(DeleteUserDialogComponent, {width: '500px', data: {user: user}})
+      .afterClosed()
+      .subscribe((isDeletedConfirm) => {
+        if (isDeletedConfirm) {
+          this.userService.delete(this.server, user.user_id)
+            .subscribe(() => {
+              this.refresh()
+            }, (error) => {
+              this.toasterService.error(`An error occur while trying to delete user ${user.username}`);
+            });
+        }
+      });
+  }
 }
 
 export class UserDatabase {

src/app/services/user.service.ts

@@ -30,4 +30,7 @@ export class UserService {
     });
   }
 
+  delete(server: Server, user_id: string) {
+    return this.httpServer.delete(server, `/users/${user_id}`);
+  }
 }