added type MatDatepickerInputEvent for parameter $event

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html

@@ -1,100 +1,113 @@
-<label class="adf-property-label"
-     [attr.data-automation-id]="'card-dateitem-label-' + property.key"
-     *ngIf="showProperty() || isEditable()"
-     [attr.for]="'card-view-dateitem-' + property.key">
+<label
+    class="adf-property-label"
+    [attr.data-automation-id]="'card-dateitem-label-' + property.key"
+    *ngIf="showProperty() || isEditable()"
+    [attr.for]="'card-view-dateitem-' + property.key">
     {{ property.label | translate }}
 </label>
 <div class="adf-property-value adf-property-value-padding-top">
-    <span *ngIf="!isEditable() && !property.multivalued"
-          [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
-        <span *ngIf="showProperty()"
-              [attr.data-automation-id]="'card-dateitem-' + property.key"
-              (dblclick)="copyToClipboard(property.displayValue)"
-              matTooltipShowDelay="1000"
-              [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">{{ property.displayValue}}</span>
+    <span
+        *ngIf="!isEditable() && !property.multivalued"
+        [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
+        <span
+            *ngIf="showProperty()"
+            [attr.data-automation-id]="'card-dateitem-' + property.key"
+            (dblclick)="copyToClipboard(property.displayValue)"
+            matTooltipShowDelay="1000"
+            [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">
+            {{ property.displayValue}}
+        </span>
     </span>
-    <div *ngIf="isEditable() && !property.multivalued"
-         class="adf-dateitem-editable">
+    <div *ngIf="isEditable() && !property.multivalued" class="adf-dateitem-editable">
         <div class="adf-dateitem-editable-controls">
-            <span class="adf-datepicker-toggle"
-                  [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
-                  (click)="showDatePicker()">
-                <span *ngIf="showProperty(); else elseEmptyValueBlock"
-                      [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
-                    {{ property.displayValue }}</span>
+            <span
+                class="adf-datepicker-toggle"
+                [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
+                (click)="showDatePicker()">
+                <span
+                    *ngIf="showProperty(); else elseEmptyValueBlock"
+                    [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
+                    {{ property.displayValue }}
+                </span>
             </span>
 
-            <mat-icon *ngIf="showClearAction()"
-                      class="adf-date-reset-icon"
-                      (click)="onDateClear()"
-                      [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
-                      [attr.data-automation-id]="'datepicker-date-clear-' + property.key">
+            <mat-icon
+                *ngIf="showClearAction()"
+                class="adf-date-reset-icon"
+                (click)="onDateClear()"
+                [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
+                [attr.data-automation-id]="'datepicker-date-clear-' + property.key">
                 clear
             </mat-icon>
 
-            <mat-datetimepicker-toggle [attr.tabindex]="-1"
-                                       [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
-                                       [attr.data-automation-id]="'datepickertoggle-' + property.key"
-                                       [for]="datetimePicker">
-            </mat-datetimepicker-toggle>
+            <mat-datepicker-toggle
+                [attr.tabindex]="-1"
+                [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+                [attr.data-automation-id]="'datepickertoggle-' + property.key"
+                [for]="datePicker">
+            </mat-datepicker-toggle>
         </div>
 
-        <input class="adf-invisible-date-input"
-               [attr.tabIndex]="-1"
-               [matDatetimepicker]="datetimePicker"
-               [value]="valueDate"
-               (dateChange)="onDateChanged($event)"
-               [attr.id]="'card-view-dateitem-' + property.key"
-        >
+        <input
+            class="adf-invisible-date-input"
+            [attr.tabIndex]="-1"
+            [matDatepicker]="datePicker"
+            [value]="valueDate"
+            (dateChange)="onDateChanged($event)"
+            [attr.id]="'card-view-dateitem-' + property.key">
 
-        <mat-datetimepicker #datetimePicker
-                            [type]="$any(property).type"
-                            [timeInterval]="5"
-                            [attr.data-automation-id]="'datepicker-' + property.key"
-                            [startAt]="valueDate">
-        </mat-datetimepicker>
+        <mat-datepicker
+            #datePicker
+            [attr.data-automation-id]="'datepicker-' + property.key"
+            [startAt]="valueDate">
+        </mat-datepicker>
     </div>
     <ng-template #elseEmptyValueBlock>
         {{ property.default | translate }}
     </ng-template>
 
-    <div *ngIf="property.multivalued"
-         class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
-        <mat-chip-list #chipList
-                       class="adf-textitem-chip-list">
-            <mat-chip *ngFor="let propertyValue of property.displayValue; let idx = index"
-                      [removable]="isEditable()"
-                      (removed)="removeValueFromList(idx)">
+    <div
+        *ngIf="property.multivalued"
+        class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
+        <mat-chip-list #chipList class="adf-textitem-chip-list">
+            <mat-chip
+                *ngFor="let propertyValue of property.displayValue; let idx = index"
+                [removable]="isEditable()"
+                (removed)="removeValueFromList(idx)">
                 {{ propertyValue }}
-                <mat-icon *ngIf="isEditable()"
-                          matChipRemove>cancel</mat-icon>
+                <mat-icon
+                    *ngIf="isEditable()"
+                    matChipRemove>
+                    cancel
+                </mat-icon>
             </mat-chip>
         </mat-chip-list>
 
-        <mat-form-field *ngIf="isEditable()"
-                        class="adf-property-field adf-dateitem-editable-controls"
-                        [floatLabel]="'never'"
-                        (click)="showDatePicker()">
-            <input matInput
-                   class="adf-invisible-date-input"
-                   [attr.tabIndex]="-1"
-                   [matDatetimepicker]="datetimePicker"
-                   (dateChange)="addDateToList($event)"
-                   [attr.id]="'card-view-dateitem-' + property.key"
-            >
-            <mat-datetimepicker-toggle [attr.tabindex]="-1"
-                                       matSuffix
-                                       [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
-                                       [attr.data-automation-id]="'datepickertoggle-' + property.key"
-                                       [for]="datetimePicker">
-            </mat-datetimepicker-toggle>
+        <mat-form-field
+            *ngIf="isEditable()"
+            class="adf-property-field adf-dateitem-editable-controls"
+            [floatLabel]="'never'"
+            (click)="showDatePicker()">
+            <input
+                matInput
+                class="adf-invisible-date-input"
+                [attr.tabIndex]="-1"
+                [matDatepicker]="datePicker"
+                (dateChange)="addDateToList($event)"
+                [attr.id]="'card-view-dateitem-' + property.key">
+            <mat-datepicker-toggle
+                [attr.tabindex]="-1"
+                matSuffix
+                [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+                [attr.data-automation-id]="'datepickertoggle-' + property.key"
+                [for]="datePicker">
+            </mat-datepicker-toggle>
 
-            <mat-datetimepicker #datetimePicker
-                                [type]="$any(property).type"
-                                [timeInterval]="5"
-                                [attr.data-automation-id]="'datepicker-' + property.key"
-                                [startAt]="valueDate">
-            </mat-datetimepicker>
+            <mat-datepicker
+                #datePicker
+                [attr.data-automation-id]="'datepicker-' + property.key"
+                [startAt]="valueDate">
+            </mat-datepicker>
         </mat-form-field>
     </div>
 </div>

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts

@@ -17,15 +17,15 @@
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import moment from 'moment';
 import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
 import { CardViewDateItemComponent } from './card-view-dateitem.component';
 import { CoreTestingModule } from '../../../testing/core.testing.module';
 import { ClipboardService } from '../../../clipboard/clipboard.service';
-import { CardViewDatetimeItemModel } from '../../models/card-view-datetimeitem.model';
 import { TranslateModule } from '@ngx-translate/core';
 import { AppConfigService } from '@alfresco/adf-core';
+import { endOfDay, startOfDay } from 'date-fns';
+import { CardViewDatetimeItemModel } from '../../models/card-view-datetimeitem.model';
 
 describe('CardViewDateItemComponent', () => {
 
@@ -61,7 +61,25 @@ describe('CardViewDateItemComponent', () => {
 
     afterEach(() => fixture.destroy());
 
-    it('should pick date format from appConfigService', () => {
+    const updateDateTime = (key: string): Date => {
+        component.property.key = key;
+        component.dateFormat = 'M/d/yy, h:mm a';
+        component.property.value = new Date('Jul 10 2017 00:01:00');
+        const expectedDate = new Date('Jul 10 2018');
+        fixture.detectChanges();
+
+        const element = fixture.debugElement.nativeElement.querySelector(`span[data-automation-id="card-date-value-${key}"]`);
+        expect(element).toBeDefined();
+        expect(element.innerText).toEqual('Jul 10, 2017');
+        component.onDateChanged({ value: expectedDate });
+
+        fixture.detectChanges();
+        return expectedDate;
+    };
+
+    //we will enable this test when will change from moment to date-fns throughout the application
+    // eslint-disable-next-line ban/ban
+    xit('should pick date format from appConfigService', () => {
         expect(component.dateFormat).toEqual('shortDate');
     });
 
@@ -192,7 +210,8 @@ describe('CardViewDateItemComponent', () => {
         const itemUpdatedSpy = spyOn(cardViewUpdateService.itemUpdated$, 'next');
         component.editable = true;
         component.property.editable = true;
-        const expectedDate = moment('Jul 10 2017', 'MMM DD YYYY');
+        component.property.value = endOfDay(new Date('Jul 10 2017'));
+        const expectedDate = new Date('Jul 10 2017');
         fixture.detectChanges();
         const property = { ...component.property };
 
@@ -200,7 +219,7 @@ describe('CardViewDateItemComponent', () => {
         expect(itemUpdatedSpy).toHaveBeenCalledWith({
             target: property,
             changed: {
-                dateKey: expectedDate.toDate()
+                dateKey: endOfDay(expectedDate)
             }
         });
     });
@@ -209,13 +228,13 @@ describe('CardViewDateItemComponent', () => {
         component.editable = true;
         component.property.editable = true;
         component.property.value = null;
-        const expectedDate = moment('Jul 10 2017', 'MMM DD YY');
+        const expectedDate = new Date('Jul 10 2017');
         fixture.detectChanges();
 
         component.onDateChanged({ value: expectedDate });
 
         await fixture.whenStable();
-        expect(component.property.value).toEqual(expectedDate.toDate());
+        expect(component.property.value).toEqual(endOfDay(expectedDate));
     });
 
     it('should copy value to clipboard on double click', () => {
@@ -314,25 +333,9 @@ describe('CardViewDateItemComponent', () => {
         });
     });
 
-    it('should be possible update a date-time', async () => {
-        component.editable = true;
-        component.property.editable = true;
-        component.property.default = 'Jul 10 2017 00:01:00';
-        component.property.key = 'fake-key';
-        component.dateFormat = 'M/d/yy, h:mm a';
-        component.property.value = 'Jul 10 2017 00:01:00';
-        const expectedDate = moment('Jul 10 2018', 'MMM DD YY h:m:s');
-        fixture.detectChanges();
-
-        await fixture.whenStable();
-        fixture.detectChanges();
-        const element = fixture.debugElement.nativeElement.querySelector('span[data-automation-id="card-date-value-fake-key"]');
-        expect(element).toBeDefined();
-        expect(element.innerText).toEqual('Jul 10, 2017');
-        component.onDateChanged({ value: expectedDate });
-
-        fixture.detectChanges();
-        expect(component.property.value).toEqual(expectedDate.toDate());
+    it('should set date as end of the day when proprty is not `properties.cm:from`', async () => {
+        const expectedDate = updateDateTime('fake-key');
+        expect(component.property.value).toEqual(endOfDay(expectedDate));
     });
 
     it('should render chips for multivalue dates when chips are enabled', async () => {
@@ -372,4 +375,9 @@ describe('CardViewDateItemComponent', () => {
         expect(valueChips[1].nativeElement.innerText.trim()).toBe('Jul 11, 2017, 0:01');
         expect(valueChips[2].nativeElement.innerText.trim()).toBe('Jul 12, 2017, 0:01');
     });
+
+    it('should set date as start of the day when proprty is `properties.cm:from`', async () => {
+        const expectedDate = updateDateTime('properties.cm:from');
+        expect(component.property.value).toEqual(startOfDay(expectedDate));
+    });
 });

lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.ts

@@ -15,28 +15,24 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
-import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
-import { DatetimeAdapter, MAT_DATETIME_FORMATS, MatDatetimepickerComponent } from '@mat-datetimepicker/core';
-import { MAT_MOMENT_DATETIME_FORMATS, MomentDatetimeAdapter } from '@mat-datetimepicker/moment';
-import moment, { Moment } from 'moment';
+import { Component, Inject, Input, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { DateAdapter, MAT_DATE_FORMATS, MatDateFormats } from '@angular/material/core';
+import { DateFnsAdapter, MAT_DATE_FNS_FORMATS } from '@angular/material-date-fns-adapter';
 import { CardViewDateItemModel } from '../../models/card-view-dateitem.model';
 import { UserPreferencesService, UserPreferenceValues } from '../../../common/services/user-preferences.service';
-import { MomentDateAdapter } from '../../../common/utils/moment-date-adapter';
-import { MOMENT_DATE_FORMATS } from '../../../common/utils/moment-date-formats.model';
-import { AppConfigService } from '../../../app-config/app-config.service';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { BaseCardView } from '../base-card-view';
 import { ClipboardService } from '../../../clipboard/clipboard.service';
 import { TranslationService } from '../../../translation/translation.service';
+import { endOfDay, parse, startOfDay } from 'date-fns';
+import { MatDatepicker, MatDatepickerInputEvent } from '@angular/material/datepicker';
+import { DateFnsUtils } from '../../../common/utils/date-fns-utils';
 
 @Component({
     providers: [
-        { provide: DateAdapter, useClass: MomentDateAdapter },
-        { provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS },
-        { provide: DatetimeAdapter, useClass: MomentDatetimeAdapter },
-        { provide: MAT_DATETIME_FORMATS, useValue: MAT_MOMENT_DATETIME_FORMATS }
+        { provide: DateAdapter, useClass: DateFnsAdapter },
+        { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS }
     ],
     selector: 'adf-card-view-dateitem',
     templateUrl: './card-view-dateitem.component.html',
@@ -57,21 +53,23 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
     @Input()
     displayClearAction: boolean = true;
 
-    @ViewChild('datetimePicker')
-    public datepicker: MatDatetimepickerComponent<any>;
+    @ViewChild('datePicker')
+    public datepicker: MatDatepicker<any>;
 
-    valueDate: Moment;
+    valueDate: Date;
     dateFormat: string;
 
     private onDestroy$ = new Subject<boolean>();
 
-    constructor(private dateAdapter: DateAdapter<Moment>,
+    constructor(private dateAdapter: DateAdapter<DateFnsAdapter>,
                 private userPreferencesService: UserPreferencesService,
-                private appConfig: AppConfigService,
                 private clipboardService: ClipboardService,
-                private translateService: TranslationService) {
+                private translateService: TranslationService,
+                @Inject(MAT_DATE_FORMATS) private dateFormatConfig: MatDateFormats) {
         super();
-        this.dateFormat = this.appConfig.get('dateValues.defaultDateFormat');
+        // need to change this to app.config when will change from moment to date-fns throughout the application
+        // this.dateFormat = this.appConfig.get('dateValues.defaultDateFormat');
+        this.dateFormat = 'MMM d, y';
     }
 
     ngOnInit() {
@@ -79,14 +77,14 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
             .select(UserPreferenceValues.Locale)
             .pipe(takeUntil(this.onDestroy$))
             .subscribe(locale => {
-                this.dateAdapter.setLocale(locale);
+                this.dateAdapter.setLocale(DateFnsUtils.getLocaleFromString(locale));
                 this.property.locale = locale;
             });
 
-        (this.dateAdapter as MomentDateAdapter).overrideDisplayFormat = 'MMM DD';
+        this.dateFormatConfig.display.dateInput = this.dateFormat;
 
         if (this.property.value) {
-            this.valueDate = moment(this.property.value, this.dateFormat);
+            this.valueDate = parse(this.property.value, this.dateFormat, new Date());
         } else if (this.property.multivalued && !this.property.value) {
             this.property.value = [];
         }
@@ -113,12 +111,12 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
         this.datepicker.open();
     }
 
-    onDateChanged(newDateValue) {
+    onDateChanged(newDateValue: MatDatepickerInputEvent<any, any>) {
         if (newDateValue) {
-            const momentDate = moment(newDateValue.value, this.dateFormat, true);
-            if (momentDate.isValid()) {
-                this.valueDate = momentDate;
-                this.property.value = momentDate.toDate();
+            const date = this.getDateValue(newDateValue);
+            if (date) {
+                this.valueDate = date;
+                this.property.value = date;
                 this.update();
             }
         }
@@ -136,11 +134,11 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
         this.clipboardService.copyContentToClipboard(valueToCopy, clipboardMessage);
     }
 
-    addDateToList(newDateValue) {
+    addDateToList(newDateValue: MatDatepickerInputEvent<any, any>) {
         if (newDateValue) {
-            const momentDate = moment(newDateValue.value, this.dateFormat, true);
-            if (momentDate.isValid()) {
-                this.property.value.push(momentDate.toDate());
+            const date = this.getDateValue(newDateValue);
+            if (date) {
+                this.property.value.push(date);
                 this.update();
             }
         }
@@ -154,4 +152,8 @@ export class CardViewDateItemComponent extends BaseCardView<CardViewDateItemMode
     update() {
         this.cardViewUpdateService.update({ ...this.property } as CardViewDateItemModel, this.property.value);
     }
+
+    getDateValue(newDateValue: MatDatepickerInputEvent<any, any>): Date {
+        return this.property.key === 'properties.cm:from' ? startOfDay(newDateValue.value) : endOfDay(newDateValue.value);
+    }
 }