#66 Initial sorting support for document list

demo-shell-ng2/app/components/files/files.component.html

@@ -8,10 +8,6 @@
                     source="name"
                     class="full-width name-column">
             </content-column>
-            <content-column
-                    title="{{'DOCUMENT_LIST.COLUMNS.SITE' | translate}}"
-                    source="location.site">
-            </content-column>
             <content-column
                     title="{{'DOCUMENT_LIST.COLUMNS.CREATED_BY' | translate}}"
                     source="createdByUser.displayName">

demo-shell-ng2/i18n/en.json

@@ -4,7 +4,6 @@
     "DOCUMENT_LIST": {
         "COLUMNS": {
             "DISPLAY_NAME": "Display name",
-            "SITE": "Site",
             "CREATED_BY": "Created by",
             "CREATED_ON": "Created on"
         },

ng2-components/ng2-alfresco-documentlist/ng2-alfresco-documentlist.ts

@@ -32,6 +32,9 @@ export * from './src/components/content-column-list';
 export * from './src/components/content-action';
 export * from './src/components/content-action-list';
 
+// models
+export * from './src/models/column-sorting.model';
+
 // services
 export * from './src/services/folder-actions.service';
 export * from './src/services/document-actions.service';

ng2-components/ng2-alfresco-documentlist/src/components/document-list.css

@@ -11,6 +11,15 @@
     cursor: pointer;
 }
 
+:host .column-header {
+    cursor: pointer;
+    user-select: none;
+    -webkit-user-select: none;   /* Chrome/Safari/Opera */
+    -moz-user-select: none;      /* Firefox */
+    -ms-user-select: none;       /* IE/Edge */
+    -webkit-touch-callout: none; /* iOS Safari */
+}
+
 :host .parent-folder-link { cursor: pointer; }
 :host .parent-folder-link > td { text-align: left; }
 

ng2-components/ng2-alfresco-documentlist/src/components/document-list.html

@@ -8,7 +8,11 @@
     <thead>
     <tr>
         <!-- Columns -->
-        <th class="mdl-data-table__cell--non-numeric {{col.cssClass}}" *ngFor="#col of columns">
+        <th class="mdl-data-table__cell--non-numeric column-header {{col.cssClass}}"
+            *ngFor="#col of columns"
+            [class.mdl-data-table__header--sorted-ascending]="sorting.key === col.source && sorting.direction === 'asc'"
+            [class.mdl-data-table__header--sorted-descending]="sorting.key === col.source && sorting.direction === 'desc'"
+            (click)="onColumnHeaderClick(col)">
             <span *ngIf="col.srTitle" class="sr-only">{{col.srTitle}}</span>
             <span *ngIf="col.title">{{col.title}}</span>
         </th>

ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts

@@ -28,6 +28,7 @@ import { AlfrescoService } from './../services/alfresco.service';
 import { MinimalNodeEntity, NodePaging } from './../models/document-library.model';
 import { ContentActionModel } from './../models/content-action.model';
 import { ContentColumnModel } from './../models/content-column.model';
+import { ColumnSortingModel } from './../models/column-sorting.model';
 
 declare var componentHandler;
 declare let __moduleName: string;
@@ -74,6 +75,11 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit
     actions: ContentActionModel[] = [];
     columns: ContentColumnModel[] = [];
 
+    sorting: ColumnSortingModel = {
+        key: 'name',
+        direction: 'asc'
+    };
+
     /**
      * Determines whether navigation to parent folder is available.
      * @returns {boolean}
@@ -255,7 +261,7 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit
             this._alfrescoService
                 .getFolder(path)
                 .subscribe(
-                    folder => this.folder = folder,
+                    folder => this.folder = this.sort(folder, this.sorting),
                     error => this.errorMessage = <any>error
                 );
         }
@@ -316,7 +322,7 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit
 
         let nameCol = new ContentColumnModel();
         nameCol.title = 'Name';
-        nameCol.source = 'displayName';
+        nameCol.source = 'name';
         nameCol.cssClass = 'full-width name-column';
 
         this.columns = [
@@ -324,4 +330,42 @@ export class DocumentList implements OnInit, AfterViewChecked, AfterContentInit
             nameCol
         ];
     }
+
+    onColumnHeaderClick(column: ContentColumnModel) {
+        if (column) {
+            if (this.sorting.key === column.source) {
+                this.sorting.direction = this.sorting.direction === 'asc' ? 'desc' : 'asc';
+            } else {
+                this.sorting = <ColumnSortingModel> {
+                    key: column.source,
+                    direction: 'asc'
+                };
+            }
+            this.sort(this.folder, this.sorting);
+        }
+    }
+
+    sort(node: NodePaging, options: ColumnSortingModel) {
+        if (this._hasEntries(node)) {
+            node.list.entries.sort((a: MinimalNodeEntity, b: MinimalNodeEntity) => {
+                if (a.entry.isFolder != b.entry.isFolder) {
+                    return options.direction === 'asc'
+                        ? (a.entry.isFolder ? -1 : 1)
+                        : (a.entry.isFolder ? 1 : -1);
+                }
+
+                var left = this.getObjectValue(a.entry, options.key).toString();
+                var right = this.getObjectValue(b.entry, options.key).toString();
+
+                return options.direction === 'asc'
+                    ? left.localeCompare(right)
+                    : right.localeCompare(left);
+            });
+        }
+        return node;
+    }
+
+    private _hasEntries(node: NodePaging): boolean {
+        return (node && node.list && node.list.entries && node.list.entries.length > 0);
+    }
 }

ng2-components/ng2-alfresco-documentlist/src/models/column-sorting.model.ts

@@ -0,0 +1,21 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class ColumnSortingModel {
+    key: string;
+    direction: string = 'asc';
+}