[ADF-4755][CardViewDate&SelectItemComponent] Provide a way to reset date and none option as default. (#4955)

* [ADF-4755] [CardViewDateItemComponent] Provide a way to reset date.

* Added clear icon to reset date to empty.
* Added Translation key to the new icon.

* * Added displayClearAction flag to toggle clear action.* Added None as default for the selectItem components.* Added displayNoneOption flag to toggle the default none option.

* * Fixed comments.

* * Added translation key for 'none'  option.

* * Updated dateItem css to the match recent changes.

* * Fixed failing unit tests* Updated TaskHeader components with the displayClearAction.

* * Updated demo shell card-view component to test the latest changes

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

@@ -13,6 +13,15 @@
                 (click)="showDatePicker()">
                 <span [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key" *ngIf="showProperty(); else elseEmptyValueBlock">{{ 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">
+                clear
+            </mat-icon>
+
             <mat-datetimepicker-toggle
                 [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                 [attr.data-automation-id]="'datepickertoggle-' + property.key"

lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss

@@ -35,6 +35,24 @@
                 &:hover mat-icon {
                     opacity: 1;
                 }
+
+                .adf-datepicker-toggle {
+                    flex: 1 0 auto;
+                }
+
+                mat-icon.adf-date-reset-icon {
+                    line-height: 10px;
+                    font-size: 16px;
+                    width: 16px;
+                    height: 16px;
+                    position: relative;
+                    top: 4px;
+                    padding-left: 8px;
+                    opacity: 0.3;
+                }
+                &:hover mat-icon.adf-date-reset-icon {
+                    opacity: 1;
+                }
             }
         }
     }

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

@@ -116,6 +116,7 @@ describe('CardViewDateItemComponent', () => {
     });
 
     it('should render value when editable:true', () => {
+        component.displayClearAction = false;
         component.editable = true;
         component.property.editable = true;
         fixture.detectChanges();
@@ -203,4 +204,50 @@ describe('CardViewDateItemComponent', () => {
             }
         );
     }));
+
+    it('should render the clear icon in case of editable:true', () => {
+        component.editable = true;
+        component.property.editable = true;
+        component.property.value = 'Jul 10 2017';
+        fixture.detectChanges();
+
+        const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear-${component.property.key}"]`));
+        expect(datePickerClearToggle).not.toBeNull('Clean Icon should be in DOM');
+    });
+
+    it('should not render the clear icon in case of property value empty', () => {
+        component.editable = true;
+        component.property.editable = true;
+        component.property.value = null;
+        fixture.detectChanges();
+
+        const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
+        expect(datePickerClearToggle).toBeNull('Clean Icon should not be in DOM');
+    });
+
+    it('should not render the clear icon in case displayClearAction is set false', () => {
+        component.editable = true;
+        component.property.editable = true;
+        component.displayClearAction = false;
+        component.property.value = 'Jul 10 2017';
+        fixture.detectChanges();
+
+        const datePickerClearToggle = fixture.debugElement.query(By.css(`[data-automation-id="datepicker-date-clear--${component.property.key}"]`));
+        expect(datePickerClearToggle).toBeNull('Clean Icon should not be in DOM');
+    });
+
+    it('should remove the property value after a successful clear attempt', async(() => {
+        component.editable = true;
+        component.property.editable = true;
+        component.property.value = 'Jul 10 2017';
+        fixture.detectChanges();
+
+        component.onDateClear();
+
+        fixture.whenStable().then(
+            (updateNotification) => {
+                expect(component.property.value).toBeNull();
+            }
+        );
+    }));
 });

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

@@ -52,6 +52,9 @@ export class CardViewDateItemComponent implements OnInit, OnDestroy {
     @Input()
     displayEmpty: boolean = true;
 
+    @Input()
+    displayClearAction: boolean = true;
+
     @ViewChild('datetimePicker')
     public datepicker: MatDatetimepicker<any>;
 
@@ -92,6 +95,10 @@ export class CardViewDateItemComponent implements OnInit, OnDestroy {
         return this.displayEmpty || !this.property.isEmpty();
     }
 
+    showClearAction() {
+        return !this.property.isEmpty() && this.displayClearAction;
+    }
+
     isEditable() {
         return this.editable && this.property.editable;
     }
@@ -111,4 +118,10 @@ export class CardViewDateItemComponent implements OnInit, OnDestroy {
         }
     }
 
+    onDateClear() {
+        this.valueDate = null;
+        this.cardViewUpdateService.update(this.property, null);
+        this.property.value = null;
+    }
+
 }