From 05e73a8aa19b6efd1dc25b4aa16a5d9813c6812a Mon Sep 17 00:00:00 2001 From: siva kumar Date: Fri, 26 Jul 2019 16:52:45 +0530 Subject: [PATCH] [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 --- .../card-view/card-view.component.html | 18 ++++++- .../card-view/card-view.component.ts | 10 ++++ docs/core/components/card-view.component.md | 2 + .../card-view-dateitem.component.html | 9 ++++ .../card-view-dateitem.component.scss | 18 +++++++ .../card-view-dateitem.component.spec.ts | 47 +++++++++++++++++++ .../card-view-dateitem.component.ts | 13 +++++ ...ard-view-item-dispatcher.component.spec.ts | 10 +++- .../card-view-item-dispatcher.component.ts | 8 ++++ .../card-view-selectitem.component.html | 1 + .../card-view-selectitem.component.ts | 12 ++++- .../card-view/card-view.component.html | 4 +- .../card-view/card-view.component.ts | 8 ++++ lib/core/i18n/en.json | 2 + .../task-header-cloud.component.html | 3 +- .../components/task-header-cloud.component.ts | 1 + .../components/task-header.component.html | 2 +- .../components/task-header.component.ts | 1 + 18 files changed, 161 insertions(+), 8 deletions(-) diff --git a/demo-shell/src/app/components/card-view/card-view.component.html b/demo-shell/src/app/components/card-view/card-view.component.html index e39f4116c8..87c8edd452 100644 --- 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 @@ + [editable]="true" + [displayClearAction]="showClearDateAction" + [displayNoneOption]="showNoneOption"> @@ -22,6 +24,20 @@ (change)="toggleEditable()" [checked]="isEditable"> Editable +
+ + Show clear date icon +
+ + Show none option

diff --git a/demo-shell/src/app/components/card-view/card-view.component.ts b/demo-shell/src/app/components/card-view/card-view.component.ts index fe85f5c65e..0c3f50e61b 100644 --- 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(); @@ -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(); diff --git a/docs/core/components/card-view.component.md b/docs/core/components/card-view.component.md index 3d9c3ef529..cc78df900a 100644 --- 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. | diff --git 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 index a1eee5b48e..e96fe2d4cd 100644 --- 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()"> {{ property.displayValue }} + + + clear + + { }); 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(); + } + ); + })); }); diff --git 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 index 6abe22c955..3c662190bd 100644 --- 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; @@ -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; + } + } diff --git 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 index 70149952f1..9a2fc35a4f 100644 --- 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 = {}, - 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); }); }); diff --git 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 index 0e6671f080..4955ba7416 100644 --- 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) { diff --git 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 index 1cd47b7254..508135a440 100644 --- 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 @@
+ {{ 'CORE.CARDVIEW.NONE' | translate }} {{ option.label | translate }} diff --git 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 index c28f30779a..f4c374285b 100644 --- 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[]>; + @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; } } diff --git a/lib/core/card-view/components/card-view/card-view.component.html b/lib/core/card-view/components/card-view/card-view.component.html index e362d0552f..eebbed91c9 100644 --- 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 @@ + [displayEmpty]="displayEmpty" + [displayNoneOption]="displayNoneOption" + [displayClearAction]="displayClearAction">
diff --git a/lib/core/card-view/components/card-view/card-view.component.ts b/lib/core/card-view/components/card-view/card-view.component.ts index 3c6b631c33..2199e627ed 100644 --- 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; } diff --git a/lib/core/i18n/en.json b/lib/core/i18n/en.json index 8ef8e7a3ca..46d6b0cc29 100644 --- 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" } } diff --git 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 index ead649fe3e..43ee89ed70 100644 --- 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 @@ + [editable]="isTaskEditable()" + [displayClearAction]="displayDateClearAction"> diff --git 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 index b3e67a567f..8e8f29093a 100644 --- 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(); diff --git a/lib/process-services/task-list/components/task-header.component.html b/lib/process-services/task-list/components/task-header.component.html index 9b7a297b2a..4246928719 100644 --- 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 @@ - + diff --git a/lib/process-services/task-list/components/task-header.component.ts b/lib/process-services/task-list/components/task-header.component.ts index 7bd74af996..f2bc4e8b14 100644 --- 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;