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

[ADF-1986] Content matadata editing phase II. (#2796)

Browse Source 
* Aspects collection

* Fetch only those metadata aspects which are defined in the application config

* Aspect property filtering first round

* Addig wildcard support for preset, default preset fallback to wildcard, and logging

* Add white list service

* Renaming services

* ContentMetadataService and CardViewItemDispatcherComponent update

* Observables... Observables everywhere...

* Propers CardViewAspect

* Defining more interfaces

* Dummy data and expansions panels

* Fix build attempt & proper panel expansion

* Folder restructuring

* Add different type mappings

* Restructuring Card view component

* Fix build

* More ECM types supported

* Validators first phase, extraction of interfaces, world domination preparation

* Validators phase II.

* Integer and float validators

* Hide empty text items and validation message foundation

* Validation error messages for text item view, small style changes

* Update date item

* bool item component

* Datetimepicker npm module

* Datetime model

* Add mapping for datetime

* Small fixes

* Passing down preset

* Adding forgotten package.json entry

* Adding some tests for wrapper card component

* content-metadata.component tests

* Covering some edge cases, adding some tests

* Fix cardview component's test

* Add datetimepicker to demoshell

* card view component show empty values by default

* displayEmpty dependency injection

* remove table like design from cardview

* Using alfresco-js-api instead of spike

* Remove spike folder and contents

* Fix test

* Cardview updated docs

* Content metadata md

* Fix review issues

* Fix the packagr issue
This commit is contained in:
Popovics András
2018-01-11 12:31:22 +00:00
committed by Eugenio Romano
parent 994041fb23
commit 783f7f0497
106 changed files with 3816 additions and 724 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
docs/card-view.component.md
View File

@@ -38,10 +38,11 @@ Displays a configurable property list renderer.
### Properties
| Name | Type | Description |
| --- | --- | --- |
| properties | [CardViewItem](#cardviewitem)[] | (**required**) The custom view to render |
| editable | boolean | If the component editable or not |
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| properties | [CardViewItem](#cardviewitem)[] | - | (**required**) The custom view to render |
| editable | boolean | - | If the component editable or not |
| displayEmpty | boolean | true | Whether to show empty properties in non-editable mode |
## Details
@@ -75,11 +76,15 @@ export interface CardViewItem {
}
```
At the moment three models are defined out of the box:
At the moment these are the models supported:
- **CardViewTextItemModel** - *for text items*
- **CardViewMapItemModel** - *for map items*
- **CardViewDateItemModel** - *for date items*
- **CardViewDatetimeItemModel** - *for datetime items*
- **CardViewBoolItemModel** - *for bool items (checkbox)*
- **CardViewIntItemModel** - *for integers items*
- **CardViewFloatItemModel** - *for float items*
Each of them extends the abstract CardViewBaseItemModel class to add some custom functionality to the basic behaviour.
@@ -100,13 +105,39 @@ Each of them extends the abstract CardViewBaseItemModel class to add some custom
clickable: true
}),
new CardViewDateItemModel({
label: 'Birth of date',
label: 'Date of birth',
value: someDate,
key: 'birth-of-date',
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
}),
...
]
```
@@ -162,7 +193,7 @@ const mapItemProperty = new CardViewMapItemModel(options);
| --- | --- | --- | --- |
| label* | string | --- | The label to render |
| value* | Map | --- | A map that contains the key value pairs |
| key* | string | --- | the key of the property. Have an important role when editing the property. |
| key* | string | --- | the key of the property. |
| default | any | --- | The default value to render in case the value is empty |
| displayValue* | string | --- | The value to render |
| clickable | boolean | false | Whether the property clickable or not |
@@ -179,12 +210,81 @@ const dateItemProperty = new CardViewDateItemModel(options);
| --- | --- | --- | --- |
| label* | string | --- | The label to render |
| value* | any | --- | The original value |
| key* | string | --- | the key of the property. Have an important role when editing the property. |
| key* | string | --- | the key of the property. |
| default | any | --- | The default value to render in case the value is empty |
| displayValue* | string | --- | The value to render |
| displayValue* | any | --- | The value to render |
| editable | boolean | false | Whether the property editable or not |
| format | boolean | "MMM DD YYYY" | any format that momentjs accepts |
#### Card Datetime Item
CardViewDatetimeItemModel is a property type for datetime properties.
```js
const datetimeItemProperty = new CardViewDatetimeItemModel(options);
```
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| label* | string | --- | The label to render |
| value* | any | --- | The original value |
| key* | string | --- | the key of the property. |
| default | any | any | The default value to render in case the value is empty |
| displayValue* | string | --- | The value to render |
| editable | boolean | false | Whether the property editable or not |
| format | boolean | "MMM DD YYYY HH:mm" | any format that momentjs accepts |
#### Card Bool Item
CardViewBoolItemModel is a property type for boolean properties.
```js
const boolItemProperty = new CardViewBoolItemModel(options);
```
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| label* | string | --- | The label to render |
| value* | boolean | --- | The original value |
| key* | string | --- | the key of the property. |
| default | boolean | false | The default value to render in case the value is empty |
| displayValue* | boolean | --- | The value to render |
| editable | boolean | false | Whether the property editable or not |
#### Card Int Item
CardViewIntItemModel is a property type for integer properties.
```js
const intItemProperty = new CardViewIntItemModel(options);
```
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| label* | string | --- | The label to render |
| value* | integer | --- | The original value |
| key* | string | --- | the key of the property. |
| default | integer | --- | The default value to render in case the value is empty |
| displayValue* | integer | --- | The value to render |
| editable | boolean | false | Whether the property editable or not |
#### Card Float Item
CardViewFloatItemModel is a property type for float properties.
```js
const floatItemProperty = new CardViewFloatItemModel(options);
```
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| label* | string | --- | The label to render |
| value* | float | --- | The original value |
| key* | string | --- | the key of the property. |
| default | float | --- | The default value to render in case the value is empty |
| displayValue* | float | --- | The value to render |
| editable | boolean | false | Whether the property editable or not |
### Defining your custom card Item
Card item components are loaded dynamically, which makes you able to define your own custom component for the custom card item type.

113
docs/content-metadata.component.md Normal file
View File

@@ -0,0 +1,113 @@
# Content Metadata Card component
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
<!-- tocstop -->
<!-- markdown-toc end -->
Allows a user to display and edit metadata related to a node.
<img src="docassets/images/ContentMetadata.png" width="325">
## Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| node | MinimalNodeEntryEntity | - | (**required**) The node entity to fetch metadata about |
| displayEmpty | boolean | false | Display empty values in card view or not |
| preset | string | "*" | The metadata preset's name, which defines aspects and their properties |
## Basic Usage
The component shows metadata related to the given node. The component uses the card view component to render the properties of metadata aspects.
The different aspects and their properties to be shown can be configured as application config preset, for details about it see the related section below. By default the component only shows the basic properties of the node. Clicking on the pencil icon at the bottom, renders the underlying card view component in edit mode enabling to edit and update the metadata properties.
```html
<adf-content-metadata-card
[displayEmpty]="false"
[preset]="'*'"
[node]="node">
</adf-content-metadata-card>
```
## Application config presets
In the application config file you can define different presets for the metadata component or override the default preset. The **default** preset is "*" if not set, meaning the component will display every aspects and properties of the nodes without filtering. One can think about presets as **whitelist filters** for the content metadata component.
Beside the default preset you can define as many presets as you want, if you'd like to use different metadata components with different presets.
To understand presets better, you can have a look at on the following different example configurations.
### Mimicking the default "default" preset
If you don't have any preset configured manually in you application config, this would be equivalent as if you had the application config as defined below:
```json
...
"content-metadata": {
"presets": {
"default": "*"
}
}
...
```
### Whitelisting only a few aspects in the default preset
If you want to restrict to only a few aspects (e.g.: exif, your-custom-aspect), you have to use the name of that particular aspect to be able to whitelist it. In case of exif aspect this is "exif:exif".
```json
...
"content-metadata": {
"presets": {
"default": {
"custom:aspect": "*",
"exif:exif": "*"
}
}
}
...
```
### Whitelisting only a few properties of a few aspects in the default preset
If you want to filter more, you can do this on property level also. For this, you have to list the names of whitelisted aspect properties in an array of strings. Again, for identifying a property, you have to use its name.
```json
...
"content-metadata": {
"presets": {
"default": {
"custom:aspect": "*",
"exif:exif": [ "exif:width", "exif:height"]
}
}
}
...
```
### Whitelisting only a few properties of a few aspects in a custom preset
And finally, you can create any custom aspect following the same rules.
```json
...
"content-metadata": {
"presets": {
"default": "*",
"kitten-images": {
"custom:aspect": "*",
"exif:exif": [ "exif:width", "exif:height"]
}
}
}
...
```
## What happens when there is a whitelisted aspect in the config but the given node doesn't relate to that aspect
Nothing, this aspect (as it is not related to the node) will be simply ignored and not be displayed. The aspects to be displayed are calculated as an intersection of the preset's aspects and the aspects related to the node.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
<!-- seealso end -->

BIN
docs/docassets/images/ContentMetadata.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB