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-2596] Fixed inputs with incorrect names (#3166)

Browse Source 
* [ADF-2596] Updated prop script to handle names from input decorators

* [ADF-2596] Fixed inputs with accessors

* [ADF-2596] Fixed remaining inputs with wrong names

* [ADF-2596] Updated prop script to handle names from input decorators

* [ADF-2596] Fixed inputs with accessors

* [ADF-2596] Fixed remaining inputs with wrong names
This commit is contained in:
Andy Stark
2018-04-10 17:19:15 +01:00
committed by Eugenio Romano
parent a32b1b7359
commit 2a5fe7ad28
25 changed files with 386 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
docs/core/node-permission.directive.md
View File

@@ -1,36 +1,15 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-04-10
---
# Node Permission directive
Selectively disables an HTML element or Angular component
## Basic Usage
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| permission | `string` | `null` | Node permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions). |
| nodes | `MinimalNodeEntity[]` | `[]` | Nodes to check permission for. |
## Details
The `NodePermissionDirective` allows you to disable an HTML element or Angular component
by taking a collection of the `MinimalNodeEntity` instances and checking the particular permission.
The decorated element will be disabled if:
- there are no nodes in the collection
- at least one of the nodes has no expected permission
### HTML element example
The best example to show `NodePermissionDirective` in action is by binding DocumentList selection property to a toolbar button.
For example the "Delete" button should be disabled if no selection is present or if user has no rights to delete at least one node in the selection.
```html
<adf-toolbar title="toolbar example">
<button mat-icon-button
@@ -45,11 +24,54 @@ For example the "Delete" button should be disabled if no selection is present or
</adf-document-list>
```
The button will become disabled by default, and is going to change its state once user selects/unselects one or multiple documents that current user has permission to delete.
## Class members
### Properties
| Name | Type | Default value | Description |
| -- | -- | -- | -- |
| adf-nodes | `MinimalNodeEntity[]` | \[] | Nodes to check permission for. |
| adf-node-permission | `string` | null | Node permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions). |
## Details
The Node Permission directive lets you disable an HTML element or Angular component
by taking a collection of `MinimalNodeEntity` instances and checking their permissions.
The decorated element will be disabled if:
- there are no nodes in the collection
- at least one of the nodes does not have the required permission
### HTML element example
A typical use case is to bind a [Document List](../content-services/document-list.component.md)
selection property to a toolbar button. In the following example, the "Delete" button should
be disabled if no selection is present or if user does not have permission to delete at least one
node in the selection:
```html
<adf-toolbar title="toolbar example">
<button mat-icon-button
adf-node-permission="delete"
[adf-nodes]="documentList.selection">
<mat-icon>delete</mat-icon>
</button>
</adf-toolbar>
<adf-document-list #documentList ...>
...
</adf-document-list>
```
The button will be disabled by default and will change state when the user selects or deselects
one or more documents that they have permission to delete.
### Angular component example
You can apply the directive on any angular component which implements the NodePermissionSubject interface. The upload drag area component can be a good candidate, since this one implements that interface. Applying the directive on an angular component is pretty much the same as applying it on an html element.
You can add the directive to any Angular component that implements the `NodePermissionSubject`
interface (the [Upload Drag Area component](../content-services/upload-drag-area.component.md),
for example). You can also use it in much the same way as you would with an HTML element:
```html
<alfresco-upload-drag-area
@@ -61,11 +83,14 @@ You can apply the directive on any angular component which implements the NodePe
</alfresco-upload-drag-area>
```
When designing a component you want to work this directive with, you have two important things to care about.
To enable your own component to work with this directive, you need to implement the
`NodePermissionSubject` interface and also define it as an EXTENDIBLE_COMPONENT parent component,
as described in the following sections.
### Implementing the NodePermissionSubject interface
The component has to implement the NodePermissionSubject interface which basically means it has to have a boolean **disabled** property. This is the property which will be set by the directive.
The component must implement the `NodePermissionSubject` interface which means it must have a
boolean `disabled` property. This is the property that will be set by the directive:
```js
import { NodePermissionSubject } from '@alfresco/adf-core';
@@ -76,14 +101,13 @@ export class UploadDragAreaComponent implements NodePermissionSubject {
}
```
### Defining your components as an EXTENDIBLE_COMPONENT parent component
### Defining your component as an EXTENDIBLE_COMPONENT parent component
The directive will look up the component in the dependency injection tree, up to the @Host() component.
> "The host component is typically the component requesting the dependency. **But when this component is projected into a parent component, that parent component becomes the host.**"
- because of this, you have to provide your component with forward referencing as the EXTENDIBLE_COMPONENT.
- because of the emphasized second sentence you have to provide your component as a viewProvider.
The directive will look up the component in the dependency injection tree,
up to the `@Host()` component. The host component is typically the component that requests
the dependency. However, when this component is projected into a parent component, the
parent becomes the host. This means you must provide your component with forward referencing
as the `EXTENDIBLE_COMPONENT` and also provide your component as a `viewProvider`:
```js
import { EXTENDIBLE_COMPONENT } from '@alfresco/adf-core';
@@ -97,4 +121,5 @@ import { EXTENDIBLE_COMPONENT } from '@alfresco/adf-core';
export class UploadDragAreaComponent implements NodePermissionSubject { ... }
```
**Notice the usage of viewProviders (instead of providers)! This part is very important, especially if you want to use this directive on a transcluded component!**
**Note:** the usage of **viewProviders** (instead of **providers**) is very important, especially
if you want to use this directive on a transcluded component.