mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
add click callback and remove icon if is not editable (#4516)
This commit is contained in:
@@ -65,7 +65,6 @@ jobs:
|
|||||||
then
|
then
|
||||||
ng test core --watch=false || exit 1;
|
ng test core --watch=false || exit 1;
|
||||||
fi;
|
fi;
|
||||||
script:
|
|
||||||
AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
|
AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
|
||||||
if [[ $AFFECTED_LIBS =~ "extensions$" || $TRAVIS_PULL_REQUEST == "false" ]];
|
if [[ $AFFECTED_LIBS =~ "extensions$" || $TRAVIS_PULL_REQUEST == "false" ]];
|
||||||
then
|
then
|
||||||
@@ -79,7 +78,6 @@ jobs:
|
|||||||
then
|
then
|
||||||
ng test process-services --watch=false || exit 1;
|
ng test process-services --watch=false || exit 1;
|
||||||
fi;
|
fi;
|
||||||
script:
|
|
||||||
AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
|
AFFECTED_LIBS="$(./scripts/affected-libs.sh -gnu -b $TRAVIS_BRANCH)";
|
||||||
if [[ $AFFECTED_LIBS =~ "insights$" || $TRAVIS_PULL_REQUEST == "false" ]];
|
if [[ $AFFECTED_LIBS =~ "insights$" || $TRAVIS_PULL_REQUEST == "false" ]];
|
||||||
then
|
then
|
||||||
|
@@ -48,6 +48,10 @@ export class CardViewComponent implements OnInit {
|
|||||||
this.createCard();
|
this.createCard();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
respondToCardClick() {
|
||||||
|
this.logs.push(`clickable field`);
|
||||||
|
}
|
||||||
|
|
||||||
ngOnInit() {
|
ngOnInit() {
|
||||||
this.cardViewUpdateService.itemUpdated$.subscribe(this.onItemChange.bind(this));
|
this.cardViewUpdateService.itemUpdated$.subscribe(this.onItemChange.bind(this));
|
||||||
}
|
}
|
||||||
@@ -118,6 +122,16 @@ export class CardViewComponent implements OnInit {
|
|||||||
value: new Map([['999', 'My Value']]),
|
value: new Map([['999', 'My Value']]),
|
||||||
key: 'map',
|
key: 'map',
|
||||||
default: 'default map value'
|
default: 'default map value'
|
||||||
|
}),
|
||||||
|
new CardViewTextItemModel({
|
||||||
|
label: 'This is clickable ',
|
||||||
|
value: 'click here',
|
||||||
|
key: 'click',
|
||||||
|
default: 'click here',
|
||||||
|
clickable: true,
|
||||||
|
clickCallBack: () => {
|
||||||
|
this.respondToCardClick();
|
||||||
|
}
|
||||||
})
|
})
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
@@ -32,14 +32,15 @@ Defining properties from Typescript:
|
|||||||
key: 'name',
|
key: 'name',
|
||||||
default: 'default bar' ,
|
default: 'default bar' ,
|
||||||
multiline: false,
|
multiline: false,
|
||||||
icon: 'icon';
|
icon: 'icon',
|
||||||
|
clickCallBack : ()=>{ myClickImplementation()}
|
||||||
}),
|
}),
|
||||||
new CardViewMapItemModel({
|
new CardViewMapItemModel({
|
||||||
label: 'My map',
|
label: 'My map',
|
||||||
value: new Map([['999', 'My Value']]),
|
value: new Map([['999', 'My Value']]),
|
||||||
key: 'map',
|
key: 'map',
|
||||||
default: 'default map value' ,
|
default: 'default map value' ,
|
||||||
clickable: true
|
clickable: true,
|
||||||
}),
|
}),
|
||||||
new CardViewDateItemModel({
|
new CardViewDateItemModel({
|
||||||
label: 'Date of birth',
|
label: 'Date of birth',
|
||||||
@@ -173,6 +174,7 @@ const textItemProperty = new CardViewTextItemModel(options);
|
|||||||
| displayValue\* | string | | The value to display |
|
| displayValue\* | string | | The value to display |
|
||||||
| editable | boolean | false | Toggles whether the item is editable |
|
| editable | boolean | false | Toggles whether the item is editable |
|
||||||
| clickable | boolean | false | Toggles whether the property responds to clicks |
|
| 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 |
|
| icon | string | | The material icon to show beside the item if it is clickable |
|
||||||
| multiline | boolean | false | Single or multiline text |
|
| 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 |
|
| pipes | [`CardViewTextItemPipeProperty`](../../../lib/core/card-view/interfaces/card-view-textitem-pipe-property.interface.ts)\[] | \[] | Pipes to be applied to the text before display |
|
||||||
|
@@ -1,5 +1,5 @@
|
|||||||
.adf {
|
.adf {
|
||||||
&-mapitem-clickable-value {
|
&-mapitem-clickable-value {
|
||||||
cursor: pointer;
|
cursor: pointer !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -5,12 +5,11 @@
|
|||||||
<span *ngIf="showProperty()" class="adf-textitem-ellipsis">{{ property.displayValue }}</span>
|
<span *ngIf="showProperty()" class="adf-textitem-ellipsis">{{ property.displayValue }}</span>
|
||||||
</span>
|
</span>
|
||||||
<ng-template #elseBlock>
|
<ng-template #elseBlock>
|
||||||
<div class="adf-textitem-clickable" (click)="clicked()" fxLayout="row" fxLayoutAlign="space-between center">
|
<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 class="adf-textitem-clickable-value" [attr.data-automation-id]="'card-textitem-value-' + property.key">
|
||||||
<span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
|
<span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
|
||||||
</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>
|
|
||||||
</ng-template>
|
</ng-template>
|
||||||
</span>
|
</span>
|
||||||
<span *ngIf="isEditable()">
|
<span *ngIf="isEditable()">
|
||||||
|
@@ -17,7 +17,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-textitem-readonly {
|
&-textitem-readonly {
|
||||||
cursor: pointer;
|
cursor: pointer !important;
|
||||||
|
|
||||||
&:hover mat-icon {
|
&:hover mat-icon {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&-textitem-clickable-value {
|
&-textitem-clickable-value {
|
||||||
cursor: pointer;
|
cursor: pointer !important;
|
||||||
color: mat-color($primary);
|
color: mat-color($primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -42,7 +42,7 @@
|
|||||||
|
|
||||||
mat-icon:not(.adf-button-disabled):hover {
|
mat-icon:not(.adf-button-disabled):hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
cursor: pointer;
|
cursor: pointer !important;;
|
||||||
}
|
}
|
||||||
|
|
||||||
mat-form-field {
|
mat-form-field {
|
||||||
|
@@ -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) => {
|
it('should trigger an update event on the CardViewUpdateService [integration]', (done) => {
|
||||||
component.inEdit = false;
|
component.inEdit = false;
|
||||||
component.property.isValid = () => true;
|
component.property.isValid = () => true;
|
||||||
|
@@ -57,7 +57,7 @@ export class CardViewTextItemComponent implements OnChanges {
|
|||||||
}
|
}
|
||||||
|
|
||||||
isClickable(): boolean {
|
isClickable(): boolean {
|
||||||
return this.property.clickable;
|
return !!this.property.clickable;
|
||||||
}
|
}
|
||||||
|
|
||||||
hasIcon(): boolean {
|
hasIcon(): boolean {
|
||||||
@@ -97,6 +97,10 @@ export class CardViewTextItemComponent implements OnChanges {
|
|||||||
}
|
}
|
||||||
|
|
||||||
clicked(): void {
|
clicked(): void {
|
||||||
this.cardViewUpdateService.clicked(this.property);
|
if (typeof this.property.clickCallBack === 'function') {
|
||||||
|
this.property.clickCallBack();
|
||||||
|
} else {
|
||||||
|
this.cardViewUpdateService.clicked(this.property);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -23,7 +23,7 @@ export interface CardViewItemProperties {
|
|||||||
key: any;
|
key: any;
|
||||||
default?: any;
|
default?: any;
|
||||||
editable?: boolean;
|
editable?: boolean;
|
||||||
clickable?: boolean;
|
clickable?: any;
|
||||||
icon?: string;
|
icon?: string;
|
||||||
validators?: CardViewItemValidator[];
|
validators?: CardViewItemValidator[];
|
||||||
data?: any;
|
data?: any;
|
||||||
|
@@ -21,4 +21,5 @@ import { CardViewTextItemPipeProperty } from './card-view-textitem-pipe-property
|
|||||||
export interface CardViewTextItemProperties extends CardViewItemProperties {
|
export interface CardViewTextItemProperties extends CardViewItemProperties {
|
||||||
multiline?: boolean;
|
multiline?: boolean;
|
||||||
pipes?: CardViewTextItemPipeProperty[];
|
pipes?: CardViewTextItemPipeProperty[];
|
||||||
|
clickCallBack?: any;
|
||||||
}
|
}
|
||||||
|
@@ -24,11 +24,13 @@ export class CardViewTextItemModel extends CardViewBaseItemModel implements Card
|
|||||||
type: string = 'text';
|
type: string = 'text';
|
||||||
multiline?: boolean;
|
multiline?: boolean;
|
||||||
pipes?: CardViewTextItemPipeProperty[];
|
pipes?: CardViewTextItemPipeProperty[];
|
||||||
|
clickCallBack?: any;
|
||||||
|
|
||||||
constructor(cardViewTextItemProperties: CardViewTextItemProperties) {
|
constructor(cardViewTextItemProperties: CardViewTextItemProperties) {
|
||||||
super(cardViewTextItemProperties);
|
super(cardViewTextItemProperties);
|
||||||
this.multiline = !!cardViewTextItemProperties.multiline ;
|
this.multiline = !!cardViewTextItemProperties.multiline;
|
||||||
this.pipes = cardViewTextItemProperties.pipes || [];
|
this.pipes = cardViewTextItemProperties.pipes || [];
|
||||||
|
this.clickCallBack = cardViewTextItemProperties.clickCallBack ? cardViewTextItemProperties.clickCallBack : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
get displayValue() {
|
get displayValue() {
|
||||||
|
Reference in New Issue
Block a user