Schedule tasks through drag and drop
All checks were successful
Java CI with Maven / build (push) Successful in 47s

This commit is contained in:
Sebastian Böckelmann 2023-11-12 21:22:48 +01:00
parent 1ca0ee20ad
commit c25d45d697
10 changed files with 388 additions and 19 deletions

View File

@ -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/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/services/TaskgroupService.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/core/services/TaskgroupService.java" 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" />
<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/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$/../frontend/src/app/app.module.ts" beforeDir="false" afterPath="$PROJECT_DIR$/../frontend/src/app/app.module.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>
<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>
<line>98</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>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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