alfresco-ng2-components/docs/core/node-permission.directive.md

Added, Status

Added	Status
v2.0.0	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.

<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.

<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.

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.

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!