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;
  },
 
  /**
@@ -263,6 +271,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'),
@@ -457,6 +466,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();
@@ -480,6 +499,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,13 +109,15 @@
 
  var subViewOptions = {
  model: this.model,
+ parent: this,
  configModel: this.configModel
  };
 
  var subViews = {
  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();