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

Add custom data holder for CardViewItems (#3422)

Browse Source
This commit is contained in:
Popovics András 2018-06-01 12:37:02 +01:00 committed by Eugenio Romano
parent 2bba93d80e
commit f543b07082
4 changed files with 41 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
docs/core/card-view-item.interface.md
View File

@ -20,21 +20,23 @@ export interface CardViewItem {
displayValue: string;
editable?: boolean;
icon?: string;
data?: any;
}
```
### Properties
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| label | string | "" | Item label |
| value | any | | The original data value for the item |
| key | string | "" | Identifying key (important when editing the item) |
| default | any | | The default value to display if the value is empty |
| displayValue | string | "" | The value to display |
| editable | boolean | false | Toggles whether the item is editable |
| clickable | boolean | false | Toggles whether the item is clickable |
| icon | string | | The material icon to show beside clickable items |
| Name | Type | Default | Description |
| ------------ | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| label | string | "" | Item label |
| value | any | | The original data value for the item |
| key | string | "" | Identifying key (important when editing the item) |
| default | any | | The default value to display if the value is empty |
| displayValue | string | "" | The value to display |
| editable | boolean | false | Toggles whether the item is editable |
| clickable | boolean | false | Toggles whether the item is clickable |
| icon | string | | The material icon to show beside clickable items |
| data | any | null | Any custom data which is needed to be provided and stored in the model for any reason. During an update or a click event this can be a container of any custom data which can be useful for 3rd party codes. |
## Details
@ -55,8 +57,7 @@ Picard's birthday (47457.1):
```ts
import { CardViewBaseItemModel, CardViewItem, DynamicComponentModel } from '@alfresco/adf-core';
export class CardViewStarDateItemModel extends CardViewBaseItemModel implements
CardViewItem, DynamicComponentModel {
export class CardViewStarDateItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
type: string = 'star-date';
get displayValue() {
@ -146,5 +147,5 @@ Picard's birthday (47457.1):
## See also
- [Card View component](card-view.component.md)
- [Card Item Types service](card-item-types.service.md)
* [Card View component](card-view.component.md)
* [Card Item Types service](card-item-types.service.md)

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

@ -26,4 +26,5 @@ export interface CardViewItemProperties {
clickable?: boolean;
icon?: string;
validators?: CardViewItemValidator[];
data?: any;
}

27
lib/core/card-view/models/card-view-baseitem.model.spec.ts
View File

@ -22,7 +22,6 @@ import { CardViewItemValidator } from '../interfaces/card-view.interfaces';
class CarViewCustomItemModel extends CardViewBaseItemModel {}
describe('CardViewBaseItemModel', () => {
let properties: CardViewItemProperties;
beforeEach(() => {
@ -33,8 +32,22 @@ describe('CardViewBaseItemModel', () => {
};
});
describe('isValid & Validation errors', () => {
describe('CardViewItemProperties', () => {
it('data should be null if no data is set', () => {
const itemModel = new CarViewCustomItemModel(properties);
expect(itemModel.data).toBe(null);
});
it('data should be stored if one data is set', () => {
properties.data = { name: 'ryuk', lifeform: 'shinigami' };
const itemModel = new CarViewCustomItemModel(properties);
expect(itemModel.data).toBe(properties.data);
});
});
describe('isValid & Validation errors', () => {
it('should be true when no validators are set', () => {
const itemModel = new CarViewCustomItemModel(properties);
@ -48,7 +61,7 @@ describe('CardViewBaseItemModel', () => {
const validator2: CardViewItemValidator = { isValid: () => true, message: 'validator 2' };
spyOn(validator1, 'isValid');
spyOn(validator2, 'isValid');
properties.validators = [ validator1, validator2 ];
properties.validators = [validator1, validator2];
const itemModel = new CarViewCustomItemModel(properties);
itemModel.isValid('test-against-this');
@ -57,10 +70,10 @@ describe('CardViewBaseItemModel', () => {
expect(validator2.isValid).toHaveBeenCalledWith('test-against-this');
});
it('should return the registered validators\' common decision (case true)', () => {
it("should return the registered validators' common decision (case true)", () => {
const validator1: CardViewItemValidator = { isValid: () => true, message: 'validator 1' };
const validator2: CardViewItemValidator = { isValid: () => true, message: 'validator 2' };
properties.validators = [ validator1, validator2 ];
properties.validators = [validator1, validator2];
const itemModel = new CarViewCustomItemModel(properties);
const isValid = itemModel.isValid('test-against-this');
@ -69,11 +82,11 @@ describe('CardViewBaseItemModel', () => {
expect(itemModel.getValidationErrors('test-against-this')).toEqual([]);
});
it('should return the registered validators\' common decision (case false)', () => {
it("should return the registered validators' common decision (case false)", () => {
const validator1: CardViewItemValidator = { isValid: () => false, message: 'validator 1' };
const validator2: CardViewItemValidator = { isValid: () => true, message: 'validator 2' };
const validator3: CardViewItemValidator = { isValid: () => false, message: 'validator 3' };
properties.validators = [ validator1, validator2, validator3 ];
properties.validators = [validator1, validator2, validator3];
const itemModel = new CarViewCustomItemModel(properties);
const isValid = itemModel.isValid('test-against-this');

8
lib/core/card-view/models/card-view-baseitem.model.ts
View File

@ -26,6 +26,7 @@ export abstract class CardViewBaseItemModel {
clickable: boolean;
icon?: string;
validators?: CardViewItemValidator[];
data?: any;
constructor(obj: CardViewItemProperties) {
this.label = obj.label || '';
@ -36,6 +37,7 @@ export abstract class CardViewBaseItemModel {
this.clickable = !!obj.clickable;
this.icon = obj.icon || '';
this.validators = obj.validators || [];
this.data = obj.data || null;
}
isEmpty(): boolean {
@ -48,7 +50,7 @@ export abstract class CardViewBaseItemModel {
}
return this.validators
.map((validator) => validator.isValid(newValue))
.map(validator => validator.isValid(newValue))
.reduce((isValidUntilNow, isValid) => isValidUntilNow && isValid, true);
}
@ -57,8 +59,6 @@ export abstract class CardViewBaseItemModel {
return [];
}
return this.validators
.filter((validator) => !validator.isValid(value))
.map((validator) => validator.message);
return this.validators.filter(validator => !validator.isValid(value)).map(validator => validator.message);
}
}