frontend/src/app/app.module.ts

@@ -38,6 +38,7 @@ import { SettingsComponent } from './admin-dashboard/settings/settings.component
 import {MatListModule} from "@angular/material/list";
 import { TaskgroupDashboardComponent } from './taskgroups/taskgroup-dashboard/taskgroup-dashboard.component';
 import { TaskgroupCreationComponent } from './taskgroups/taskgroup-creation/taskgroup-creation.component';
+import { TaskgroupDeletionComponent } from './taskgroups/taskgroup-deletion/taskgroup-deletion.component';
 
 @NgModule({
   declarations: [
@@ -56,7 +57,8 @@ import { TaskgroupCreationComponent } from './taskgroups/taskgroup-creation/task
     RegistrationComponent,
     SettingsComponent,
     TaskgroupDashboardComponent,
-    TaskgroupCreationComponent
+    TaskgroupCreationComponent,
+    TaskgroupDeletionComponent
   ],
   imports: [
     BrowserModule,

frontend/src/app/taskgroups/taskgroup-creation/taskgroup-creation.component.ts

@@ -72,7 +72,5 @@ export class TaskgroupCreationComponent implements OnInit {
         }
       })
     }
-
-
   }
 }

frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.html

@@ -11,7 +11,7 @@
       <h1>{{taskgroup.taskgroupName}}</h1>
       <button mat-raised-button color="primary">Detail</button>
       <button mat-raised-button class="edit-btn" (click)="openTaskgroupEditor(taskgroup)">Rename</button>
-      <button mat-raised-button color="warn">Delete</button>
+      <button mat-raised-button color="warn" (click)="openTaskgroupDeletion(taskgroup)">Delete</button>
     </mat-card-content>
 
   </mat-card>

frontend/src/app/taskgroups/taskgroup-dashboard/taskgroup-dashboard.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import {MatDialog} from "@angular/material/dialog";
 import {TaskgroupCreationComponent} from "../taskgroup-creation/taskgroup-creation.component";
 import {TaskgroupEntityInfo, TaskgroupService} from "../../../api";
+import {TaskgroupDeletionComponent} from "../taskgroup-deletion/taskgroup-deletion.component";
 
 @Component({
   selector: 'app-taskgroup-dashboard',
@@ -40,4 +41,13 @@ export class TaskgroupDashboardComponent implements OnInit {
       }
     })
   }
+
+  openTaskgroupDeletion(taskgroup: TaskgroupEntityInfo) {
+    const dialogRef = this.dialog.open(TaskgroupDeletionComponent, {data: taskgroup, minWidth: "400px"});
+    dialogRef.afterClosed().subscribe(res => {
+      if(res) {
+       this.taskgroups = this.taskgroups.filter(ctg => ctg.taskgroupID != taskgroup.taskgroupID)
+      }
+    })
+  }
 }

frontend/src/app/taskgroups/taskgroup-deletion/taskgroup-deletion.component.html

@@ -0,0 +1,8 @@
+<h1 mat-dialog-title>Delete Taskgroup</h1>
+
+<p>Are you sure, you want to delete your taskgroup {{data.taskgroupName}}? This <b>cannot</b> be <b>undone!</b></p>
+
+<div mat-dialog-actions align="end">
+  <button mat-raised-button (click)="cancel()">Cancel</button>
+  <button mat-raised-button color="warn" (click)="confirm()">Confirm <mat-icon *ngIf="pending"><mat-spinner diameter="20" style="margin-left: 10px"></mat-spinner></mat-icon></button>
+</div>

frontend/src/app/taskgroups/taskgroup-deletion/taskgroup-deletion.component.spec.ts

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

frontend/src/app/taskgroups/taskgroup-deletion/taskgroup-deletion.component.ts

@@ -0,0 +1,46 @@
+import {Component, Inject, OnInit} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
+import {TaskgroupEntityInfo, TaskgroupService} from "../../../api";
+import {MatSnackBar} from "@angular/material/snack-bar";
+
+@Component({
+  selector: 'app-taskgroup-deletion',
+  templateUrl: './taskgroup-deletion.component.html',
+  styleUrls: ['./taskgroup-deletion.component.css']
+})
+export class TaskgroupDeletionComponent implements OnInit {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: TaskgroupEntityInfo,
+              private dialogRef: MatDialogRef<TaskgroupDeletionComponent>,
+              private taskgroupService: TaskgroupService,
+              private snackbar: MatSnackBar) { }
+
+  pending: boolean = false;
+
+  ngOnInit(): void {
+  }
+
+  cancel() {
+    this.dialogRef.close(false);
+  }
+
+  confirm() {
+    this.pending = true;
+    this.taskgroupService.taskgroupsTaskgroupIDDelete(this.data.taskgroupID).subscribe({
+      next: resp => {
+        this.pending = false;
+        this.dialogRef.close(true);
+      },
+      error: err => {
+        this.pending = false;
+        if(err.stats == 403) {
+          this.snackbar.open("No permission", "", {duration: 2000});
+        } else if(err.status == 404) {
+          this.snackbar.open("Not found", "", {duration: 2000});
+        } else {
+          this.snackbar.open("Unexpected error", "");
+        }
+      }
+    })
+  }
+}