feat(calendar): prepare interaction

package.json

@@ -111,6 +111,7 @@
     "@biesbjerg/ngx-translate-extract": "^7.0.4",
     "@fullcalendar/angular": "^5.4.0",
     "@fullcalendar/daygrid": "^5.4.0",
+    "@fullcalendar/interaction": "^5.5.0",
     "@fullcalendar/timegrid": "^5.4.0",
     "@ngrx/data": "^11.1.0",
     "@ngrx/effects": "^11.1.0",

src/app/features/calendar/calendar.component.ts

@@ -1,10 +1,12 @@
 import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
-import { CalendarOptions, EventClickArg, FullCalendarComponent } from '@fullcalendar/angular';
+import { CalendarOptions, FullCalendarComponent } from '@fullcalendar/angular';
 import { ScheduledTaskService } from '../tasks/scheduled-task.service';
 import { Observable } from 'rxjs';
 import { map, withLatestFrom } from 'rxjs/operators';
 import { EventInput } from '@fullcalendar/common';
 import { WorkContextService } from '../work-context/work-context.service';
+import { TaskService } from '../tasks/task.service';
+import { TaskWithReminderData } from '../tasks/task.model';
 
 @Component({
   // apparently calendar does not work, so we add a prefix
@@ -18,10 +20,31 @@ export class CalendarComponent {
 
   private DEFAULT_CAL_OPTS: CalendarOptions = {
     editable: true,
-    eventClick: (calEvent: EventClickArg) => {
+    // eventClick: (calEvent: EventClickArg) => {
+    //   console.log(calEvent);
+    //   // this.openDialog(calEvent);
+    // },
+    eventResize: (calEvent: any) => {
       console.log(calEvent);
       // this.openDialog(calEvent);
     },
+    eventDrop: (calEvent: any) => {
+      console.log(calEvent);
+      const start = calEvent.event._instance.range.start;
+      const task: TaskWithReminderData = calEvent.event.extendedProps;
+      console.log(start, task);
+      this._taskService.updateReminder(task.id, task.reminderId as string, start.getTime(), task.title);
+
+      // this.openDialog(calEvent);
+    },
+    // eventReceive: (calEvent: any) => {
+    //   console.log(calEvent);
+    //   // this.openDialog(calEvent);
+    // },
+    // eventLeave: (calEvent: any) => {
+    //   console.log(calEvent);
+    //   // this.openDialog(calEvent);
+    // },
     events: [],
     headerToolbar: {
       start: 'today prev,next',
@@ -57,6 +80,8 @@ export class CalendarComponent {
         start: task.reminderData.remindAt,
         editable: true,
         startEditable: true,
+        durationEditable: true,
+        extendedProps: task,
         backgroundColor: task.projectId
           ? colorMap[task.projectId]
           : colorMap[task.tagIds[0]]
@@ -71,6 +96,7 @@ export class CalendarComponent {
   constructor(
     private _workContextService: WorkContextService,
     private _scheduledTaskService: ScheduledTaskService,
+    private _taskService: TaskService,
   ) {
     this.calOptions$.subscribe((v) => console.log('calOptions$', v));
   }

src/app/features/calendar/calendar.module.ts

@@ -4,12 +4,13 @@ import { CalendarComponent } from './calendar.component';
 import { FullCalendarModule } from '@fullcalendar/angular';
 import dayGridPlugin from '@fullcalendar/daygrid'; // a plugin
 import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
 
 // import interactionPlugin from '@fullcalendar/interaction'; // a plugin
 FullCalendarModule.registerPlugins([ // register FullCalendar plugins
   dayGridPlugin,
   timeGridPlugin,
-  // interactionPlugin
+  interactionPlugin,
 ]);
 
 @NgModule({