Edit and Delete in Draggable Scheduler

2023-11-12 22:35:22 +01:00 · 2023-11-12 22:35:22 +01:00 · cf427cdd46
commit cf427cdd46
parent 6cdf069b38
6 changed files with 74 additions and 15 deletions
--- a/backend/.idea/workspace.xml
+++ b/backend/.idea/workspace.xml
@ -6,8 +6,11 @@
  <component name="ChangeListManager">
    <list default="true" id="3a869f59-290a-4ab2-b036-a878ce801bc4" name="Changes" comment="Fix parsing datetime (diesmal hoffentlich wirklich)">
      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/java/core/api/models/timemanager/tasks/TaskOverviewInfo.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/api/models/timemanager/tasks/TaskOverviewInfo.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../openapi.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/../openapi.yaml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/main/java/core/services/TaskScheduleService.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/services/TaskScheduleService.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.css" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.html" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/index.html" afterDir="false" />
    </list>
    <option name="SHOW_DIALOG" value="false" />
    <option name="HIGHLIGHT_CONFLICTS" value="true" />
--- a/backend/src/main/java/core/services/TaskScheduleService.java
+++ b/backend/src/main/java/core/services/TaskScheduleService.java
@ -96,6 +96,9 @@ public class TaskScheduleService {
    }

    public void deleteSchedule(AbstractSchedule schedule) {
+        schedule.getTask().getBasicTaskSchedules().remove(schedule);
+        schedule.setTask(null);
+        scheduleRepository.save(schedule);
        scheduleRepository.delete(schedule);
    }

--- a/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.css
+++ b/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.css
@ -56,5 +56,5 @@ app-task-overview {
 }

 ::ng-deep .cal-event-title {
-  white-space: normal;
+
 }
--- a/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.html
+++ b/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.html
@ -17,7 +17,7 @@
    <div style="width: 75%">
      <mwl-calendar-week-view [viewDate]="viewDate" [daysInWeek]="daysInWeek" [dayStartHour]="7" [dayEndHour]="21" [refresh]="refresh"
                              [snapDraggedEvents]="false"
-                              (eventTimesChanged)="eventDropped($event)" [events]="events"
+                              (eventTimesChanged)="eventDropped($event)" [events]="events" (eventClicked)="eventClicked('Click', $event.event)"
      >
      </mwl-calendar-week-view>
    </div>
--- a/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.ts
+++ b/frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.ts
@ -10,10 +10,11 @@ import {
    TaskOverviewInfo, TaskShortInfo
 } from "../../../api";
 import {Subject} from "rxjs";
-import {CalendarEvent, CalendarEventTimesChangedEvent, CalendarView} from "angular-calendar";
+import {CalendarEvent, CalendarEventAction, CalendarEventTimesChangedEvent, CalendarView} from "angular-calendar";
 import {TaskOverviewData} from "../../dashboard/taskgroup-overview/taskgroup-overview.component";
 import {EventColor} from "calendar-utils";
 import * as moment from "moment";
+import {Router} from "@angular/router";

 const colors: Record<string, EventColor> = {
  red: {
@ -32,7 +33,19 @@ const colors: Record<string, EventColor> = {
@Component({
  selector: 'app-draggable-scheduler',
  templateUrl: './draggable-scheduler.component.html',
-  styleUrls: ['./draggable-scheduler.component.css']
+  styleUrls: ['./draggable-scheduler.component.css'],
+  styles: [
+        `
+      h3 {
+        margin: 0 0 10px;
+      }
+
+      pre {
+        background-color: #f5f5f5;
+        padding: 15px;
+      }
+    `,
+  ],
 })
 export class DraggableSchedulerComponent {
  defaultNavigationLinkPath: NavigationLink[] = [
@ -66,11 +79,28 @@ export class DraggableSchedulerComponent {
  refresh: Subject<void> = new Subject<void>()
  events: CalendarEvent[] = []

+  actions: CalendarEventAction[] = [
+      {
+          label: '<i class="fas fa-fw fa-pencil-alt"></i>',
+          a11yLabel: 'Edit',
+          onClick: ({ event }: { event: CalendarEvent }): void => {
+            this.eventClicked('Edit', event)
+          },
+      },
+      {
+          label: '<i class="fas fa-fw fa-trash-alt"></i>',
+          a11yLabel: 'Delete',
+          onClick: ({ event }: { event: CalendarEvent }): void => {
+              this.eventClicked('Delete', event);
+          },
+      },
+  ]

  tasks: CalendarEvent[] = []
  selectedTaskgroupID: number | undefined

-  constructor(private scheduleService: ScheduleService) {
+  constructor(private scheduleService: ScheduleService,
+              private router: Router) {
  }

  ngOnInit() {
@ -83,6 +113,7 @@ export class DraggableSchedulerComponent {
                    title: this.computeTaskPath(schedule.taskgroupPath, schedule.task),
                    color: colors['red'],
                    start: new Date(basicSchedule.scheduleDate),
+                    actions: this.actions,
                    allDay: true,
                    draggable: true,
                    resizable: {
@ -91,8 +122,10 @@ export class DraggableSchedulerComponent {
                    },
                    meta: {
                        taskID: schedule.task.taskID,
-                        scheduleID: schedule.scheduleID
-                    }
+                        scheduleID: schedule.scheduleID,
+                        taskgroupID: schedule.taskgroupPath[0].taskgroupID
+                    },
+
                })
            } else {
                const advancedSchedule = schedule as AdvancedScheduleInfo
@ -102,6 +135,7 @@ export class DraggableSchedulerComponent {
                    cssClass: 'test',
                    start: new Date(advancedSchedule.scheduleStartTime),
                    end: new Date(advancedSchedule.scheduleStopTime),
+                    actions: this.actions,
                    draggable: true,
                    resizable: {
                        beforeStart: true,
@ -109,11 +143,13 @@ export class DraggableSchedulerComponent {
                    },
                    meta: {
                        taskID: schedule.task.taskID,
-                        scheduleID: schedule.scheduleID
-                    }
+                        scheduleID: schedule.scheduleID,
+                        taskgroupID: schedule.taskgroupPath[0].taskgroupID
+                    },
                })
            }
          });
+          console.log(this.events)
          this.refresh.next();
        }
    })
@ -134,8 +170,10 @@ export class DraggableSchedulerComponent {
        },
        meta: {
          taskID: task.taskID,
-          scheduleID: undefined
-        }
+          scheduleID: undefined,
+          taskgroupID: taskOverviewData.taskgroupID
+        },
+        actions: this.actions
      })
    })
    this.selectedTaskgroupID = taskOverviewData.taskgroupID;
@ -221,13 +259,27 @@ export class DraggableSchedulerComponent {
    }
  }

-    computeTaskPath(taskgroupPath: TaskgroupEntityInfo[], task: TaskShortInfo | TaskEntityInfo) {
+  computeTaskPath(taskgroupPath: TaskgroupEntityInfo[], task: TaskShortInfo | TaskEntityInfo) {
        let result = "";
        taskgroupPath.forEach(taskgroupPathPart => {
            result += taskgroupPathPart.taskgroupName + "/"
        });
        result += task!.taskName
        return result;
-    }
+  }

+    eventClicked(action: string, event: CalendarEvent): void {
+        if(action == 'Click') {
+            this.router.navigateByUrl("/taskgroups/" + event.meta.taskgroupID + "/tasks/" + event.meta.taskID);
+        } else if(action == 'Edit') {
+            this.router.navigateByUrl("/taskgroups/" + event.meta.taskgroupID + "/tasks/" + event.meta.taskID + "/schedule/" + event.meta.scheduleID);
+        } else if(action == 'Delete') {
+            this.scheduleService.schedulesScheduleIDDelete(event.meta.scheduleID).subscribe({
+                next: resp => {
+                    this.events = this.events.filter(calendarEvent => calendarEvent.meta.scheduleID !== event.meta.scheduleID);
+                }
+            })
+        }
+
+    }
 }
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@ -11,6 +11,7 @@
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
 </head>
 <body class="mat-typography">
  <app-root></app-root>