[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
2025-05-12 17:04:57 +00:00 · 2019-07-26 16:52:45 +05:30 · 2019-07-26 16:52:45 +05:30 · 05e73a8aa1
commit 05e73a8aa1
parent 525f0a06db
18 changed files with 161 additions and 8 deletions
--- a/demo-shell/src/app/components/card-view/card-view.component.html
+++ b/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>

--- a/demo-shell/src/app/components/card-view/card-view.component.ts
+++ b/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();
--- a/docs/core/components/card-view.component.md
+++ b/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. |

--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.html
+++ b/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"
--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
+++ b/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;
+                }
            }
        }
    }
--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.spec.ts
+++ b/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();
+            }
+        );
+    }));
 });
--- a/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts
+++ b/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;
+    }
+
 }
--- a/lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.spec.ts
+++ b/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);
        });
    });

--- a/lib/core/card-view/components/card-view-item-dispatcher/card-view-item-dispatcher.component.ts
+++ b/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) {
--- a/lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.html
+++ b/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>
--- a/lib/core/card-view/components/card-view-selectitem/card-view-selectitem.component.ts
+++ b/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);
-        this.property.value = event.value;
+        const selectedOption = event.value !== undefined ? event.value : null;
+        this.cardViewUpdateService.update(this.property, selectedOption);
+        this.property.value = selectedOption;
+    }
+
+    showNoneOption() {
+        return this.displayNoneOption;
    }
 }
--- a/lib/core/card-view/components/card-view/card-view.component.html
+++ b/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>
--- a/lib/core/card-view/components/card-view/card-view.component.ts
+++ b/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;
 }
--- a/lib/core/i18n/en.json
+++ b/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"
      }
    }
--- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.html
+++ b/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>
--- a/lib/process-services-cloud/src/lib/task/task-header/components/task-header-cloud.component.ts
+++ b/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>();

--- a/lib/process-services/task-list/components/task-header.component.html
+++ b/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">
--- a/lib/process-services/task-list/components/task-header.component.ts
+++ b/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;