[ACS-6325] Persisting configuration of document list columns size, vi…

…sibility and order (#3562) * [ACS-6325] save configuration for column width & visibility * [ACS-6325] save document list columns configuration * [ACS-6325] remove unused class
Alfresco · Jan 8, 2024 · 70531e3 · 70531e3
1 parent 89eda89
commit 70531e3
Show file tree

Hide file tree

Showing 12 changed files with 107 additions and 11 deletions.
diff --git a/projects/aca-content/src/lib/aca-content.routes.ts b/projects/aca-content/src/lib/aca-content.routes.ts
@@ -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'
           }
         },
         {

diff --git a/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html b/projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html
@@ -35,6 +35,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITL
           <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 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.FAVORITE_LIBRARIES.TITL
 
             <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
               <data-column
+                [id]="column.id"
                 [key]="column.key"
                 [draggable]="column.draggable"
                 [title]="column.title"

diff --git a/projects/aca-content/src/lib/components/favorites/favorites.component.html b/projects/aca-content/src/lib/components/favorites/favorites.component.html
@@ -30,6 +30,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.FAVORITES.TITLE' | translate }}</h1>
           <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 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.FAVORITES.TITLE' | translate }}</h1>
 
             <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
               <data-column
+                [id]="column.id"
                 [key]="column.key"
                 [title]="column.title"
                 [type]="column.type"

diff --git a/projects/aca-content/src/lib/components/files/files.component.html b/projects/aca-content/src/lib/components/files/files.component.html
@@ -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"

diff --git a/projects/aca-content/src/lib/components/libraries/libraries.component.html b/projects/aca-content/src/lib/components/libraries/libraries.component.html
@@ -34,6 +34,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE' | t
           <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 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.LIBRARIES.MENU.MY_LIBRARIES.TITLE' | t
 
             <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
               <data-column
+                [id]="column.id"
                 [key]="column.key"
                 [title]="column.title"
                 [type]="column.type"

diff --git a/projects/aca-content/src/lib/components/recent-files/recent-files.component.html b/projects/aca-content/src/lib/components/recent-files/recent-files.component.html
@@ -30,6 +30,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.RECENT.TITLE' | translate }}</h1>
           <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 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.RECENT.TITLE' | translate }}</h1>
 
             <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
               <data-column
+                [id]="column.id"
                 [key]="column.key"
                 [title]="column.title"
                 [type]="column.type"

diff --git a/...rc/lib/components/search/search-libraries-results/search-libraries-results.component.html b/...rc/lib/components/search/search-libraries-results/search-libraries-results.component.html
@@ -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"

diff --git a/projects/aca-content/src/lib/components/search/search-results/search-results.component.html b/projects/aca-content/src/lib/components/search/search-results/search-results.component.html
@@ -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,24 +58,24 @@
                 </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']}}
                   </span>
                 </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>

diff --git a/projects/aca-content/src/lib/components/shared-files/shared-files.component.html b/projects/aca-content/src/lib/components/shared-files/shared-files.component.html
@@ -29,6 +29,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.SHARED.TITLE' | translate }}</h1>
           <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 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.SHARED.TITLE' | translate }}</h1>
 
             <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
               <data-column
+                [id]="column.id"
                 [draggable]="column.draggable"
                 [key]="column.key"
                 [title]="column.title"

diff --git a/projects/aca-content/src/lib/components/trashcan/trashcan.component.html b/projects/aca-content/src/lib/components/trashcan/trashcan.component.html
@@ -35,6 +35,7 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.TRASHCAN.TITLE' | translate }}</h1>
           <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 @@ <h1 class="aca-page-title">{{ 'APP.BROWSE.TRASHCAN.TITLE' | translate }}</h1>
 
             <ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
               <data-column
+                [id]="column.id"
                 [key]="column.key"
                 [title]="column.title"
                 [type]="column.type"

diff --git a/projects/aca-content/src/lib/directives/document-list.directive.spec.ts b/projects/aca-content/src/lib/directives/document-list.directive.spec.ts
@@ -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 });
+  });
 });
diff --git a/projects/aca-content/src/lib/directives/document-list.directive.ts b/projects/aca-content/src/lib/directives/document-list.directive.ts
@@ -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) {