mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-12 17:04:57 +00:00
258f01803c
* [MNT-24496] ADW Integration with APS Improvements - Re-assign Tasks * [MNT-24496] code improvements * [MNT-24496] remove duplications * [MNT-24496] add unit test * [MNT-24496] cr fixes * [MNT-24496] empty commit [ci:force] * [MNT-24496] fix unit test * [MNT-24496] empty commit [ci:force] * [MNT-24496] cr fix * [MNT-24496] remove redundant import
378 lines
15 KiB
Markdown
378 lines
15 KiB
Markdown
---
|
|
Title: Card View component
|
|
Added: v2.0.0
|
|
Status: Active
|
|
Last reviewed: 2024-10-29
|
|
---
|
|
|
|
# [Card View component](../../../lib/core/src/lib/card-view/components/card-view/card-view.component.ts "Defined in card-view.component.ts")
|
|
|
|
Displays a configurable property list renderer.
|
|
|
|
|
|
|
|
## Basic Usage
|
|
|
|
Defining properties from HTML:
|
|
|
|
```html
|
|
<adf-card-view
|
|
[properties]="[{label: 'My Label', value: 'My value'}]"
|
|
[editable]="false">
|
|
</adf-card-view>
|
|
```
|
|
|
|
Defining properties from Typescript:
|
|
|
|
```ts
|
|
this.properties = [
|
|
new CardViewTextItemModel({
|
|
label: 'Name',
|
|
value: 'Spock',
|
|
key: 'name',
|
|
default: 'default bar' ,
|
|
multiline: false,
|
|
icon: 'icon',
|
|
clickCallBack : ()=>{ myClickImplementation()}
|
|
}),
|
|
new CardViewMapItemModel({
|
|
label: 'My map',
|
|
value: new Map([['999', 'My Value']]),
|
|
key: 'map',
|
|
default: 'default map value' ,
|
|
clickable: true,
|
|
}),
|
|
new CardViewDateItemModel({
|
|
label: 'Date of birth',
|
|
value: someDate,
|
|
key: 'date-of-birth',
|
|
default: new Date(),
|
|
format: '<any format that momentjs accepts>',
|
|
editable: true
|
|
}),
|
|
new CardViewDatetimeItemModel({
|
|
label: 'Datetime of birth',
|
|
value: someDatetime,
|
|
key: 'datetime-of-birth',
|
|
default: new Date(),
|
|
format: '<any format that momentjs accepts>',
|
|
editable: true
|
|
}),
|
|
new CardViewBoolItemModel({
|
|
label: 'Vulcanian',
|
|
value: true,
|
|
key: 'vulcanian',
|
|
default: false
|
|
}),
|
|
new CardViewIntItemModel({
|
|
label: 'Intelligence',
|
|
value: 213,
|
|
key: 'intelligence',
|
|
default: 1
|
|
}),
|
|
new CardViewFloatItemModel({
|
|
label: 'Mental stability',
|
|
value: 9.9,
|
|
key: 'mental-stability',
|
|
default: 0.0
|
|
}),
|
|
new CardViewKeyValuePairsItemModel({
|
|
label: 'Variables',
|
|
value: [],
|
|
key: 'key-value-pairs'
|
|
}),
|
|
new CardViewSelectItemModel({
|
|
label: 'Select box',
|
|
value: 'one',
|
|
options$: of([{ key: 'one', label: 'One' }, { key: 'two', label: 'Two' }]),
|
|
key: 'select'
|
|
}),
|
|
new CardViewArrayItemModel({
|
|
label: 'Array of items',
|
|
value: '',
|
|
items$: of([
|
|
{ icon: 'person', value: 'One' }, { icon: 'person', value: 'Two' },
|
|
{ icon: 'person', value: 'Three' }, { icon: 'person', value: 'Four' }
|
|
]),
|
|
key: 'array',
|
|
default: 'Empty',
|
|
noOfItemsToDisplay: 2
|
|
})
|
|
...
|
|
]
|
|
```
|
|
|
|
## Class members
|
|
|
|
### Properties
|
|
|
|
| Name | Type | Default value | Description |
|
|
| ---- | ---- | ------------- | ----------- |
|
|
| copyToClipboardAction | `boolean` | true | Toggles whether or not to enable copy to clipboard action. |
|
|
| displayClearAction | `boolean` | true | Toggles whether or not to display clear action. |
|
|
| displayEmpty | `boolean` | true | Toggles whether or not to show empty items in non-editable mode. |
|
|
| displayNoneOption | `boolean` | true | Toggles whether or not to display none option. |
|
|
| editable | `boolean` | | Toggles whether or not the items can be edited. |
|
|
| multiValueSeparator | `string` | DEFAULT_SEPARATOR | String separator between multi-value property items. |
|
|
| properties | [`CardViewItem`](../../../lib/core/src/lib/card-view/interfaces/card-view-item.interface.ts)`[]` | | (**required**) Items to show in the card view. |
|
|
| useChipsForMultiValueProperty | `boolean` | true | Toggles whether or not to enable chips for multivalued properties. |
|
|
|
|
## Details
|
|
|
|
You define the property list, the [`CardViewComponent`](../../core/components/card-view.component.md) does the rest. Each property represents a card view item (a row) in the [card view component](card-view.component.md). The following item types are available by default:
|
|
|
|
- [**CardViewTextItemModel**](#card-text-item) - _for text items_
|
|
- [**CardViewMapItemModel**](#card-map-item) - _for map items_
|
|
- [**CardViewDateItemModel**](#card-date-item) - _for date items_
|
|
- [**CardViewDatetimeItemModel**](#card-datetime-item) - _for datetime items_
|
|
- [**CardViewBoolItemModel**](#card-bool-item) - _for bool items (checkbox)_
|
|
- [**CardViewIntItemModel**](#card-int-item) - _for integer items_
|
|
- [**CardViewFloatItemModel**](#card-float-item) - _for float items_
|
|
- [**CardViewKeyValuePairsItemModel**](#card-key-value-pairs-item) - _for key-value-pairs items_
|
|
- [**CardViewSelectItemModel**](#card-select-item) - _for select items_
|
|
- [**CardViewArrayItemModel**](#card-array-item) - _for array items_
|
|
|
|
Each of these types implements the [Card View Item interface](../interfaces/card-view-item.interface.md):
|
|
|
|
```ts
|
|
export interface CardViewItem {
|
|
label: string;
|
|
value: any;
|
|
key: string;
|
|
default?: any;
|
|
type: string;
|
|
displayValue: string;
|
|
editable?: boolean;
|
|
icon?: string;
|
|
}
|
|
```
|
|
|
|
You can also define your own item types. See the
|
|
[Card View Item interface](../interfaces/card-view-item.interface.md) page for details of how to do
|
|
this.
|
|
|
|
### Editing
|
|
|
|
You can optionally set up the card view so that its properties can be edited. You can control
|
|
the editing of properties at two levels:
|
|
|
|
- **Global level** - _via the editable parameter of the card-view.component_
|
|
- **[`Property`](../../../lib/content-services/src/lib/content-metadata/interfaces/property.interface.ts) level** - _in each property via the editable attribute_
|
|
|
|
If you set the global editable parameter to false, no properties can be edited regardless of their
|
|
individual `editable` settings.
|
|
|
|
See the [Card View Update service](../services/card-view-update.service.md)
|
|
page for details of how to use the service to respond to clicks and edits in a card view.
|
|
You can use this, for example, to save the edits within your application or to highlight a
|
|
clicked item.
|
|
|
|
### Defining properties
|
|
|
|
The `properties` array contains instances of models that represent the layout of the Card View.
|
|
The ordering of the models in the array matches the ordering of items in the view. Each of the
|
|
models extends the abstract [`CardViewBaseItemModel`](../../../lib/core/src/lib/card-view/models/card-view-baseitem.model.ts) class to add functionality for
|
|
specific data types, as described below.
|
|
|
|
#### Card Text Item
|
|
|
|
[`CardViewTextItemModel`](../../../lib/core/src/lib/card-view/models/card-view-textitem.model.ts) is a property type for text properties.
|
|
|
|
```ts
|
|
const textItemProperty = new CardViewTextItemModel(options);
|
|
```
|
|
|
|
| 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 property responds to clicks |
|
|
| clickableCallBack | function | null | Function to execute when click the element |
|
|
| copyToClipboardAction | `boolean` | true | Toggles whether or not to enable copy to clipboard action. |
|
|
| useChipsForMultiValueProperty | `boolean` | true | Toggles whether or not to enable chips for multivalued properties. |
|
|
| multiValueSeparator | `string` | ',' | String separator between multi-value property items. |
|
|
| icon | string | | The material icon to show beside the item if it is clickable |
|
|
| multiline | boolean | false | Single or multiline text |
|
|
| pipes | [`CardViewTextItemPipeProperty`](../../../lib/core/src/lib/card-view/interfaces/card-view-textitem-pipe-property.interface.ts)\[] | \[] | Pipes to be applied to the text before display |
|
|
|
|
##### Using pipes with a Card Text Item
|
|
|
|
You can use pipes for text items in almost the same way as you would do it in an HTML template.
|
|
You can provide an array of pipes with additional pipe parameters using the `pipes` property:
|
|
|
|
```ts
|
|
const myWonderfulPipe1: PipeTransform = <whatever PipeTransform implmentation>;
|
|
const myWonderfulPipe2: PipeTransform = <whatever PipeTransform implmentation>;
|
|
|
|
new CardViewTextItemModel({
|
|
label: 'some label',
|
|
value: someValue,
|
|
key: 'some-key',
|
|
pipes: [
|
|
{ pipe: myWonderfulPipe1, params: ['first-param', 'second-param'] },
|
|
{ pipe: myWonderfulPipe2, params: ['first-param', 'second-param'] }
|
|
]
|
|
});
|
|
```
|
|
|
|
#### Card Map Item
|
|
|
|
[`CardViewMapItemModel`](../../../lib/core/src/lib/card-view/models/card-view-mapitem.model.ts) is a property type for map properties.
|
|
|
|
```ts
|
|
const mapItemProperty = new CardViewMapItemModel(options);
|
|
```
|
|
|
|
| Name | Type | Default | Description |
|
|
| ---- | ---- | ------- | ----------- |
|
|
| label\* | string | | Item label |
|
|
| value\* | Map | | A map that contains the key value pairs |
|
|
| 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 |
|
|
| clickable | boolean | false | Toggles whether the property responds to clicks |
|
|
|
|
#### Card Date Item
|
|
|
|
[`CardViewDateItemModel`](../../../lib/core/src/lib/card-view/models/card-view-dateitem.model.ts) is a property type for date properties.
|
|
|
|
```ts
|
|
const dateItemProperty = new CardViewDateItemModel(options);
|
|
```
|
|
|
|
| Name | Type | Default | Description |
|
|
| ---- | ---- | ------- | ----------- |
|
|
| label\* | string | | Item label |
|
|
| value\* | any | | The original data value for the item |
|
|
| copyToClipboardAction | `boolean` | true | Toggles whether or not to enable copy to clipboard action. |
|
|
| key\* | string | | Identifying key (important when editing the item) |
|
|
| default | any | | The default value to display if the value is empty |
|
|
| displayValue\* | any | | The value to display |
|
|
| editable | boolean | false | Toggles whether the item is editable |
|
|
| format | string | "MMM DD YYYY" | Any date format that momentjs accepts |
|
|
|
|
#### Card Datetime Item
|
|
|
|
[`CardViewDatetimeItemModel`](../../../lib/core/src/lib/card-view/models/card-view-datetimeitem.model.ts) is a property type for datetime properties.
|
|
|
|
```ts
|
|
const datetimeItemProperty = new CardViewDatetimeItemModel(options);
|
|
```
|
|
|
|
| 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 | 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 |
|
|
| format | string | "MMM DD YYYY HH:mm" | Any datetime format that momentjs accepts |
|
|
|
|
#### Card Bool Item
|
|
|
|
[`CardViewBoolItemModel`](../../../lib/core/src/lib/card-view/models/card-view-boolitem.model.ts) is a property type for boolean properties.
|
|
|
|
```ts
|
|
const boolItemProperty = new CardViewBoolItemModel(options);
|
|
```
|
|
|
|
| Name | Type | Default | Description |
|
|
| ---- | ---- | ------- | ----------- |
|
|
| label\* | string | | Item label |
|
|
| value\* | boolean | | The original data value for the item |
|
|
| key\* | string | | Identifying key (important when editing the item) |
|
|
| default | boolean | false | The default value to display if the value is empty |
|
|
| displayValue\* | boolean | | The value to display |
|
|
| editable | boolean | false | Toggles whether the item is editable |
|
|
|
|
#### Card Int Item
|
|
|
|
[`CardViewIntItemModel`](../../../lib/core/src/lib/card-view/models/card-view-intitem.model.ts) is a property type for integer properties.
|
|
|
|
```ts
|
|
const intItemProperty = new CardViewIntItemModel(options);
|
|
```
|
|
|
|
| Name | Type | Default | Description |
|
|
| ---- | ---- | ------- | ----------- |
|
|
| label\* | string | | Item label |
|
|
| value\* | integer | | The original data value for the item |
|
|
| key\* | string | | Identifying key (important when editing the item) |
|
|
| default | integer | | The default value to display if the value is empty |
|
|
| displayValue\* | integer | | The value to display |
|
|
| editable | boolean | false | Toggles whether the item is editable |
|
|
|
|
#### Card Float Item
|
|
|
|
[`CardViewFloatItemModel`](../../../lib/core/src/lib/card-view/models/card-view-floatitem.model.ts) is a property type for float properties.
|
|
|
|
```ts
|
|
const floatItemProperty = new CardViewFloatItemModel(options);
|
|
```
|
|
|
|
| Name | Type | Default | Description |
|
|
| ---- | ---- | ------- | ----------- |
|
|
| label\* | string | | Item label |
|
|
| value\* | float | | The original data value for the item |
|
|
| key\* | string | | Identifying key (important when editing the item) |
|
|
| default | float | | The default value to display if the value is empty |
|
|
| displayValue\* | float | | The value to display |
|
|
| editable | boolean | false | Toggles whether the item is editable |
|
|
|
|
#### Card Key Value Pairs Item
|
|
|
|
[`CardViewKeyValuePairsItemModel`](../../../lib/core/src/lib/card-view/models/card-view-keyvaluepairs.model.ts) is a property type for key-value properties.
|
|
|
|
```ts
|
|
const keyValuePairsItemProperty = new CardViewKeyValuePairsItemModel(options);
|
|
```
|
|
|
|
| Name | Type | Default | Description |
|
|
| ---- | ---- | ------- | ----------- |
|
|
| label\* | string | | Item label |
|
|
| key\* | string | | Identifying key (important when editing the item) |
|
|
| editable | boolean | false | Toggles whether the item is editable |
|
|
| value\* | `[{ name: '', value: '' }, ...]` | | The original data value for the item |
|
|
|
|
#### Card Select Item
|
|
|
|
[`CardViewSelectItemModel`](../../../lib/core/src/lib/card-view/models/card-view-selectitem.model.ts) is a property type for select properties.
|
|
|
|
```ts
|
|
const selectItemProperty = new CardViewSelectItemModel(options);
|
|
```
|
|
|
|
| Name | Type | Default | Description |
|
|
| ---- | ---- | ------- | ----------- |
|
|
| label\* | string | | Item label |
|
|
| key\* | string | | Identifying key (important when editing the item) |
|
|
| editable | boolean | false | Toggles whether the item is editable |
|
|
| value | string | | The original data value for the item |
|
|
| autocompleteBased | boolean | false | Indicates whether the select item should use autocomplete functionality. If set to true, the select item will provide an autocomplete input field. |
|
|
| options$\* | [`Observable`](http://reactivex.io/documentation/observable.html)<[`CardViewSelectItemOption`](../../../lib/core/src/lib/card-view/interfaces/card-view-selectitem-properties.interface.ts)\[]> | | The original data value for the item |
|
|
|
|
#### Card Array Item
|
|
|
|
[`CardViewArrayItemModel`](../../../lib/core/src/lib/card-view/models/card-view-arrayitem.model.ts) is a property type for array properties.
|
|
|
|
```ts
|
|
const arrayItemProperty = new CardViewArrayItemModel(items);
|
|
```
|
|
|
|
| Name | Type | Default | Description |
|
|
| ---- | ---- | ------- | ----------- |
|
|
| label\* | string | | Item label |
|
|
| key\* | string | | Identifying key (important when editing the item) |
|
|
| editable | boolean | false | Toggles whether the item is editable |
|
|
| value | [`Observable`](http://reactivex.io/documentation/observable.html)<[`CardViewArrayItem`](../../../lib/core/src/lib/card-view/models/card-view-arrayitem.model.ts)\[]> | | The original data value for the item |
|
|
|
|
## See also
|
|
|
|
- [Card View Update service](../services/card-view-update.service.md)
|
|
- [Card View Item interface](../interfaces/card-view-item.interface.md)
|