From f543b0708231dee2938a856c69f22951779973df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Popovics=20Andr=C3=A1s?= Date: Fri, 1 Jun 2018 12:37:02 +0100 Subject: [PATCH] Add custom data holder for CardViewItems (#3422) --- docs/core/card-view-item.interface.md | 31 ++++++++++--------- .../card-view-item-properties.interface.ts | 1 + .../models/card-view-baseitem.model.spec.ts | 27 +++++++++++----- .../models/card-view-baseitem.model.ts | 8 ++--- 4 files changed, 41 insertions(+), 26 deletions(-) diff --git a/docs/core/card-view-item.interface.md b/docs/core/card-view-item.interface.md index f7502a95c0..9ef78fca7b 100644 --- a/docs/core/card-view-item.interface.md +++ b/docs/core/card-view-item.interface.md @@ -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() { @@ -99,7 +100,7 @@ Picard's birthday (47457.1): ``` 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 [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. @@ -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) diff --git a/lib/core/card-view/interfaces/card-view-item-properties.interface.ts b/lib/core/card-view/interfaces/card-view-item-properties.interface.ts index e69afdeaf4..6c5acb0d57 100644 --- a/lib/core/card-view/interfaces/card-view-item-properties.interface.ts +++ b/lib/core/card-view/interfaces/card-view-item-properties.interface.ts @@ -26,4 +26,5 @@ export interface CardViewItemProperties { clickable?: boolean; icon?: string; validators?: CardViewItemValidator[]; + data?: any; } diff --git a/lib/core/card-view/models/card-view-baseitem.model.spec.ts b/lib/core/card-view/models/card-view-baseitem.model.spec.ts index 0ae5f559e9..1f6b7e83e3 100644 --- a/lib/core/card-view/models/card-view-baseitem.model.spec.ts +++ b/lib/core/card-view/models/card-view-baseitem.model.spec.ts @@ -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'); diff --git a/lib/core/card-view/models/card-view-baseitem.model.ts b/lib/core/card-view/models/card-view-baseitem.model.ts index 18c82af8f4..25dafb4e3e 100644 --- a/lib/core/card-view/models/card-view-baseitem.model.ts +++ b/lib/core/card-view/models/card-view-baseitem.model.ts @@ -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); } }