UI set share note!

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

apps/files_sharing/css/sharetabview.scss

@@ -131,6 +131,7 @@
 	display: none !important;
 }
 
+form#newNoteForm,
 .linkShareView {
 	margin-top: 16px;
 }
@@ -142,3 +143,23 @@
 .shareTabView .icon {
 	background-size: 16px 16px;
 }
+
+
+/* NOTE */
+form#newNoteForm {
+	display: flex;
+	flex-wrap: wrap;
+	.message {
+		flex: 1 1;
+		min-height: 76px;
+		margin-right: 0;
+		border-bottom-right-radius: 0;
+		border-top-right-radius: 0;
+	}
+	input {
+		width: 44px;
+		border-bottom-left-radius: 0;
+		border-top-left-radius: 0;
+		margin-left: -1px;
+	}
+}

core/js/core.json

@@ -38,6 +38,7 @@
 		"shareitemmodel.js",
 		"sharedialogview.js",
 		"sharedialogexpirationview.js",
+		"sharedialognoteview.js",
 		"sharedialoglinkshareview.js",
 		"sharedialogresharerinfoview.js",
 		"sharedialogshareelistview.js",

core/js/merged-share-backend.json

@@ -5,6 +5,7 @@
   "sharedialogresharerinfoview.js",
   "sharedialoglinkshareview.js",
   "sharedialogexpirationview.js",
+  "sharedialognoteview.js",
   "sharedialogshareelistview.js",
   "sharedialogview.js",
   "share.js"

core/js/sharedialognoteview.js

@@ -0,0 +1,149 @@
+/*
+ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @author John Molakvoæ <skjnldsv@protonmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+/* global moment, Handlebars */
+
+(function() {
+	if (!OC.Share) {
+		OC.Share = {};
+	}
+
+	var TEMPLATE =
+		'	<form id="newNoteForm" data-shareId="{{shareId}}">' +
+		'		<textarea class="message" placeholder="{{placeholder}}">{{note}}</textarea>' +
+		'		<input class="submit icon-confirm has-tooltip" type="submit" value="" title="{{submitText}}"/>' +
+		'	</form>' +
+		'	<div class="error hidden">{{error}}</div>'
+	;
+
+	/**
+	 * @class OCA.Share.ShareDialogNoteView
+	 * @member {OC.Share.ShareItemModel} model
+	 * @member {jQuery} $el
+	 * @memberof OCA.Sharing
+	 * @classdesc
+	 *
+	 * Represents the expiration part in the GUI of the share dialogue
+	 *
+	 */
+	var ShareDialogNoteView = OC.Backbone.View.extend({
+
+		id: 'shareNote',
+
+		className: 'hidden',
+
+		shareId: undefined,
+
+		events: {
+			'submit #newNoteForm': '_onSubmitComment'
+		},
+
+		_onSubmitComment: function(e) {
+			var self = this;
+			var $form = $(e.target);
+			var $submit = $form.find('.submit');
+			var $commentField = $form.find('.message');
+			var $error = $form.siblings('.error');
+			var message = $commentField.val().trim();
+			e.preventDefault();
+
+			if (message.length < 1) {
+				return;
+			}
+
+			$submit.prop('disabled', true);
+			$form.addClass('icon-loading').prop('disabled', true);
+
+			// send data
+			$.ajax({
+				method: 'PUT',
+				url: OC.generateUrl('/ocs/v2.php/apps/files_sharing/api/v1/shares/' + self.shareId),
+				data: { note: message },
+				complete : function() {
+					$submit.prop('disabled', false);
+					$form.removeClass('icon-loading').prop('disabled', false);
+				},
+				error: function() {
+					$error.show();
+					setTimeout(function() {
+						$error.hide();
+					}, 3000);
+				}
+			});
+
+			// update local js object
+			var shares = this.model.get('shares');
+			var share = shares.filter(function (share) {
+				return share.id === self.shareId;
+			});
+			share[0].note = message;
+
+			return message;
+		},
+
+		render: function(shareId) {
+			this.shareId = shareId;
+			var shares = this.model.get('shares');
+			if (!shares) {
+				return;
+			}
+			var share = shares.filter(function (share) {
+				return share.id === shareId;
+			});
+			if (share.length !== 1) {
+				// should not happend
+				return;
+			}
+			this.$el.show();
+			this.$el.html(this.template({
+				note: share[0].note,
+				submitText: t('core', 'Submit the note'),
+				placeholder: t('core', 'Add a note…'),
+				error: t('core', 'An error has occured. Unable to save the note.'),
+				shareId: shareId
+			}));
+
+			this.delegateEvents();
+
+			return this;
+		},
+
+		hide() {
+			this.$el.hide();
+		},
+
+		/**
+		 * @returns {Function} from Handlebars
+		 * @private
+		 */
+		template: function (data) {
+			if (!this._template) {
+				this._template = Handlebars.compile(TEMPLATE);
+			}
+			return this._template(data);
+		}
+
+	});
+
+	OC.Share.ShareDialogNoteView = ShareDialogNoteView;
+
+})();

core/js/sharedialogshareelistview.js

@@ -120,6 +120,9 @@
 						'</div>' +
 					'</span>' +
 				'</li>' +
+				'<li>' +
+					'<a href="#" class="addnote"><span class="icon-loading-small hidden"></span><span class="icon icon-edit"></span><span>{{addNoteLabel}}</span></a>' +
+				'</li>' +
 				'<li>' +
 					'<a href="#" class="unshare"><span class="icon-loading-small hidden"></span><span class="icon icon-delete"></span><span>{{unshareLabel}}</span></a>' +
 				'</li>' +
@@ -154,8 +157,11 @@
 		/** @type {boolean|number} **/
 		_renderPermissionChange: false,
 
+		_noteView: undefined,
+
 		events: {
 			'click .unshare': 'onUnshare',
+			'click .addnote': 'showNoteForm',
 			'click .icon-more': 'onToggleMenu',
 			'click .permissions': 'onPermissionChange',
 			'click .expireDate' : 'onExpireDateChange',
@@ -178,6 +184,8 @@
 			this.model.on('change:shares', function() {
 				view.render();
 			});
+
+			this._noteView = options.parent.noteView;
 		},
 
 		/**
@@ -269,6 +277,7 @@
 		getShareProperties: function() {
 			return {
 				unshareLabel: t('core', 'Unshare'),
+				addNoteLabel: t('core', 'Set share note'),
 				canShareLabel: t('core', 'Can reshare'),
 				canEditLabel: t('core', 'Can edit'),
 				createPermissionLabel: t('core', 'Can create'),
@@ -470,6 +479,16 @@
 			return this._popoverMenuTemplate(data);
 		},
 
+		showNoteForm(event) {
+			event.preventDefault();
+			event.stopPropagation();
+			var self = this;
+			var $element = $(event.target);
+			var $li = $element.closest('li[data-share-id]');
+			var shareId = $li.data('share-id');
+			this._noteView.render(shareId);
+		},
+
 		onUnshare: function(event) {
 			event.preventDefault();
 			event.stopPropagation();
@@ -493,6 +512,8 @@
 			self.model.removeShare(shareId)
 				.done(function() {
 					$li.remove();
+					// remove note field on sucess
+					self._noteView.hide();
 				})
 				.fail(function() {
 					$loading.addClass('hidden');

core/js/sharedialogview.js

@@ -28,6 +28,7 @@
 		'<div class="shareeListView subView"></div>' +
 		'<div class="linkShareView subView"></div>' +
 		'<div class="expirationView subView"></div>' +
+		'<div class="noteView subView"></div>' +
 		'<div class="loading hidden" style="height: 50px"></div>';
 
 	/**
@@ -62,6 +63,9 @@
 		/** @type {object} **/
 		expirationView: undefined,
 
+		/** @type {object} **/
+		noteView: undefined,
+
 		/** @type {object} **/
 		shareeListView: undefined,
 
@@ -105,6 +109,7 @@
 
 			var subViewOptions = {
 				model: this.model,
+				parent: this,
 				configModel: this.configModel
 			};
 
@@ -112,6 +117,7 @@
 				resharerInfoView: 'ShareDialogResharerInfoView',
 				linkShareView: 'ShareDialogLinkShareView',
 				expirationView: 'ShareDialogExpirationView',
+				noteView: 'ShareDialogNoteView',
 				shareeListView: 'ShareDialogShareeListView'
 			};
 
@@ -674,6 +680,9 @@
 			this.expirationView.$el = this.$el.find('.expirationView');
 			this.expirationView.render();
 
+			this.noteView.$el = this.$el.find('.noteView');
+			this.noteView.render();
+
 			this.shareeListView.$el = this.$el.find('.shareeListView');
 			this.shareeListView.render();