Merge pull request #12350 from nextcloud/filepicker-sorting

Enable sorting in file picker

Author: MorrisJobke

core/css/styles.scss

@@ -773,6 +773,47 @@ code {
 		margin-bottom: 50px;
 	}
 	.filelist {
+		thead {
+			tr {
+				border-bottom: 1px solid var(--color-border);
+				background-color: var(--color-main-background);
+				th {
+					width: 80%;
+					border: none;
+				}
+			}
+		}
+		th .columntitle {
+			display: block;
+			padding: 15px;
+			height: 50px;
+			box-sizing: border-box;
+			-moz-box-sizing: border-box;
+			vertical-align: middle;
+		}
+		th .columntitle.name {
+			padding-left: 5px;
+			margin-left: 50px;
+		}
+
+		th .sort-indicator {
+			width: 10px;
+			height: 8px;
+			margin-left: 5px;
+			display: inline-block;
+			vertical-align: text-bottom;
+			opacity: .3;
+		}
+		.sort-indicator.hidden,
+		th:hover .sort-indicator.hidden,
+		th:focus .sort-indicator.hidden {
+			visibility: hidden;
+		}
+		th:hover .sort-indicator.hidden,
+		th:focus .sort-indicator.hidden {
+			visibility: visible;
+		}
+
 		td {
 			padding: 14px;
 			border-bottom: 1px solid var(--color-border);

core/js/oc-dialogs.js

@@ -192,6 +192,9 @@ var OCdialogs = {
 	*/
 	filepicker:function(title, callback, multiselect, mimetypeFilter, modal, type) {
 		var self = this;
+
+		this.filepicker.sortField = 'name';
+		this.filepicker.sortOrder = 'asc';
 		// avoid opening the picker twice
 		if (this.filepicker.loading) {
 			return;
@@ -252,14 +255,22 @@ var OCdialogs = {
 			}
 
 			self.$filePicker.ready(function() {
+				self.$fileListHeader = self.$filePicker.find('.filelist thead tr');
 				self.$filelist = self.$filePicker.find('.filelist tbody');
+				self.$filelistContainer = self.$filePicker.find('.filelist-container');
 				self.$dirTree = self.$filePicker.find('.dirtree');
 				self.$dirTree.on('click', 'div:not(:last-child)', self, function (event) {
 					self._handleTreeListSelect(event, type);
 				});
 				self.$filelist.on('click', 'tr', function(event) {
 					self._handlePickerClick(event, $(this), type);
 				});
+				self.$fileListHeader.on('click', 'a', function(event) {
+					var dir = self.$filePicker.data('path');
+					self.filepicker.sortField = $(event.currentTarget).data('sort');
+					self.filepicker.sortOrder = self.filepicker.sortOrder === 'asc' ? 'desc' : 'asc';
+					self._fillFilePicker(dir);
+				});
 				self._fillFilePicker('');
 			});
 
@@ -824,7 +835,7 @@ var OCdialogs = {
 			var self = this;
 			$.get(OC.filePath('core', 'templates', 'filepicker.html'), function(tmpl) {
 				self.$filePickerTemplate = $(tmpl);
-				self.$listTmpl = self.$filePickerTemplate.find('.filelist tr:first-child').detach();
+				self.$listTmpl = self.$filePickerTemplate.find('.filelist tbody tr:first-child').detach();
 				defer.resolve(self.$filePickerTemplate);
 			})
 			.fail(function(jqXHR, textStatus, errorThrown) {
@@ -886,34 +897,68 @@ var OCdialogs = {
 	*/
 	_fillFilePicker:function(dir) {
 		var self = this;
-		this.$filelist.empty().addClass('icon-loading');
+		this.$filelist.empty();
+		this.$filePicker.find('.emptycontent').hide();
+		this.$filelistContainer.addClass('icon-loading');
 		this.$filePicker.data('path', dir);
 		var filter = this.$filePicker.data('mimetype');
 		if (typeof(filter) === "string") {
 			filter = [filter];
 		}
+		self.$fileListHeader.find('.sort-indicator').addClass('hidden').removeClass('icon-triangle-n').removeClass('icon-triangle-s');
+		self.$fileListHeader.find('[data-sort=' + self.filepicker.sortField + '] .sort-indicator').removeClass('hidden');
+		if (self.filepicker.sortOrder === 'asc') {
+			self.$fileListHeader.find('[data-sort=' + self.filepicker.sortField + '] .sort-indicator').addClass('icon-triangle-n');
+		} else {
+			self.$fileListHeader.find('[data-sort=' + self.filepicker.sortField + '] .sort-indicator').addClass('icon-triangle-s');
+		}
 		self.filepicker.filesClient.getFolderContents(dir).then(function(status, files) {
 			if (filter && filter.length > 0 && filter.indexOf('*') === -1) {
 				files = files.filter(function (file) {
 					return file.type === 'dir' || filter.indexOf(file.mimetype) !== -1;
 				});
 			}
-			files = files.sort(function(a, b) {
-				if (a.type === 'dir' && b.type !== 'dir') {
+
+			var Comparators = {
+				name: function(fileInfo1, fileInfo2) {
+					if (fileInfo1.type === 'dir' && fileInfo2.type !== 'dir') {
+						return -1;
+					}
+					if (fileInfo1.type !== 'dir' && fileInfo2.type === 'dir') {
+						return 1;
+					}
+					return OC.Util.naturalSortCompare(fileInfo1.name, fileInfo2.name);
+				},
+				size: function(fileInfo1, fileInfo2) {
+					return fileInfo1.size - fileInfo2.size;
+				},
+				mtime: function(fileInfo1, fileInfo2) {
+					return fileInfo1.mtime - fileInfo2.mtime;
+				}
+			};
+			var comparator = Comparators[self.filepicker.sortField] || Comparators.name;
+			files = files.sort(function(file1, file2) {
+				var isFavorite = function(fileInfo) {
+					return fileInfo.tags && fileInfo.tags.indexOf(OC.TAG_FAVORITE) >= 0;
+				};
+
+				if (isFavorite(file1) && !isFavorite(file2)) {
 					return -1;
-				} else if(a.type !== 'dir' && b.type === 'dir') {
+				} else if (!isFavorite(file1) && isFavorite(file2)) {
 					return 1;
-				} else {
-					return a.name.localeCompare(b.name, undefined, {numeric: true});
 				}
+
+				return self.filepicker.sortOrder === 'asc' ? comparator(file1, file2) : -comparator(file1, file2);
 			});
 
 			self._fillSlug();
 
 			if (files.length === 0) {
 				self.$filePicker.find('.emptycontent').show();
+				self.$fileListHeader.hide();
 			} else {
 				self.$filePicker.find('.emptycontent').hide();
+				self.$fileListHeader.show();
 			}
 
 			$.each(files, function(idx, entry) {
@@ -953,7 +998,7 @@ var OCdialogs = {
 				self.$filelist.append($row);
 			});
 
-			self.$filelist.removeClass('icon-loading');
+			self.$filelistContainer.removeClass('icon-loading');
 		});
 	},
 	/**

core/templates/filepicker.html

@@ -8,17 +8,39 @@
 			<h2>{emptytext}</h2>
 		</div>
 		<table id="filestable" class="filelist list-container view-grid">
+			<thead>
+				<tr>
+					<th id="headerName" class="column-name">
+						<div id="headerName-container">
+							<a class="name sort columntitle" data-sort="name">
+								<span>Name</span>
+								<span class="sort-indicator hidden icon-triangle-n"></span>
+							</a>
+						</div>
+					</th>
+					<th id="headerSize" class="column-size">
+						<a class="size sort columntitle" data-sort="size">
+							<span>Size</span>
+							<span class="sort-indicator hidden icon-triangle-n"></span></a>
+					</th>
+					<th id="headerDate" class="column-mtime">
+						<a id="modified" class="columntitle" data-sort="mtime">
+							<span>Modified</span>
+							<span class="sort-indicator hidden icon-triangle-n"></span></a>
+					</th>
+				</tr>
+			</thead>
 			<tbody>
-			<tr data-entryname="{filename}" data-type="{type}">
-				<td class="filename"
-					style="background-image:url({icon})">{filename}
-				</td>
-				<td class="filesize"
-					style="color:rgb({sizeColor}, {sizeColor}, {sizeColor})">
-					{size}
-				</td>
-				<td class="date">{date}</td>
-			</tr>
+				<tr data-entryname="{filename}" data-type="{type}">
+					<td class="filename"
+						style="background-image:url({icon})">{filename}
+					</td>
+					<td class="filesize"
+						style="color:rgb({sizeColor}, {sizeColor}, {sizeColor})">
+						{size}
+					</td>
+					<td class="date">{date}</td>
+				</tr>
 			</tbody>
 		</table>
 	</div>