[ADF-5305] - Added aspect list component (#6549)

* [ADF-5305] - Creation of aspect list and aspect list dialog components

* [ADF-5305] - unit test for aspect list

* [ADF-5305] - added filtering for aspects

* [ADF-5305] - enabling tests

* [ADF-5305] - added filtering and unit test

* [ADF-5305] - added context action to demo shell

* [ADF-5305] - added button on metadata card for opening aspects

* [ADF-5305] - fixed unit test for filtering aspects

* [ADF-5305] - added documentation

* [ADF-5305] - fixed lint

* [ADF-5305] - Updated the js-api calls

* [ADF-5305] - Removed circle dependency

* [ADF-5305] - Simplified code

* [ADF-5305] - revert changes on package.json

* [ADF-5305] - removed extra cspell word

* [ADF-5305] - added filtering on aspect list service

* [ADF-5305] - fix unit test for aspect service

* [ADF-5305] - reverted changes to package-loc

* [ADF-5305] - removed unused changes

* [ADF-5305] - attempt to fix PR #§

* [ADF-5305] - attempt to fix PR #2

* [ADF-5305] - attempt to fix PR #3

* [ADF-5305] - attempt to fix PR #4

* [ADF-5305] - attempt to fix PR #5

Co-authored-by: Vito Albano <vitoalbano@vitoalbano-mbp-0120.local>

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