Edit and Delete in Draggable Scheduler

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$/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$/../openapi.yaml" beforeDir="false" afterPath="$PROJECT_DIR$/../openapi.yaml" 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" />

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

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

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>

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;
@@ -230,4 +268,18 @@ export class DraggableSchedulerComponent {
         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);
+                }
+            })
+        }
+
+    }
 }

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>