app directives (#439)

* pagination directive

* document list directive

* cleanup code

* cleanup code

* unified includeFields

src/app/app.module.ts

@@ -69,7 +69,6 @@ import { NodePermissionService } from './common/services/node-permission.service
 import { SearchComponent } from './components/search/search.component';
 import { SettingsComponent } from './components/settings/settings.component';
 import { HybridAppConfigService } from './common/services/hybrid-app-config.service';
-import { SortingPreferenceKeyDirective } from './directives/sorting-preference-key.directive';
 import { PageTitleService as AcaPageTitleService } from './common/services/page-title.service';
 
 import { InfoDrawerComponent } from './components/info-drawer/info-drawer.component';
@@ -77,9 +76,10 @@ import { EditFolderDirective } from './directives/edit-folder.directive';
 import { CreateFolderDirective } from './directives/create-folder.directive';
 import { DownloadNodesDirective } from './directives/download-nodes.directive';
 import { AppStoreModule } from './store/app-store.module';
+import { PaginationDirective } from './directives/pagination.directive';
+import { DocumentListDirective } from './directives/document-list.directive';
 import { MaterialModule } from './material.module';
 
-
 @NgModule({
     imports: [
         BrowserModule,
@@ -127,11 +127,12 @@ import { MaterialModule } from './material.module';
         NodeVersionsDialogComponent,
         SearchComponent,
         SettingsComponent,
-        SortingPreferenceKeyDirective,
         InfoDrawerComponent,
         EditFolderDirective,
         CreateFolderDirective,
-        DownloadNodesDirective
+        DownloadNodesDirective,
+        PaginationDirective,
+        DocumentListDirective
     ],
     providers: [
         { provide: PageTitleService, useClass: AcaPageTitleService },

src/app/components/favorites/favorites.component.html

@@ -90,17 +90,12 @@
     </div>
     <div class="inner-layout__content">
         <div class="inner-layout__panel">
-            <adf-document-list #documentList
+            <adf-document-list acaDocumentList #documentList
                 currentFolderId="-favorites-"
-                [includeFields]="['isFavorite']"
                 selectionMode="multiple"
                 [navigate]="false"
                 [sorting]="[ 'modifiedAt', 'desc' ]"
-                [acaSortingPreferenceKey]="sortingPreferenceKey"
+                (node-dblclick)="onNodeDoubleClick($event.detail?.node)">
-                (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
-                (ready)="onDocumentListReady($event, documentList)"
-                (node-select)="onNodeSelect($event, documentList)"
-                (node-unselect)="onNodeUnselect($event, documentList)">
 
                 <empty-folder-content>
                     <ng-template>
@@ -161,10 +156,7 @@
                 </data-columns>
             </adf-document-list>
 
-            <adf-pagination
+            <adf-pagination acaPagination [target]="documentList">
-                [supportedPageSizes]="'pagination.supportedPageSizes' | adfAppConfig"
-                [target]="documentList"
-                (changePageSize)="onChangePageSize($event)">
             </adf-pagination>
         </div>
 

src/app/components/favorites/favorites.component.ts

@@ -23,30 +23,33 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { NodesApiService } from '@alfresco/adf-core';
 import { Component, OnInit } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
-import { MinimalNodeEntryEntity, PathElementEntity, PathInfo, MinimalNodeEntity } from 'alfresco-js-api';
+import { Store } from '@ngrx/store';
-import { NodesApiService, UserPreferencesService } from '@alfresco/adf-core';
+import {
-
+    MinimalNodeEntity,
+    MinimalNodeEntryEntity,
+    PathElementEntity,
+    PathInfo
+} from 'alfresco-js-api';
 import { ContentManagementService } from '../../common/services/content-management.service';
 import { NodePermissionService } from '../../common/services/node-permission.service';
-import { PageComponent } from '../page.component';
-import { Store } from '@ngrx/store';
 import { AppStore } from '../../store/states/app.state';
+import { PageComponent } from '../page.component';
 
 @Component({
     templateUrl: './favorites.component.html'
 })
 export class FavoritesComponent extends PageComponent implements OnInit {
-
+    constructor(
-    constructor(private router: Router,
+        private router: Router,
-                route: ActivatedRoute,
         store: Store<AppStore>,
         private nodesApi: NodesApiService,
         private content: ContentManagementService,
-                public permission: NodePermissionService,
+        public permission: NodePermissionService
-                preferences: UserPreferencesService) {
+    ) {
-        super(preferences, route, store);
+        super(store);
     }
 
     ngOnInit() {
@@ -65,14 +68,18 @@ export class FavoritesComponent extends PageComponent implements OnInit {
 
         // TODO: rework as it will fail on non-English setups
         const isSitePath = (path: PathInfo): boolean => {
-            return path.elements.some(({ name }: PathElementEntity) => (name === 'Sites'));
+            return path.elements.some(
+                ({ name }: PathElementEntity) => name === 'Sites'
+            );
         };
 
         if (isFolder) {
             this.nodesApi
                 .getNode(id)
                 .subscribe(({ path }: MinimalNodeEntryEntity) => {
-                    const routeUrl = isSitePath(path) ? '/libraries' : '/personal-files';
+                    const routeUrl = isSitePath(path)
+                        ? '/libraries'
+                        : '/personal-files';
                     this.router.navigate([routeUrl, id]);
                 });
         }

src/app/components/files/files.component.html

@@ -103,19 +103,14 @@
                 [parentId]="node?.id"
                 [disabled]="!permission.check(node, ['create'])">
 
-                <adf-document-list #documentList
+                <adf-document-list acaDocumentList #documentList
-                    [includeFields]="['isFavorite']"
                     [sorting]="[ 'modifiedAt', 'desc' ]"
-                    [acaSortingPreferenceKey]="sortingPreferenceKey"
                     selectionMode="multiple"
                     [currentFolderId]="node?.id"
                     [allowDropFiles]="true"
                     [navigate]="false"
                     [imageResolver]="imageResolver"
-                    (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
+                    (node-dblclick)="onNodeDoubleClick($event.detail?.node)">
-                    (ready)="onDocumentListReady($event, documentList)"
-                    (node-select)="onNodeSelect($event, documentList)"
-                    (node-unselect)="onNodeUnselect($event, documentList)">
 
                     <data-columns>
                         <data-column
@@ -158,10 +153,7 @@
                     </data-columns>
                 </adf-document-list>
 
-                <adf-pagination
+                <adf-pagination acaPagination [target]="documentList">
-                    [supportedPageSizes]="'pagination.supportedPageSizes' | adfAppConfig"
-                    [target]="documentList"
-                    (changePageSize)="onChangePageSize($event)">
                 </adf-pagination>
             </adf-upload-drag-area>
         </div>

src/app/components/files/files.component.ts

@@ -23,23 +23,18 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { AlfrescoApiService, FileUploadEvent, NodesApiService, UploadService } from '@alfresco/adf-core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Params, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { MinimalNodeEntity, MinimalNodeEntryEntity, NodePaging, PathElement, PathElementEntity } from 'alfresco-js-api';
 import { Observable } from 'rxjs/Rx';
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Router, ActivatedRoute, Params } from '@angular/router';
-import { MinimalNodeEntity, MinimalNodeEntryEntity, PathElementEntity, NodePaging, PathElement } from 'alfresco-js-api';
-import {
-    UploadService, FileUploadEvent, NodesApiService,
-    AlfrescoApiService, UserPreferencesService
-} from '@alfresco/adf-core';
-
 import { BrowsingFilesService } from '../../common/services/browsing-files.service';
 import { ContentManagementService } from '../../common/services/content-management.service';
 import { NodeActionsService } from '../../common/services/node-actions.service';
 import { NodePermissionService } from '../../common/services/node-permission.service';
-
-import { PageComponent } from '../page.component';
-import { Store } from '@ngrx/store';
 import { AppStore } from '../../store/states/app.state';
+import { PageComponent } from '../page.component';
 
 @Component({
     templateUrl: './files.component.html'
@@ -51,7 +46,7 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
     private nodePath: PathElement[];
 
     constructor(private router: Router,
-                route: ActivatedRoute,
+                private route: ActivatedRoute,
                 store: Store<AppStore>,
                 private nodesApi: NodesApiService,
                 private nodeActionsService: NodeActionsService,
@@ -59,9 +54,8 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
                 private contentManagementService: ContentManagementService,
                 private browsingFilesService: BrowsingFilesService,
                 private apiService: AlfrescoApiService,
-                public permission: NodePermissionService,
+                public permission: NodePermissionService) {
-                preferences: UserPreferencesService) {
+        super(store);
-        super(preferences, route, store);
     }
 
     ngOnInit() {

src/app/components/libraries/libraries.component.html

@@ -8,16 +8,11 @@
 
     <div class="inner-layout__content">
         <div class="inner-layout__panel">
-            <adf-document-list #documentList
+            <adf-document-list acaDocumentList #documentList
-                [includeFields]="['isFavorite']"
                 currentFolderId="-mysites-"
                 selectionMode="none"
                 [navigate]="false"
                 [sorting]="[ 'title', 'asc' ]"
-                [acaSortingPreferenceKey]="sortingPreferenceKey"
-                (ready)="onDocumentListReady($event, documentList)"
-                (node-select)="onNodeSelect($event, documentList)"
-                (node-unselect)="onNodeUnselect($event, documentList)"
                 (node-dblclick)="onNodeDoubleClick($event)">
 
                 <empty-folder-content>
@@ -67,10 +62,7 @@
                 </data-columns>
             </adf-document-list>
 
-            <adf-pagination
+            <adf-pagination acaPagination [target]="documentList">
-                [supportedPageSizes]="'pagination.supportedPageSizes' | adfAppConfig"
-                [target]="documentList"
-                (changePageSize)="onChangePageSize($event)">
             </adf-pagination>
         </div>
     </div>

src/app/components/libraries/libraries.component.ts

@@ -25,7 +25,7 @@
 
 import { Component } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
-import { NodesApiService, UserPreferencesService } from '@alfresco/adf-core';
+import { NodesApiService } from '@alfresco/adf-core';
 import { ShareDataRow } from '@alfresco/adf-content-services';
 
 import { PageComponent } from '../page.component';
@@ -38,11 +38,10 @@ import { AppStore } from '../../store/states/app.state';
 export class LibrariesComponent extends PageComponent {
 
     constructor(private nodesApi: NodesApiService,
-                route: ActivatedRoute,
+                private route: ActivatedRoute,
                 store: Store<AppStore>,
-                private router: Router,
+                private router: Router) {
-                preferences: UserPreferencesService) {
+        super(store);
-        super(preferences, route, store);
     }
 
     makeLibraryTooltip(library: any): string {

src/app/components/page.component.spec.ts

@@ -29,7 +29,7 @@ class TestClass extends PageComponent {
     node: any;
 
     constructor() {
-        super(null, null, null);
+        super(null);
     }
 }
 

src/app/components/page.component.ts

@@ -24,11 +24,10 @@
  */
 
 import { DocumentListComponent, ShareDataRow } from '@alfresco/adf-content-services';
-import { FileUploadErrorEvent, UserPreferencesService } from '@alfresco/adf-core';
+import { FileUploadErrorEvent } from '@alfresco/adf-core';
 import { OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { Store } from '@ngrx/store';
-import { MinimalNodeEntity, MinimalNodeEntryEntity, Pagination } from 'alfresco-js-api';
+import { MinimalNodeEntity, MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { takeUntil } from 'rxjs/operators';
 import { Subject, Subscription } from 'rxjs/Rx';
 import { SnackbarErrorAction, ViewNodeAction, SetSelectedNodesAction } from '../store/actions';
@@ -50,18 +49,11 @@ export abstract class PageComponent implements OnInit, OnDestroy {
 
     protected subscriptions: Subscription[] = [];
 
-    get sortingPreferenceKey(): string {
-        return this.route.snapshot.data.sortingPreferenceKey;
-    }
-
     static isLockedNode(node) {
         return node.isLocked || (node.properties && node.properties['cm:lockType'] === 'READ_ONLY_LOCK');
     }
 
-    constructor(protected preferences: UserPreferencesService,
+    constructor(protected store: Store<AppStore>) {}
-                protected route: ActivatedRoute,
-                protected store: Store<AppStore>) {
-    }
 
     ngOnInit() {
         this.store
@@ -102,52 +94,6 @@ export abstract class PageComponent implements OnInit, OnDestroy {
         return this.node ? this.node.id : null;
     }
 
-    onChangePageSize(event: Pagination): void {
-        this.preferences.paginationSize = event.maxItems;
-    }
-
-    onNodeSelect(event: CustomEvent, documentList: DocumentListComponent) {
-        if (!!event.detail && !!event.detail.node) {
-
-            const node: MinimalNodeEntryEntity = event.detail.node.entry;
-            if (node && PageComponent.isLockedNode(node)) {
-                this.unSelectLockedNodes(documentList);
-            }
-
-            this.store.dispatch(new SetSelectedNodesAction(documentList.selection));
-        }
-    }
-
-    onDocumentListReady(event: CustomEvent, documentList: DocumentListComponent) {
-        this.store.dispatch(new SetSelectedNodesAction(documentList.selection));
-    }
-
-    onNodeUnselect(event: CustomEvent, documentList: DocumentListComponent) {
-        this.store.dispatch(new SetSelectedNodesAction(documentList.selection));
-    }
-
-    unSelectLockedNodes(documentList: DocumentListComponent) {
-        documentList.selection = documentList.selection.filter(item => !PageComponent.isLockedNode(item.entry));
-
-        const dataTable = documentList.dataTable;
-        if (dataTable && dataTable.data) {
-            const rows = dataTable.data.getRows();
-
-            if (rows && rows.length > 0) {
-                rows.forEach(r => {
-                    if (this.isLockedRow(r)) {
-                        r.isSelected = false;
-                    }
-                });
-            }
-        }
-    }
-
-    isLockedRow(row) {
-        return row.getValue('isLocked') ||
-            (row.getValue('properties') && row.getValue('properties')['cm:lockType'] === 'READ_ONLY_LOCK');
-    }
-
     imageResolver(row: ShareDataRow): string | null {
         const entry: MinimalNodeEntryEntity = row.node.entry;
 

src/app/components/preview/preview.component.ts

@@ -58,13 +58,13 @@ export class PreviewComponent extends PageComponent implements OnInit {
     constructor(
         private uploadService: UploadService,
         private apiService: AlfrescoApiService,
-        preferences: UserPreferencesService,
+        private preferences: UserPreferencesService,
-        route: ActivatedRoute,
+        private route: ActivatedRoute,
         private router: Router,
         store: Store<AppStore>,
         public permission: NodePermissionService) {
 
-        super(preferences, route, store);
+        super(store);
     }
 
     ngOnInit() {

src/app/components/recent-files/recent-files.component.html

@@ -84,18 +84,13 @@
 
     <div class="inner-layout__content">
         <div class="inner-layout__panel">
-            <adf-document-list #documentList
+            <adf-document-list acaDocumentList #documentList
                 currentFolderId="-recent-"
-                [includeFields]="['isFavorite']"
                 selectionMode="multiple"
                 [navigate]="false"
                 [sorting]="[ 'modifiedAt', 'desc' ]"
-                [acaSortingPreferenceKey]="sortingPreferenceKey"
                 [imageResolver]="imageResolver"
-                (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
+                (node-dblclick)="onNodeDoubleClick($event.detail?.node)">
-                (ready)="onDocumentListReady($event, documentList)"
-                (node-select)="onNodeSelect($event, documentList)"
-                (node-unselect)="onNodeUnselect($event, documentList)">
 
                 <empty-folder-content>
                     <ng-template>
@@ -149,10 +144,7 @@
 
             </adf-document-list>
 
-            <adf-pagination
+            <adf-pagination acaPagination [target]="documentList">
-                [supportedPageSizes]="'pagination.supportedPageSizes' | adfAppConfig"
-                [target]="documentList"
-                (changePageSize)="onChangePageSize($event)">
             </adf-pagination>
         </div>
 

src/app/components/recent-files/recent-files.component.ts

@@ -24,9 +24,8 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
 import { MinimalNodeEntity } from 'alfresco-js-api';
-import { UserPreferencesService, UploadService } from '@alfresco/adf-core';
+import { UploadService } from '@alfresco/adf-core';
 
 import { ContentManagementService } from '../../common/services/content-management.service';
 import { PageComponent } from '../page.component';
@@ -40,13 +39,11 @@ import { AppStore } from '../../store/states/app.state';
 export class RecentFilesComponent extends PageComponent implements OnInit {
 
     constructor(
-        route: ActivatedRoute,
         store: Store<AppStore>,
         private uploadService: UploadService,
         private content: ContentManagementService,
-        public permission: NodePermissionService,
+        public permission: NodePermissionService) {
-        preferences: UserPreferencesService) {
+        super(store);
-        super(preferences, route, store);
     }
 
     ngOnInit() {

src/app/components/search/search.component.html

@@ -88,10 +88,7 @@
                         [sortingMode]="'server'"
                         [sorting]="sorting"
                         [node]="data"
-                        (node-dblclick)="onNodeDoubleClick($event.detail?.node)"
+                        (node-dblclick)="onNodeDoubleClick($event.detail?.node)">
-                        (ready)="onDocumentListReady($event, documentList)"
-                        (node-select)="onNodeSelect($event, documentList)"
-                        (node-unselect)="onNodeUnselect($event, documentList)">
 
                         <data-columns>
                             <data-column

src/app/components/search/search.component.ts

@@ -27,7 +27,6 @@ import { Component, OnInit, ViewChild } from '@angular/core';
 import { NodePaging, Pagination, MinimalNodeEntity } from 'alfresco-js-api';
 import { ActivatedRoute, Params } from '@angular/router';
 import { SearchQueryBuilderService, SearchComponent as AdfSearchComponent, NodePermissionService } from '@alfresco/adf-content-services';
-import { UserPreferencesService } from '@alfresco/adf-core';
 import { PageComponent } from '../page.component';
 import { Store } from '@ngrx/store';
 import { AppStore } from '../../store/states/app.state';
@@ -53,10 +52,10 @@ export class SearchComponent extends PageComponent implements OnInit {
     constructor(
         public permission: NodePermissionService,
         private queryBuilder: SearchQueryBuilderService,
-        store: Store<AppStore>,
+        private route: ActivatedRoute,
-        preferences: UserPreferencesService,
+        store: Store<AppStore>
-        route: ActivatedRoute) {
+    ) {
-        super(preferences, route, store);
+        super(store);
 
         queryBuilder.paging = {
             skipCount: 0,

src/app/components/shared-files/shared-files.component.html

@@ -92,16 +92,11 @@
 
     <div class="inner-layout__content">
         <div class="inner-layout__panel">
-            <adf-document-list #documentList
+            <adf-document-list acaDocumentList #documentList
                 currentFolderId="-sharedlinks-"
-                [includeFields]="['isFavorite']"
                 selectionMode="multiple"
                 [sorting]="[ 'modifiedAt', 'desc' ]"
-                [acaSortingPreferenceKey]="sortingPreferenceKey"
+                (node-dblclick)="showPreview($event.detail?.node)">
-                (node-dblclick)="showPreview($event.detail?.node)"
-                (ready)="onDocumentListReady($event, documentList)"
-                (node-select)="onNodeSelect($event, documentList)"
-                (node-unselect)="onNodeUnselect($event, documentList)">
 
                 <empty-folder-content>
                     <ng-template>
@@ -167,10 +162,7 @@
                 </data-columns>
             </adf-document-list>
 
-            <adf-pagination
+            <adf-pagination acaPagination [target]="documentList">
-                [supportedPageSizes]="'pagination.supportedPageSizes' | adfAppConfig"
-                [target]="documentList"
-                (changePageSize)="onChangePageSize($event)">
             </adf-pagination>
         </div>
 

src/app/components/shared-files/shared-files.component.ts

@@ -24,8 +24,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { UploadService } from '@alfresco/adf-core';
-import { UserPreferencesService, UploadService } from '@alfresco/adf-core';
 
 import { ContentManagementService } from '../../common/services/content-management.service';
 import { NodePermissionService } from '../../common/services/node-permission.service';
@@ -38,13 +37,11 @@ import { AppStore } from '../../store/states/app.state';
 })
 export class SharedFilesComponent extends PageComponent implements OnInit {
 
-    constructor(route: ActivatedRoute,
+    constructor(store: Store<AppStore>,
-                store: Store<AppStore>,
                 private uploadService: UploadService,
                 private content: ContentManagementService,
-                public permission: NodePermissionService,
+                public permission: NodePermissionService) {
-                preferences: UserPreferencesService) {
+        super(store);
-        super(preferences, route, store);
     }
 
     ngOnInit() {

src/app/components/trashcan/trashcan.component.html

@@ -24,16 +24,11 @@
 
     <div class="inner-layout__content">
         <div class="inner-layout__panel">
-            <adf-document-list #documentList
+            <adf-document-list acaDocumentList #documentList
                 currentFolderId="-trashcan-"
-                [includeFields]="['isFavorite']"
                 selectionMode="multiple"
                 [navigate]="false"
-                [sorting]="[ 'archivedAt', 'desc' ]"
+                [sorting]="[ 'archivedAt', 'desc' ]">
-                [acaSortingPreferenceKey]="sortingPreferenceKey"
-                (ready)="onDocumentListReady($event, documentList)"
-                (node-select)="onNodeSelect($event, documentList)"
-                (node-unselect)="onNodeUnselect($event, documentList)">
 
                 <empty-folder-content>
                     <ng-template>
@@ -96,10 +91,7 @@
                 </data-columns>
             </adf-document-list>
 
-            <adf-pagination
+            <adf-pagination acaPagination [target]="documentList">
-                [supportedPageSizes]="'pagination.supportedPageSizes' | adfAppConfig"
-                [target]="documentList"
-                (changePageSize)="onChangePageSize($event)">
             </adf-pagination>
         </div>
     </div>

src/app/components/trashcan/trashcan.component.ts

@@ -24,9 +24,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { PeopleContentService } from '@alfresco/adf-core';
-import { Pagination } from 'alfresco-js-api';
-import { UserPreferencesService, PeopleContentService } from '@alfresco/adf-core';
 import { ContentManagementService } from '../../common/services/content-management.service';
 import { PageComponent } from '../page.component';
 import { Store } from '@ngrx/store';
@@ -40,10 +38,8 @@ export class TrashcanComponent extends PageComponent implements OnInit {
 
     constructor(private contentManagementService: ContentManagementService,
                 private peopleApi: PeopleContentService,
-                preferences: UserPreferencesService,
+                store: Store<AppStore>) {
-                store: Store<AppStore>,
+        super(store);
-                route: ActivatedRoute) {
-        super(preferences, route, store);
     }
 
     ngOnInit() {
@@ -57,10 +53,6 @@ export class TrashcanComponent extends PageComponent implements OnInit {
         );
     }
 
-    onChangePageSize(event: Pagination): void {
-        this.preferences.paginationSize = event.maxItems;
-    }
-
     private isUserAdmin(user) {
         if (user && user.capabilities) {
             this.userIsAdmin = user.capabilities.isAdmin;

src/app/directives/document-list.directive.ts

@@ -0,0 +1,158 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 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 { Directive, OnDestroy, OnInit, HostListener } from '@angular/core';
+import { DocumentListComponent } from '@alfresco/adf-content-services';
+import { ActivatedRoute } from '@angular/router';
+import { UserPreferencesService } from '@alfresco/adf-core';
+import { Subscription } from 'rxjs/Rx';
+import { Store } from '@ngrx/store';
+import { AppStore } from '../store/states/app.state';
+import { SetSelectedNodesAction } from '../store/actions';
+import { MinimalNodeEntryEntity } from 'alfresco-js-api';
+
+@Directive({
+    selector: '[acaDocumentList]'
+})
+export class DocumentListDirective implements OnInit, OnDestroy {
+    private subscriptions: Subscription[] = [];
+
+    get sortingPreferenceKey(): string {
+        return this.route.snapshot.data.sortingPreferenceKey;
+    }
+
+    constructor(
+        private store: Store<AppStore>,
+        private documentList: DocumentListComponent,
+        private preferences: UserPreferencesService,
+        private route: ActivatedRoute
+    ) {}
+
+    ngOnInit() {
+        this.documentList.includeFields = ['isFavorite'];
+
+        if (this.sortingPreferenceKey) {
+            const current = this.documentList.sorting;
+
+            const key = this.preferences.get(
+                `${this.sortingPreferenceKey}.sorting.key`,
+                current[0]
+            );
+            const direction = this.preferences.get(
+                `${this.sortingPreferenceKey}.sorting.direction`,
+                current[1]
+            );
+
+            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 });
+        }
+
+        this.subscriptions.push(
+            this.documentList.ready.subscribe(() => this.onReady())
+        );
+    }
+
+    ngOnDestroy() {
+        this.subscriptions.forEach(subscription => subscription.unsubscribe());
+        this.subscriptions = [];
+    }
+
+    @HostListener('sorting-changed', ['$event'])
+    onSortingChanged(event: CustomEvent) {
+        if (this.sortingPreferenceKey) {
+            this.preferences.set(
+                `${this.sortingPreferenceKey}.sorting.key`,
+                event.detail.key
+            );
+            this.preferences.set(
+                `${this.sortingPreferenceKey}.sorting.direction`,
+                event.detail.direction
+            );
+        }
+    }
+
+    @HostListener('node-select', ['$event'])
+    onNodeSelect(event: CustomEvent) {
+        if (!!event.detail && !!event.detail.node) {
+            const node: MinimalNodeEntryEntity = event.detail.node.entry;
+            if (node && this.isLockedNode(node)) {
+                this.unSelectLockedNodes(this.documentList);
+            }
+
+            this.store.dispatch(
+                new SetSelectedNodesAction(this.documentList.selection)
+            );
+        }
+    }
+
+    @HostListener('node-unselect')
+    onNodeUnselect() {
+        this.store.dispatch(
+            new SetSelectedNodesAction(this.documentList.selection)
+        );
+    }
+
+    onReady() {
+        this.store.dispatch(
+            new SetSelectedNodesAction(this.documentList.selection)
+        );
+    }
+
+    private isLockedNode(node): boolean {
+        return (
+            node.isLocked ||
+            (node.properties &&
+                node.properties['cm:lockType'] === 'READ_ONLY_LOCK')
+        );
+    }
+
+    private isLockedRow(row): boolean {
+        return (
+            row.getValue('isLocked') ||
+            (row.getValue('properties') &&
+                row.getValue('properties')['cm:lockType'] === 'READ_ONLY_LOCK')
+        );
+    }
+
+    private unSelectLockedNodes(documentList: DocumentListComponent) {
+        documentList.selection = documentList.selection.filter(
+            item => !this.isLockedNode(item.entry)
+        );
+
+        const dataTable = documentList.dataTable;
+        if (dataTable && dataTable.data) {
+            const rows = dataTable.data.getRows();
+
+            if (rows && rows.length > 0) {
+                rows.forEach(r => {
+                    if (this.isLockedRow(r)) {
+                        r.isSelected = false;
+                    }
+                });
+            }
+        }
+    }
+}

src/app/directives/pagination.directive.ts

@@ -0,0 +1,65 @@
+/*!
+ * @license
+ * Alfresco Example Content Application
+ *
+ * Copyright (C) 2005 - 2018 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 { Directive, OnInit, OnDestroy } from '@angular/core';
+import {
+    PaginationComponent,
+    UserPreferencesService,
+    PaginationModel,
+    AppConfigService
+} from '@alfresco/adf-core';
+import { Subscription } from 'rxjs/Rx';
+
+@Directive({
+    selector: '[acaPagination]'
+})
+export class PaginationDirective implements OnInit, OnDestroy {
+    private subscriptions: Subscription[] = [];
+
+    constructor(
+        private pagination: PaginationComponent,
+        private preferences: UserPreferencesService,
+        private config: AppConfigService
+    ) {}
+
+    ngOnInit() {
+        this.pagination.supportedPageSizes = this.config.get(
+            'pagination.supportedPageSizes'
+        );
+
+        this.subscriptions.push(
+            this.pagination.changePageSize.subscribe(
+                (event: PaginationModel) => {
+                    this.preferences.paginationSize = event.maxItems;
+                }
+            )
+        );
+    }
+
+    ngOnDestroy() {
+        this.subscriptions.forEach(subscription => subscription.unsubscribe());
+        this.subscriptions = [];
+    }
+}

src/app/directives/sorting-preference-key.directive.ts

@@ -1,64 +0,0 @@
-/*!
- * @license
- * Alfresco Example Content Application
- *
- * Copyright (C) 2005 - 2018 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 { Directive, Input, OnInit, HostListener } from '@angular/core';
-import { DocumentListComponent } from '@alfresco/adf-content-services';
-import { UserPreferencesService } from '@alfresco/adf-core';
-
-@Directive({
-    selector: '[acaSortingPreferenceKey]',
-})
-export class SortingPreferenceKeyDirective implements OnInit {
-
-    // tslint:disable-next-line:no-input-rename
-    @Input('acaSortingPreferenceKey')
-    preferenceKey: string;
-
-    constructor(
-        private documentList: DocumentListComponent,
-        private userPreferencesService: UserPreferencesService) {
-    }
-
-    @HostListener('sorting-changed', ['$event'])
-    onSortingChanged(event: CustomEvent) {
-        if (this.preferenceKey) {
-            this.userPreferencesService.set(`${this.preferenceKey}.sorting.key`, event.detail.key);
-            this.userPreferencesService.set(`${this.preferenceKey}.sorting.direction`, event.detail.direction);
-        }
-    }
-
-    ngOnInit() {
-        if (this.preferenceKey) {
-            const current = this.documentList.sorting;
-
-            const key = this.userPreferencesService.get(`${this.preferenceKey}.sorting.key`, current[0]);
-            const direction = this.userPreferencesService.get(`${this.preferenceKey}.sorting.direction`, current[1]);
-
-            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 });
-        }
-    }
-}