diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html index 378f367b6f..701a09374b 100644 --- a/demo-shell-ng2/app/components/files/files.component.html +++ b/demo-shell-ng2/app/components/files/files.component.html @@ -8,10 +8,6 @@ source="name" class="full-width name-column"> - - @@ -78,4 +74,4 @@ - \ No newline at end of file + diff --git a/demo-shell-ng2/i18n/en.json b/demo-shell-ng2/i18n/en.json index 92a9b1e0c1..8478e0ba6b 100644 --- a/demo-shell-ng2/i18n/en.json +++ b/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" }, diff --git a/ng2-components/ng2-alfresco-documentlist/ng2-alfresco-documentlist.ts b/ng2-components/ng2-alfresco-documentlist/ng2-alfresco-documentlist.ts index e980c553ae..a8672e9163 100644 --- a/ng2-components/ng2-alfresco-documentlist/ng2-alfresco-documentlist.ts +++ b/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'; diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.css b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.css index 28a1c3ea39..9c54596092 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.css +++ b/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; } diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html index 73a42cce4d..e24ab462a4 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html +++ b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.html @@ -8,7 +8,11 @@ - + {{col.srTitle}} {{col.title}} diff --git a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts b/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts index 3be5bc1990..b0325c8e9a 100644 --- a/ng2-components/ng2-alfresco-documentlist/src/components/document-list.ts +++ b/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 = 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 = { + 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); + } } diff --git a/ng2-components/ng2-alfresco-documentlist/src/models/column-sorting.model.ts b/ng2-components/ng2-alfresco-documentlist/src/models/column-sorting.model.ts new file mode 100644 index 0000000000..10c0dc9123 --- /dev/null +++ b/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'; +}