Update Frontend for editing and deleting tasks

backend/.idea/misc.xml

@@ -1,3 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ExternalStorageConfigurationManager" enabled="true" />
   <component name="MavenProjectsManager">
@@ -8,4 +9,7 @@
     </option>
   </component>
   <component name="ProjectRootManager" version="2" languageLevel="JDK_17" default="true" project-jdk-name="17" project-jdk-type="JavaSDK" />
+  <component name="ProjectType">
+    <option name="id" value="jpab" />
+  </component>
 </project>

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

@@ -1,6 +1,6 @@
 .container {
   margin: 20px auto;
-  width: 60%;
+  width: 70%;
 }
 
 .spacer {

frontend/src/app/tasks/task-dashboard/task-dashboard.component.css

@@ -20,8 +20,12 @@ td, th {
   margin: 0 auto;
 }
 
-.mat-column-status, .mat-column-finished {
+.mat-column-status, .mat-column-eta {
+  width: 32px;
+  text-align: left;
+}
+
+.mat-column-edit, .mat-column-delete, .mat-column-finished {
   width: 32px;
   text-align: center;
 }
-

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

@@ -35,6 +35,19 @@
         <div class="status-indicator" [style.background-color]="getStatusOfTask(task)"></div>
       </td>
     </ng-container>
+    <ng-container matColumnDef="edit">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
+      <td mat-cell *matCellDef="let task">
+        <button mat-icon-button color="primary" (click)="editTask(task)"><mat-icon>edit</mat-icon></button>
+      </td>
+    </ng-container>
+    <ng-container matColumnDef="delete">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
+      <td mat-cell *matCellDef="let task">
+        <button mat-icon-button color="warn" (click)="deleteTask(task)"><mat-icon>delete</mat-icon></button>
+      </td>
+    </ng-container>
+
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

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

@@ -4,6 +4,8 @@ import {MatPaginator} from "@angular/material/paginator";
 import {MatSort} from "@angular/material/sort";
 import {MatTableDataSource} from "@angular/material/table";
 import {TaskEditorComponent} from "../task-editor/task-editor.component";
+import {TaskEditorData} from "../task-editor/TaskEditorData";
+import {MatDialog, MatDialogRef} from "@angular/material/dialog";
 
 @Component({
   selector: 'app-task-dashboard',
@@ -27,10 +29,11 @@ export class TaskDashboardComponent implements OnChanges{
   @ViewChild(MatPaginator) paginator: MatPaginator | undefined
   @ViewChild(MatSort) sort: MatSort | undefined
 
-  displayedColumns: string[] = ['status', 'name', 'eta', 'start', 'deadline', 'finished'];
+  displayedColumns: string[] = ['status', 'name', 'eta', 'start', 'deadline', 'finished', 'edit', 'delete'];
   datasource: MatTableDataSource<TaskEntityInfo> = new MatTableDataSource<TaskEntityInfo>();
 
-  constructor(private taskService: TaskService) {
+  constructor(private taskService: TaskService,
+              private dialog: MatDialog) {
   }
 
 
@@ -46,4 +49,17 @@ export class TaskDashboardComponent implements OnChanges{
   getStatusOfTask(task: TaskEntityInfo) {
     return "green";
   }
+
+  deleteTask(task: TaskEntityInfo) {
+    //todo: implement task delete api call
+  }
+
+  editTask(task: TaskEntityInfo) {
+    const taskEditorInfo: TaskEditorData = {
+      task: task,
+      taskgroupID: this.taskgroupID!
+    };
+    const dialogRef = this.dialog.open(TaskEditorComponent, {data: taskEditorInfo, minWidth: "400px"})
+
+  }
 }

frontend/src/app/tasks/task-editor/task-editor.component.html

@@ -1,4 +1,5 @@
-<h1 mat-dialog-title>Create New Task</h1>
+<h1 mat-dialog-title *ngIf="editorData.task != undefined">Edit Task ({{editorData.task!.taskName}})</h1>
+<h1 mat-dialog-title *ngIf="editorData.task == undefined">Create New Task</h1>
 <div mat-dialog-content>
   <mat-form-field appearance="outline" class="long-form">
     <mat-label>Name</mat-label>
@@ -27,5 +28,5 @@
 
 <div mat-dialog-actions align="end">
   <button mat-raised-button (click)="cancel()">Cancel</button>
-  <button mat-raised-button (click)="submit()">Add Task</button>
+  <button mat-raised-button color="primary" (click)="submit()">Add Task</button>
 </div>

frontend/src/app/tasks/task-editor/task-editor.component.ts

@@ -26,6 +26,12 @@ export class TaskEditorComponent implements OnInit {
               private snackbar: MatSnackBar) { }
 
   ngOnInit(): void {
+    if(this.editorData.task != undefined) {
+      this.nameCtrl.setValue(this.editorData.task.taskName);
+      this.etaCtrl.setValue(this.editorData.task.eta)
+      this.startDate.setValue(this.editorData.task.startDate);
+      this.endDate.setValue(this.editorData.task.deadline);
+    }
   }
 
   cancel() {
@@ -33,6 +39,14 @@ export class TaskEditorComponent implements OnInit {
   }
 
   submit() {
+    if(this.editorData.task != undefined) {
+      this.editTask()
+    } else {
+      this.createTask();
+    }
+  }
+
+  createTask() {
     this.taskService.tasksTaskgroupIDPut(this.editorData.taskgroupID, {
       taskName: this.nameCtrl.value,
       eta: this.etaCtrl.value,
@@ -55,4 +69,8 @@ export class TaskEditorComponent implements OnInit {
       }
     })
   }
+
+  editTask() {
+    //todo: api call
+  }
 }