Update Frontend for editing and deleting tasks

This commit is contained in:
Sebastian 2023-10-22 00:49:06 +02:00
parent f5e2670319
commit 7a1b2b33ff
7 changed files with 63 additions and 7 deletions

View File

@ -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>

View File

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

View File

@ -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;
}

View File

@ -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>

View File

@ -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"})
}
}

View File

@ -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>

View File

@ -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
}
}