mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-2463] Moved doc files to subfolders (#3070)
* [ADF-2463] Moved doc files to subfolders * [ADF-2463] Fixed broken image links * [ADF-2463] Moved doc files to subfolders * [ADF-2463] Fixed broken image links
This commit is contained in:
committed by
Eugenio Romano
parent
d4780d41ce
commit
ba905acf13
100
docs/core/node-permission.directive.md
Normal file
100
docs/core/node-permission.directive.md
Normal file
@@ -0,0 +1,100 @@
|
||||
---
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
---
|
||||
# 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
|
||||
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 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.
|
||||
|
||||
### 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.
|
||||
|
||||
```html
|
||||
<alfresco-upload-drag-area
|
||||
[parentId]="..."
|
||||
[versioning]="..."
|
||||
[adf-node-permission]="'create'"
|
||||
[adf-nodes]="getCurrentDocumentListNode()">
|
||||
...
|
||||
</alfresco-upload-drag-area>
|
||||
```
|
||||
|
||||
When designing a component you want to work this directive with, you have two important things to care about.
|
||||
|
||||
### 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.
|
||||
|
||||
```js
|
||||
import { NodePermissionSubject } from '@alfresco/adf-core';
|
||||
|
||||
@Component({...})
|
||||
export class UploadDragAreaComponent implements NodePermissionSubject {
|
||||
public disabled: boolean = false;
|
||||
}
|
||||
```
|
||||
|
||||
### Defining your components 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.
|
||||
|
||||
```js
|
||||
import { EXTENDIBLE_COMPONENT } from '@alfresco/adf-core';
|
||||
|
||||
@Component({
|
||||
...
|
||||
viewProviders: [
|
||||
{ provide: EXTENDIBLE_COMPONENT, useExisting: forwardRef(() => UploadDragAreaComponent)}
|
||||
]
|
||||
})
|
||||
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!**
|
Reference in New Issue
Block a user