diff --git a/docs/core/card-view.component.md b/docs/core/card-view.component.md index ccccb5d27b..f1b7226aa5 100644 --- a/docs/core/card-view.component.md +++ b/docs/core/card-view.component.md @@ -55,6 +55,7 @@ export interface CardViewItem { type: string; displayValue: string; editable?: boolean; + icon?: string; } ``` @@ -77,7 +78,8 @@ Each of them extends the abstract CardViewBaseItemModel class to add some custom value: 'Spock', key: 'name', default: 'default bar' , - multiline: false + multiline: false, + icon: 'icon'; }), new CardViewMapItemModel({ label: 'My map', @@ -141,6 +143,7 @@ const textItemProperty = new CardViewTextItemModel(options); | displayValue\* | string | --- | The value to render | | editable | boolean | false | Whether the property editable or not | | clickable | boolean | false | Whether the property clickable or not | +| icon | string | The material icon to show against the clickable property | | multiline | string | false | Single or multiline text | | pipes | CardViewTextItemPipeProperty\[] | \[] | Pipes to be applied on the displayValue | 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 e3ba8891a5..de7758095c 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,9 +5,12 @@ {{ property.displayValue }} - + + {{ property.displayValue }} + {{ property.icon }} + 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 58b5209f1c..d9e2839158 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 @@ -24,6 +24,12 @@ } } + &-textitem-clickable { + &:hover mat-icon { + opacity: 1; + } + } + &-textitem-clickable-value { cursor: pointer; color: mat-color($primary); 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 9721c01c03..d3d739c939 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 @@ -185,6 +185,51 @@ describe('CardViewTextItemComponent', () => { expect(value.nativeElement.innerText.trim()).toBe('FAKE-DEFAULT-KEY'); }); + it('should render the edit icon in case of clickable true and icon defined', () => { + component.property = new CardViewTextItemModel ({ + label: 'Text label', + value: '', + key: 'textkey', + default: 'FAKE-DEFAULT-KEY', + clickable: true, + icon: 'FAKE-ICON' + }); + fixture.detectChanges(); + + let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.icon}"]`)); + expect(value).not.toBeNull(); + expect(value.nativeElement.innerText.trim()).toBe('FAKE-ICON'); + }); + + it('should not render the edit icon in case of clickable true and icon undefined', () => { + component.property = new CardViewTextItemModel ({ + label: 'Text label', + value: '', + key: 'textkey', + default: 'FAKE-DEFAULT-KEY', + clickable: true + }); + fixture.detectChanges(); + + let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.icon}"]`)); + expect(value).toBeNull('Edit icon should NOT be shown'); + }); + + it('should not render the edit icon in case of clickable false and icon defined', () => { + component.property = new CardViewTextItemModel ({ + label: 'Text label', + value: '', + key: 'textkey', + default: 'FAKE-DEFAULT-KEY', + clickable: false, + icon: 'FAKE-ICON' + }); + fixture.detectChanges(); + + let value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-${component.property.icon}"]`)); + expect(value).toBeNull('Edit icon should NOT be shown'); + }); + it('should render value when editable:true', () => { component.editable = true; component.property.editable = 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 015aebca63..4509489c9a 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 @@ -59,6 +59,10 @@ export class CardViewTextItemComponent implements OnChanges { return this.property.clickable; } + hasIcon(): boolean { + return !!this.property.icon; + } + hasErrors(): number { return this.errorMessages && this.errorMessages.length; } 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 7561d776bc..e69afdeaf4 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 @@ -24,5 +24,6 @@ export interface CardViewItemProperties { default?: any; editable?: boolean; clickable?: boolean; + icon?: string; validators?: CardViewItemValidator[]; } diff --git a/lib/core/card-view/interfaces/card-view-item.interface.ts b/lib/core/card-view/interfaces/card-view-item.interface.ts index 38cb44ade9..dcaa339b5d 100644 --- a/lib/core/card-view/interfaces/card-view-item.interface.ts +++ b/lib/core/card-view/interfaces/card-view-item.interface.ts @@ -23,4 +23,5 @@ export interface CardViewItem { type: string; displayValue: any; editable?: boolean; + icon?: string; } diff --git a/lib/core/card-view/models/card-view-baseitem.model.ts b/lib/core/card-view/models/card-view-baseitem.model.ts index beb5ecb68e..18c82af8f4 100644 --- a/lib/core/card-view/models/card-view-baseitem.model.ts +++ b/lib/core/card-view/models/card-view-baseitem.model.ts @@ -24,6 +24,7 @@ export abstract class CardViewBaseItemModel { default: any; editable: boolean; clickable: boolean; + icon?: string; validators?: CardViewItemValidator[]; constructor(obj: CardViewItemProperties) { @@ -33,6 +34,7 @@ export abstract class CardViewBaseItemModel { this.default = obj.default; this.editable = !!obj.editable; this.clickable = !!obj.clickable; + this.icon = obj.icon || ''; this.validators = obj.validators || []; } diff --git a/lib/process-services/task-list/components/task-header.component.spec.ts b/lib/process-services/task-list/components/task-header.component.spec.ts index 7550d011c6..c5e8176eb0 100644 --- a/lib/process-services/task-list/components/task-header.component.spec.ts +++ b/lib/process-services/task-list/components/task-header.component.spec.ts @@ -90,18 +90,32 @@ describe('TaskHeaderComponent', () => { fixture.detectChanges(); fixture.whenStable().then(() => { - let formNameEl = fixture.debugElement.query(By.css('[data-automation-id="header-assignee"] .adf-property-value')); + let formNameEl = fixture.debugElement.query(By.css('[data-automation-id="header-assignee"] .adf-textitem-clickable-value')); expect(formNameEl.nativeElement.innerText).toBe('Wilbur Adams'); }); })); + it('should display clickable edit icon', async(() => { + component.refreshData(); + fixture.detectChanges(); + + fixture.whenStable().then(() => { + let formNameEl = fixture.debugElement.query(By.css('[data-automation-id="header-assignee"] .adf-textitem-clickable-value')); + let iconE = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-icon-create"]`)); + expect(formNameEl).not.toBeNull(); + expect(iconE).not.toBeNull(); + expect(formNameEl.nativeElement.innerText).toBe('Wilbur Adams'); + expect(iconE.nativeElement.innerText.trim()).toBe('create'); + }); + })); + it('should display placeholder if no assignee', async(() => { component.taskDetails.assignee = null; component.refreshData(); fixture.detectChanges(); fixture.whenStable().then(() => { - let valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-assignee"] .adf-property-value')); + let valueEl = fixture.debugElement.query(By.css('[data-automation-id="header-assignee"] .adf-textitem-clickable-value')); expect(valueEl.nativeElement.innerText).toBe('ADF_TASK_LIST.PROPERTIES.ASSIGNEE_DEFAULT'); }); 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 5162dd5eb4..2be1bb6fab 100644 --- a/lib/process-services/task-list/components/task-header.component.ts +++ b/lib/process-services/task-list/components/task-header.component.ts @@ -79,7 +79,8 @@ export class TaskHeaderComponent implements OnChanges, OnInit { value: this.taskDetails.getFullName(), key: 'assignee', default: this.translationService.instant('ADF_TASK_LIST.PROPERTIES.ASSIGNEE_DEFAULT'), - clickable: !this.isCompleted() + clickable: !this.isCompleted(), + icon: 'create' } ), new CardViewTextItemModel(