feat(calendar): multi/range selection with shift click (#12207)

* feat(calendar): multi/range selection with shift click

* test(calendar): should select/deselect multiple dates

* chore(*): update CHANGELOG with new feature

* fix(calendar): address comments

* fix(calendar): deselect multiple dates in multi view

* fix(calendar): address comments

* test(calendar-multi-view): should select/deselect multiple dates in multi-view

* fix(calendar): apply requested changes

Author: RivaIvanova

CHANGELOG.md

@@ -26,6 +26,12 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - When editing a row, `rowChangesCount` and `hiddenColumnsCount`would be displayed.
 
+- `IgxCalendar`
+
+    Added support for shift key + mouse click interactions.
+    - `multi` mode - select/deselect all dates between the last selected/deselected and the one clicked while holding `Shift`.
+    - `range` mode - extend/shorten the range from the last selected date to the one clicked while holding `Shift`.
+
 ## 14.2.0
 
 ### New Features

projects/igniteui-angular/src/lib/calendar/calendar-base.ts

@@ -1,4 +1,4 @@
-import { Input, Output, EventEmitter, Directive, Inject, LOCALE_ID } from '@angular/core';
+import { Input, Output, EventEmitter, Directive, Inject, LOCALE_ID, HostListener } from '@angular/core';
 import { WEEKDAYS, Calendar, isDateInRanges, IFormattingOptions, IFormattingViews } from './calendar';
 import { ControlValueAccessor } from '@angular/forms';
 import { DateRangeDescriptor } from '../core/dates';
@@ -115,6 +115,16 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      */
     public selectedDates;
 
+    /**
+     * @hidden
+     */
+    public shiftKey: boolean = false;
+
+     /**
+     * @hidden
+     */
+    public lastSelectedDate: Date;
+
     /**
      * @hidden
      */
@@ -154,6 +164,11 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      */
     protected _onChangeCallback: (_: Date) => void = noop;
 
+    /**
+      * @hidden
+      */
+    protected _deselectDate: boolean;
+
     /**
      * @hidden
      */
@@ -174,6 +189,16 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      */
     private _viewDate: Date;
 
+    /**
+     * @hidden
+     */
+    private _startDate: Date;
+
+    /**
+     * @hidden
+     */
+    private _endDate: Date;
+
     /**
      * @hidden
      */
@@ -462,16 +487,45 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
     }
 
     /**
-     * Performs deselection of a single value, when selection is multi
+     * Multi/Range selection with shift key
+     *
+     * @hidden
+     * @internal
+     */
+    @HostListener('pointerdown', ['$event'])
+    public onPointerdown(event: MouseEvent) {
+        this.shiftKey = event.button === 0 && event.shiftKey;
+    }
+
+    /**
+     * Performs deselection of date/dates, when selection is multi
      * Usually performed by the selectMultiple method, but leads to bug when multiple months are in view
      *
      * @hidden
      */
     public deselectMultipleInMonth(value: Date) {
-        const valueDateOnly = this.getDateOnly(value);
-        this.selectedDates = this.selectedDates.filter(
-            (date: Date) => date.getTime() !== valueDateOnly.getTime()
-        );
+        // deselect multiple dates from last clicked to shift clicked date (excluding)
+        if (this.shiftKey) {
+            let start: Date;
+            let end: Date;
+
+            [start, end] = this.lastSelectedDate.getTime() < value.getTime()
+                ? [this.lastSelectedDate, value]
+                : [value, this.lastSelectedDate];
+
+            this.selectedDates = this.selectedDates.filter(
+                (date: Date) => date.getTime() < start.getTime() || date.getTime() > end.getTime()
+            );
+
+            this.selectedDates.push(value);
+
+        } else {
+            // deselect a single date
+            const valueDateOnly = this.getDateOnly(value);
+            this.selectedDates = this.selectedDates.filter(
+                (date: Date) => date.getTime() !== valueDateOnly.getTime()
+            );
+        }
     }
 
     /**
@@ -641,20 +695,55 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
 
             this.selectedDates = Array.from(new Set([...newDates, ...selDates])).map(v => new Date(v));
         } else {
-            const valueDateOnly = this.getDateOnly(value);
-            const newSelection = [];
-            if (this.selectedDates.every((date: Date) => date.getTime() !== valueDateOnly.getTime())) {
-                newSelection.push(valueDateOnly);
+            let newSelection = [];
+
+            if (this.shiftKey && this.lastSelectedDate) {
+
+                [this._startDate, this._endDate] = this.lastSelectedDate.getTime() < value.getTime()
+                    ? [this.lastSelectedDate, value]
+                    : [value, this.lastSelectedDate];
+
+                const unselectedDates = [this._startDate, ...this.generateDateRange(this._startDate, this._endDate)]
+                    .filter(date => !this.isDateDisabled(date)
+                        && this.selectedDates.every((d: Date) => d.getTime() !== date.getTime())
+                    );
+
+                // select all dates from last selected to shift clicked date
+                if (this.selectedDates.some((date: Date) => date.getTime() === this.lastSelectedDate.getTime())
+                    && unselectedDates.length) {
+
+                    newSelection = unselectedDates;
+                } else {
+                    // delesect all dates from last clicked to shift clicked date (excluding)
+                    this.selectedDates = this.selectedDates.filter((date: Date) =>
+                        date.getTime() < this._startDate.getTime() || date.getTime() > this._endDate.getTime()
+                    );
+
+                    this.selectedDates.push(value);
+                    this._deselectDate = true;
+                }
+
+                this._startDate = this._endDate = undefined;
+
+            } else if (this.selectedDates.every((date: Date) => date.getTime() !== value.getTime())) {
+                newSelection.push(value);
+
             } else {
                 this.selectedDates = this.selectedDates.filter(
-                    (date: Date) => date.getTime() !== valueDateOnly.getTime()
+                    (date: Date) => date.getTime() !== value.getTime()
                 );
+
+                this._deselectDate = true;
             }
 
             if (newSelection.length > 0) {
                 this.selectedDates = this.selectedDates.concat(newSelection);
+                this._deselectDate = false;
             }
+
+            this.lastSelectedDate = value;
         }
+
         this.selectedDates = this.selectedDates.filter(d => !this.isDateDisabled(d));
         this.selectedDates.sort((a: Date, b: Date) => a.valueOf() - b.valueOf());
         this._onChangeCallback(this.selectedDates);
@@ -664,19 +753,46 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      * @hidden
      */
     private selectRange(value: Date | Date[], excludeDisabledDates: boolean = false) {
-        let start: Date;
-        let end: Date;
-
         if (Array.isArray(value)) {
-            // this.rangeStarted = false;
             value.sort((a: Date, b: Date) => a.valueOf() - b.valueOf());
-            start = this.getDateOnly(value[0]);
-            end = this.getDateOnly(value[value.length - 1]);
-            this.selectedDates = [start, ...this.generateDateRange(start, end)];
+            this._startDate = this.getDateOnly(value[0]);
+            this._endDate = this.getDateOnly(value[value.length - 1]);
         } else {
-            if (!this.rangeStarted) {
+
+            if (this.shiftKey && this.lastSelectedDate) {
+
+                if (this.lastSelectedDate.getTime() === value.getTime()) {
+                    this.selectedDates = this.selectedDates.length === 1 ? [] : [value];
+                    this.rangeStarted = !!this.selectedDates.length;
+                    this._onChangeCallback(this.selectedDates);
+                    return;
+                }
+
+                // shortens the range when selecting a date inside of it
+                if (this.selectedDates.some((date: Date) => date.getTime() === value.getTime())) {
+
+                    this.lastSelectedDate.getTime() < value.getTime()
+                        ? this._startDate = value
+                        : this._endDate = value;
+
+                } else {
+                    // extends the range when selecting a date outside of it
+                    // allows selection from last deselected to current selected date
+                    if (this.lastSelectedDate.getTime() < value.getTime()) {
+                        this._startDate = this._startDate ?? this.lastSelectedDate;
+                        this._endDate = value;
+                    } else {
+                        this._startDate = value;
+                        this._endDate = this._endDate ?? this.lastSelectedDate;
+                    }
+                }
+
+                this.rangeStarted = false;
+
+            } else if (!this.rangeStarted) {
                 this.rangeStarted = true;
                 this.selectedDates = [value];
+                this._startDate = this._endDate = undefined;
             } else {
                 this.rangeStarted = false;
 
@@ -686,13 +802,16 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
                     return;
                 }
 
-                this.selectedDates.push(value);
-                this.selectedDates.sort((a: Date, b: Date) => a.valueOf() - b.valueOf());
-
-                start = this.selectedDates.shift();
-                end = this.selectedDates.pop();
-                this.selectedDates = [start, ...this.generateDateRange(start, end)];
+                [this._startDate, this._endDate] = this.lastSelectedDate.getTime() < value.getTime()
+                    ? [this.lastSelectedDate, value]
+                    : [value, this.lastSelectedDate];
             }
+
+            this.lastSelectedDate = value;
+        }
+
+        if (this._startDate && this._endDate) {
+            this.selectedDates = [this._startDate, ...this.generateDateRange(this._startDate, this._endDate)];
         }
 
         if (excludeDisabledDates) {

projects/igniteui-angular/src/lib/calendar/calendar-multi-view.component.spec.ts

@@ -1047,6 +1047,28 @@ describe('Multi-View Calendar - ', () => {
             expect(HelperTestFunctions.getMonthViewSelectedDates(fixture, 1).length).toBe(0);
         });
 
+        it('Multi Selection - Select/Deselect dates with Shift key from one view should also select/deselect dates in the other', () => {
+            calendar.selection = 'multi';
+            fixture.detectChanges();
+
+            const octoberDates = HelperTestFunctions.getMonthViewDates(fixture, 1);
+            const october27th = octoberDates[26];
+            const october31st = octoberDates[30];
+
+            UIInteractions.simulateClickAndSelectEvent(october27th);
+            UIInteractions.simulateClickAndSelectEvent(october31st, true);
+            fixture.detectChanges();
+
+            expect(HelperTestFunctions.getMonthViewSelectedDates(fixture, 1).length).toBe(5);
+            expect(HelperTestFunctions.getMonthViewSelectedDates(fixture, 2).length).toBe(5);
+
+            UIInteractions.simulateClickAndSelectEvent(october27th, true);
+            fixture.detectChanges();
+
+            expect(HelperTestFunctions.getMonthViewSelectedDates(fixture, 1).length).toBe(1);
+            expect(HelperTestFunctions.getMonthViewSelectedDates(fixture, 2).length).toBe(1);
+        });
+
         it('Multi/Single Selection - select multiple dates should not create range', () => {
             expect(calendar.hideOutsideDays).toBe(false);
             calendar.selection = 'multi';