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

add click callback and remove icon if is not editable (#4516)

Browse Source
This commit is contained in:
Eugenio Romano
2019-03-28 18:52:43 +00:00
committed by GitHub
parent 71fc1fd039
commit 944ca8e5d8
11 changed files with 60 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.travis.yml
View File

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

14
demo-shell/src/app/components/card-view/card-view.component.ts
View File

@@ -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();
}
})
];
}

6
docs/core/components/card-view.component.md
View File

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

2
lib/core/card-view/components/card-view-mapitem/card-view-mapitem.component.scss
View File

@@ -1,5 +1,5 @@
.adf {
&-mapitem-clickable-value {
cursor: pointer;
cursor: pointer !important;
}
}

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

@@ -5,12 +5,11 @@
<span *ngIf="showProperty()" class="adf-textitem-ellipsis">{{ property.displayValue }}</span>
</span>
<ng-template #elseBlock>
<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>
<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>
</div>
</ng-template>
</span>
<span *ngIf="isEditable()">

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

@@ -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 {

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

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

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

@@ -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);
}
}
}

2
lib/core/card-view/interfaces/card-view-item-properties.interface.ts
View File

@@ -23,7 +23,7 @@ export interface CardViewItemProperties {
key: any;
default?: any;
editable?: boolean;
clickable?: boolean;
clickable?: any;
icon?: string;
validators?: CardViewItemValidator[];
data?: any;

1
lib/core/card-view/interfaces/card-view-textitem-properties.interface.ts
View File

@@ -21,4 +21,5 @@ import { CardViewTextItemPipeProperty } from './card-view-textitem-pipe-property
export interface CardViewTextItemProperties extends CardViewItemProperties {
multiline?: boolean;
pipes?: CardViewTextItemPipeProperty[];
clickCallBack?: any;
}

4
lib/core/card-view/models/card-view-textitem.model.ts
View File

@@ -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() {