mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[AAE-10772] Move content services directives from core to content-services package (#7942)
* [AAE-10772] move CheckAllowableOperationDirective to content services * [AAE-10772] move LibraryFavoriteDirective to content services * [AAE-10772] move LibraryMembershipDirective to content services * [AAE-10772] move NodeDeleteDirective to content services * [AAE-10772] move NodeFavoriteDirective to content services * [AAE-10772] update imports on LibraryMembershipDirective * [AAE-10772] move NodeRestoreDirective to content services * [AAE-10772] move UserInfoModule to content services * Revert "[AAE-10772] move UserInfoModule to content services" This reverts commit ede1d5db3923859586d88646ca7826abd3d30cf1. * [AAE-10772] Remove barrel imports and move library membership interfaces into LibraryMembershipDirective because are only used in that directive * [AAE-10772] Remove barrel imports from spec files * [AAE-10772] Move directive md files from core to content-services * [AAE-10772] Fix files path into the docs files * [AAE-10772] Export library membership interfaces because are imported by the ACA ToggleJoinLibraryButtonComponent Co-authored-by: Diogo Bastos <diogo.bastos@hyland.com>
This commit is contained in:
@@ -1,139 +0,0 @@
|
||||
---
|
||||
Title: Check Allowable Operation directive
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-02-13
|
||||
---
|
||||
|
||||
# [Check Allowable Operation directive](lib/core/src/lib/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 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/components/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/src/lib/directives/check-allowable-operation.directive.ts)
|
||||
interface (the [Upload Drag Area component](../../content-services/components/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/src/lib/directives/check-allowable-operation.directive.ts) interface and also define it as an
|
||||
[`EXTENDIBLE_COMPONENT`](lib/core/src/lib/interface/injection.tokens.ts)
|
||||
parent component,
|
||||
as described in the following sections.
|
||||
|
||||
### Implementing the NodeAllowableOperationSubject interface
|
||||
|
||||
The component must implement the [`NodeAllowableOperationSubject`](lib/core/src/lib/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/src/lib/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.
|
@@ -1,49 +0,0 @@
|
||||
---
|
||||
Title: Node Delete directive
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-20
|
||||
---
|
||||
|
||||
# [Node Delete directive](lib/core/src/lib/directives/node-delete.directive.ts "Defined in node-delete.directive.ts")
|
||||
|
||||
Deletes multiple files and folders.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-toolbar>
|
||||
<button mat-icon-button
|
||||
(delete)="documentList.reload()"
|
||||
[adf-delete]="documentList.selection">
|
||||
</button>
|
||||
</adf-toolbar>
|
||||
|
||||
<adf-document-list #documentList ...>
|
||||
...
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| permanent | `boolean` | false | If true then the nodes are deleted immediately rather than being put in the trash |
|
||||
| selection | [`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md)`[] \| DeletedNodeEntity[]` | | Array of nodes to delete. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| delete | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the nodes have been deleted. |
|
||||
|
||||
## Details
|
||||
|
||||
Note that if a target item is already in the trashcan (and is therefore a `DeletedNodeEntity`) then
|
||||
this action will delete the file permanently.
|
||||
|
||||
## See also
|
||||
|
||||
- [Node Restore directive](node-restore.directive.md)
|
@@ -1,83 +0,0 @@
|
||||
---
|
||||
Title: Node Favorite directive
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2018-11-13
|
||||
---
|
||||
|
||||
# [Node Favorite directive](lib/core/src/lib/directives/node-favorite.directive.ts "Defined in node-favorite.directive.ts")
|
||||
|
||||
Selectively toggles nodes as favorites.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-toolbar>
|
||||
<button mat-icon-button
|
||||
(toggle)="done()"
|
||||
[adf-node-favorite]="documentList.selection">
|
||||
</button>
|
||||
</adf-toolbar>
|
||||
|
||||
<adf-document-list #documentList ...>
|
||||
...
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
```ts
|
||||
@Component({
|
||||
selector: 'my-component'
|
||||
})
|
||||
export class MyComponent {
|
||||
|
||||
done() {
|
||||
// ...
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| selection | [`NodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/NodeEntry.md)`[]` | \[] | Array of nodes to toggle as favorites. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| error | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the favorite setting fails. |
|
||||
| toggle | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the favorite setting is complete. |
|
||||
|
||||
## Details
|
||||
|
||||
You can bind the directive instance to a template variable through the **adfFavorite** reference,
|
||||
which also lets you add extra styling to the element:
|
||||
|
||||
<!-- {% raw %} -->
|
||||
|
||||
```html
|
||||
<button
|
||||
mat-menu-item
|
||||
#selection="adfFavorite"
|
||||
[ngClass]="{ 'icon-highlight': selection.hasFavorites() }"
|
||||
[adf-node-favorite]="documentList.selection">
|
||||
<mat-icon [ngClass]="{ 'icon-highlight': selection.hasFavorites() }">
|
||||
{{ selection.hasFavorites() ? 'star' : 'star_border' }}
|
||||
</mat-icon>
|
||||
</button>
|
||||
```
|
||||
|
||||
<!-- {% endraw %} -->
|
||||
|
||||
The directive behaves as follows:
|
||||
|
||||
- If there are no favorite nodes in the selection, then all are marked as favorites
|
||||
- If there are one or more favorite nodes in the selection, then only those that are not
|
||||
favorites are marked
|
||||
- If all nodes in the selection are favorites, then they all have their favorite status removed
|
||||
|
||||
See the **Demo Shell** for examples of usage.
|
@@ -1,72 +0,0 @@
|
||||
---
|
||||
Title: Node Restore directive
|
||||
Added: v2.0.0
|
||||
Status: Active
|
||||
Last reviewed: 2019-01-16
|
||||
---
|
||||
|
||||
# [Node Restore directive](lib/core/src/lib/directives/node-restore.directive.ts "Defined in node-restore.directive.ts")
|
||||
|
||||
Restores deleted nodes to their original location.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```html
|
||||
<adf-toolbar title="toolbar example">
|
||||
<button mat-icon-button
|
||||
[adf-restore]="documentList.selection"
|
||||
(restore)="onRestore($event)">
|
||||
<mat-icon>restore</mat-icon>
|
||||
</button>
|
||||
</adf-toolbar>
|
||||
|
||||
<adf-document-list #documentList
|
||||
currentFolderId="-trash-" ...>
|
||||
...
|
||||
</adf-document-list>
|
||||
```
|
||||
|
||||
```ts
|
||||
onRestore(restoreMessage: RestoreMessageModel) {
|
||||
this.notificationService
|
||||
.openSnackMessageAction(
|
||||
restoreMessage.message,
|
||||
restoreMessage.action
|
||||
)
|
||||
.onAction()
|
||||
.subscribe(() => this.navigateLocation(restoreMessage.path));
|
||||
this.documentList.reload();
|
||||
}
|
||||
|
||||
navigateLocation(path: PathInfoEntity) {
|
||||
const parent = path.elements[path.elements.length - 1];
|
||||
this.router.navigate(['files/', parent.id]);
|
||||
}
|
||||
```
|
||||
|
||||
## Class members
|
||||
|
||||
### Properties
|
||||
|
||||
| Name | Type | Default value | Description |
|
||||
| ---- | ---- | ------------- | ----------- |
|
||||
| selection | [`DeletedNodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/DeletedNodeEntry.md)`[]` | | Array of deleted nodes to restore. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| ---- | ---- | ----------- |
|
||||
| restore | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`RestoreMessageModel`](../../../lib/core/directives/node-restore.directive.ts)`>` | Emitted when restoration is complete. |
|
||||
|
||||
## Details
|
||||
|
||||
The directive takes a selection of [`DeletedNodeEntry`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/DeletedNodeEntry.md) instances and restores them to
|
||||
their original locations. If the original location doesn't exist anymore then they remain
|
||||
in the trash list.
|
||||
|
||||
When you restore a single node, you can use the `location` property to show where the node has
|
||||
been restored. The property specifies the route path where the list of nodes are rendered.
|
||||
|
||||
## See Also
|
||||
|
||||
- [Node delete directive](node-delete.directive.md)
|
Reference in New Issue
Block a user