inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-5004] [CardViewTextItemComponent] Provide a way to have an icon for the clickable items (#5270)

Browse Source 
* [ADF-5004] [CardViewTextItemComponent] Provide a way to have an icon for the clickable items.

* * FIxed failing unit tests* Modified task-details tests and add few more.
This commit is contained in:
siva kumar
2019-11-22 15:07:32 +05:30
committed by Maurizio Vitale
parent e806e97c75
commit 5068cbf539
8 changed files with 528 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html
View File

@@ -9,6 +9,14 @@
<span class="adf-textitem-clickable-value" [attr.data-automation-id]="'card-textitem-value-' + property.key">
<span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
</span>
<button mat-icon-button fxFlex="0 0 auto" *ngIf="showClickableIcon()"
class="adf-textitem-action"
[attr.aria-label]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
[attr.data-automation-id]="'card-textitem-clickable-icon-' + property.key">
<mat-icon class="adf-textitem-icon">{{property?.icon}}</mat-icon>
</button>
</div>
</ng-template>
</span>

1
lib/core/card-view/components/card-view-textitem/card-view-textitem.component.scss
View File

@@ -31,6 +31,7 @@
}
&-textitem-clickable {
cursor: pointer !important;
&:hover .adf-textitem-action {
color: mat-color($foreground, text);
}

48
lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts
View File

@@ -154,6 +154,54 @@ describe('CardViewTextItemComponent', () => {
expect(value).toBeNull();
});
it('should not render the clickable icon in case editable set to false', () => {
component.property = new CardViewTextItemModel({
label: 'Text label',
value: '',
key: 'textkey',
default: 'FAKE-DEFAULT-KEY',
clickable: true,
icon: 'create'
});
component.editable = false;
fixture.detectChanges();
const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-textkey"]`));
expect(value).toBeNull('icon should NOT be shown');
});
it('should render the defined clickable icon in case of clickable true and editable input set to true', () => {
component.property = new CardViewTextItemModel({
label: 'Text label',
value: '',
key: 'textkey',
default: 'FAKE-DEFAULT-KEY',
clickable: true,
icon: 'FAKE_ICON'
});
component.editable = true;
fixture.detectChanges();
const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-textkey"]`));
expect(value).not.toBeNull();
expect(value.nativeElement.innerText).toBe('FAKE_ICON');
});
it('should not render clickable 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
});
component.editable = true;
fixture.detectChanges();
const value = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-clickable-icon-textkey"]`));
expect(value).toBeNull('icon should NOT be shown');
});
it('should not render the edit icon in case of clickable true and icon undefined', () => {
component.property = new CardViewTextItemModel({
label: 'Text label',

4
lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts
View File

@@ -59,6 +59,10 @@ export class CardViewTextItemComponent implements OnChanges {
return this.displayEmpty || !this.property.isEmpty();
}
showClickableIcon(): boolean {
return this.hasIcon() && this.editable;
}
isEditable(): boolean {
return this.editable && this.property.editable;
}