Merge pull request #6037 from IgniteUI/calendar-selection-6015-master

fix(calendar): Fix selection with ngModel - master

Author: rkaraivanov

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

@@ -421,6 +421,7 @@ export class IgxCalendarBase implements ControlValueAccessor {
                 this.selectedDates = this.selectedDates.concat(newSelection);
             }
         }
+        this.selectedDates = this.selectedDates.filter(d => !this.isDateDisabled(d));
         this.selectedDates.sort((a: Date, b: Date) => a.valueOf() - b.valueOf());
         this._onChangeCallback(this.selectedDates);
     }
@@ -500,6 +501,18 @@ export class IgxCalendarBase implements ControlValueAccessor {
         }
     }
 
+    /**
+     * Performs deselection of a single value, 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()
+        );
+    }
+
     /**
      * Performs a range deselection.
      * @hidden
@@ -561,7 +574,7 @@ export class IgxCalendarBase implements ControlValueAccessor {
      * @hidden
      */
     public writeValue(value: Date | Date[]) {
-        this.selectedDates = value;
+        this.selectDate(value as Date);
     }
 
     /**
@@ -586,7 +599,7 @@ export class IgxCalendarBase implements ControlValueAccessor {
 
         switch (this.selection) {
             case CalendarSelection.SINGLE:
-                if (isDate(value)) {
+                if (isDate(value) && !this.isDateDisabled(value as Date)) {
                     this.selectSingle(value as Date);
                 }
                 break;
@@ -634,10 +647,7 @@ export class IgxCalendarBase implements ControlValueAccessor {
         switch (this.selection) {
             case CalendarSelection.SINGLE:
             case CalendarSelection.MULTI:
-                if (!this.isDateDisabled(value)) {
-                    this.selectDate(value);
-                }
-
+                this.selectDate(value);
                 break;
             case CalendarSelection.RANGE:
                 this.selectRange(value, true);

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

@@ -16,7 +16,7 @@ describe('Multi-View Calendar - ', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            declarations: [MultiViewCalendarSampleComponent, MultiViewDatePickerSampleComponent],
+            declarations: [MultiViewCalendarSampleComponent, MultiViewDatePickerSampleComponent, MultiViewNgModelSampleComponent],
             imports: [IgxCalendarModule, IgxDatePickerModule, FormsModule, NoopAnimationsModule]
         }).compileComponents();
     }));
@@ -978,7 +978,7 @@ describe('Multi-View Calendar - ', () => {
             expect(HelperTestFunctions.getMonthViewSelectedDates(fixture, 2).length).toBe(0);
         });
 
-        it('Multi Selecion - Select/Deselect date from one view should also select/deselect the date in the another', () => {
+        it('Multi Selection - Select/Deselect date from one view should also select/deselect the date in the another', () => {
             spyOn(calendar.onSelection, 'emit');
             expect(calendar.hideOutsideDays).toBe(false);
             calendar.selection = 'multi';
@@ -1189,6 +1189,37 @@ describe('Multi-View Calendar - ', () => {
         });
     });
 
+    describe('Selection tests with ngModel - ', () => {
+        beforeEach(fakeAsync(() => {
+            fixture = TestBed.createComponent(MultiViewNgModelSampleComponent);
+            fixture.detectChanges();
+            calendar = fixture.componentInstance.calendar;
+            calendar.viewDate = new Date(2019, 8, 1); // 1st September 2019
+            tick();
+            fixture.detectChanges();
+        }));
+
+        it('Should be able to select/deselect dates in multi mode', () => {
+            const secondMonthDates = HelperTestFunctions.getMonthViewDates(fixture, 1);
+            UIInteractions.simulateClickEvent(secondMonthDates[16]);
+
+            fixture.detectChanges();
+            expect(calendar.value[0].getTime()).toEqual(new Date(2019, 9, 10).getTime());
+            expect(calendar.daysView.value[0].getTime()).toEqual(new Date(2019, 9, 10).getTime());
+
+            UIInteractions.simulateClickEvent(secondMonthDates[17]);
+
+            fixture.detectChanges();
+            expect(calendar.value[0].getTime()).toEqual(new Date(2019, 9, 10).getTime());
+            expect(calendar.value[1].getTime()).toEqual(new Date(2019, 9, 17).getTime());
+            expect(calendar.value[2].getTime()).toEqual(new Date(2019, 9, 18).getTime());
+
+            expect(calendar.daysView.value[0].getTime()).toEqual(new Date(2019, 9, 10).getTime());
+            expect(calendar.daysView.value[1].getTime()).toEqual(new Date(2019, 9, 17).getTime());
+            expect(calendar.daysView.value[2].getTime()).toEqual(new Date(2019, 9, 18).getTime());
+        });
+    });
+
     describe('DatePicker/Calendar Integration Tests - ', () => {
         let datePicker;
         beforeEach(fakeAsync(() => {
@@ -1416,3 +1447,14 @@ export class MultiViewDatePickerSampleComponent {
     public date = new Date('2019-09-15');
     public monthViews = 3;
 }
+
+@Component({
+    template: `
+        <igx-calendar [monthsViewNumber]="monthViews" selection="multi" [(ngModel)]="model"></igx-calendar>
+    `
+})
+export class MultiViewNgModelSampleComponent {
+    @ViewChild(IgxCalendarComponent, { static: true }) public calendar: IgxCalendarComponent;
+    public monthViews = 3;
+    public model = new Date(2019, 9, 10);
+}

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

@@ -1273,6 +1273,26 @@ describe('IgxCalendar', () => {
         );
     });
 
+    it('Should not select date from model, if it is part of disabled dates', async () => {
+        const fixture = TestBed.createComponent(IgxCalendarDisabledSpecialDatesComponent);
+        const calendar = fixture.componentInstance.calendar;
+        fixture.detectChanges();
+        await (500);
+
+        expect(calendar.value).toBeFalsy();
+    });
+
+    it('Should not select date from model in range selection, if model passes null', async () => {
+        const fixture = TestBed.createComponent(IgxCalendarDisabledSpecialDatesComponent);
+        const calendar = fixture.componentInstance.calendar;
+        calendar.selection = 'range';
+        fixture.componentInstance.model = null;
+        fixture.detectChanges();
+        await (500);
+
+        expect((calendar.value as Date[]).length).toEqual(0);
+    });
+
     describe('Select and deselect dates', () => {
         configureTestSuite();
         let fixture;
@@ -2046,7 +2066,7 @@ export class IgxCalendaRangeComponent {
     `
 })
 export class IgxCalendarDisabledSpecialDatesComponent {
-    public model: Date | Date[] = new Date(2017, 5, 13);
+    public model: Date | Date[] = new Date(2017, 5, 23);
     public viewDate = new Date(2017, 5, 13);
     public specialDates = [{type: DateRangeType.Between, dateRange: [new Date(2017, 5, 1), new Date(2017, 5, 6)]}];
     public disabledDates = [{type: DateRangeType.Between, dateRange: [new Date(2017, 5, 23), new Date(2017, 5, 29)]}];

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

@@ -458,7 +458,7 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
 
         // generally the scrolling is built on the calendar component
         // and all start/stop scrolling methods are called on the calendar
-        // if we change below lines to call stopMonthScroll$ on the calendar instead of on the veiws,
+        // if we change below lines to call stopMonthScroll$ on the calendar instead of on the views,
         // strange bug is introduced --> after changing number of months, continuous scrolling on mouse click does not happen
         this.daysView.stopMonthScroll$.next(true);
         this.daysView.stopMonthScroll$.complete();
@@ -610,26 +610,10 @@ export class IgxCalendarComponent extends IgxMonthPickerBase implements AfterVie
      */
     private deselectDateInMonthViews(value: Date) {
         this.monthViews.forEach(m => {
-            this.deselectMultipleInMonth(m, value);
+            m.deselectMultipleInMonth(value);
          });
     }
 
-    /**
-     * @hidden
-     */
-    private deselectMultipleInMonth(monthView: IgxDaysViewComponent, value: Date) {
-        const mDates = monthView.selectedDates.map(v => this.getDateOnly(v).getTime());
-        const selDates = this.selectedDates.map(v => this.getDateOnly(v).getTime());
-
-        if (JSON.stringify(mDates) === JSON.stringify(selDates)) {
-            return;
-        }
-        const valueDateOnly = this.getDateOnly(value);
-        monthView.selectedDates = monthView.selectedDates.filter(
-            (date: Date) => date.getTime() !== valueDateOnly.getTime()
-        );
-    }
-
     /**
      * @hidden
      */