From 944ca8e5d8ad640e0651675e986b6fd48108a638 Mon Sep 17 00:00:00 2001 From: Eugenio Romano Date: Thu, 28 Mar 2019 18:52:43 +0000 Subject: [PATCH] add click callback and remove icon if is not editable (#4516) --- .travis.yml | 2 -- .../card-view/card-view.component.ts | 14 ++++++++++++ docs/core/components/card-view.component.md | 6 +++-- .../card-view-mapitem.component.scss | 2 +- .../card-view-textitem.component.html | 11 +++++----- .../card-view-textitem.component.scss | 6 ++--- .../card-view-textitem.component.spec.ts | 22 +++++++++++++++++++ .../card-view-textitem.component.ts | 8 +++++-- .../card-view-item-properties.interface.ts | 2 +- ...card-view-textitem-properties.interface.ts | 1 + .../models/card-view-textitem.model.ts | 4 +++- 11 files changed, 60 insertions(+), 18 deletions(-) diff --git a/.travis.yml b/.travis.yml index b5250c4d40..0cfefd25d9 100644 --- a/.travis.yml +++ b/.travis.yml @@ -65,7 +65,6 @@ jobs: then ng test core --watch=false || exit 1; fi; - script: AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)"; if [[ $AFFECTED_LIBS =~ "extensions$" || $TRAVIS_PULL_REQUEST == "false" ]]; then @@ -79,7 +78,6 @@ jobs: then ng test process-services --watch=false || exit 1; fi; - script: AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)"; if [[ $AFFECTED_LIBS =~ "insights$" || $TRAVIS_PULL_REQUEST == "false" ]]; then 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 82e77966b4..2d1c927cf0 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 @@ -48,6 +48,10 @@ export class CardViewComponent implements OnInit { this.createCard(); } + respondToCardClick() { + this.logs.push(`clickable field`); + } + ngOnInit() { this.cardViewUpdateService.itemUpdated$.subscribe(this.onItemChange.bind(this)); } @@ -118,6 +122,16 @@ export class CardViewComponent implements OnInit { value: new Map([['999', 'My Value']]), key: 'map', default: 'default map value' + }), + new CardViewTextItemModel({ + label: 'This is clickable ', + value: 'click here', + key: 'click', + default: 'click here', + clickable: true, + clickCallBack: () => { + this.respondToCardClick(); + } }) ]; } diff --git a/docs/core/components/card-view.component.md b/docs/core/components/card-view.component.md index c88fa452d9..3d9c3ef529 100644 --- a/docs/core/components/card-view.component.md +++ b/docs/core/components/card-view.component.md @@ -32,14 +32,15 @@ Defining properties from Typescript: key: 'name', default: 'default bar' , multiline: false, - icon: 'icon'; + icon: 'icon', + clickCallBack : ()=>{ myClickImplementation()} }), new CardViewMapItemModel({ label: 'My map', value: new Map([['999', 'My Value']]), key: 'map', default: 'default map value' , - clickable: true + clickable: true, }), new CardViewDateItemModel({ label: 'Date of birth', @@ -173,6 +174,7 @@ const textItemProperty = new CardViewTextItemModel(options); | displayValue\* | string | | The value to display | | editable | boolean | false | Toggles whether the item is editable | | clickable | boolean | false | Toggles whether the property responds to clicks | +| clickableCallBack | function | null | Function to execute when click the element | | icon | string | | The material icon to show beside the item if it is clickable | | multiline | boolean | false | Single or multiline text | | pipes | [`CardViewTextItemPipeProperty`](../../../lib/core/card-view/interfaces/card-view-textitem-pipe-property.interface.ts)\[] | \[] | Pipes to be applied to the text before display | diff --git a/lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.scss b/lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.scss index 5ae2bcb56b..c431673932 100644 --- a/lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.scss +++ b/lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.scss @@ -1,5 +1,5 @@ .adf { &-mapitem-clickable-value { - cursor: pointer; + cursor: pointer !important; } } diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html index 862f7b5d1e..2154aac7a0 100644 --- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html +++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html @@ -5,12 +5,11 @@ {{ property.displayValue }} -
- - {{ property.displayValue }} - - {{ property.icon }} -
+
+ + {{ property.displayValue }} + +
diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss index 6b767d09a0..3d822bca14 100644 --- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss +++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss @@ -17,7 +17,7 @@ } &-textitem-readonly { - cursor: pointer; + cursor: pointer !important; &:hover mat-icon { opacity: 1; @@ -31,7 +31,7 @@ } &-textitem-clickable-value { - cursor: pointer; + cursor: pointer !important; color: mat-color($primary); } @@ -42,7 +42,7 @@ mat-icon:not(.adf-button-disabled):hover { opacity: 1; - cursor: pointer; + cursor: pointer !important;; } mat-form-field { diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts index 2d1a5153e4..726cb11a3b 100644 --- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts +++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts @@ -307,6 +307,28 @@ describe('CardViewTextItemComponent', () => { }); })); + it('should render the default as value if the value is empty, clickable is false and displayEmpty is true', (done) => { + let functionTestClick = () => { + done(); + }; + + component.property = new CardViewTextItemModel({ + label: 'Text label', + value: '', + key: 'textkey', + default: 'FAKE-DEFAULT-KEY', + clickable: true, + clickCallBack: () => { + functionTestClick(); + } + }); + component.displayEmpty = true; + fixture.detectChanges(); + + const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-value-${component.property.key}"]`)); + value.nativeElement.click(); + }); + it('should trigger an update event on the CardViewUpdateService [integration]', (done) => { component.inEdit = false; component.property.isValid = () => true; diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts index 0ee7a8d0a7..6a44787326 100644 --- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts +++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts @@ -57,7 +57,7 @@ export class CardViewTextItemComponent implements OnChanges { } isClickable(): boolean { - return this.property.clickable; + return !!this.property.clickable; } hasIcon(): boolean { @@ -97,6 +97,10 @@ export class CardViewTextItemComponent implements OnChanges { } clicked(): void { - this.cardViewUpdateService.clicked(this.property); + if (typeof this.property.clickCallBack === 'function') { + this.property.clickCallBack(); + } else { + this.cardViewUpdateService.clicked(this.property); + } } } diff --git a/lib/core/card-view/interfaces/card-view-item-properties.interface.ts b/lib/core/card-view/interfaces/card-view-item-properties.interface.ts index 2e0ca620bf..02f2e397a7 100644 --- a/lib/core/card-view/interfaces/card-view-item-properties.interface.ts +++ b/lib/core/card-view/interfaces/card-view-item-properties.interface.ts @@ -23,7 +23,7 @@ export interface CardViewItemProperties { key: any; default?: any; editable?: boolean; - clickable?: boolean; + clickable?: any; icon?: string; validators?: CardViewItemValidator[]; data?: any; diff --git a/lib/core/card-view/interfaces/card-view-textitem-properties.interface.ts b/lib/core/card-view/interfaces/card-view-textitem-properties.interface.ts index a119fed267..d80fa18d1e 100644 --- a/lib/core/card-view/interfaces/card-view-textitem-properties.interface.ts +++ b/lib/core/card-view/interfaces/card-view-textitem-properties.interface.ts @@ -21,4 +21,5 @@ import { CardViewTextItemPipeProperty } from './card-view-textitem-pipe-property export interface CardViewTextItemProperties extends CardViewItemProperties { multiline?: boolean; pipes?: CardViewTextItemPipeProperty[]; + clickCallBack?: any; } diff --git a/lib/core/card-view/models/card-view-textitem.model.ts b/lib/core/card-view/models/card-view-textitem.model.ts index d7c8ec96bb..32a6acabb0 100644 --- a/lib/core/card-view/models/card-view-textitem.model.ts +++ b/lib/core/card-view/models/card-view-textitem.model.ts @@ -24,11 +24,13 @@ export class CardViewTextItemModel extends CardViewBaseItemModel implements Card type: string = 'text'; multiline?: boolean; pipes?: CardViewTextItemPipeProperty[]; + clickCallBack?: any; constructor(cardViewTextItemProperties: CardViewTextItemProperties) { super(cardViewTextItemProperties); - this.multiline = !!cardViewTextItemProperties.multiline ; + this.multiline = !!cardViewTextItemProperties.multiline; this.pipes = cardViewTextItemProperties.pipes || []; + this.clickCallBack = cardViewTextItemProperties.clickCallBack ? cardViewTextItemProperties.clickCallBack : null; } get displayValue() {