[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

demo-shell/src/app/components/card-view/card-view.component.html

@@ -4,7 +4,9 @@
     <mat-card class="adf-card-view">
         <adf-card-view
             [properties]="properties"
-            [editable]="true">
+            [editable]="true"
+            [displayClearAction]="showClearDateAction"
+            [displayNoneOption]="showNoneOption">
         </adf-card-view>
     </mat-card>
 
@@ -22,6 +24,20 @@
         (change)="toggleEditable()"
         [checked]="isEditable">
         Editable
+    </mat-slide-toggle><br>
+    <mat-slide-toggle
+        id="adf-toggle-clear-date"
+        [color]="'primary'"
+        (change)="toggleClearDate()"
+        [checked]="showClearDateAction">
+        Show clear date icon
+    </mat-slide-toggle><br>
+    <mat-slide-toggle
+        id="adf-toggle-none-option"
+        [color]="'primary'"
+        (change)="toggleNoneOption()"
+        [checked]="showNoneOption">
+        Show none option
     </mat-slide-toggle>
 </p>
 

demo-shell/src/app/components/card-view/card-view.component.ts

@@ -44,6 +44,8 @@ export class CardViewComponent implements OnInit, OnDestroy {
     isEditable = true;
     properties: any;
     logs: string[];
+    showClearDateAction = false;
+    showNoneOption = false;
 
     private onDestroy$ = new Subject<boolean>();
 
@@ -166,6 +168,14 @@ export class CardViewComponent implements OnInit, OnDestroy {
         this.createCard();
     }
 
+    toggleClearDate() {
+        this.showClearDateAction = !this.showClearDateAction;
+    }
+
+    toggleNoneOption() {
+        this.showNoneOption = !this.showNoneOption;
+    }
+
     reset() {
         this.isEditable = true;
         this.createCard();

docs/core/components/card-view.component.md

@@ -97,7 +97,9 @@ Defining properties from Typescript:
 
 | Name | Type | Default value | Description |
 | ---- | ---- | ------------- | ----------- |
+| displayClearAction | `boolean` | true | Toggles whether or not to display clear action. |
 | displayEmpty | `boolean` | true | Toggles whether or not to show empty items in non-editable mode. |
+| displayNoneOption | `boolean` | true | Toggles whether or not to display none option. |
 | editable | `boolean` |  | Toggles whether or not the items can be edited. |
 | properties | [`CardViewItem`](../../../lib/core/card-view/interfaces/card-view-item.interface.ts)`[]` |  | (**required**) Items to show in the card view. |
 

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;
+    }
+
 }

lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts

@@ -119,13 +119,17 @@ describe('CardViewItemDispatcherComponent', () => {
             const expectedEditable = false,
                 expectedDisplayEmpty = true,
                 expectedProperty = <CardViewItem> {},
-                expectedCustomInput = 1;
+                expectedCustomInput = 1,
+                expectedDisplayNoneOption = false,
+                expectedDisplayClearAction = false;
 
             component.ngOnChanges({
                 editable: new SimpleChange(true, expectedEditable, false),
                 displayEmpty: new SimpleChange(false, expectedDisplayEmpty, false),
                 property: new SimpleChange(null, expectedProperty, false),
-                customInput: new SimpleChange(0, expectedCustomInput, false)
+                customInput: new SimpleChange(0, expectedCustomInput, false),
+                displayNoneOption: new SimpleChange(true, expectedDisplayNoneOption, false),
+                displayClearAction: new SimpleChange(true, expectedDisplayClearAction, false)
             });
 
             const shinyCustomElementItemComponent = fixture.debugElement.query(By.css('whatever-you-want-to-have')).componentInstance;
@@ -133,6 +137,8 @@ describe('CardViewItemDispatcherComponent', () => {
             expect(shinyCustomElementItemComponent.editable).toBe(expectedEditable);
             expect(shinyCustomElementItemComponent.displayEmpty).toBe(expectedDisplayEmpty);
             expect(shinyCustomElementItemComponent.customInput).toBe(expectedCustomInput);
+            expect(shinyCustomElementItemComponent.displayNoneOption).toBe(expectedDisplayNoneOption);
+            expect(shinyCustomElementItemComponent.displayClearAction).toBe(expectedDisplayClearAction);
         });
     });
 

lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts

@@ -42,6 +42,12 @@ export class CardViewItemDispatcherComponent implements OnChanges {
     @Input()
     displayEmpty: boolean = true;
 
+    @Input()
+    displayNoneOption: boolean = true;
+
+    @Input()
+    displayClearAction: boolean = true;
+
     @ViewChild(CardViewContentProxyDirective)
     private content: CardViewContentProxyDirective;
 
@@ -92,6 +98,8 @@ export class CardViewItemDispatcherComponent implements OnChanges {
         this.componentReference.instance.editable = this.editable;
         this.componentReference.instance.property = this.property;
         this.componentReference.instance.displayEmpty = this.displayEmpty;
+        this.componentReference.instance.displayNoneOption = this.displayNoneOption;
+        this.componentReference.instance.displayClearAction = this.displayClearAction;
     }
 
     private proxy(methodName, ...args) {

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

@@ -4,6 +4,7 @@
     <div *ngIf="isEditable()">
         <mat-form-field>
             <mat-select [(value)]="value" (selectionChange)="onChange($event)" data-automation-class="select-box">
+              <mat-option *ngIf="showNoneOption()">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
               <mat-option *ngFor="let option of getOptions() | async" [value]="option.key">
                 {{ option.label | translate }}
               </mat-option>

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

@@ -34,6 +34,9 @@ export class CardViewSelectItemComponent implements OnChanges {
 
     @Input() options$: Observable<CardViewSelectItemOption<string>[]>;
 
+    @Input()
+    displayNoneOption: boolean = true;
+
     value: string;
 
     constructor(private cardViewUpdateService: CardViewUpdateService) {}
@@ -51,7 +54,12 @@ export class CardViewSelectItemComponent implements OnChanges {
     }
 
     onChange(event: MatSelectChange): void {
-        this.cardViewUpdateService.update(this.property, event.value);
+        const selectedOption = event.value !== undefined ? event.value : null;
-        this.property.value = event.value;
+        this.cardViewUpdateService.update(this.property, selectedOption);
+        this.property.value = selectedOption;
+    }
+
+    showNoneOption() {
+        return this.displayNoneOption;
     }
 }

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

@@ -4,7 +4,9 @@
             <adf-card-view-item-dispatcher
                 [property]="property"
                 [editable]="editable"
-                [displayEmpty]="displayEmpty">
+                [displayEmpty]="displayEmpty"
+                [displayNoneOption]="displayNoneOption"
+                [displayClearAction]="displayClearAction">
             </adf-card-view-item-dispatcher>
         </div>
     </div>

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

@@ -35,4 +35,12 @@ export class CardViewComponent {
     /** Toggles whether or not to show empty items in non-editable mode. */
     @Input()
     displayEmpty: boolean = true;
+
+    /** Toggles whether or not to display none option. */
+    @Input()
+    displayNoneOption: boolean = true;
+
+    /** Toggles whether or not to display clear action. */
+    @Input()
+    displayClearAction: boolean = true;
 }

lib/core/i18n/en.json

@@ -161,6 +161,7 @@
         "NAME": "Name",
         "VALUE": "Value"
       },
+      "NONE": "None",
       "VALIDATORS": {
         "FLOAT_VALIDATION_ERROR": "Use a number format",
         "INT_VALIDATION_ERROR": "Use an integer format"
@@ -184,6 +185,7 @@
         "EDIT": "Edit",
         "SAVE": "Save",
         "CANCEL": "Cancel",
+        "CLEAR": "Clear",
         "TOGGLE": "Toggle value"
       }
     }

lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.html

@@ -5,7 +5,8 @@
         <mat-card-content>
             <adf-card-view
                 [properties]="properties"
-                [editable]="isTaskEditable()">
+                [editable]="isTaskEditable()"
+                [displayClearAction]="displayDateClearAction">
             </adf-card-view>
         </mat-card-content>
     </mat-card>

lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts

@@ -62,6 +62,7 @@ export class TaskHeaderCloudComponent implements OnInit, OnDestroy {
     parentTaskName: string;
     dateFormat: string;
     dateLocale: string;
+    displayDateClearAction = false;
 
     private onDestroy$ = new Subject<boolean>();
 

lib/process-services/task-list/components/task-header.component.html

@@ -1,6 +1,6 @@
 <mat-card *ngIf="taskDetails" class="adf-card-container">
     <mat-card-content>
-        <adf-card-view [properties]="properties" [editable]="!isCompleted()"></adf-card-view>
+        <adf-card-view [properties]="properties" [editable]="!isCompleted()" [displayClearAction]="displayDateClearAction"></adf-card-view>
     </mat-card-content>
 
     <mat-card-actions class="adf-controls">

lib/process-services/task-list/components/task-header.component.ts

@@ -58,6 +58,7 @@ export class TaskHeaderComponent implements OnChanges, OnInit {
 
     properties: CardViewItem [];
     inEdit: boolean = false;
+    displayDateClearAction = false;
     dateFormat: string;
     dateLocale: string;