[ADF-5305] - Added aspect list component

demo-shell/resources/i18n/en.json

@@ -94,6 +94,7 @@
     "SEARCH_SERVICE_APPROACH": "Check this to disable the input property and configure using the service",
     "HEADER_DATA": "Header Data",
     "TREE_VIEW": "Tree View",
+    "EXPAND_LIST": "Expandable item list",
     "ICONS": "Icons",
     "PEOPLE_GROUPS_CLOUD": "People/Group Cloud",
     "TASK_HEADER_CLOUD": {
@@ -166,6 +167,7 @@
     },
     "ACTIONS": {
       "VERSIONS": "Manage versions",
+      "ASPECTS": "Update Aspects",
       "LOCK": "Lock",
       "METADATA": "Info",
       "DOWNLOAD": "Download",

demo-shell/src/app.config.json

@@ -1197,5 +1197,13 @@
     {
       "name": "subprocessapp"
     }
-  ]
+  ],
+  "aspect-visible": {
+    "default" : ["cm:generalclassifiable", "cm:complianceable",
+                 "cm:dublincore", "cm:effectivity", "cm:summarizable",
+                 "cm:versionable", "cm:templatable","cm:emailed", "emailserver:aliasable",
+                 "cm:taggable", "app:inlineeditable", "cm:geographic", "exif:exif",
+                 "audio:audio", "cm:indexControl", "dp:restrictable", "smf:customConfigSmartFolder", "smf:systemConfigSmartFolder"],
+    "ai": ["ai:products", "ai:dates", "ai:places", "ai:events", "ai:organizations", "ai:people", "ai:things", "ai:quantities", "ai:creativeWorks", "ai:labels", "ai:textLines"]
+  }
 }

demo-shell/src/app/app.module.ts

@@ -93,6 +93,7 @@ import {
     CustomEditorComponent,
     CustomWidgetComponent
 } from './components/cloud/custom-form-components/custom-editor.component';
+import { AspectListSampleComponent } from './components/aspect-list-sample/aspect-list-sample.component';
 
 import { registerLocaleData } from '@angular/common';
 import localeFr from '@angular/common/locales/fr';
@@ -180,6 +181,7 @@ registerLocaleData(localeSv);
         DemoErrorComponent,
         FormLoadingComponent,
         TreeViewSampleComponent,
+        AspectListSampleComponent,
         CloudLayoutComponent,
         AppsCloudDemoComponent,
         TasksCloudDemoComponent,

demo-shell/src/app/app.routes.ts

@@ -54,6 +54,7 @@ import { TaskHeaderCloudDemoComponent } from './components/cloud/task-header-clo
 import { FilteredSearchComponent } from './components/files/filtered-search.component';
 import { ProcessCloudLayoutComponent } from './components/cloud/process-cloud-layout.component';
 import { ServiceTaskListCloudDemoComponent } from './components/cloud/service-task-list-cloud-demo.component';
+import { AspectListSampleComponent } from './components/aspect-list-sample/aspect-list-sample.component';
 
 export const appRoutes: Routes = [
     { path: 'login', loadChildren: () => import('./components/login/login.module').then(m => m.AppLoginModule) },
@@ -413,6 +414,11 @@ export const appRoutes: Routes = [
                 component: TreeViewSampleComponent,
                 canActivate: [AuthGuardEcm]
             },
+            {
+                path: 'expandable-list',
+                component: AspectListSampleComponent,
+                canActivate: [AuthGuardEcm]
+            },
             {
                 path: 'about',
                 loadChildren: () => import('./components/about/about.module').then(m => m.AppAboutModule)

demo-shell/src/app/components/app-layout/app-layout.component.ts

@@ -86,6 +86,7 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
         /* cspell:disable-next-line */
         { href: '/overlay-viewer', icon: 'pageview', title: 'APP_LAYOUT.OVERLAY_VIEWER' },
         { href: '/treeview', icon: 'nature', title: 'APP_LAYOUT.TREE_VIEW' },
+        { href: '/expandable-list', icon: 'hot_tub', title: 'APP_LAYOUT.EXPAND_LIST' },
         { href: '/icons', icon: 'tag_faces', title: 'APP_LAYOUT.ICONS' },
         { href: '/about', icon: 'info_outline', title: 'APP_LAYOUT.ABOUT' }
     ];

demo-shell/src/app/components/aspect-list-sample/aspect-list-sample.component.html

@@ -0,0 +1,18 @@
+<div class="example-button-container">
+    <p> ASPECT CHOSEN :</p>
+    <p>{{currentResult}}</p>
+    <br>
+    <mat-form-field class="example-almost-full-width">
+        <mat-label>Node Id For Aspects</mat-label>
+        <input matInput placeholder="Node Id" [(ngModel)]="currentNodeId">
+    </mat-form-field>
+    <button mat-raised-button color="primary" aria-label="Click to show the list" (click)="showAspectForNode()">
+        Show/Hide List
+    </button>
+    <adf-aspect-list [nodeId]="currentNodeId" *ngIf="isShowed" (valueChanged)="onValueChanged($event)"></adf-aspect-list>
+</div>
+<div>
+    <button mat-fab color="primary" aria-label="Open dialog" (click)="openAspectDialog()">
+        Dialog
+    </button>
+</div>

demo-shell/src/app/components/aspect-list-sample/aspect-list-sample.component.scss

@@ -0,0 +1,7 @@
+.example-button-container {
+    width: 90%;
+}
+
+.example-almost-full-width {
+    width: 70%;
+}

demo-shell/src/app/components/aspect-list-sample/aspect-list-sample.component.ts

@@ -0,0 +1,47 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { AspectListService } from '@alfresco/adf-content-services';
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-expandable-menu',
+    templateUrl: 'aspect-list-sample.component.html',
+    styleUrls: ['aspect-list-sample.component.scss']
+})
+export class AspectListSampleComponent {
+
+    currentNodeId: string = '';
+    isShowed: boolean = false;
+
+    currentResult: string[] = [];
+
+    constructor(private aspectListService: AspectListService) { }
+
+    showAspectForNode() {
+        this.isShowed = !this.isShowed;
+    }
+
+    openAspectDialog() {
+        this.aspectListService.openAspectListDialog(this.currentNodeId).subscribe((result) => this.currentResult = Array.from(result));
+    }
+
+    onValueChanged(aspects) {
+        this.currentResult = Array.from(aspects);
+    }
+
+}

demo-shell/src/app/components/files/files.component.html

@@ -437,6 +437,12 @@ <h1>You don't have permissions</h1>
                         handler="lock"
                         title="DOCUMENT_LIST.ACTIONS.LOCK">
                     </content-action>
+                    <content-action
+                        icon="beach_access"
+                        target="document"
+                        title="DOCUMENT_LIST.ACTIONS.ASPECTS"
+                        (execute)="onAspectUpdate($event)">
+                    </content-action>
                 </content-actions>
             </adf-document-list>
                 </div>

demo-shell/src/app/components/files/files.component.ts

@@ -26,7 +26,8 @@ import {
     PaginationComponent, FormValues, DisplayMode, ShowHeaderMode, InfinitePaginationComponent,
     SharedLinksApiService,
     FormRenderingService,
-    FileUploadEvent
+    FileUploadEvent,
+    NodesApiService
 } from '@alfresco/adf-core';
 
 import {
@@ -36,7 +37,8 @@ import {
     ConfirmDialogComponent,
     LibraryDialogComponent,
     ContentMetadataService,
-    FilterSearch
+    FilterSearch,
+    AspectListService
 } from '@alfresco/adf-content-services';
 
 import { SelectAppsDialogComponent, ProcessFormRenderingService } from '@alfresco/adf-process-services';
@@ -228,7 +230,9 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
                 public authenticationService: AuthenticationService,
                 public alfrescoApiService: AlfrescoApiService,
                 private contentMetadataService: ContentMetadataService,
-                private sharedLinksApiService: SharedLinksApiService) {
+                private sharedLinksApiService: SharedLinksApiService,
+                private aspectListService: AspectListService,
+                private nodeService: NodesApiService) {
     }
 
     showFile(event) {
@@ -467,6 +471,14 @@ export class FilesComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
+    onAspectUpdate(event: any) {
+        this.aspectListService.openAspectListDialog(event.value.entry.id).subscribe((aspectList) => {
+            this.nodeService.updateNode(event.value.entry.id, {aspectNames : [...aspectList]}).subscribe(() => {
+                this.openSnackMessageInfo('Node Aspects Updated');
+            });
+        });
+    }
+
     onManageMetadata(event: any) {
         const contentEntry = event.value.entry;
         const displayEmptyMetadata = this.displayEmptyMetadata;

docs/content-services/components/aspect-list-dialog.component.md

@@ -0,0 +1,94 @@
+---
+Title: Aspect List Dialog component
+Added: v2.0.0
+Status: Active
+Last reviewed: 2021-01-20
+---
+
+# [Aspect List Dialog component](../../../lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.ts "Defined in aspect-list-dialog.component.ts")
+
+Allows a user to choose aspects for a node.
+
+## Details
+
+The [Aspect List Dialog component](aspect-list-dialog.component.md) works as a dialog showing the list of aspects available.
+It is possible to filter the aspect showed via the app.config.json.
+### Showing the dialog
+
+Unlike most components, the [Aspect List Dialog component](aspect-list-dialog.component.md) is typically shown in a dialog box
+rather than the main page and you are responsible for opening the dialog yourself. You can use the
+[Angular Material Dialog](https://material.angular.io/components/dialog/overview) for this,
+as shown in the usage example. ADF provides the [`AspectListDialogComponentData`](../../../lib/content-services/src/lib/aspect-list/aspect-list-dialog-data.interface.ts) interface
+to work with the Dialog's
+[data option](https://material.angular.io/components/dialog/overview#sharing-data-with-the-dialog-component-):
+
+```ts
+export interface AspectListDialogComponentData {
+    title: string;
+    description: string;
+    overTableMessage: string;
+    select: Subject<string[]>;
+    nodeId?: string;
+}
+```
+
+The properties are described in the table below:
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| title | `string` | "" | Dialog title |
+| description | `string` | "" | Text to appear as description under the dialog title |
+| overTableMessage | `string` | "" | Text that will be showed on the top of the aspect list table |
+| select | [`Subject<Node>`](https://github.com/Alfresco/alfresco-js-api/blob/develop/src/api/content-rest-api/docs/Node.md) |  | Event emitted with the current node selection when the dialog closes |
+| nodeId | `string` | "" | Identifier of a node to apply aspects to. |
+
+If you don't want to manage the dialog yourself then it is easier to use the
+[Aspect List component](aspect-list.component.md), or the
+methods of the [Aspect List service](../services/aspect-list.service.md), which create
+the dialog for you.
+
+### Usage example
+
+```ts
+import { MatDialog } from '@angular/material/dialog';
+import { AspectListDialogComponentData, AspectListDialogComponent} from '@adf/content-services'
+import { Subject } from 'rxjs/Subject';
+ ...
+
+constructor(dialog: MatDialog ... ) {}
+
+openSelectorDialog() {
+    data: AspectListDialogComponentData = {
+        title: "Choose an item",
+        description: "Choose",
+        overTableMessage: "Over Table Message",
+        nodeId: currentNodeID,
+        select: new Subject<Node[]>()
+    };
+
+    this.dialog.open(
+        AspectListDialogComponent,
+        {
+            data, panelClass: 'adf-aspect-list-dialog',
+            width: '630px'
+        }
+    );
+
+    data.select.subscribe((selections: Node[]) => {
+        // Use or store selection...
+    }, 
+    (error)=>{
+        //your error handling
+    }, 
+    ()=>{
+        //action called when an action or cancel is clicked on the dialog
+        this.dialog.closeAll();
+    });
+}
+```
+
+All the results will be streamed to the select [subject](http://reactivex.io/rxjs/manual/overview.html#subject) present in the [`AspectListDialogComponentData`](../../../lib/content-services/src/lib/aspect-list/aspect-list-dialog-data.interface.ts) object passed to the dialog.
+When the dialog action is selected by clicking, the `data.select` stream will be completed.
+## See also
+
+-   [Aspect list component](aspect-list.component.md)

docs/content-services/components/aspect-list.component.md

@@ -0,0 +1,44 @@
+---
+Title: Aspect List component
+Added: v2.0.0
+Status: Active
+Last reviewed: 2021-01-20
+---
+
+# [Aspect List component](../../../lib/content-services/src/lib/aspect-list/aspect-list.component.ts "Defined in aspect-list.component.ts")
+
+This component will show in an expandable row list with checkboxes all the aspect of a node, if a node id is given, or otherwise a complete list.
+The aspect are filtered via the app.config.json in this way : 
+
+```json
+  "aspect-visible": {
+    "default" : ["as:aspectThatWillBeShowedIfPresent"]
+  }
+```
+
+## Basic Usage
+
+```html
+    <adf-aspect-list (valueChanged)="onValueChanged($event)" [nodeId]="nodeId">
+    </adf-aspect-list>
+```
+
+## Class members
+
+### Properties
+
+| Name | Type | Default value | Description |
+| --- | --- | --- | --- |
+| nodeId | `string` |  | Identifier of a node to apply likes to. |
+
+### Events
+
+| Name | Type | Description |
+| --- | --- | --- |
+| valueChanged | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<string>` | Emitted every time the user select a new aspect. |
+
+## See also
+
+*   [Aspect List Dialog component](rating.component.md)
+*   [Aspect List service](../services/rating.service.md)
+*   [Node Aspect service](../services/rating.service.md)

lib/content-services/src/lib/aspect-list/aspect-list-dialog-data.interface.ts

@@ -0,0 +1,26 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Subject } from 'rxjs';
+
+export interface AspectListDialogComponentData {
+    title: string;
+    description: string;
+    overTableMessage: string;
+    select: Subject<string[]>;
+    nodeId?: string;
+}