List and Edit Taskgroups

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

@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
 import {FormControl, Validators} from "@angular/forms";
-import {MatDialogRef} from "@angular/material/dialog";
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {TaskgroupService} from "../../../api";
+import {TaskgroupEntityInfo, TaskgroupService} from "../../../api";
 import {error} from "@angular/compiler/src/util";
 import {MatSnackBar} from "@angular/material/snack-bar";
 
@@ -17,9 +17,13 @@ export class TaskgroupCreationComponent implements OnInit {
 
   constructor(private dialogRef: MatDialogRef<TaskgroupCreationComponent>,
               private taskgroupService: TaskgroupService,
-              private snackbar: MatSnackBar) { }
+              private snackbar: MatSnackBar,
+              @Inject(MAT_DIALOG_DATA) public data: TaskgroupEntityInfo | undefined) { }
 
   ngOnInit(): void {
+    if(this.data != undefined) {
+      this.nameCtrl.setValue(this.data!.taskgroupName)
+    }
   }
 
   cancel() {
@@ -28,6 +32,7 @@ export class TaskgroupCreationComponent implements OnInit {
 
   save() {
     this.pending = true;
+    if(this.data == undefined) {
       this.taskgroupService.taskgroupsPut({
         name: this.nameCtrl.value
       }).subscribe({
@@ -44,6 +49,30 @@ export class TaskgroupCreationComponent implements OnInit {
           }
         }
       })
+    } else {
+      this.taskgroupService.taskgroupsTaskgroupIDPost(this.data.taskgroupID, {
+        name: this.nameCtrl.value
+      }).subscribe({
+        next: resp => {
+          this.pending = false;
+          this.data!.taskgroupName = this.nameCtrl.value
+          this.dialogRef.close(true);
+        },
+        error: err => {
+          this.pending = false;
+          if(err.status == 409) {
+            this.snackbar.open("Taskgroup already exists", "", {duration: 2000});
+          } else if(err.status == 403) {
+            this.snackbar.open("No permission", "", {duration: 2000})
+          } else if(err.status == 404) {
+            this.snackbar.open("Not found", "", {duration: 2000});
+          } else {
+            this.snackbar.open("An unexpected error occured", "");
+          }
+        }
+      })
+    }
+
 
   }
 }

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

@@ -26,3 +26,16 @@
   color: grey;
 
 }
+
+.navLink-bar {
+  margin-bottom: 20px;
+}
+
+#addTaskgroupBtn {
+  margin-top: 20px;
+}
+
+.edit-btn {
+  background-color: #6e6e6e;
+  color: white;
+}

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

@@ -1,10 +1,19 @@
 <div class="container">
-  <mat-card>
+  <mat-card class="navLink-bar">
     <mat-card-content>
       <a class="navLink" routerLink="/">Dashboard</a>
       <a class="navLink-disabled">/ Taskgroups</a>
     </mat-card-content>
   </mat-card>
 
-  <button mat-raised-button color="primary" (click)="openTaskgroupCreation()">Create new Taskgroup</button>
+  <mat-card *ngFor="let taskgroup of taskgroups">
+    <mat-card-content>
+      <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>
+    </mat-card-content>
+
+  </mat-card>
+  <button id="addTaskgroupBtn" mat-raised-button color="primary" (click)="openTaskgroupCreation()">Create new Taskgroup</button>
 </div>

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

@@ -1,6 +1,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";
 
 @Component({
   selector: 'app-taskgroup-dashboard',
@@ -9,12 +10,34 @@ import {TaskgroupCreationComponent} from "../taskgroup-creation/taskgroup-creati
 })
 export class TaskgroupDashboardComponent implements OnInit {
 
-  constructor(private dialog: MatDialog) { }
+  constructor(private dialog: MatDialog,
+              private taskgroupService: TaskgroupService) { }
+
+  taskgroups: TaskgroupEntityInfo[] = []
 
   ngOnInit(): void {
+    this.taskgroupService.taskgroupsGet().subscribe({
+      next: resp => {
+        this.taskgroups = resp;
+      }
+    })
   }
 
   openTaskgroupCreation() {
     const dialogRef = this.dialog.open(TaskgroupCreationComponent, {minWidth: "400px"})
+    dialogRef.afterClosed().subscribe(res => {
+      if(res != undefined) {
+        this.taskgroups.push(res);
+      }
+    })
+  }
+
+  openTaskgroupEditor(taskgroup: TaskgroupEntityInfo) {
+    const dialogRef = this.dialog.open(TaskgroupCreationComponent, {data: taskgroup, minWidth: "400px"});
+    dialogRef.afterClosed().subscribe(res => {
+      if(res) {
+        const data = this.taskgroups
+      }
+    })
   }
 }