Skip to content

Commit

Permalink
[ACS-6325] save document list columns configuration
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikita-web-ua
nikita-web-ua committed Jan 8, 2024
1 parent d30272d commit 7cdffe7
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 15 deletions.
6 changes: 4 additions & 2 deletions projects/aca-content/src/lib/aca-content.routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
},
{
Expand Down Expand Up @@ -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'
}
},
{
Expand Down
3 changes: 3 additions & 0 deletions ...rc/lib/components/search/search-libraries-results/search-libraries-results.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,11 +39,13 @@
<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"
[format]="column.format"
[class]="column.class"
class="test"
[sortable]="column.sortable"
[draggable]="column.draggable"
>
Expand All @@ -55,6 +57,7 @@

<ng-container *ngIf="!column.template && !(column.desktopOnly && isSmallScreen)">
<data-column
[id]="column.id"
[key]="column.key"
[title]="column.title"
[type]="column.type"
Expand Down
14 changes: 7 additions & 7 deletions projects/aca-content/src/lib/components/search/search-results/search-results.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
49 changes: 47 additions & 2 deletions projects/aca-content/src/lib/directives/document-list.directive.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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(() => {
Expand Down Expand Up @@ -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 });
});
});
17 changes: 13 additions & 4 deletions projects/aca-content/src/lib/directives/document-list.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,13 +72,15 @@ export class DocumentListDirective implements OnInit, OnDestroy {
const direction = this.preferences.get(`${this.sortingPreferenceKey}.sorting.direction`, current[1]);

if (this.preferences.hasItem(`${this.sortingPreferenceKey}.columns.width`)) {
const columnsWidths = JSON.parse(this.preferences.get(`${this.sortingPreferenceKey}.columns.width`));
this.documentList.setColumnsWidths(columnsWidths);
this.documentList.setColumnsWidths = JSON.parse(this.preferences.get(`${this.sortingPreferenceKey}.columns.width`));
}

if (this.preferences.hasItem(`${this.sortingPreferenceKey}.columns.visibility`)) {
const columnsVisibility = JSON.parse(this.preferences.get(`${this.sortingPreferenceKey}.columns.visibility`));
this.documentList.setColumnsVisibility(columnsVisibility);
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];
Expand Down Expand Up @@ -130,6 +132,13 @@ export class DocumentListDirective implements OnInit, OnDestroy {
}
}

@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) {
Expand Down

0 comments on commit 7cdffe7

Please sign in to comment.