[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:
Amedeo Lepore
2022-11-18 09:49:17 +01:00
committed by GitHub
parent f9c71bc953
commit 933b59c54e
32 changed files with 243 additions and 108 deletions

View File

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

View File

@@ -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)

View File

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

View File

@@ -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)