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

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

@ -20,21 +20,23 @@ export interface CardViewItem {
displayValue: string; displayValue: string;
editable?: boolean; editable?: boolean;
icon?: string; icon?: string;
data?: any;
} }
``` ```
### Properties ### Properties
| Name | Type | Default | Description | | Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- | | ------------ | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| label | string | "" | Item label | | label | string | "" | Item label |
| value | any | | The original data value for the item | | value | any | | The original data value for the item |
| key | string | "" | Identifying key (important when editing the item) | | key | string | "" | Identifying key (important when editing the item) |
| default | any | | The default value to display if the value is empty | | default | any | | The default value to display if the value is empty |
| 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 item is clickable | | clickable | boolean | false | Toggles whether the item is clickable |
| icon | string | | The material icon to show beside clickable items | | 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 ## Details
@ -55,8 +57,7 @@ Picard's birthday (47457.1):
```ts ```ts
import { CardViewBaseItemModel, CardViewItem, DynamicComponentModel } from '@alfresco/adf-core'; import { CardViewBaseItemModel, CardViewItem, DynamicComponentModel } from '@alfresco/adf-core';
export class CardViewStarDateItemModel extends CardViewBaseItemModel implements export class CardViewStarDateItemModel extends CardViewBaseItemModel implements CardViewItem, DynamicComponentModel {
CardViewItem, DynamicComponentModel {
type: string = 'star-date'; type: string = 'star-date';
get displayValue() { get displayValue() {
@ -99,7 +100,7 @@ Picard's birthday (47457.1):
``` ```
See the See the
[Card View Text Item component source](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts) [Card View Text Item component source](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.ts)
or the or the
[Card View Date Item component source](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts) for examples of how to make the field [Card View Date Item component source](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/card-view/components/card-view-dateitem/card-view-dateitem.component.ts) for examples of how to make the field
editable. editable.
@ -146,5 +147,5 @@ Picard's birthday (47457.1):
## See also ## See also
- [Card View component](card-view.component.md) * [Card View component](card-view.component.md)
- [Card Item Types service](card-item-types.service.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; clickable?: boolean;
icon?: string; icon?: string;
validators?: CardViewItemValidator[]; 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 {} class CarViewCustomItemModel extends CardViewBaseItemModel {}
describe('CardViewBaseItemModel', () => { describe('CardViewBaseItemModel', () => {
let properties: CardViewItemProperties; let properties: CardViewItemProperties;
beforeEach(() => { 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', () => { it('should be true when no validators are set', () => {
const itemModel = new CarViewCustomItemModel(properties); const itemModel = new CarViewCustomItemModel(properties);
@ -48,7 +61,7 @@ describe('CardViewBaseItemModel', () => {
const validator2: CardViewItemValidator = { isValid: () => true, message: 'validator 2' }; const validator2: CardViewItemValidator = { isValid: () => true, message: 'validator 2' };
spyOn(validator1, 'isValid'); spyOn(validator1, 'isValid');
spyOn(validator2, 'isValid'); spyOn(validator2, 'isValid');
properties.validators = [ validator1, validator2 ]; properties.validators = [validator1, validator2];
const itemModel = new CarViewCustomItemModel(properties); const itemModel = new CarViewCustomItemModel(properties);
itemModel.isValid('test-against-this'); itemModel.isValid('test-against-this');
@ -57,10 +70,10 @@ describe('CardViewBaseItemModel', () => {
expect(validator2.isValid).toHaveBeenCalledWith('test-against-this'); 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 validator1: CardViewItemValidator = { isValid: () => true, message: 'validator 1' };
const validator2: CardViewItemValidator = { isValid: () => true, message: 'validator 2' }; const validator2: CardViewItemValidator = { isValid: () => true, message: 'validator 2' };
properties.validators = [ validator1, validator2 ]; properties.validators = [validator1, validator2];
const itemModel = new CarViewCustomItemModel(properties); const itemModel = new CarViewCustomItemModel(properties);
const isValid = itemModel.isValid('test-against-this'); const isValid = itemModel.isValid('test-against-this');
@ -69,11 +82,11 @@ describe('CardViewBaseItemModel', () => {
expect(itemModel.getValidationErrors('test-against-this')).toEqual([]); 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 validator1: CardViewItemValidator = { isValid: () => false, message: 'validator 1' };
const validator2: CardViewItemValidator = { isValid: () => true, message: 'validator 2' }; const validator2: CardViewItemValidator = { isValid: () => true, message: 'validator 2' };
const validator3: CardViewItemValidator = { isValid: () => false, message: 'validator 3' }; const validator3: CardViewItemValidator = { isValid: () => false, message: 'validator 3' };
properties.validators = [ validator1, validator2, validator3 ]; properties.validators = [validator1, validator2, validator3];
const itemModel = new CarViewCustomItemModel(properties); const itemModel = new CarViewCustomItemModel(properties);
const isValid = itemModel.isValid('test-against-this'); 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; clickable: boolean;
icon?: string; icon?: string;
validators?: CardViewItemValidator[]; validators?: CardViewItemValidator[];
data?: any;
constructor(obj: CardViewItemProperties) { constructor(obj: CardViewItemProperties) {
this.label = obj.label || ''; this.label = obj.label || '';
@ -36,6 +37,7 @@ export abstract class CardViewBaseItemModel {
this.clickable = !!obj.clickable; this.clickable = !!obj.clickable;
this.icon = obj.icon || ''; this.icon = obj.icon || '';
this.validators = obj.validators || []; this.validators = obj.validators || [];
this.data = obj.data || null;
} }
isEmpty(): boolean { isEmpty(): boolean {
@ -48,7 +50,7 @@ export abstract class CardViewBaseItemModel {
} }
return this.validators return this.validators
.map((validator) => validator.isValid(newValue)) .map(validator => validator.isValid(newValue))
.reduce((isValidUntilNow, isValid) => isValidUntilNow && isValid, true); .reduce((isValidUntilNow, isValid) => isValidUntilNow && isValid, true);
} }
@ -57,8 +59,6 @@ export abstract class CardViewBaseItemModel {
return []; return [];
} }
return this.validators return this.validators.filter(validator => !validator.isValid(value)).map(validator => validator.message);
.filter((validator) => !validator.isValid(value))
.map((validator) => validator.message);
} }
} }