From ac7065629fb5c14460b00ff8ca2be05ef8220544 Mon Sep 17 00:00:00 2001 From: Matt Lewis Date: Sun, 25 Jun 2017 16:48:37 +0100 Subject: [PATCH] fix(weekView): revert allowDragOutside feature BREAKING CHANGE: The `allowDragOutside` option has been removed from the week view as this can be implemented in user land. Please see this plunker for how to introduce it yourself: TODO --- .../draggable-external-events/component.ts | 13 ---- .../draggable-external-events/template.html | 14 ++-- .../week/calendarWeekView.component.ts | 42 +++-------- test/calendarWeekView.component.spec.ts | 70 ------------------- 4 files changed, 13 insertions(+), 126 deletions(-) diff --git a/demos/demo-modules/draggable-external-events/component.ts b/demos/demo-modules/draggable-external-events/component.ts index 1ef70f10c..f71303513 100644 --- a/demos/demo-modules/draggable-external-events/component.ts +++ b/demos/demo-modules/draggable-external-events/component.ts @@ -1,6 +1,5 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; import { CalendarEvent, CalendarEventTimesChangedEvent } from 'angular-calendar'; -import { Subject } from 'rxjs/Subject'; import { colors } from '../demo-utils/colors'; @Component({ @@ -29,7 +28,6 @@ export class DemoComponent { events: CalendarEvent[] = []; activeDayIsOpen: boolean = false; - refresh: Subject = new Subject(); eventDropped({event, newStart, newEnd}: CalendarEventTimesChangedEvent): void { const externalIndex: number = this.externalEvents.indexOf(event); @@ -45,16 +43,5 @@ export class DemoComponent { this.activeDayIsOpen = true; } - droppedBack(event: CalendarEvent): void { - - const internalIndex: number = this.events.indexOf(event); - - if (internalIndex > -1) { - this.events.splice(internalIndex, 1); - this.externalEvents.push(event); - - this.refresh.next(); - } - } } diff --git a/demos/demo-modules/draggable-external-events/template.html b/demos/demo-modules/draggable-external-events/template.html index dd5612b8f..a5699feaa 100644 --- a/demos/demo-modules/draggable-external-events/template.html +++ b/demos/demo-modules/draggable-external-events/template.html @@ -1,9 +1,7 @@
-
+
  • + (eventTimesChanged)="eventDropped($event)"> + (eventTimesChanged)="eventDropped($event)"> + (eventTimesChanged)="eventDropped($event)">
diff --git a/src/components/week/calendarWeekView.component.ts b/src/components/week/calendarWeekView.component.ts index 690d112ba..1650da9d1 100644 --- a/src/components/week/calendarWeekView.component.ts +++ b/src/components/week/calendarWeekView.component.ts @@ -21,8 +21,6 @@ import { } from 'calendar-utils'; import { ResizeEvent } from 'angular-resizable-element'; import addDays from 'date-fns/add_days'; -import differenceInDays from 'date-fns/difference_in_days'; -import startOfDay from 'date-fns/start_of_day'; import { CalendarDragHelper } from '../../providers/calendarDragHelper.provider'; import { CalendarResizeHelper } from '../../providers/calendarResizeHelper.provider'; import { CalendarEventTimesChangedEvent } from '../../interfaces/calendarEventTimesChangedEvent.interface'; @@ -55,7 +53,7 @@ export interface WeekViewEventResize { (dayClicked)="dayClicked.emit($event)" (eventDropped)="eventTimesChanged.emit($event)"> -
+
+ (dragEnd)="eventDragged(weekEvent, $event.x, getDayColumnWidth(eventRowContainer))"> lastDate) { - daysDragged -= differenceInDays(startOfDay(newStart), startOfDay(lastDate)); - } - } - - newStart = addDays(weekEvent.event.start, daysDragged); - + const daysDragged: number = draggedByPx / dayWidth; + const newStart: Date = addDays(weekEvent.event.start, daysDragged); let newEnd: Date; if (weekEvent.event.end) { newEnd = addDays(weekEvent.event.end, daysDragged); @@ -338,11 +316,9 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy { * @hidden */ dragStart(weekViewContainer: HTMLElement, event: HTMLElement): void { - if (!this.allowDragOutside) { - const dragHelper: CalendarDragHelper = new CalendarDragHelper(weekViewContainer, event); - this.validateDrag = ({x, y}) => this.currentResizes.size === 0 && dragHelper.validateDrag({x, y}); - this.cdr.markForCheck(); - } + const dragHelper: CalendarDragHelper = new CalendarDragHelper(weekViewContainer, event); + this.validateDrag = ({x, y}) => this.currentResizes.size === 0 && dragHelper.validateDrag({x, y}); + this.cdr.markForCheck(); } private refreshHeader(): void { diff --git a/test/calendarWeekView.component.spec.ts b/test/calendarWeekView.component.spec.ts index aeb8cfa2a..a3614549d 100644 --- a/test/calendarWeekView.component.spec.ts +++ b/test/calendarWeekView.component.spec.ts @@ -530,74 +530,4 @@ describe('calendarWeekView component', () => { }); }); - it('should allow the events to be dragged outside of the week view to the left', () => { - const fixture: ComponentFixture = TestBed.createComponent(CalendarWeekViewComponent); - fixture.componentInstance.viewDate = new Date('2016-12-08'); - fixture.componentInstance.events = [{ - title: 'foo', - color: {primary: '', secondary: ''}, - start: moment('2016-12-08').add(4, 'hours').toDate(), - end: moment('2016-12-08').add(6, 'hours').toDate(), - draggable: true - }]; - fixture.componentInstance.allowDragOutside = true; - fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}}); - fixture.detectChanges(); - document.body.appendChild(fixture.nativeElement); - const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event-container'); - const dayWidth: number = event.parentElement.offsetWidth / 7; - const eventPosition: ClientRect = event.getBoundingClientRect(); - let dragEvent: CalendarEventTimesChangedEvent; - fixture.componentInstance.eventTimesChanged.subscribe(event => { - dragEvent = event; - }); - triggerDomEvent('mousedown', event, {clientX: eventPosition.left, clientY: eventPosition.top}); - fixture.detectChanges(); - triggerDomEvent('mousemove', document.body, {clientX: -10000, clientY: eventPosition.top}); - fixture.detectChanges(); - triggerDomEvent('mouseup', document.body, {clientX: -1000, clientY: eventPosition.top}); - fixture.detectChanges(); - fixture.destroy(); - expect(dragEvent).to.deep.equal({ - event: fixture.componentInstance.events[0], - newStart: moment('2016-12-07').startOf('week').add(4, 'hours').toDate(), - newEnd: moment('2016-12-07').startOf('week').add(6, 'hours').toDate() - }); - }); - - it('should allow the events to be dragged outside of the week view to the right', () => { - const fixture: ComponentFixture = TestBed.createComponent(CalendarWeekViewComponent); - fixture.componentInstance.viewDate = new Date('2016-12-08'); - fixture.componentInstance.events = [{ - title: 'foo', - color: {primary: '', secondary: ''}, - start: moment('2016-12-08').add(4, 'hours').toDate(), - end: moment('2016-12-08').add(6, 'hours').toDate(), - draggable: true - }]; - fixture.componentInstance.allowDragOutside = true; - fixture.componentInstance.ngOnChanges({viewDate: {}, events: {}}); - fixture.detectChanges(); - document.body.appendChild(fixture.nativeElement); - const event: HTMLElement = fixture.nativeElement.querySelector('.cal-event-container'); - const dayWidth: number = event.parentElement.offsetWidth / 7; - const eventPosition: ClientRect = event.getBoundingClientRect(); - let dragEvent: CalendarEventTimesChangedEvent; - fixture.componentInstance.eventTimesChanged.subscribe(event => { - dragEvent = event; - }); - triggerDomEvent('mousedown', event, {clientX: eventPosition.left, clientY: eventPosition.top}); - fixture.detectChanges(); - triggerDomEvent('mousemove', document.body, {clientX: document.body.clientWidth + 1000, clientY: eventPosition.top}); - fixture.detectChanges(); - triggerDomEvent('mouseup', document.body, {clientX: document.body.clientWidth + 1000, clientY: eventPosition.top}); - fixture.detectChanges(); - fixture.destroy(); - expect(dragEvent).to.deep.equal({ - event: fixture.componentInstance.events[0], - newStart: moment('2016-12-07').startOf('week').add(6, 'days').add(4, 'hours').toDate(), - newEnd: moment('2016-12-07').startOf('week').add(6, 'days').add(6, 'hours').toDate() - }); - }); - });