inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-19 17:14:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2614] Edit icon misses in Info-drawer Assignee ()

Browse Source 
* [DW-488] Edit icon misses in Info-drawer Assignee

* * Added unit testcases for the recent changes .

* * Updated card-view doc for the recent changes made.

* * Fixed failing taskHeader testcases
This commit is contained in:
siva kumar 2018-04-06 17:19:38 +05:30 committed by Denys Vuika
parent 38f2973863
commit 313d7f30cf
10 changed files with 85 additions and 5 deletions

5
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 |

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

@ -5,9 +5,12 @@
<span *ngIf="showProperty()">{{ property.displayValue }}</span>
</span>
<ng-template #elseBlock>
<span class="adf-textitem-clickable-value" (click)="clicked()" [attr.data-automation-id]="'card-textitem-value-' + property.key">
<div class="adf-textitem-clickable" (click)="clicked()" fxLayout="row" fxLayoutAlign="space-between center">
<span class="adf-textitem-clickable-value" [attr.data-automation-id]="'card-textitem-value-' + property.key">
<span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
</span>
<mat-icon *ngIf="hasIcon()" fxFlex="0 0 auto" [attr.data-automation-id]="'card-textitem-edit-icon-' + property.icon" class="adf-textitem-icon">{{ property.icon }}</mat-icon>
</div>
</ng-template>
</span>
<span *ngIf="isEditable()">

6
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);

45
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;

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

1
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[];
}

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

2
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 || [];
}

18
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');
});

3
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(