frontend/src/app/dashboard/task-overview/task-overview.component.html

@@ -1,4 +1,4 @@
-<button mat-raised-button class="greenBtn long-btn" *ngIf="tasks.length > 0">Add</button>
+<button mat-raised-button class="greenBtn long-btn" *ngIf="tasks.length > 0" (click)="openTaskCreation()">Add</button>
 <mat-card *ngFor="let task of tasks">
   <mat-card-content>
     <h3>{{task.taskName}}</h3>

frontend/src/app/dashboard/task-overview/task-overview.component.ts

@@ -1,6 +1,9 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {BasicScheduleEntityInfo, ScheduleInfo, ScheduleService, TaskOverviewInfo, TaskService} from "../../../api";
 import {MatSnackBar} from "@angular/material/snack-bar";
+import {TaskEditorData} from "../../tasks/task-editor/TaskEditorData";
+import {TaskEditorComponent} from "../../tasks/task-editor/task-editor.component";
+import {MatDialog} from "@angular/material/dialog";
 
 @Component({
   selector: 'app-task-overview',
@@ -16,7 +19,8 @@ export class TaskOverviewComponent {
 
   constructor(private scheduleService: ScheduleService,
               private snackbar: MatSnackBar,
-              private taskService: TaskService) {
+              private taskService: TaskService,
+              private dialog: MatDialog) {
 
   }
   startTaskNow(task: TaskOverviewInfo) {
@@ -55,4 +59,24 @@ export class TaskOverviewComponent {
        }
     })
   }
+
+  openTaskCreation() {
+    const editorData: TaskEditorData = {
+      task: undefined,
+      taskgroupID: this.taskgroupID!
+    }
+    const dialogRef = this.dialog.open(TaskEditorComponent, {data: editorData, width: "600px"})
+    dialogRef.afterClosed().subscribe(res => {
+      if(res != undefined) {
+        this.tasks.push({
+          taskID: res.taskID,
+          eta: res.eta,
+          limit: res.deadline,
+          taskName: res.taskName,
+          activeTime: 0,
+          overdue: res.overdue
+        })
+      }
+    })
+  }
 }