Schedule tasks through drag and drop

backend/.idea/workspace.xml

@@ -4,13 +4,11 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="3a869f59-290a-4ab2-b036-a878ce801bc4" name="Changes" comment="Fix parsing datetime">
+    <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/taskSchedule/scheduleInfos/AdvancedScheduleFieldInfo.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/api/models/timemanager/taskSchedule/scheduleInfos/AdvancedScheduleFieldInfo.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/main/java/core/api/controller/ScheduleController.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/api/controller/ScheduleController.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/java/core/repositories/timemanager/TaskgroupRepository.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/repositories/timemanager/TaskgroupRepository.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/main/java/core/api/models/timemanager/taskSchedule/scheduleInfos/BasicScheduleFieldInfo.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/api/models/timemanager/taskSchedule/scheduleInfos/BasicScheduleFieldInfo.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/java/core/services/TaskgroupService.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/services/TaskgroupService.java" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/../frontend/src/app/app.module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/app.module.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/test/java/core/taskgroups/TaskgroupRepsitoryTest.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/test/java/core/taskgroups/TaskgroupRepsitoryTest.java" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/../frontend/src/app/schedules/advanced-scheduler/advanced-scheduler.component.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/schedules/advanced-scheduler/advanced-scheduler.component.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -29,7 +27,7 @@
   <component name="Git.Settings">
     <option name="RECENT_BRANCH_BY_REPOSITORY">
       <map>
-        <entry key="$PROJECT_DIR$/.." value="master" />
+        <entry key="$PROJECT_DIR$/.." value="docker-deployment" />
       </map>
     </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/.." />
@@ -578,14 +576,21 @@
       <option name="project" value="LOCAL" />
       <updated>1699806194258</updated>
     </task>
-    <option name="localTasksCounter" value="45" />
+    <task id="LOCAL-00045" summary="Fix parsing datetime (diesmal hoffentlich wirklich)">
+      <option name="closed" value="true" />
+      <created>1699809089060</created>
+      <option name="number" value="00045" />
+      <option name="presentableId" value="LOCAL-00045" />
+      <option name="project" value="LOCAL" />
+      <updated>1699809089060</updated>
+    </task>
+    <option name="localTasksCounter" value="46" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
     <option name="version" value="3" />
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="Write simple Testcase for ci/cd" />
     <MESSAGE value="Deactivate Overall System test (temporarly)" />
     <MESSAGE value="Fix failing test case" />
     <MESSAGE value="TaskgroupRepsitoryTest" />
@@ -610,7 +615,8 @@
     <MESSAGE value="Deploy on docker (not productive yet!)" />
     <MESSAGE value="Fix deleting tasks" />
     <MESSAGE value="Fix parsing datetime" />
-    <option name="LAST_COMMIT_MESSAGE" value="Fix parsing datetime" />
+    <MESSAGE value="Fix parsing datetime (diesmal hoffentlich wirklich)" />
+    <option name="LAST_COMMIT_MESSAGE" value="Fix parsing datetime (diesmal hoffentlich wirklich)" />
   </component>
   <component name="XDebuggerManager">
     <breakpoint-manager>
@@ -622,12 +628,7 @@
         </line-breakpoint>
         <line-breakpoint enabled="true" type="java-line">
           <url>file://$PROJECT_DIR$/src/main/java/core/api/controller/ScheduleController.java</url>
-          <line>68</line>
+          <line>98</line>
-          <option name="timeStamp" value="14" />
-        </line-breakpoint>
-        <line-breakpoint enabled="true" type="java-line">
-          <url>file://$PROJECT_DIR$/src/main/java/core/api/controller/ScheduleController.java</url>
-          <line>93</line>
           <option name="timeStamp" value="16" />
         </line-breakpoint>
         <line-breakpoint enabled="true" type="java-line">
@@ -635,6 +636,11 @@
           <line>93</line>
           <option name="timeStamp" value="35" />
         </line-breakpoint>
+        <line-breakpoint enabled="true" type="java-line">
+          <url>file://$PROJECT_DIR$/src/main/java/core/api/controller/ScheduleController.java</url>
+          <line>83</line>
+          <option name="timeStamp" value="36" />
+        </line-breakpoint>
       </breakpoints>
     </breakpoint-manager>
   </component>

backend/src/main/java/core/api/controller/ScheduleController.java

@@ -78,10 +78,15 @@ public class ScheduleController {
             return ResponseEntity.ok(scheduleResult.getResult().toScheduleInfo());
         } else if(scheduleFieldInfo instanceof AdvancedScheduleFieldInfo) {
             ServiceResult<AbstractSchedule> scheduleResult = taskScheduleService.scheduleAdvanced(permissionResult.getResult(), (AdvancedScheduleFieldInfo) scheduleFieldInfo);
+            if(scheduleResult.getResult() != null) {
                 return ResponseEntity.ok(scheduleResult.getResult().toScheduleInfo());
             } else {
                 return ResponseEntity.status(400).body(new SimpleStatusResponse("failed"));
             }
+
+        } else {
+            return ResponseEntity.status(400).body(new SimpleStatusResponse("failed"));
+        }
     }
 
     @PostMapping("/schedules/{scheduleID}/basic")

backend/src/main/java/core/api/models/timemanager/taskSchedule/scheduleInfos/BasicScheduleFieldInfo.java

@@ -8,6 +8,7 @@ import java.time.LocalDate;
 public class BasicScheduleFieldInfo extends ScheduleFieldInfo{
 
     @NotNull
+    @JsonFormat(pattern = "yyyy-MM-dd'T'HH:mm:ss.SSSXXX")
     private LocalDate scheduleDate;
 
     public BasicScheduleFieldInfo(LocalDate localDate) {

frontend/src/app/app-routing.module.ts

@@ -11,6 +11,7 @@ import {MissedSchedulesComponent} from "./missed-schedules/missed-schedules.comp
 import {OverdueTaskOverviewComponent} from "./overdue-task-overview/overdue-task-overview.component";
 import {UpcomingTaskOverviewComponent} from "./upcoming-task-overview/upcoming-task-overview.component";
 import {ActiveTaskOverviewComponent} from "./active-task-overview/active-task-overview.component";
+import {DraggableSchedulerComponent} from "./schedules/draggable-scheduler/draggable-scheduler.component";
 
 const routes: Routes = [
   {path: '', component: MainComponent},
@@ -24,7 +25,8 @@ const routes: Routes = [
   {path: 'reschedule', component: MissedSchedulesComponent},
   {path: 'overdue', component: OverdueTaskOverviewComponent},
   {path: 'upcoming', component: UpcomingTaskOverviewComponent},
-  {path: 'active', component: ActiveTaskOverviewComponent}
+  {path: 'active', component: ActiveTaskOverviewComponent},
+  {path: 'scheduler', component: DraggableSchedulerComponent}
 ];
 
 @NgModule({

frontend/src/app/app.component.html

@@ -4,6 +4,7 @@
   <button mat-button aria-label="Organize" *ngIf="authService.hasKey" [matMenuTriggerFor]="organizeMenu">Organize &#9662;</button>
   <mat-menu #organizeMenu=matMenu>
     <button mat-menu-item routerLink="taskgroups/" aria-label="Task groups">Taskgroups</button>
+    <button mat-menu-item routerLink="scheduler/" aria-label="Task groups">Scheduler</button>
     <button mat-menu-item routerLink="active/" aria-label="Missed Schedules">Active Tasks</button>
     <button mat-menu-item routerLink="upcoming/" aria-label="Upcoming Tasks">Upcoming Tasks</button>
     <button mat-menu-item routerLink="overdue/" aria-label="Overdue Tasks">Overdue Tasks</button>

frontend/src/app/app.module.ts

@@ -79,6 +79,7 @@ import {NgxMaterialTimepickerModule} from "ngx-material-timepicker";
 import { DateTimePickerComponent } from './date-time-picker/date-time-picker.component';
 import {MatSliderModule} from "@angular/material/slider";
 import {MatLegacySliderModule} from "@angular/material/legacy-slider";
+import { DraggableSchedulerComponent } from './schedules/draggable-scheduler/draggable-scheduler.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -117,7 +118,8 @@ import {MatLegacySliderModule} from "@angular/material/legacy-slider";
     UpcomingTaskOverviewComponent,
     ActiveTaskOverviewComponent,
     AdvancedSchedulerComponent,
-    DateTimePickerComponent
+    DateTimePickerComponent,
+    DraggableSchedulerComponent,
   ],
   imports: [
     BrowserModule,

frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.css

@@ -0,0 +1,57 @@
+.container {
+  margin: 20px auto;
+  width: 80%;
+}
+
+.spacer {
+  margin-bottom: 2.5%;
+}
+
+
+@media screen and (max-width: 600px) {
+  .container {
+    width: 100%;
+    margin: 20px 10px;
+  }
+}
+
+.schedule-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.long-form {
+  width: 100%;
+}
+
+.taskgroup-overview {
+  width: 90%;
+  display: inline-block;
+}
+
+app-task-overview {
+  margin-top: 20px;
+}
+
+::ng-deep .mat-mdc-list-base {
+  --mdc-list-list-item-label-text-color: black
+}
+
+::ng-deep .mat-mdc-list-base .taskgroup-btn, ::ng-deep .mat-mdc-list-base .taskgroup-last-btn  {
+  --mdc-list-list-item-label-text-color: black
+}
+
+.task-card {
+  background-color: #f3f3f3;
+  border: 0;
+  line-height: 4em;
+}
+
+
+.lightBlueBtn {
+  background-color: #3498db;
+  color: white;
+}
+

frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.html

@@ -0,0 +1,53 @@
+
+<div class="container">
+  <app-navigation-link-list #navLinkList [navigationLinks]="defaultNavigationLinkPath"></app-navigation-link-list>
+
+  <div class="schedule-header">
+    <h1>Monday, {{ viewDate | calendarDate:(view + 'ViewTitle'):'en':1 }}</h1>
+    <mat-form-field style="float:right;">
+      <mat-label>Schedule Strategy</mat-label>
+      <mat-select [(ngModel)]="scheduleStrategy">
+        <mat-option [value]="1">Basic</mat-option>
+        <!--<mat-option [value]="2">Moderate</mat-option>-->
+        <mat-option [value]="3">Advanced</mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div style="display: flex; justify-content: space-between;">
+    <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"
+      >
+      </mwl-calendar-week-view>
+    </div>
+    <div style="width: 23%;">
+      <app-taskgroup-overview (taskgroupSelected)="onSelectTaskgroup($event)"></app-taskgroup-overview>
+
+      <div *ngIf="tasks.length > 0">
+        <mat-action-list style="padding: 0; margin-top: 20px" >
+          <button mat-list-item class="lightBlueBtn" [routerLink]="['/scheduler']">Tasks</button>
+        </mat-action-list>
+        <div mwlDroppable
+             (drop)="externalDrop($event.dropData.event)"
+             dragOverClass="drag-over">
+          <div *ngFor="let event of tasks"  mwlDraggable
+                    [dropData]="{event: event}"
+                    [touchStartLongPress]="{ delay: 300, delta: 30 }"
+                    dragActiveClass="drag-active" class="task-card">
+            <div>
+              <a href="javascript:;" [style.color]="event.color" style="text-decoration: none; color: black; margin-left: 20px">
+                {{ event.title }}
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+
+  </div>
+
+
+</div>

frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DraggableSchedulerComponent } from './draggable-scheduler.component';
+
+describe('DraggableSchedulerComponent', () => {
+  let component: DraggableSchedulerComponent;
+  let fixture: ComponentFixture<DraggableSchedulerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [DraggableSchedulerComponent]
+    });
+    fixture = TestBed.createComponent(DraggableSchedulerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/schedules/draggable-scheduler/draggable-scheduler.component.ts

@@ -0,0 +1,221 @@
+import {Component, ViewChild} from '@angular/core';
+import {NavigationLink, NavigationLinkListComponent} from "../../navigation-link-list/navigation-link-list.component";
+import {
+    AdvancedScheduleInfo,
+    BasicScheduleInfo,
+    ScheduleInfo,
+    ScheduleService,
+    TaskEntityInfo,
+    TaskgroupEntityInfo,
+    TaskOverviewInfo
+} from "../../../api";
+import {Subject} from "rxjs";
+import {CalendarEvent, CalendarEventTimesChangedEvent, CalendarView} from "angular-calendar";
+import {TaskOverviewData} from "../../dashboard/taskgroup-overview/taskgroup-overview.component";
+import {EventColor} from "calendar-utils";
+import * as moment from "moment";
+
+const colors: Record<string, EventColor> = {
+  red: {
+    primary: '#ad2121',
+    secondary: '#FAE3E3',
+  },
+  blue: {
+    primary: '#1e90ff',
+    secondary: '#D1E8FF',
+  },
+  yellow: {
+    primary: '#e3bc08',
+    secondary: '#FDF1BA',
+  },
+};
+@Component({
+  selector: 'app-draggable-scheduler',
+  templateUrl: './draggable-scheduler.component.html',
+  styleUrls: ['./draggable-scheduler.component.css']
+})
+export class DraggableSchedulerComponent {
+  defaultNavigationLinkPath: NavigationLink[] = [
+    {
+      linkText: "Dashboard",
+      routerLink: ['/']
+    },
+    {
+      linkText: "Taskgroups",
+      routerLink: ["/taskgroups"]
+    }
+  ]
+  taskgroups: TaskgroupEntityInfo[] = []
+  taskgroup: TaskgroupEntityInfo | undefined
+  taskgroupPath: TaskgroupEntityInfo[] = []
+  taskgroupID: number = -1;
+  scheduleID: number = -1;
+  editedSchedule: ScheduleInfo | undefined
+  @ViewChild('navLinkList') navLinkListComponent: NavigationLinkListComponent | undefined
+
+  task: TaskEntityInfo | undefined
+  scheduleStrategy: number = 1
+
+
+  /**************************************************/
+  //Calendar-Stuff
+  /**************************************************/
+  view: CalendarView = CalendarView.Week;
+  viewDate = new Date();
+  daysInWeek = 7;
+  refresh: Subject<void> = new Subject<void>()
+  events: CalendarEvent[] = []
+
+
+  tasks: CalendarEvent[] = []
+  selectedTaskgroupID: number | undefined
+
+  constructor(private scheduleService: ScheduleService) {
+  }
+
+  ngOnInit() {
+    this.scheduleService.schedulesGet().subscribe({
+        next: resp => {
+          resp.forEach(schedule => {
+            if(schedule.scheduleType == 'BASIC') {
+              const basicSchedule = schedule as BasicScheduleInfo
+                this.events.push({
+                    title:  schedule.task.taskName,
+                    color: colors['red'],
+                    start: new Date(basicSchedule.scheduleDate),
+                    allDay: true,
+                    draggable: true,
+                    resizable: {
+                        beforeStart: true,
+                        afterEnd: true
+                    },
+                    meta: {
+                        taskID: schedule.task.taskID,
+                        scheduleID: schedule.scheduleID
+                    }
+                })
+            } else {
+                const advancedSchedule = schedule as AdvancedScheduleInfo
+                this.events.push({
+                    title:  schedule.task.taskName,
+                    color: colors['red'],
+                    start: new Date(advancedSchedule.scheduleStartTime),
+                    end: new Date(advancedSchedule.scheduleStopTime),
+                    draggable: true,
+                    resizable: {
+                        beforeStart: true,
+                        afterEnd: true
+                    },
+                    meta: {
+                        taskID: schedule.task.taskID,
+                        scheduleID: schedule.scheduleID
+                    }
+                })
+            }
+          });
+          this.refresh.next();
+        }
+    })
+  }
+
+  onSelectTaskgroup(taskOverviewData: TaskOverviewData) {
+    this.tasks = [];
+    taskOverviewData.tasks.forEach(task => {
+      this.tasks.push({
+        title: task.taskName,
+        color: colors['yellow'],
+        start: new Date(),
+        draggable: true,
+        resizable: {
+          beforeStart: true,
+          afterEnd: true
+        },
+        meta: {
+          taskID: task.taskID,
+          scheduleID: undefined
+        }
+      })
+    })
+    this.selectedTaskgroupID = taskOverviewData.taskgroupID;
+  }
+
+
+  externalDrop(event: CalendarEvent) {
+    if (this.tasks.indexOf(event) === -1) {
+      this.events = this.events.filter((iEvent) => iEvent !== event);
+      this.tasks.push(event);
+    }
+  }
+
+  eventDropped({
+                 event,
+                 newStart,
+                 newEnd,
+                 allDay,
+               }: CalendarEventTimesChangedEvent): void {
+    const externalIndex = this.tasks.indexOf(event);
+    if (typeof allDay !== 'undefined') {
+      event.allDay = allDay;
+    }
+    if (externalIndex > -1) {
+      this.tasks.splice(externalIndex, 1);
+      this.events.push(event);
+    }
+
+    event.start = newStart;
+    if (newEnd) {
+      event.end = newEnd;
+    }
+    this.events = [...this.events];
+
+    if(externalIndex > -1) {
+      //Create new schedule as a new event was dropped
+      if(event.allDay) {
+        this.scheduleService.schedulesTaskIDBasicPut(event.meta.taskID,{
+          scheduleDate: moment(event.start).format('YYYY-MM-DDTHH:mm:ss.SSSZ')
+        }).subscribe({
+            next: resp => {
+              event.meta.scheduleID = resp.scheduleID;
+              event.color = colors['red']
+            }
+        })
+      } else {
+        console.log("Start: " + event.start);
+        console.log("End: " + event.end);
+        if(event.end == undefined) {
+          event.end = moment(event.start).add(30, 'm').toDate()
+        }
+        this.scheduleService.schedulesTaskIDAdvancedPut(event.meta.taskID, {
+            scheduleStartTime: moment(event.start).format('YYYY-MM-DDTHH:mm:ss.SSSZ'),
+            scheduleStopTime: moment(event.end).format('YYYY-MM-DDTHH:mm:ss.SSSZ'),
+        }).subscribe({
+            next: resp => {
+                event.meta.scheduleID = resp.scheduleID;
+                event.color = colors['red']
+            }
+        })
+      }
+    } else {
+        if(event.allDay) {
+            this.scheduleService.schedulesScheduleIDBasicPost(event.meta.scheduleID,{
+                scheduleDate: moment(event.start).format('YYYY-MM-DDTHH:mm:ss.SSSZ')
+            }).subscribe({
+                next: resp => {
+                    console.log("Updated")
+                }
+            })
+        } else {
+            this.scheduleService.schedulesScheduleIDAdvancedPost(event.meta.scheduleID, {
+                scheduleStartTime: moment(event.start).format('YYYY-MM-DDTHH:mm:ss.SSSZ'),
+                scheduleStopTime: moment(event.end).format('YYYY-MM-DDTHH:mm:ss.SSSZ'),
+            }).subscribe({
+                next: resp => {
+                   console.log("Updated")
+                }
+            })
+        }
+    }
+  }
+
+
+}