[ACS-4124] Display tags applied to file in files list (#2974)

* [ACS-4124] Display tags applied to file in files list

* [ACS-4124] CR fixes

* [ACS-4124] Hide tags for smaller displays

* [ACS-4124] E2e fixes

* [ACS-4124] E2e fixes

e2e/suites/list-views/favorites.test.ts

@@ -90,7 +90,7 @@ describe('Favorites', () => {
   });
 
   it('[C280482] has the correct columns', async () => {
-    const expectedColumns = ['Name', 'Location', 'Size', 'Modified', 'Modified by'];
+    const expectedColumns = ['Name', 'Location', 'Size', 'Modified', 'Modified by', 'Tags'];
     const actualColumns = await dataTable.getColumnHeadersText();
 
     await expect(actualColumns).toEqual(expectedColumns);

e2e/suites/list-views/file-libraries.test.ts

@@ -102,7 +102,7 @@ describe('File Libraries', () => {
     });
 
     it('[C217095] has the correct columns', async () => {
-      const expectedColumns = ['Name', 'Description', 'My Role', 'Visibility'];
+      const expectedColumns = ['Name', 'Description', 'My Role', 'Visibility', 'Tags'];
       const actualColumns = await dataTable.getColumnHeadersText();
 
       await expect(actualColumns).toEqual(expectedColumns);
@@ -167,7 +167,7 @@ describe('File Libraries', () => {
     });
 
     it('[C289893] has the correct columns', async () => {
-      const expectedColumns = ['Name', 'Description', 'My Role', 'Visibility'];
+      const expectedColumns = ['Name', 'Description', 'My Role', 'Visibility', 'Tags'];
       const actualColumns = await dataTable.getColumnHeadersText();
 
       await expect(actualColumns).toEqual(expectedColumns);

e2e/suites/list-views/personal-files.test.ts

@@ -79,7 +79,7 @@ describe('Personal Files', () => {
     });
 
     it('[C217142] has the correct columns', async () => {
-      const expectedColumns = ['Name', 'Size', 'Modified', 'Modified by'];
+      const expectedColumns = ['Name', 'Size', 'Modified', 'Modified by', 'Tags'];
       const actualColumns = await dataTable.getColumnHeadersText();
 
       await expect(actualColumns).toEqual(expectedColumns);

e2e/suites/list-views/recent-files.test.ts

@@ -84,7 +84,7 @@ describe('Recent Files', () => {
   });
 
   it('[C213168] has the correct columns', async () => {
-    const expectedColumns = ['Name', 'Location', 'Size', 'Modified'];
+    const expectedColumns = ['Name', 'Location', 'Size', 'Modified', 'Tags'];
     const actualColumns = await dataTable.getColumnHeadersText();
 
     await expect(actualColumns).toEqual(expectedColumns);

e2e/suites/list-views/shared-files.test.ts

@@ -90,7 +90,7 @@ describe('Shared Files', () => {
   });
 
   it('[C213113] has the correct columns', async () => {
-    const expectedColumns = ['Name', 'Location', 'Size', 'Modified', 'Modified by', 'Shared by'];
+    const expectedColumns = ['Name', 'Location', 'Size', 'Modified', 'Modified by', 'Shared by', 'Tags'];
     const actualColumns = await dataTable.getColumnHeadersText();
 
     await expect(actualColumns).toEqual(expectedColumns);

e2e/suites/search/search-results-files-folders.test.ts

@@ -105,7 +105,7 @@ describe('Search results - files and folders', () => {
     const size = fileEntry.entry.content.sizeInBytes;
 
     expect(await dataTable.isItemPresent(file)).toBe(true, `${file} is not displayed`);
-    expect(await dataTable.getRowCellsCount(file)).toEqual(6, 'incorrect number of columns');
+    expect(await dataTable.getRowCellsCount(file)).toEqual(7, 'incorrect number of columns');
     expect(await page.getName(file)).toBe(`${file} ( ${fileTitle} )`);
     expect(await page.getDescription(file)).toBe(fileDescription);
     expect(await page.getModified(file)).toBe(modifiedDate);
@@ -125,7 +125,7 @@ describe('Search results - files and folders', () => {
     const modifiedBy = folderEntry.entry.modifiedByUser.displayName;
 
     expect(await dataTable.isItemPresent(folder)).toBe(true, `${folder} is not displayed`);
-    expect(await dataTable.getRowCellsCount(file)).toEqual(6, 'incorrect number of columns');
+    expect(await dataTable.getRowCellsCount(file)).toEqual(7, 'incorrect number of columns');
     expect(await page.getName(folder)).toBe(`${folder} ( ${folderTitle} )`);
     expect(await page.getDescription(folder)).toBe(folderDescription);
     expect(await page.getModified(folder)).toBe(modifiedDate);

e2e/suites/search/search-results-libraries.test.ts

@@ -187,7 +187,7 @@ describe('Search results - libraries', () => {
     await searchInput.searchFor(site1.name);
     await dataTable.waitForBody();
 
-    const expectedColumns = ['Name', 'Description', 'My Role', 'Visibility'];
+    const expectedColumns = ['Name', 'Description', 'My Role', 'Visibility', 'Tags'];
     const actualColumns = await dataTable.getColumnHeadersText();
 
     await expect(actualColumns).toEqual(expectedColumns);

projects/aca-content/assets/app.extensions.json

@@ -2076,6 +2076,17 @@
           "sortable": true,
           "desktopOnly": true,
           "order": 50
+        },
+        {
+          "id": "app.filer.tags",
+          "template": "app.columns.tags",
+          "key": "tags",
+          "title": "APP.DOCUMENT_LIST.COLUMNS.TAGS",
+          "class": "adf-full-width adf-expand-cell-4",
+          "type": "text",
+          "sortable": false,
+          "desktopOnly": true,
+          "order": 60
         }
       ],
       "libraries": [
@@ -2130,6 +2141,17 @@
           "template": "app.columns.libraryStatus",
           "desktopOnly": true,
           "order": 50
+        },
+        {
+          "id": "app.filer.tags",
+          "template": "app.columns.tags",
+          "key": "tags",
+          "title": "APP.DOCUMENT_LIST.COLUMNS.TAGS",
+          "class": "adf-full-width adf-expand-cell-4",
+          "type": "text",
+          "sortable": false,
+          "desktopOnly": true,
+          "order": 60
         }
       ],
       "favoriteLibraries": [
@@ -2184,6 +2206,17 @@
           "template": "app.columns.libraryStatus",
           "desktopOnly": true,
           "order": 50
+        },
+        {
+          "id": "app.filer.tags",
+          "template": "app.columns.tags",
+          "key": "tags",
+          "title": "APP.DOCUMENT_LIST.COLUMNS.TAGS",
+          "class": "adf-full-width adf-expand-cell-4",
+          "type": "text",
+          "sortable": false,
+          "desktopOnly": true,
+          "order": 60
         }
       ],
       "shared": [
@@ -2262,6 +2295,17 @@
           "sortable": true,
           "desktopOnly": true,
           "order": 70
+        },
+        {
+          "id": "app.filer.tags",
+          "template": "app.columns.tags",
+          "key": "tags",
+          "title": "APP.DOCUMENT_LIST.COLUMNS.TAGS",
+          "class": "adf-full-width adf-expand-cell-4",
+          "type": "text",
+          "sortable": false,
+          "desktopOnly": true,
+          "order": 80
         }
       ],
       "recent": [
@@ -2316,6 +2360,17 @@
           "sortable": true,
           "desktopOnly": true,
           "order": 50
+        },
+        {
+          "id": "app.filer.tags",
+          "template": "app.columns.tags",
+          "key": "tags",
+          "title": "APP.DOCUMENT_LIST.COLUMNS.TAGS",
+          "class": "adf-full-width adf-expand-cell-4",
+          "type": "text",
+          "sortable": false,
+          "desktopOnly": true,
+          "order": 60
         }
       ],
       "favorites": [
@@ -2380,6 +2435,17 @@
           "sortable": true,
           "desktopOnly": true,
           "order": 60
+        },
+        {
+          "id": "app.filer.tags",
+          "template": "app.columns.tags",
+          "key": "tags",
+          "title": "APP.DOCUMENT_LIST.COLUMNS.TAGS",
+          "class": "adf-full-width adf-expand-cell-4",
+          "type": "text",
+          "sortable": false,
+          "desktopOnly": true,
+          "order": 70
         }
       ],
       "trashcan": [
@@ -2489,6 +2555,17 @@
           "template": "app.columns.libraryStatus",
           "desktopOnly": true,
           "order": 50
+        },
+        {
+          "id": "app.filer.tags",
+          "template": "app.columns.tags",
+          "key": "tags",
+          "title": "APP.DOCUMENT_LIST.COLUMNS.TAGS",
+          "class": "adf-full-width adf-expand-cell-4",
+          "type": "text",
+          "sortable": false,
+          "desktopOnly": true,
+          "order": 60
         }
       ]
     }

projects/aca-content/assets/i18n/en.json

@@ -288,7 +288,8 @@
                 "SHARED_BY": "Shared by",
                 "DELETED_ON": "Deleted",
                 "DELETED_BY": "Deleted by",
-                "ROLE": "My Role"
+                "ROLE": "My Role",
+                "TAGS": "Tags"
             },
             "TOOLBAR": {
                 "CARDVIEW": "Card view mode",

projects/aca-content/src/lib/aca-content.module.ts

@@ -120,6 +120,7 @@ import { AppLayoutComponent } from './components/layout/app-layout/app-layout.co
 import { AppTrashcanModule } from './components/trashcan/trashcan.module';
 import { AppSharedLinkViewModule } from './components/shared-link-view/shared-link-view.module';
 import { AcaFolderRulesModule } from '@alfresco/aca-folder-rules';
+import { TagsColumnComponent } from './components/dl-custom-components/tags-column/tags-column.component';
 
 registerLocaleData(localeFr);
 registerLocaleData(localeDe);
@@ -226,6 +227,7 @@ export class ContentServiceExtensionModule {
       'app.columns.libraryStatus': LibraryStatusColumnComponent,
       'app.columns.trashcanName': TrashcanNameColumnComponent,
       'app.columns.location': LocationLinkComponent,
+      'app.columns.tags': TagsColumnComponent,
       'app.toolbar.toggleEditOffline': ToggleEditOfflineComponent,
       'app.toolbar.viewNode': ViewNodeComponent,
       'app.languagePicker': LanguagePickerComponent,

projects/aca-content/src/lib/components/dl-custom-components/document-list-custom-components.module.ts

@@ -31,10 +31,11 @@ import { ContentModule } from '@alfresco/adf-content-services';
 import { MaterialModule } from '../../material.module';
 import { CoreModule } from '@alfresco/adf-core';
 import { ThumbnailColumnComponent } from './thumbnail-column/thumbnail-column.component';
+import { TagsColumnComponent } from './tags-column/tags-column.component';
 
 @NgModule({
   imports: [BrowserModule, CoreModule.forChild(), ContentModule.forChild(), MaterialModule, LockedByModule],
-  declarations: [CustomNameColumnComponent, ThumbnailColumnComponent],
+  declarations: [CustomNameColumnComponent, ThumbnailColumnComponent, TagsColumnComponent],
-  exports: [CustomNameColumnComponent, ThumbnailColumnComponent]
+  exports: [CustomNameColumnComponent, ThumbnailColumnComponent, TagsColumnComponent]
 })
 export class DocumentListCustomComponentsModule {}

projects/aca-content/src/lib/components/dl-custom-components/tags-column/tags-column.component.scss

@@ -0,0 +1,15 @@
+.aca-tags-name-column {
+  display: flex;
+  width: inherit;
+
+  adf-tag-node-list {
+    width: inherit;
+
+    .adf-tag-chips {
+      background-color: white;
+      border: 1px solid var(--theme-text-color);
+      border-radius: 10px;
+      color: var(--theme-text-color);
+    }
+  }
+}

projects/aca-content/src/lib/components/dl-custom-components/tags-column/tags-column.component.ts

@@ -0,0 +1,54 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2020 Alfresco Software Limited
+ *
+ * This file is part of the Alfresco Example Content Application.
+ * If the software was purchased under a paid Alfresco license, the terms of
+ * the paid license agreement will prevail.  Otherwise, the software is
+ * provided under the following open source license terms:
+ *
+ * The Alfresco Example Content Application is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * The Alfresco Example Content Application is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { ShareDataRow } from '@alfresco/adf-content-services';
+import { ChangeDetectorRef, Component, Input, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'aca-tags-column',
+  template: `
+    <adf-tag-node-list [showDelete]="false" [limitTagsDisplayed]="true" [nodeId]="getNodeId(context.row)" (results)="onTagsLoaded()">
+    </adf-tag-node-list>
+  `,
+  styleUrls: ['./tags-column.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'adf-datatable-content-cell aca-tags-name-column'
+  }
+})
+export class TagsColumnComponent {
+  @Input()
+  context: any;
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  getNodeId(row: ShareDataRow): string {
+    return row.id;
+  }
+
+  onTagsLoaded(): void {
+    this.cd.detectChanges();
+  }
+}

projects/aca-content/src/lib/components/search/search-results/search-results.component.html

@@ -71,6 +71,11 @@
               <data-column key="content.sizeInBytes" type="fileSize" title="APP.DOCUMENT_LIST.COLUMNS.SIZE" class="adf-no-grow-cell adf-ellipsis-cell" [sortable]="false" *ngIf="!isSmallScreen"></data-column>
               <data-column key="modifiedAt" type="date" title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON" class="adf-no-grow-cell adf-ellipsis-cell" format="timeAgo" [sortable]="false" *ngIf="!isSmallScreen"></data-column>
               <data-column key="modifiedByUser.displayName" title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY" class="adf-no-grow-cell adf-ellipsis-cell" [sortable]="false" *ngIf="!isSmallScreen"></data-column>
+              <data-column key="$tags" type="text" title="APP.DOCUMENT_LIST.COLUMNS.TAGS" class="adf-full-width adf-expand-cell-4" [sortable]="false">
+                <ng-template let-context>
+                  <aca-tags-column [context]="context"></aca-tags-column>
+                </ng-template>
+              </data-column>
             </data-columns>
 
             <adf-custom-empty-content-template>