mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-4152] Updated folder structure of core docs (#4415)
* [ADF-4152] Moved core library docs into subfolders * [ADF-4152] Moved core library docs into subfolders * [ADF-4152] Manual fixes to core doc file links * [ADF-4152] Further automatic + manual link tidying
This commit is contained in:
Andy Stark
committed by
Eugenio Romano
Eugenio Romano
parent
285e56e9fb
commit
5fc05da7aa
139
docs/core/directives/check-allowable-operation.directive.md
Normal file
139
docs/core/directives/check-allowable-operation.directive.md
Normal file
@@ -0,0 +1,139 @@
|
||||
---
|
||||
Title: Check Allowable Operation directive
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-02-13
|
||||
---
|
||||
|
||||
# [Check Allowable Operation directive](../../../lib/core/directives/check-allowable-operation.directive.ts "Defined in check-allowable-operation.directive.ts")
|
||||
|
||||
Selectively disables an HTML element or Angular component.
|
||||
|
||||
## Contents
|
||||
|
||||
- [Basic Usage](#basic-usage)
|
||||
- [Class members](#class-members)
|
||||
- [Properties](#properties)
|
||||
- [Details](#details)
|
||||
- [HTML element example](#html-element-example)
|
||||
- [Angular component example](#angular-component-example)
|
||||
- [Implementing the NodeAllowableOperationSubject interface](#implementing-the-nodeallowableoperationsubject-interface)
|
||||
- [Defining your component as an EXTENDIBLE_COMPONENT parent component](#defining-your-component-as-an-extendible_component-parent-component)
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-toolbar title="toolbar example">
|
||||
<button mat-icon-button
|
||||
adf-check-allowable-operation="delete"
|
||||
[adf-nodes]="documentList.selection">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</adf-toolbar>
|
||||
|
||||
<adf-document-list #documentList ...>
|
||||
...
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| nodes | [`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md)`[]` | \[] | Nodes to check permission for. |
|
||||
| permission | `string` | null | [Node](https://github.com/Alfresco/alfresco-js-api/blob/development/src/api/content-rest-api/docs/Node.md) permission to check (create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions). |
|
||||
|
||||
## Details
|
||||
|
||||
The [Check Allowable Operation Directive](check-allowable-operation.directive.md) lets you disable an HTML element or Angular component
|
||||
by taking a collection of [`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md) 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-check-allowable-operation="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 add the directive to any Angular component that implements the [`NodeAllowableOperationSubject`](../../../lib/core/directives/check-allowable-operation.directive.ts)
|
||||
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
|
||||
[rootFolderId]="..."
|
||||
[versioning]="..."
|
||||
[adf-check-allowable-operation]="'create'"
|
||||
[adf-nodes]="getCurrentDocumentListNode()">
|
||||
...
|
||||
</alfresco-upload-drag-area>
|
||||
```
|
||||
|
||||
To enable your own component to work with this directive, you need to implement the
|
||||
[`NodeAllowableOperationSubject`](../../../lib/core/directives/check-allowable-operation.directive.ts) interface and also define it as an
|
||||
[`EXTENDIBLE_COMPONENT`](../../../lib/core/interface/injection.tokens.ts)
|
||||
parent component,
|
||||
as described in the following sections.
|
||||
|
||||
### Implementing the NodeAllowableOperationSubject interface
|
||||
|
||||
The component must implement the [`NodeAllowableOperationSubject`](../../../lib/core/directives/check-allowable-operation.directive.ts) 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';
|
||||
|
||||
@Component({...})
|
||||
export class UploadDragAreaComponent implements NodeAllowableOperationSubject {
|
||||
public disabled: boolean = false;
|
||||
}
|
||||
```
|
||||
|
||||
### 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 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`](../../../lib/core/interface/injection.tokens.ts)
|
||||
and also 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 NodeAllowableOperationSubject { ... }
|
||||
```
|
||||
|
||||
**Note:** the usage of **viewProviders** (instead of **providers**) is very important, especially if you want to use this directive on a transcluded component.
|
||||
Reference in New Issue
Block a user