[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
This commit is contained in:
MichalKinas 2023-02-15 17:29:25 +01:00 committed by GitHub
parent f4c80741e6
commit a6e6f08df0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 167 additions and 12 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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
}
]
}

View File

@ -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",

View File

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

View File

@ -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],
exports: [CustomNameColumnComponent, ThumbnailColumnComponent]
declarations: [CustomNameColumnComponent, ThumbnailColumnComponent, TagsColumnComponent],
exports: [CustomNameColumnComponent, ThumbnailColumnComponent, TagsColumnComponent]
})
export class DocumentListCustomComponentsModule {}

View File

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

View File

@ -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();
}
}

View File

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