mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
Add custom data holder for CardViewItems (#3422)
This commit is contained in:
parent
2bba93d80e
commit
f543b07082
@ -20,13 +20,14 @@ 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) |
|
||||
@ -35,6 +36,7 @@ export interface CardViewItem {
|
||||
| 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)
|
||||
|
@ -26,4 +26,5 @@ export interface CardViewItemProperties {
|
||||
clickable?: boolean;
|
||||
icon?: string;
|
||||
validators?: CardViewItemValidator[];
|
||||
data?: any;
|
||||
}
|
||||
|
@ -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');
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user