Add versions tab to files sidebar

- move versions to a tab in the files sidebar
- added mechanism to auto-update the row in the FileList whenever values
  are set to the FileInfoModel given to the sidebar
- updated tags/favorite action to make use of that new mechanism

5 files changed, 71 insertions, 12 deletions

diff --git a/apps/files/js/detailsview.js b/apps/files/js/detailsview.js
index 83d7fd4a178..3a775c29ec6 100644
--- a/apps/files/js/detailsview.js
+++ b/apps/files/js/detailsview.js
@@ -35,7 +35,7 @@
 	var DetailsView = OC.Backbone.View.extend({
 		id: 'app-sidebar',
 		tabName: 'div',
-		className: 'detailsView',
+		className: 'detailsView scroll-container',
 
 		_template: null,
 
diff --git a/apps/files/js/detailtabview.js b/apps/files/js/detailtabview.js
index b0e170bc4e7..449047cf252 100644
--- a/apps/files/js/detailtabview.js
+++ b/apps/files/js/detailtabview.js
@@ -84,6 +84,13 @@
 		 */
 		getFileInfo: function() {
 			return this.model;
+		},
+
+		/**
+		 * Load the next page of results
+		 */
+		nextPage: function() {
+			// load the next page, if applicable
 		}
 	});
 	DetailTabView._TAB_COUNT = 0;
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js
index 9593ee79e66..3f0ee932d1e 100644
--- a/apps/files/js/filelist.js
+++ b/apps/files/js/filelist.js
@@ -291,6 +291,7 @@
 		 * @return {OCA.Files.FileInfoModel} file info model
 		 */
 		getModelForFile: function(fileName) {
+			var self = this;
 			var $tr;
 			// jQuery object ?
 			if (fileName.is) {
@@ -318,6 +319,21 @@
 			if (!model.has('path')) {
 				model.set('path', this.getCurrentDirectory(), {silent: true});
 			}
+
+			model.on('change', function(model) {
+				// re-render row
+				var highlightState = $tr.hasClass('highlighted');
+				$tr = self.updateRow(
+					$tr,
+					_.extend({isPreviewAvailable: true}, model.toJSON()),
+					{updateSummary: true, silent: false, animate: true}
+				);
+				$tr.toggleClass('highlighted', highlightState);
+			});
+			model.on('busy', function(model, state) {
+				self.showFileBusyState($tr, state);
+			});
+
 			return model;
 		},
 
@@ -341,6 +357,9 @@
 			if (!fileName) {
 				OC.Apps.hideAppSidebar(this._detailsView.$el);
 				this._detailsView.setFileInfo(null);
+				if (this._currentFileModel) {
+					this._currentFileModel.off();
+				}
 				this._currentFileModel = null;
 				return;
 			}
@@ -1223,6 +1242,10 @@
 		reload: function() {
 			this._selectedFiles = {};
 			this._selectionSummary.clear();
+			if (this._currentFileModel) {
+				this._currentFileModel.off();
+			}
+			this._currentFileModel = null;
 			this.$el.find('.select-all').prop('checked', false);
 			this.showMask();
 			if (this._reloadCall) {
@@ -1555,6 +1578,23 @@
 		},
 
 		/**
+		 * Updates the given row with the given file info
+		 *
+		 * @param {Object} $tr row element
+		 * @param {OCA.Files.FileInfo} fileInfo file info
+		 * @param {Object} options options
+		 *
+		 * @return {Object} new row element
+		 */
+		updateRow: function($tr, fileInfo, options) {
+			this.files.splice($tr.index(), 1);
+			$tr.remove();
+			$tr = this.add(fileInfo, _.extend({updateSummary: false, silent: true}, options));
+			this.$fileList.trigger($.Event('fileActionsReady', {fileList: this, $files: $tr}));
+			return $tr;
+		},
+
+		/**
 		 * Triggers file rename input field for the given file name.
 		 * If the user enters a new name, the file will be renamed.
 		 *
diff --git a/apps/files/js/tagsplugin.js b/apps/files/js/tagsplugin.js
index 609e38ca9a9..9f45da9a6e2 100644
--- a/apps/files/js/tagsplugin.js
+++ b/apps/files/js/tagsplugin.js
@@ -92,6 +92,7 @@
 				actionHandler: function(fileName, context) {
 					var $actionEl = context.$file.find('.action-favorite');
 					var $file = context.$file;
+					var fileInfo = context.fileList.files[$file.index()];
 					var dir = context.dir || context.fileList.getCurrentDirectory();
 					var tags = $file.attr('data-tags');
 					if (_.isUndefined(tags)) {
@@ -106,9 +107,11 @@
 					} else {
 						tags.push(OC.TAG_FAVORITE);
 					}
+
+					// pre-toggle the star
 					toggleStar($actionEl, !isFavorite);
 
-					context.fileInfoModel.set('tags', tags);
+					context.fileInfoModel.trigger('busy', context.fileInfoModel, true);
 
 					self.applyFileTags(
 						dir + '/' + fileName,
@@ -116,17 +119,16 @@
 						$actionEl,
 						isFavorite
 					).then(function(result) {
+						context.fileInfoModel.trigger('busy', context.fileInfoModel, false);
 						// response from server should contain updated tags
 						var newTags = result.tags;
 						if (_.isUndefined(newTags)) {
 							newTags = tags;
 						}
-						var fileInfo = context.fileList.files[$file.index()];
-						// read latest state from result
-						toggleStar($actionEl, (newTags.indexOf(OC.TAG_FAVORITE) >= 0));
-						$file.attr('data-tags', newTags.join('|'));
-						$file.attr('data-favorite', !isFavorite);
-						fileInfo.tags = newTags;
+						context.fileInfoModel.set({
+							'tags': newTags,
+							'favorite': !isFavorite
+						});
 					});
 				}
 			});
diff --git a/apps/files/tests/js/tagspluginspec.js b/apps/files/tests/js/tagspluginspec.js
index 950fb754253..533aa63362c 100644
--- a/apps/files/tests/js/tagspluginspec.js
+++ b/apps/files/tests/js/tagspluginspec.js
@@ -79,12 +79,12 @@ describe('OCA.Files.TagsPlugin tests', function() {
 		it('sends request to server and updates icon', function() {
 			var request;
 			fileList.setFiles(testFiles);
-			$tr = fileList.$el.find('tbody tr:first');
-			$action = $tr.find('.action-favorite');
+			var $tr = fileList.findFileEl('One.txt');
+			var $action = $tr.find('.action-favorite');
 			$action.click();
 
 			expect(fakeServer.requests.length).toEqual(1);
-			var request = fakeServer.requests[0];
+			request = fakeServer.requests[0];
 			expect(JSON.parse(request.requestBody)).toEqual({
 				tags: ['tag1', 'tag2', OC.TAG_FAVORITE]
 			});
@@ -92,12 +92,18 @@ describe('OCA.Files.TagsPlugin tests', function() {
 				tags: ['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]
 			}));
 
+			// re-read the element as it was re-inserted
+			$tr = fileList.findFileEl('One.txt');
+			$action = $tr.find('.action-favorite');
+
 			expect($tr.attr('data-favorite')).toEqual('true');
 			expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]);
 			expect(fileList.files[0].tags).toEqual(['tag1', 'tag2', 'tag3', OC.TAG_FAVORITE]);
 			expect($action.find('img').attr('src')).toEqual(OC.imagePath('core', 'actions/starred'));
 
 			$action.click();
+
+			expect(fakeServer.requests.length).toEqual(2);
 			request = fakeServer.requests[1];
 			expect(JSON.parse(request.requestBody)).toEqual({
 				tags: ['tag1', 'tag2', 'tag3']
@@ -106,7 +112,11 @@ describe('OCA.Files.TagsPlugin tests', function() {
 				tags: ['tag1', 'tag2', 'tag3']
 			}));
 
-			expect($tr.attr('data-favorite')).toEqual('false');
+			// re-read the element as it was re-inserted
+			$tr = fileList.findFileEl('One.txt');
+			$action = $tr.find('.action-favorite');
+
+			expect($tr.attr('data-favorite')).toBeFalsy();
 			expect($tr.attr('data-tags').split('|')).toEqual(['tag1', 'tag2', 'tag3']);
 			expect(fileList.files[0].tags).toEqual(['tag1', 'tag2', 'tag3']);
 			expect($action.find('img').attr('src')).toEqual(OC.imagePath('core', 'actions/star'));