fix(month-view): don't allow dropping events on the source day

Fixes #746
mattlewis92 · Oct 13, 2018 · c96c87e · c96c87e
1 parent 9153b6e
commit c96c87e
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 31 deletions.
diff --git a/projects/angular-calendar/src/modules/month/calendar-month-cell.component.ts b/projects/angular-calendar/src/modules/month/calendar-month-cell.component.ts
@@ -43,7 +43,7 @@ import { PlacementArray } from 'positioning';
           mwlDraggable
           [class.cal-draggable]="event.draggable"
           dragActiveClass="cal-drag-active"
-          [dropData]="{event: event}"
+          [dropData]="{event: event, draggedFrom: day}"
           [dragAxis]="{x: event.draggable, y: event.draggable}"
           (mwlClick)="eventClicked.emit({ event: event })">
         </div>

diff --git a/projects/angular-calendar/src/modules/month/calendar-month-view.component.ts b/projects/angular-calendar/src/modules/month/calendar-month-view.component.ts
@@ -78,7 +78,7 @@ export interface CalendarMonthViewEventTimesChangedEvent<
               (unhighlightDay)="toggleDayHighlight($event.event, false)"
               mwlDroppable
               dragOverClass="cal-drag-over"
-              (drop)="eventDropped(day, $event.dropData.event)"
+              (drop)="eventDropped(day, $event.dropData.event, $event.dropData.draggedFrom)"
               (eventClicked)="eventClicked.emit({event: $event.event})">
             </mwl-calendar-month-cell>
           </div>
@@ -91,7 +91,7 @@ export interface CalendarMonthViewEventTimesChangedEvent<
             (eventClicked)="eventClicked.emit({event: $event.event})"
             mwlDroppable
             dragOverClass="cal-drag-over"
-            (drop)="eventDropped(openDay, $event.dropData.event)">
+            (drop)="eventDropped(openDay, $event.dropData.event, $event.dropData.draggedFrom)">
           </mwl-calendar-open-day-events>
         </div>
       </div>
@@ -344,32 +344,38 @@ export class CalendarMonthViewComponent
   /**
    * @hidden
    */
-  eventDropped(day: MonthViewDay, event: CalendarEvent): void {
-    const year: number = this.dateAdapter.getYear(day.date);
-    const month: number = this.dateAdapter.getMonth(day.date);
-    const date: number = this.dateAdapter.getDate(day.date);
-    const newStart: Date = this.dateAdapter.setDate(
-      this.dateAdapter.setMonth(
-        this.dateAdapter.setYear(event.start, year),
-        month
-      ),
-      date
-    );
-    let newEnd: Date;
-    if (event.end) {
-      const secondsDiff: number = this.dateAdapter.differenceInSeconds(
-        newStart,
-        event.start
+  eventDropped(
+    droppedOn: MonthViewDay,
+    event: CalendarEvent,
+    draggedFrom?: MonthViewDay
+  ): void {
+    if (droppedOn !== draggedFrom) {
+      const year: number = this.dateAdapter.getYear(droppedOn.date);
+      const month: number = this.dateAdapter.getMonth(droppedOn.date);
+      const date: number = this.dateAdapter.getDate(droppedOn.date);
+      const newStart: Date = this.dateAdapter.setDate(
+        this.dateAdapter.setMonth(
+          this.dateAdapter.setYear(event.start, year),
+          month
+        ),
+        date
       );
-      newEnd = this.dateAdapter.addSeconds(event.end, secondsDiff);
+      let newEnd: Date;
+      if (event.end) {
+        const secondsDiff: number = this.dateAdapter.differenceInSeconds(
+          newStart,
+          event.start
+        );
+        newEnd = this.dateAdapter.addSeconds(event.end, secondsDiff);
+      }
+      this.eventTimesChanged.emit({
+        event,
+        newStart,
+        newEnd,
+        day: droppedOn,
+        type: CalendarEventTimesChangedEventType.Drop
+      });
     }
-    this.eventTimesChanged.emit({
-      event,
-      newStart,
-      newEnd,
-      day,
-      type: CalendarEventTimesChangedEventType.Drop
-    });
   }
 
   private refreshHeader(): void {

diff --git a/projects/angular-calendar/test/calendar-month-view.component.spec.ts b/projects/angular-calendar/test/calendar-month-view.component.spec.ts
@@ -611,10 +611,6 @@ describe('calendarMonthView component', () => {
       {
         start: new Date('2017-02-01'),
         title: 'draggable event',
-        color: {
-          primary: 'blue',
-          secondary: 'rgb(238, 238, 238)'
-        },
         draggable: true
       }
     ];
@@ -657,6 +653,52 @@ describe('calendarMonthView component', () => {
     expect(dragEvent.newEnd).to.deep.equal(undefined);
   });
 
+  it('should not fire drop events when dropping on the source date', () => {
+    const fixture: ComponentFixture<
+      CalendarMonthViewComponent
+    > = TestBed.createComponent(CalendarMonthViewComponent);
+    fixture.componentInstance.viewDate = new Date('2018-10-13');
+    fixture.componentInstance.events = [
+      {
+        start: new Date('2018-10-13'),
+        end: new Date('2018-10-14'),
+        title: 'draggable event',
+        draggable: true
+      }
+    ];
+    fixture.componentInstance.ngOnChanges({ viewDate: {} });
+    const dragSpy = sinon.spy();
+    fixture.componentInstance.eventTimesChanged.subscribe(e => dragSpy(e));
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+    const cells: HTMLElement[] = fixture.nativeElement.querySelectorAll(
+      '.cal-day-cell'
+    );
+    const events: HTMLElement = fixture.nativeElement.querySelectorAll(
+      '.cal-event'
+    );
+    const dragToCellPosition: ClientRect = cells[14].getBoundingClientRect();
+    const eventStartPosition: ClientRect = events[1].getBoundingClientRect();
+    triggerDomEvent('mousedown', events[1], {
+      clientX: eventStartPosition.left,
+      clientY: eventStartPosition.top
+    });
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', document.body, {
+      clientX: dragToCellPosition.left + 5,
+      clientY: dragToCellPosition.top + 5
+    });
+    fixture.detectChanges();
+    expect(cells[14].classList.contains('cal-drag-over')).to.equal(true);
+    triggerDomEvent('mouseup', document.body, {
+      clientX: dragToCellPosition.left + 5,
+      clientY: dragToCellPosition.top + 5
+    });
+    fixture.detectChanges();
+    expect(cells[14].classList.contains('cal-drag-over')).to.equal(false);
+    expect(dragSpy).not.to.have.been.called;
+  });
+
   it('should update the event title', () => {
     const fixture: ComponentFixture<
       CalendarMonthViewComponent