Skip to content

Commit 479c75a

Browse files
mattlewis92mattlewis92
committed
feat(event-times-changed): expose type of event (resize, drag or drop)
1 parent d6d61c4 commit 479c75a

7 files changed

+94
-12
lines changed

‎src/modules/common/calendar-event-times-changed-event.interface.ts

+7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
import { CalendarEvent } from 'calendar-utils';
22

3+
export enum CalendarEventTimesChangedEventType {
4+
Drag = 'drag',
5+
Drop = 'drop',
6+
Resize = 'resize'
7+
}
8+
39
/**
410
* The output `$event` type when an event is resized or dragged and dropped.
511
*/
612
export interface CalendarEventTimesChangedEvent<MetaType = any> {
13+
type: CalendarEventTimesChangedEventType;
714
event: CalendarEvent<MetaType>;
815
newStart: Date;
916
newEnd?: Date;

‎src/modules/day/calendar-day-view.component.ts

+17-3
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,10 @@ import { Subject, Subscription } from 'rxjs';
2323
import { ResizeEvent } from 'angular-resizable-element';
2424
import { CalendarDragHelper } from '../common/calendar-drag-helper.provider';
2525
import { CalendarResizeHelper } from '../common/calendar-resize-helper.provider';
26-
import { CalendarEventTimesChangedEvent } from '../common/calendar-event-times-changed-event.interface';
26+
import {
27+
CalendarEventTimesChangedEvent,
28+
CalendarEventTimesChangedEventType
29+
} from '../common/calendar-event-times-changed-event.interface';
2730
import { CalendarUtils } from '../common/calendar-utils.provider';
2831
import { validateEvents, trackByEventId, roundToNearest } from '../common/util';
2932
import { DateAdapter } from '../../date-adapters/date-adapter';
@@ -405,6 +408,7 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
405408
!dropEvent.dropData.isInternal
406409
) {
407410
this.eventTimesChanged.emit({
411+
type: CalendarEventTimesChangedEventType.Drop,
408412
event: dropEvent.dropData.event,
409413
newStart: segment.date
410414
});
@@ -469,7 +473,12 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
469473
newEnd = this.dateAdapter.addMinutes(newEnd, minutesMoved);
470474
}
471475

472-
this.eventTimesChanged.emit({ newStart, newEnd, event: dayEvent.event });
476+
this.eventTimesChanged.emit({
477+
newStart,
478+
newEnd,
479+
event: dayEvent.event,
480+
type: CalendarEventTimesChangedEventType.Resize
481+
});
473482
this.currentResizes.delete(dayEvent);
474483
}
475484

@@ -502,7 +511,12 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
502511
if (dayEvent.event.end) {
503512
newEnd = this.dateAdapter.addMinutes(dayEvent.event.end, minutesMoved);
504513
}
505-
this.eventTimesChanged.emit({ newStart, newEnd, event: dayEvent.event });
514+
this.eventTimesChanged.emit({
515+
newStart,
516+
newEnd,
517+
event: dayEvent.event,
518+
type: CalendarEventTimesChangedEventType.Drag
519+
});
506520
}
507521
}
508522

‎src/modules/month/calendar-month-view.component.ts

+11-2
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@ import {
1919
ViewPeriod
2020
} from 'calendar-utils';
2121
import { Subject, Subscription } from 'rxjs';
22-
import { CalendarEventTimesChangedEvent } from '../common/calendar-event-times-changed-event.interface';
22+
import {
23+
CalendarEventTimesChangedEvent,
24+
CalendarEventTimesChangedEventType
25+
} from '../common/calendar-event-times-changed-event.interface';
2326
import { CalendarUtils } from '../common/calendar-utils.provider';
2427
import { validateEvents, trackByIndex } from '../common/util';
2528
import { DateAdapter } from '../../date-adapters/date-adapter';
@@ -338,7 +341,13 @@ export class CalendarMonthViewComponent
338341
);
339342
newEnd = this.dateAdapter.addSeconds(event.end, secondsDiff);
340343
}
341-
this.eventTimesChanged.emit({ event, newStart, newEnd, day });
344+
this.eventTimesChanged.emit({
345+
event,
346+
newStart,
347+
newEnd,
348+
day,
349+
type: CalendarEventTimesChangedEventType.Drop
350+
});
342351
}
343352

344353
private refreshHeader(): void {

‎src/modules/week/calendar-week-view.component.ts

+38-7
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,10 @@ import {
2222
import { ResizeEvent } from 'angular-resizable-element';
2323
import { CalendarDragHelper } from '../common/calendar-drag-helper.provider';
2424
import { CalendarResizeHelper } from '../common/calendar-resize-helper.provider';
25-
import { CalendarEventTimesChangedEvent } from '../common/calendar-event-times-changed-event.interface';
25+
import {
26+
CalendarEventTimesChangedEvent,
27+
CalendarEventTimesChangedEventType
28+
} from '../common/calendar-event-times-changed-event.interface';
2629
import { CalendarUtils } from '../common/calendar-utils.provider';
2730
import { validateEvents, trackByIndex, roundToNearest } from '../common/util';
2831
import { DateAdapter } from '../../date-adapters/date-adapter';
@@ -59,13 +62,20 @@ export interface CalendarWeekViewBeforeRenderEvent {
5962
[locale]="locale"
6063
[customTemplate]="headerTemplate"
6164
(dayHeaderClicked)="dayHeaderClicked.emit($event)"
62-
(eventDropped)="eventTimesChanged.emit($event)">
65+
(eventDropped)="eventTimesChanged.emit({
66+
event: $event.event,
67+
newStart: $event.newStart,
68+
type: CalendarEventTimesChangedEventType.Drop
69+
})">
6370
</mwl-calendar-week-view-header>
6471
<div
6572
#weekEventsContainer
6673
mwlDroppable
6774
(drop)="eventDroppedWithinContainer = true">
68-
<div *ngFor="let eventRow of view.eventRows; trackBy:trackByIndex" #eventRowContainer class="cal-events-row">
75+
<div
76+
*ngFor="let eventRow of view.eventRows; trackBy:trackByIndex"
77+
#eventRowContainer
78+
class="cal-events-row">
6979
<div
7080
*ngFor="let weekEvent of eventRow.row; trackBy:trackByEventId"
7181
#event
@@ -77,7 +87,10 @@ export interface CalendarWeekViewBeforeRenderEvent {
7787
[style.width]="((100 / days.length) * weekEvent.span) + '%'"
7888
[style.marginLeft]="((100 / days.length) * weekEvent.offset) + '%'"
7989
mwlResizable
80-
[resizeEdges]="{left: weekEvent.event?.resizable?.beforeStart, right: weekEvent.event?.resizable?.afterEnd}"
90+
[resizeEdges]="{
91+
left: weekEvent.event?.resizable?.beforeStart,
92+
right: weekEvent.event?.resizable?.afterEnd
93+
}"
8194
[resizeSnapGrid]="{left: dayColumnWidth, right: dayColumnWidth}"
8295
[validateResize]="validateResize"
8396
(resizeStart)="resizeStarted(weekEventsContainer, weekEvent, $event)"
@@ -86,7 +99,10 @@ export interface CalendarWeekViewBeforeRenderEvent {
8699
mwlDraggable
87100
dragActiveClass="cal-drag-active"
88101
[dropData]="{event: weekEvent.event}"
89-
[dragAxis]="{x: weekEvent.event.draggable && currentResizes.size === 0, y: !snapDraggedEvents && weekEvent.event.draggable && currentResizes.size === 0}"
102+
[dragAxis]="{
103+
x: weekEvent.event.draggable && currentResizes.size === 0,
104+
y: !snapDraggedEvents && weekEvent.event.draggable && currentResizes.size === 0
105+
}"
90106
[dragSnapGrid]="snapDraggedEvents ? {x: dayColumnWidth} : {}"
91107
[validateDrag]="snapDraggedEvents ? validateDrag : false"
92108
(dragPointerDown)="dragStarted(weekEventsContainer, event)"
@@ -255,6 +271,11 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
255271
*/
256272
dayColumnWidth: number;
257273

274+
/**
275+
* @hidden
276+
*/
277+
CalendarEventTimesChangedEventType = CalendarEventTimesChangedEventType;
278+
258279
/**
259280
* @hidden
260281
*/
@@ -388,7 +409,12 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
388409
newEnd = this.dateAdapter.addDays(newEnd, daysDiff);
389410
}
390411

391-
this.eventTimesChanged.emit({ newStart, newEnd, event: weekEvent.event });
412+
this.eventTimesChanged.emit({
413+
newStart,
414+
newEnd,
415+
event: weekEvent.event,
416+
type: CalendarEventTimesChangedEventType.Resize
417+
});
392418
this.currentResizes.delete(weekEvent);
393419
}
394420

@@ -433,7 +459,12 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
433459
newEnd = this.dateAdapter.addDays(weekEvent.event.end, daysDragged);
434460
}
435461

436-
this.eventTimesChanged.emit({ newStart, newEnd, event: weekEvent.event });
462+
this.eventTimesChanged.emit({
463+
newStart,
464+
newEnd,
465+
event: weekEvent.event,
466+
type: CalendarEventTimesChangedEventType.Drag
467+
});
437468
}
438469
}
439470

‎test/calendar-day-view.component.spec.ts

+11
Original file line numberDiff line numberDiff line change
@@ -420,6 +420,7 @@ describe('CalendarDayViewComponent component', () => {
420420
fixture.detectChanges();
421421
fixture.destroy();
422422
expect(resizeEvent).to.deep.equal({
423+
type: 'resize',
423424
event: fixture.componentInstance.events[0],
424425
newStart: moment('2016-06-27')
425426
.add(4, 'hours')
@@ -481,6 +482,7 @@ describe('CalendarDayViewComponent component', () => {
481482
fixture.detectChanges();
482483
fixture.destroy();
483484
expect(resizeEvent).to.deep.equal({
485+
type: 'resize',
484486
event: fixture.componentInstance.events[0],
485487
newStart: moment('2016-06-27')
486488
.add(4, 'hours')
@@ -539,6 +541,7 @@ describe('CalendarDayViewComponent component', () => {
539541
fixture.detectChanges();
540542
fixture.destroy();
541543
expect(resizeEvent).to.deep.equal({
544+
type: 'resize',
542545
event: fixture.componentInstance.events[0],
543546
newStart: moment('2016-06-27')
544547
.add(4, 'hours')
@@ -597,6 +600,7 @@ describe('CalendarDayViewComponent component', () => {
597600
fixture.detectChanges();
598601
fixture.destroy();
599602
expect(resizeEvent).to.deep.equal({
603+
type: 'resize',
600604
event: fixture.componentInstance.events[0],
601605
newStart: moment('2016-06-27')
602606
.add(4, 'hours')
@@ -659,6 +663,7 @@ describe('CalendarDayViewComponent component', () => {
659663
fixture.detectChanges();
660664
fixture.destroy();
661665
expect(resizeEvent).to.deep.equal({
666+
type: 'resize',
662667
event: fixture.componentInstance.events[0],
663668
newStart: moment('2016-06-27')
664669
.add(4, 'hours')
@@ -798,6 +803,7 @@ describe('CalendarDayViewComponent component', () => {
798803
fixture.detectChanges();
799804
fixture.destroy();
800805
expect(eventDropped.getCall(0).args[0]).to.deep.equal({
806+
type: 'drag',
801807
event: fixture.componentInstance.events[0],
802808
newStart: moment('2016-06-27')
803809
.add(4, 'hours')
@@ -1000,6 +1006,7 @@ describe('CalendarDayViewComponent component', () => {
10001006
fixture.detectChanges();
10011007
fixture.destroy();
10021008
expect(eventDropped.getCall(0).args[0]).to.deep.equal({
1009+
type: 'drag',
10031010
event: fixture.componentInstance.events[0],
10041011
newStart: moment('2016-06-27')
10051012
.add(4, 'hours')
@@ -1114,6 +1121,7 @@ describe('CalendarDayViewComponent component', () => {
11141121
fixture.destroy();
11151122
externalEventFixture.destroy();
11161123
expect(eventDropped).to.have.been.calledWith({
1124+
type: 'drop',
11171125
event: externalEventFixture.componentInstance.event,
11181126
newStart: moment('2016-06-27')
11191127
.startOf('day')
@@ -1178,6 +1186,7 @@ describe('CalendarDayViewComponent component', () => {
11781186
fixture.detectChanges();
11791187
fixture.destroy();
11801188
expect(dragEvent).to.deep.equal({
1189+
type: 'drag',
11811190
event: fixture.componentInstance.events[0],
11821191
newStart: moment('2016-06-27')
11831192
.add(4, 'hours')
@@ -1259,6 +1268,7 @@ describe('CalendarDayViewComponent component', () => {
12591268
fixture.detectChanges();
12601269
fixture.destroy();
12611270
expect(resizeEvents[0]).to.deep.equal({
1271+
type: 'resize',
12621272
event: fixture.componentInstance.events[0],
12631273
newStart: moment('2016-06-27')
12641274
.add(4, 'hours')
@@ -1269,6 +1279,7 @@ describe('CalendarDayViewComponent component', () => {
12691279
.toDate()
12701280
});
12711281
expect(resizeEvents[1]).to.deep.equal({
1282+
type: 'resize',
12721283
event: fixture.componentInstance.events[1],
12731284
newStart: moment('2016-06-27')
12741285
.add(6, 'hours')

‎test/calendar-month-view.component.spec.ts

+2
Original file line numberDiff line numberDiff line change
@@ -599,6 +599,7 @@ describe('calendarMonthView component', () => {
599599
fixture.detectChanges();
600600
expect(cells[10].classList.contains('cal-drag-over')).to.equal(false);
601601
fixture.destroy();
602+
expect(dragEvent.type).to.equal('drop');
602603
expect(dragEvent.event).to.equal(fixture.componentInstance.events[0]);
603604
expect(dragEvent.newStart).to.deep.equal(new Date(2016, 11, 7, 10, 39, 14));
604605
expect(dragEvent.newEnd).to.deep.equal(new Date(2016, 11, 7, 15, 11, 5));
@@ -654,6 +655,7 @@ describe('calendarMonthView component', () => {
654655
});
655656
fixture.detectChanges();
656657
fixture.destroy();
658+
expect(dragEvent.type).to.equal('drop');
657659
expect(dragEvent.event).to.equal(fixture.componentInstance.events[0]);
658660
expect(dragEvent.newStart).to.deep.equal(new Date('2017-01-31'));
659661
expect(dragEvent.newEnd).to.deep.equal(undefined);

‎test/calendar-week-view.component.spec.ts

+8
Original file line numberDiff line numberDiff line change
@@ -408,6 +408,7 @@ describe('calendarWeekView component', () => {
408408
fixture.detectChanges();
409409
fixture.destroy();
410410
expect(resizeEvent).to.deep.equal({
411+
type: 'resize',
411412
event: fixture.componentInstance.events[0],
412413
newStart: moment('2016-06-27')
413414
.add(4, 'hours')
@@ -474,6 +475,7 @@ describe('calendarWeekView component', () => {
474475
fixture.detectChanges();
475476
fixture.destroy();
476477
expect(resizeEvent).to.deep.equal({
478+
type: 'resize',
477479
event: fixture.componentInstance.events[0],
478480
newStart: moment('2016-06-27')
479481
.add(4, 'hours')
@@ -537,6 +539,7 @@ describe('calendarWeekView component', () => {
537539
fixture.detectChanges();
538540
fixture.destroy();
539541
expect(resizeEvent).to.deep.equal({
542+
type: 'resize',
540543
event: fixture.componentInstance.events[0],
541544
newStart: moment('2016-06-27')
542545
.add(4, 'hours')
@@ -628,6 +631,7 @@ describe('calendarWeekView component', () => {
628631
fixture.detectChanges();
629632
fixture.destroy();
630633
expect(resizeEvents[0]).to.deep.equal({
634+
type: 'resize',
631635
event: fixture.componentInstance.events[0],
632636
newStart: moment('2016-06-27')
633637
.add(4, 'hours')
@@ -638,6 +642,7 @@ describe('calendarWeekView component', () => {
638642
.toDate()
639643
});
640644
expect(resizeEvents[1]).to.deep.equal({
645+
type: 'resize',
641646
event: fixture.componentInstance.events[1],
642647
newStart: moment('2016-06-28')
643648
.add(1, 'day')
@@ -703,6 +708,7 @@ describe('calendarWeekView component', () => {
703708
fixture.detectChanges();
704709
fixture.destroy();
705710
expect(eventDropped.getCall(0).args[0]).to.deep.equal({
711+
type: 'drag',
706712
event: fixture.componentInstance.events[0],
707713
newStart: moment('2016-12-07')
708714
.add(4, 'hours')
@@ -827,6 +833,7 @@ describe('calendarWeekView component', () => {
827833
fixture.detectChanges();
828834
fixture.destroy();
829835
expect(eventDropped.getCall(0).args[0]).to.deep.equal({
836+
type: 'drag',
830837
event: fixture.componentInstance.events[0],
831838
newStart: moment('2016-12-07')
832839
.add(4, 'hours')
@@ -1000,6 +1007,7 @@ describe('calendarWeekView component', () => {
10001007
fixture.destroy();
10011008
externalEventFixture.destroy();
10021009
expect(eventDropped).to.have.been.calledWith({
1010+
type: 'drop',
10031011
event: externalEventFixture.componentInstance.event,
10041012
newStart: moment('2016-06-27')
10051013
.startOf('week')

0 commit comments

Comments
 (0)