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

ACS-8610: cleanup demo shell protractor tests (#10148)

Browse Source
This commit is contained in:
Denys Vuika
2024-09-10 08:36:42 -04:00
committed by GitHub
parent a754976ad9
commit f1208d45c3
402 changed files with 180 additions and 45538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
docs/tutorials/content-metadata-component.md
View File

@@ -3,15 +3,18 @@ Title: Content metadata component
Level: Advanced
---
# Content metadata component
# Content Metadata Component
In this tutorial you will learn how to work with the [`ContentMetadataComponent`](../../lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts).
In this tutorial you will learn how to work with the `ContentMetadataComponent`.
This component is used to render the standard and custom metadata of generic content item (called a _node_) stored in Alfresco Content Services. With the usual approach "learning by doing", you will see here some practical examples you might find useful in your own applicatioin. As a starting point, we will use and customize the [Alfresco Content App](https://github.com/Alfresco/alfresco-content-app).
This component is used to render the standard and custom metadata of generic content item (called a _node_) stored in Alfresco Content Services.
With the usual approach "learning by doing", you will see here some practical examples you might find useful in your own application.
## About the `ContentMetadataComponent`
As a starting point, we will use and customize the [Alfresco Content App](https://github.com/Alfresco/alfresco-content-app).
As described in the [`ContentMetadataComponent`](../../lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts) documentation, the `adf-content-metadata-card` tag has some useful attributes, included the `preset` attribute, which is used to point to a collection of aspects/properties to render.
## About the ContentMetadataComponent
As described in the `ContentMetadataComponent` documentation, the `adf-content-metadata-card` tag has some useful attributes, included the `preset` attribute, which is used to point to a collection of aspects/properties to render.
Below, you can see the `preset` value requesting to render all the available aspects/properties:
@@ -34,28 +37,31 @@ As another example, you can see the `preset` value requesting to render all the
All the `preset` configurations are defined in one single configuration file named `app.config.json`, stored in the `src` folder of the project. The `app.config.json` file contains all the configurations of the ADF application, including a section named `content-metadata`, which is used to store the `presets`. The following JSON excerpt gives an example of configuration for the `preset` named `custom`:
```json
"content-metadata": {
"presets": {
"custom": [
{
"title": "APP.CONTENT_METADATA.EXIF_GROUP_TITLE",
"items": [
{
"aspect": "exif:exif",
"properties": [
"exif:pixelXDimension",
"exif:pixelYDimension",
...
]
}
]
}
]
{
"content-metadata": {
"presets": {
"custom": [
{
"title": "APP.CONTENT_METADATA.EXIF_GROUP_TITLE",
"items": [
{
"aspect": "exif:exif",
"properties": [
"exif:pixelXDimension",
"exif:pixelYDimension"
]
}
]
}
]
}
}
},
}
```
This configuration will show all the listed properties prefixed with `exif:*` in a group titled with the value of the variable `APP.CONTENT_METADATA.EXIF_GROUP_TITLE` for the aspect `exif:exif`. Since this aspect is not related to the node, the component will simply ignore the rendering and nothing will be displayed for these properties. In other words: the aspects to be displayed are calculated as an intersection of the preset's aspects and the aspects related to the node.
This configuration will show all the listed properties prefixed with `exif:*` in a group titled with the value of the variable `APP.CONTENT_METADATA.EXIF_GROUP_TITLE` for the aspect `exif:exif`.
Since this aspect is not related to the node, the component will simply ignore the rendering and nothing will be displayed for these properties.
In other words: the aspects to be displayed are calculated as an intersection of the preset aspects and the aspects related to the node.
## Adding and using a new `preset` configuration
@@ -63,46 +69,49 @@ In this example we will add a new preset configuration and see how it looks in t
### Adding a new `preset` configuration
To add a new `preset` configuration, edit the `src/app.config.json` file and locate the `content-metadata` section. Then, append the following JSON to the `presets` content and save the file:
To add a new `preset` configuration, edit the `src/app.config.json` file and locate the `content-metadata` section.
Then, append the following JSON to the `presets` content and save the file:
```json
...,
"content-metadata": {
"presets": {
"custom": [...],
"my-preset": [
{
"title": "This is my preset",
"items": [
{
"aspect": "st:siteContainer",
"properties": ["*"]
}
]
}
]
{
"content-metadata": {
"presets": {
"custom": [],
"my-preset": [
{
"title": "This is my preset",
"items": [
{
"aspect": "st:siteContainer",
"properties": [
"*"
]
}
]
}
]
}
}
},
}
```
**Note:** As an alternative to `"properties": ["*"]` (which matches all the properties of the `st:siteContainer` aspect), you can use `"properties": ["st:componentId"]`, which will render one property only.
### Using the `my-preset` configuration
Now that the `my-preset` configuration is defined, let's use it in a view of the ADF application. As an example, let's edit the files view, stored in the `src/app/files` folder. Specifically, let's change the [`files.component`](../../demo-shell/src/app/components/files/files.component.ts)`.html` file as follows:
Now that the `my-preset` configuration is defined, let's use it in a view of the ADF application
```html
<adf-content-metadata-card
...
[preset]="'my-preset'">
</adf-content-metadata-card>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| readOnly | `boolean` | false | (optional) This flag sets the metadata in read only mode preventing changes. |
| Name | Type | Default value | Description |
|----------|-----------|---------------|------------------------------------------------------------------------------|
| readOnly | `boolean` | false | (optional) This flag sets the metadata in read only mode preventing changes. |
### Viewing the result

107
docs/tutorials/working-with-nodes-api-service.md
View File

@@ -43,8 +43,10 @@ if (node.isFile) {
Now add the `myOnNodeDoubleClick` method as described below and save the file:
```ts
myOnNodeDoubleClick(nodeId) {
console.log("You ckicked on the node '" + nodeId + "'.");
class MyComponent {
myOnNodeDoubleClick(nodeId) {
console.log("You ckicked on the node '" + nodeId + "'.");
}
}
```
@@ -60,7 +62,7 @@ The Alfresco Example Content app is now set up to demonstrate the usage of the [
For a first look at the [`NodesApiService`](../core/services/nodes-api.service.md), let's check the `FileComponent` component stored in
`src/app/components/files/files.component.ts`. In the source code, you can see the `nodesApi`
property that represents the [`NodesApiService`](../core/services/nodes-api.service.md) in the [`FilesComponent`](../../demo-shell/src/app/components/files/files.component.ts). See the `fetchNode` and
property that represents the [`NodesApiService`](../core/services/nodes-api.service.md). See the `fetchNode` and
`fetchNodes` methods for some very basic examples.
## About the NodesApiService
@@ -81,37 +83,40 @@ You "subscribe" to the asynchronous messaging using the following syntax:
```ts
this.nodesApi.getNode(nodeId).subscribe(
(node) => { ... },
error => { ... }
(node) => { /*...*/ },
error => { /*...*/ }
);
```
### MinimalNode
All the methods that manage content nodes return an [`Observable`](http://reactivex.io/documentation/observable.html) of the [`MinimalNode`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md)
class. [`MinimalNode`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) is used to represent the node's content. See the
[official documentation](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md)
for further details.
All the methods that manage content nodes return an `Observable` of the `MinimalNode`class.
The `MinimalNode` is used to represent the node's content.
See the [official documentation](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeMinimalEntry.md) for further details.
### NodePaging
When a method returns a list of nodes rather than a single node, it usually returns an [`Observable`](http://reactivex.io/documentation/observable.html) of the [`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/NodePaging.md) class. See the
[`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/NodePaging.md)
docs for further details.
When a method returns a list of nodes rather than a single node, it usually returns an `Observable` of the `NodePaging` class.
See the [`NodePaging`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/NodePaging.md) docs for further details.
## Retrieving info and metadata from a node
As a first example of the usage of the [`NodesApiService`](../core/services/nodes-api.service.md), let's retrieve the properties of a content node using its identifier. Edit the `myOnNodeDoubleClick` method in `src/app/components/files/files.component.ts`, as shown below:
```ts
myOnNodeDoubleClick(nodeId) {
this.nodesApi.getNode(nodeId)
.subscribe(
(node) => {
console.log(node.properties);
},
error => { console.log("Ouch, an error happened!"); }
);
class MyComponent {
myOnNodeDoubleClick(nodeId) {
this.nodesApi.getNode(nodeId)
.subscribe(
(node) => {
console.log(node.properties);
},
error => {
console.log("Ouch, an error happened!");
}
);
}
}
```
@@ -138,14 +143,18 @@ to match the source code below:
Now add the `myOnFolderNodeDoubleClick` method as shown below and save the file:
```ts
myOnFolderNodeDoubleClick(nodeId) {
this.nodesApi.getNodeChildren(nodeId)
.subscribe(
(nodePaging) => {
console.log(nodePaging.list);
},
error => { console.log("Ouch, an error happened!"); }
);
class MyComponent {
myOnFolderNodeDoubleClick(nodeId) {
this.nodesApi.getNodeChildren(nodeId)
.subscribe(
(nodePaging) => {
console.log(nodePaging.list);
},
error => {
console.log("Ouch, an error happened!");
}
);
}
}
```
@@ -165,14 +174,18 @@ a subfolder of the double clicked folder and also how to delete it.
To create a subfolder, change the `myOnFolderNodeDoubleClick` method as described below and save the Typescript file.
```ts
myOnFolderNodeDoubleClick(nodeId) {
this.nodesApi.createFolder(nodeId, { "name": "My new subfolder" })
.subscribe(
(node) => {
console.log("Subfolder created with name '" + node.name + "' (id:'" + node.id + "').");
},
error => { console.log("Ouch, an error happened!"); }
);
class MyComponent {
myOnFolderNodeDoubleClick(nodeId) {
this.nodesApi.createFolder(nodeId, { "name": "My new subfolder" })
.subscribe(
(node) => {
console.log("Subfolder created with name '" + node.name + "' (id:'" + node.id + "').");
},
error => {
console.log("Ouch, an error happened!");
}
);
}
}
```
@@ -187,7 +200,7 @@ Alfresco Share client or by replacing the content of the `myOnFolderNodeDoubleCl
with:
```ts
this.navigate(nodeId);`
this.navigate(nodeId);
```
...and then saving and navigating to the `Shared` folder.
@@ -205,14 +218,18 @@ with the same name in the same parent folder, which is not permitted by Alfresco
To delete a folder, change the `myOnFolderNodeDoubleClick` method as described below and save the Typescript file.
```ts
myOnFolderNodeDoubleClick(nodeId) {
this.nodesApi.deleteNode(nodeId)
.subscribe(
success => {
alert("Node deleted! Click on a folder into the left menu.");
},
error => { console.log("Ouch, an error happened!"); }
);
class MyComponent {
myOnFolderNodeDoubleClick(nodeId) {
this.nodesApi.deleteNode(nodeId)
.subscribe(
success => {
alert("Node deleted! Click on a folder into the left menu.");
},
error => {
console.log("Ouch, an error happened!");
}
);
}
}
```