fix(week-view): allow dragging all day events multiple times

Fixes #1173

Author: mattlewis92

projects/angular-calendar/src/modules/week/calendar-week-view.component.ts

@@ -652,6 +652,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
    */
   calendarId = Symbol('angular calendar week view id');
 
+  /**
+   * @hidden
+   */
+  lastDraggedEvent: CalendarEvent;
+
   /**
    * @hidden
    */
@@ -937,7 +942,9 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   ): void {
     if (
       shouldFireDroppedEvent(dropEvent, date, allDay, this.calendarId) &&
-      this.lastDragEnterDate.getTime() === date.getTime()
+      this.lastDragEnterDate.getTime() === date.getTime() &&
+      (!this.snapDraggedEvents ||
+        dropEvent.dropData.event !== this.lastDraggedEvent)
     ) {
       this.eventTimesChanged.emit({
         type: CalendarEventTimesChangedEventType.Drop,
@@ -946,6 +953,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
         allDay,
       });
     }
+    this.lastDraggedEvent = null;
   }
 
   /**
@@ -987,6 +995,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
       });
     this.dragActive = true;
     this.dragAlreadyMoved = false;
+    this.lastDraggedEvent = null;
     this.eventDragEnterByType = {
       allDay: 0,
       time: 0,
@@ -1052,16 +1061,19 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   ): void {
     this.view = this.getWeekView(this.events);
     this.dragActive = false;
+    this.validateDrag = null;
     const { start, end } = this.getDragMovedEventTimes(
       weekEvent,
       dragEndEvent,
       dayWidth,
       useY
     );
     if (
-      this.eventDragEnterByType[useY ? 'time' : 'allDay'] > 0 &&
+      (this.snapDraggedEvents ||
+        this.eventDragEnterByType[useY ? 'time' : 'allDay'] > 0) &&
       isDraggedWithinPeriod(start, end, this.view.period)
     ) {
+      this.lastDraggedEvent = weekEvent.event;
       this.eventTimesChanged.emit({
         newStart: start,
         newEnd: end,

projects/angular-calendar/test/calendar-week-view.component.spec.ts

@@ -2481,5 +2481,57 @@ describe('calendarWeekView component', () => {
       );
       expect(marker.style.top).to.equal('2760px');
     });
+
+    it('should not change the all day event end date when ending the drop inside the hour grid', () => {
+      const fixture: ComponentFixture<CalendarWeekViewComponent> = TestBed.createComponent(
+        CalendarWeekViewComponent
+      );
+      fixture.componentInstance.viewDate = new Date();
+      fixture.componentInstance.events = [
+        {
+          title: 'foo',
+          start: moment().startOf('week').toDate(),
+          end: moment().startOf('week').add(2, 'days').toDate(),
+          draggable: true,
+          allDay: true,
+        },
+      ];
+      fixture.componentInstance.ngOnChanges({ viewDate: {}, events: {} });
+      fixture.detectChanges();
+      document.body.appendChild(fixture.nativeElement);
+      // remove the header as it was causing the test to fail
+      const header: HTMLElement = fixture.nativeElement.querySelector(
+        '.cal-day-headers'
+      );
+      header.parentNode.removeChild(header);
+
+      const eventDropped = sinon.spy();
+      fixture.componentInstance.eventTimesChanged.subscribe(eventDropped);
+
+      const event: HTMLElement = fixture.nativeElement.querySelector(
+        '.cal-event-container'
+      );
+      const dayWidth: number = event.parentElement.offsetWidth / 7;
+      const eventPosition: ClientRect = event.getBoundingClientRect();
+      triggerDomEvent('mousedown', event, {
+        clientX: eventPosition.right,
+        clientY: eventPosition.top,
+        button: 0,
+      });
+      fixture.detectChanges();
+      triggerDomEvent('mousemove', document.body, {
+        clientX: eventPosition.right + dayWidth,
+        clientY: eventPosition.top + 100,
+      });
+      fixture.detectChanges();
+      triggerDomEvent('mouseup', document.body, {
+        clientX: eventPosition.right + dayWidth,
+        clientY: eventPosition.top + 100,
+        button: 0,
+      });
+      fixture.detectChanges();
+
+      expect(eventDropped).to.have.been.calledOnce;
+    });
   });
 });