inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-12 17:04:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-6325] Persisting configuration of document list columns size, visibility and order (#3562)

Browse Source 
* [ACS-6325] save configuration for column width & visibility

* [ACS-6325] save document list columns configuration

* [ACS-6325] remove unused class
This commit is contained in:
Mykyta Maliarchuk 2024-01-08 11:22:31 +01:00 committed by GitHub
parent 89eda8939b
commit 70531e3215
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 107 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
projects/aca-content/src/lib/aca-content.routes.ts
View File

@ -440,7 +440,8 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
path: '',
component: SearchResultsComponent,
data: {
title: 'APP.BROWSE.SEARCH.TITLE'
title: 'APP.BROWSE.SEARCH.TITLE',
sortingPreferenceKey: 'search'
}
},
{
@ -478,7 +479,8 @@ export const CONTENT_LAYOUT_ROUTES: Route = {
path: '',
component: SearchLibrariesResultsComponent,
data: {
title: 'APP.BROWSE.SEARCH.TITLE'
title: 'APP.BROWSE.SEARCH.TITLE',
sortingPreferenceKey: 'search-libraries'
}
},
{

2
projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html
View File

@ -35,6 +35,7 @@
<ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[draggable]="column.draggable"
[key]="column.key"
[title]="column.title"
@ -52,6 +53,7 @@
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[key]="column.key"
[draggable]="column.draggable"
[title]="column.title"

2
projects/aca-content/src/lib/components/favorites/favorites.component.html
View File

@ -30,6 +30,7 @@
<ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[key]="column.key"
[title]="column.title"
[draggable]="column.draggable"
@ -47,6 +48,7 @@
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[key]="column.key"
[title]="column.title"
[type]="column.type"

2
projects/aca-content/src/lib/components/files/files.component.html
View File

@ -39,6 +39,7 @@
<ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[key]="column.key"
[title]="column.title"
[type]="column.type"
@ -57,6 +58,7 @@
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[key]="column.key"
[title]="column.title"
[type]="column.type"

2
projects/aca-content/src/lib/components/libraries/libraries.component.html
View File

@ -34,6 +34,7 @@
<ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[key]="column.key"
[title]="column.title"
[type]="column.type"
@ -51,6 +52,7 @@
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[key]="column.key"
[title]="column.title"
[type]="column.type"

2
projects/aca-content/src/lib/components/recent-files/recent-files.component.html
View File

@ -30,6 +30,7 @@
<ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[key]="column.key"
[title]="column.title"
[type]="column.type"
@ -47,6 +48,7 @@
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[key]="column.key"
[title]="column.title"
[type]="column.type"

2
projects/aca-content/src/lib/components/search/search-libraries-results/search-libraries-results.component.html
View File

@ -39,6 +39,7 @@
<ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[key]="column.key"
[title]="column.title"
[type]="column.type"
@ -55,6 +56,7 @@
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[key]="column.key"
[title]="column.title"
[type]="column.type"

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

@ -46,7 +46,7 @@
(node-dblclick)="handleNodeClick($event)"
>
<data-columns>
<data-column key="$thumbnail" type="image" [sr-title]="'ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL'" [sortable]="false">
<data-column id="app.search.thumbnail" key="$thumbnail" type="image" [sr-title]="'ADF-DOCUMENT-LIST.LAYOUT.THUMBNAIL'" [sortable]="false">
<ng-template let-context>
<aca-custom-thumbnail-column [context]="context"></aca-custom-thumbnail-column>
</ng-template>
@ -58,13 +58,13 @@
</adf-data-column-header>
</data-column>
<data-column key type="text" class="adf-ellipsis-cell adf-expand-cell-5" title="APP.DOCUMENT_LIST.COLUMNS.NAME" [sortable]="false" [draggable]="true">
<data-column id="app.search.name" key type="text" class="adf-ellipsis-cell adf-expand-cell-5" title="APP.DOCUMENT_LIST.COLUMNS.NAME" [sortable]="false" [draggable]="true">
<ng-template let-context>
<aca-search-results-row [context]="context"></aca-search-results-row>
</ng-template>
</data-column>
<data-column key="properties" title="Description" class="adf-expand-cell-3" [sortable]="false" *ngIf="!isSmallScreen" [draggable]="true">
<data-column id="app.search.description" key="properties" title="Description" class="adf-expand-cell-3" [sortable]="false" *ngIf="!isSmallScreen" [draggable]="true">
<ng-template let-context>
<span class="adf-datatable-cell-value adf-ellipsis-cell">
{{context.row?.node?.entry?.properties && context.row?.node?.entry?.properties['cm:description']}}
@ -72,10 +72,10 @@
</ng-template>
</data-column>
<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" [draggable]="true"></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" [draggable]="true"></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" [draggable]="true"></data-column>
<data-column key="$tags" type="text" title="APP.DOCUMENT_LIST.COLUMNS.TAGS" class="adf-full-width adf-expand-cell-4" [sortable]="false" [draggable]="true">
<data-column id="app.search.size" key="content.sizeInBytes" type="fileSize" title="APP.DOCUMENT_LIST.COLUMNS.SIZE" class="adf-no-grow-cell adf-ellipsis-cell" [sortable]="false" *ngIf="!isSmallScreen" [draggable]="true"></data-column>
<data-column id="app.search.modifiedOn" 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" [draggable]="true"></data-column>
<data-column id="app.search.modifiedBy" key="modifiedByUser.displayName" title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY" class="adf-no-grow-cell adf-ellipsis-cell" [sortable]="false" *ngIf="!isSmallScreen" [draggable]="true"></data-column>
<data-column id="app.search.tags" key="$tags" type="text" title="APP.DOCUMENT_LIST.COLUMNS.TAGS" class="adf-full-width adf-expand-cell-4" [sortable]="false" [draggable]="true">
<ng-template let-context>
<aca-tags-column [context]="context"></aca-tags-column>
</ng-template>

2
projects/aca-content/src/lib/components/shared-files/shared-files.component.html
View File

@ -29,6 +29,7 @@
<ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[key]="column.key"
[title]="column.title"
[type]="column.type"
@ -46,6 +47,7 @@
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[draggable]="column.draggable"
[key]="column.key"
[title]="column.title"

2
projects/aca-content/src/lib/components/trashcan/trashcan.component.html
View File

@ -35,6 +35,7 @@
<ng-container *ngFor="let column of columns; trackBy: trackByColumnId">
<ng-container *ngIf="column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[key]="column.key"
[draggable]="column.draggable"
[title]="column.title"
@ -52,6 +53,7 @@
<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[key]="column.key"
[title]="column.title"
[type]="column.type"

49
projects/aca-content/src/lib/directives/document-list.directive.spec.ts
View File

@ -40,7 +40,10 @@ describe('DocumentListDirective', () => {
selection: [],
reload: jasmine.createSpy('reload'),
resetSelection: jasmine.createSpy('resetSelection'),
ready: new Subject<any>()
ready: new Subject<any>(),
setColumnsWidths: {},
setColumnsVisibility: {},
setColumnsOrder: {}
};
const storeMock: any = {
@ -66,7 +69,8 @@ describe('DocumentListDirective', () => {
const userPreferencesServiceMock: any = {
set: jasmine.createSpy('set'),
get: jasmine.createSpy('get')
get: jasmine.createSpy('get'),
hasItem: jasmine.createSpy('hasItem')
};
beforeEach(() => {
@ -158,4 +162,45 @@ describe('DocumentListDirective', () => {
expect(storeMock.dispatch).toHaveBeenCalledWith(new SetSelectedNodesAction([]));
expect(documentListDirective.selectedNode).toBeNull();
});
it('should set user preferences for columns visibility`', () => {
const event = new CustomEvent('columnsVisibilityChanged', { detail: { 'app.tags': true, 'app.name': false } });
mockRoute.snapshot.data.sortingPreferenceKey = 'files';
documentListDirective.ngOnInit();
documentListDirective.onColumnsVisibilityChange(event);
expect(userPreferencesServiceMock.set).toHaveBeenCalledWith('files.columns.visibility', JSON.stringify(event));
});
it('should set user preferences for columns order`', () => {
const event = new CustomEvent('columnsOrderChanged', { detail: ['app.tags', 'app.name'] });
mockRoute.snapshot.data.sortingPreferenceKey = 'files';
documentListDirective.ngOnInit();
documentListDirective.onColumnOrderChanged(event);
expect(userPreferencesServiceMock.set).toHaveBeenCalledWith('files.columns.order', JSON.stringify(event));
});
it('should set user preferences for columns width`', () => {
const event = new CustomEvent('columnsWidthChanged', { detail: { 'app.tags': 65, 'app.name': 75 } });
mockRoute.snapshot.data.sortingPreferenceKey = 'files';
documentListDirective.ngOnInit();
documentListDirective.onColumnsWidthChanged(event);
expect(userPreferencesServiceMock.set).toHaveBeenCalledWith('files.columns.width', JSON.stringify(event));
});
it('should set document list properties from user preferences`', () => {
mockRoute.snapshot.data.sortingPreferenceKey = 'files';
userPreferencesServiceMock.hasItem.and.returnValue(true);
userPreferencesServiceMock.get.and.returnValue(false);
userPreferencesServiceMock.get.withArgs('files.columns.width').and.returnValue(JSON.stringify({ 'app.tag': 87 }));
userPreferencesServiceMock.get.withArgs('files.columns.order').and.returnValue(JSON.stringify(['app.tag', 'app.name']));
userPreferencesServiceMock.get.withArgs('files.columns.visibility').and.returnValue(JSON.stringify({ 'app.tag': true }));
documentListDirective.ngOnInit();
expect(documentListMock.setColumnsWidths).toEqual({ 'app.tag': 87 });
expect(documentListMock.setColumnsOrder).toEqual(['app.tag', 'app.name']);
expect(documentListMock.setColumnsVisibility).toEqual({ 'app.tag': true });
});
});

33
projects/aca-content/src/lib/directives/document-list.directive.ts
View File

@ -71,6 +71,18 @@ export class DocumentListDirective implements OnInit, OnDestroy {
const key = this.preferences.get(`${this.sortingPreferenceKey}.sorting.sortingKey`, current[0]);
const direction = this.preferences.get(`${this.sortingPreferenceKey}.sorting.direction`, current[1]);
if (this.preferences.hasItem(`${this.sortingPreferenceKey}.columns.width`)) {
this.documentList.setColumnsWidths = JSON.parse(this.preferences.get(`${this.sortingPreferenceKey}.columns.width`));
}
if (this.preferences.hasItem(`${this.sortingPreferenceKey}.columns.visibility`)) {
this.documentList.setColumnsVisibility = JSON.parse(this.preferences.get(`${this.sortingPreferenceKey}.columns.visibility`));
}
if (this.preferences.hasItem(`${this.sortingPreferenceKey}.columns.order`)) {
this.documentList.setColumnsOrder = JSON.parse(this.preferences.get(`${this.sortingPreferenceKey}.columns.order`));
}
this.documentList.sorting = [key, direction];
// TODO: bug in ADF, the `sorting` binding is not updated when changed from code
this.documentList.data.setSorting({ key, direction });
@ -106,6 +118,27 @@ export class DocumentListDirective implements OnInit, OnDestroy {
}
}
@HostListener('columnsWidthChanged', ['$event'])
onColumnsWidthChanged(event: CustomEvent) {
if (this.sortingPreferenceKey) {
this.preferences.set(`${this.sortingPreferenceKey}.columns.width`, JSON.stringify(event));
}
}
@HostListener('columnsVisibilityChanged', ['$event'])
onColumnsVisibilityChange(event: CustomEvent) {
if (this.sortingPreferenceKey) {
this.preferences.set(`${this.sortingPreferenceKey}.columns.visibility`, JSON.stringify(event));
}
}
@HostListener('columnsOrderChanged', ['$event'])
onColumnOrderChanged(event: CustomEvent) {
if (this.sortingPreferenceKey) {
this.preferences.set(`${this.sortingPreferenceKey}.columns.order`, JSON.stringify(event));
}
}
@HostListener('node-select', ['$event'])
onNodeSelect(event: CustomEvent) {
if (!!event.detail && !!event.detail.node) {