fix(week-view): handle dragging and resizing across excluded days

mattlewis92 · Feb 25, 2019 · 5d1c69a · 5d1c69a
1 parent 47892c6
commit 5d1c69a
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 6 deletions.
diff --git a/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts b/projects/angular-calendar/src/modules/week/calendar-week-view.component.ts
@@ -820,9 +820,19 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
       let newStart: Date = allDayEvent.event.start;
       let newEnd: Date = allDayEvent.event.end || allDayEvent.event.start;
       if (allDayEventResizingBeforeStart) {
-        newStart = this.dateAdapter.addDays(newStart, daysDiff);
+        newStart = addDaysWithExclusions(
+          this.dateAdapter,
+          newStart,
+          daysDiff,
+          this.excludeDays
+        );
       } else {
-        newEnd = this.dateAdapter.addDays(newEnd, daysDiff);
+        newEnd = addDaysWithExclusions(
+          this.dateAdapter,
+          newEnd,
+          daysDiff,
+          this.excludeDays
+        );
       }
 
       this.eventTimesChanged.emit({
@@ -1048,13 +1058,23 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
       : 0;
 
     const start = this.dateAdapter.addMinutes(
-      this.dateAdapter.addDays(weekEvent.event.start, daysDragged),
+      addDaysWithExclusions(
+        this.dateAdapter,
+        weekEvent.event.start,
+        daysDragged,
+        this.excludeDays
+      ),
       minutesMoved
     );
     let end: Date;
     if (weekEvent.event.end) {
       end = this.dateAdapter.addMinutes(
-        this.dateAdapter.addDays(weekEvent.event.end, daysDragged),
+        addDaysWithExclusions(
+          this.dateAdapter,
+          weekEvent.event.end,
+          daysDragged,
+          this.excludeDays
+        ),
         minutesMoved
       );
     }
@@ -1129,7 +1149,12 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
       const daysDiff = Math.round(
         +resizeEvent.edges.left / this.dayColumnWidth
       );
-      const newStart = this.dateAdapter.addDays(newEventDates.start, daysDiff);
+      const newStart = addDaysWithExclusions(
+        this.dateAdapter,
+        newEventDates.start,
+        daysDiff,
+        this.excludeDays
+      );
       if (newStart < smallestResizes.start) {
         newEventDates.start = newStart;
       } else {
@@ -1139,7 +1164,12 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
       const daysDiff = Math.round(
         +resizeEvent.edges.right / this.dayColumnWidth
       );
-      const newEnd = this.dateAdapter.addDays(newEventDates.end, daysDiff);
+      const newEnd = addDaysWithExclusions(
+        this.dateAdapter,
+        newEventDates.end,
+        daysDiff,
+        this.excludeDays
+      );
       if (newEnd > smallestResizes.end) {
         newEventDates.end = newEnd;
       } else {

diff --git a/projects/angular-calendar/test/calendar-week-view.component.spec.ts b/projects/angular-calendar/test/calendar-week-view.component.spec.ts
@@ -2041,4 +2041,75 @@ describe('calendarWeekView component', () => {
     fixture.detectChanges();
     fixture.destroy();
   });
+
+  it('should drag time events to different days and columns while snapping to a grid and excluding weekends', () => {
+    const fixture: ComponentFixture<
+      CalendarWeekViewComponent
+    > = TestBed.createComponent(CalendarWeekViewComponent);
+    fixture.componentInstance.viewDate = new Date('2019-03-01');
+    fixture.componentInstance.excludeDays = [0, 6];
+    fixture.componentInstance.daysInWeek = 4;
+    fixture.componentInstance.events = [
+      {
+        start: moment(new Date('2019-03-01'))
+          .startOf('day')
+          .add(3, 'hours')
+          .toDate(),
+        end: moment(new Date('2019-03-01'))
+          .startOf('day')
+          .add(18, 'hours')
+          .toDate(),
+        title: 'foo',
+        draggable: true
+      }
+    ];
+    fixture.componentInstance.ngOnChanges({
+      viewDate: {},
+      events: {},
+      excludeDays: {},
+      daysInWeek: {}
+    });
+    fixture.detectChanges();
+    document.body.appendChild(fixture.nativeElement);
+    const events = fixture.nativeElement.querySelectorAll(
+      '.cal-event-container'
+    );
+    const dayWidth: number = events[0].parentElement.offsetWidth;
+    const rect1: ClientRect = events[0].getBoundingClientRect();
+    let dragEvent: CalendarEventTimesChangedEvent;
+    fixture.componentInstance.eventTimesChanged.subscribe(e => {
+      dragEvent = e;
+    });
+    triggerDomEvent('mousedown', events[0], {
+      clientX: rect1.right,
+      clientY: rect1.bottom
+    });
+    fixture.detectChanges();
+    triggerDomEvent('mousemove', events[0], {
+      clientX: rect1.right + dayWidth - 5,
+      clientY: rect1.bottom + 95
+    });
+    fixture.detectChanges();
+    triggerDomEvent('mouseup', events[0], {
+      clientX: rect1.right + dayWidth - 5,
+      clientY: rect1.bottom + 95
+    });
+    fixture.detectChanges();
+    fixture.destroy();
+    expect(dragEvent).to.deep.equal({
+      type: 'drag',
+      allDay: false,
+      event: fixture.componentInstance.events[0],
+      newStart: moment(fixture.componentInstance.events[0].start)
+        .add(3, 'days')
+        .add(1, 'hour')
+        .add(30, 'minutes')
+        .toDate(),
+      newEnd: moment(fixture.componentInstance.events[0].end)
+        .add(3, 'days')
+        .add(1, 'hour')
+        .add(30, 'minutes')
+        .toDate()
+    });
+  });
 });