Add dialog to share with users

js/qn-dialogs.js

@@ -56,6 +56,9 @@ const QnDialogs = {
 						data.push({id: item.id, text: item.name});
 					});
 					return data;
+				},
+				formatNoMatches: function() {
+					return t('quicknotes', 'No tags found');
 				}
 			});
 
@@ -125,6 +128,113 @@ const QnDialogs = {
 			$('.select2-input').focus();
 		});
 	},
+	shares: function (availableUsers, selectedUsers, callback) {
+		return $.when(this._getMessageTemplate()).then(function ($tmpl) {
+			var dialogName = 'qn-dialog-content';
+			var dialogId = '#' + dialogName;
+			var $dlg = $tmpl.octemplate({
+				dialog_name: dialogName,
+				title: t('quicknotes', 'Share note'),
+				message: t('quicknotes', 'Select the users to share'),
+				type: 'none'
+			});
+
+			var input = $('<input/>');
+			input.attr('type', 'text');
+			input.attr('id', dialogName + '-input');
+			input.attr('multiple', 'multiple');
+
+			$dlg.append(input);
+			$('body').append($dlg);
+
+			input.select2({
+				placeholder: t('quicknotes', 'Select the users to share'),
+				multiple: true,
+				allowClear: true,
+				toggleSelect: true,
+				createSearchChoice: function(params) {
+					return undefined;
+				},
+				tags: function () {
+					var data = [];
+					availableUsers.forEach(function (item, index) {
+						// Select2 expect id, text.
+						data.push({id: item, text: item});
+					});
+					return data;
+				},
+				formatNoMatches: function() {
+					return t('quicknotes', 'No user found');
+				}
+			});
+
+			input.val(selectedUsers.map(function (value) { return value.name }));
+			input.trigger("change");
+
+			$('.select2-input').on("keyup", function (event) {
+				if (event.keyCode === 27) {
+					event.preventDefault();
+					event.stopPropagation();
+					input.select2('close');
+					if (callback !== undefined) {
+						callback(false, []);
+					}
+					$(dialogId).ocdialog('close');
+				}
+			});
+
+			// wrap callback in _.once():
+			// only call callback once and not twice (button handler and close
+			// event) but call it for the close event, if ESC or the x is hit
+			if (callback !== undefined) {
+				callback = _.once(callback);
+			}
+
+			var buttonlist = [{
+				text: t('quicknotes', 'Cancel'),
+				click: function () {
+					input.select2('close');
+					if (callback !== undefined) {
+						callback(false, []);
+					}
+					$(dialogId).ocdialog('close');
+				}
+			}, {
+				text: t('quicknotes', 'Done'),
+				click: function () {
+					input.select2('close');
+					if (callback !== undefined) {
+						var users = [];
+						// Quicknotes shares expect id, shared_user
+						newUsers = input.select2("data");
+						newUsers.forEach(function (item) {
+							item['shared_user'] = item.text;
+							users.push(item);
+						});
+						callback(true, users);
+					}
+					$(dialogId).ocdialog('close');
+				},
+				defaultButton: true
+			}
+			];
+
+			$(dialogId).ocdialog({
+				closeOnEscape: false,
+				modal: true,
+				buttons: buttonlist,
+				close: function () {
+					input.select2("close");
+					// callback is already fired if Yes/No is clicked directly
+					if (callback !== undefined) {
+						callback(false, input.val());
+					}
+				}
+			});
+
+			$('.select2-input').focus();
+		});
+	},
 	_getMessageTemplate: function () {
 		var defer = $.Deferred();
 		if (!this.$messageTemplate) {

js/script.js

@@ -29,6 +29,9 @@ var Notes = function (baseUrl) {
     this._baseUrl = baseUrl;
     this._notes = [];
     this._loaded = false;
+
+    this._usersSharing = [];
+    this._loadUsersSharing();
 };
 
 Notes.prototype = {
@@ -71,6 +74,9 @@ Notes.prototype = {
         });
         return Ccolors;
     },
+    getUsersSharing: function () {
+        return this._usersSharing;
+    },
     // Get the tags used in the notes
     getTags: function () {
         var tags = [];
@@ -136,6 +142,23 @@ Notes.prototype = {
             deferred.reject();
         });
         return deferred.promise();
+    },
+    // Get the users to share in the notes
+    _loadUsersSharing: function () {
+        var self = this;
+        $.get(OC.linkToOCS('apps/files_sharing/api/v1/', 1) + 'sharees', {
+            format: 'json',
+            itemType: 'principals'
+        }).done(function (shares) {
+            var users = [];
+            console.log(shares);
+            $.each(shares.ocs.data.exact.users, function(index, user) {
+                users.push(user.value.shareWith);
+            });
+            self._usersSharing = users;
+        }).fail(function () {
+            console.error("Could not get users to share.");
+        });
     }
 };
 
@@ -164,7 +187,7 @@ View.prototype = {
         this._editableContent(note.content);
         this._editablePinned(note.ispinned);
         this._editableColor(note.color);
-        this._editableShares(note.shared_by, note.shared_with);
+        this._editableShares(note.shared_with, note.shared_by);
         this._editableTags(note.tags);
         this._editableAttachts(note.attachts);
 
@@ -455,6 +478,23 @@ View.prototype = {
             $('#modal-note-div #tag-button').trigger( "click");
         });
 
+        // handle tags button.
+        $('#modal-note-div #share-button').click(function (event) {
+            event.stopPropagation();
+            QnDialogs.shares(
+                self._notes.getUsersSharing(),
+                self._editableShares(),
+                function(result, newShares) {
+                    if (result === true) {
+                        self._editableShares(newShares, []);
+                    }
+                },
+                true,
+                t('quicknotes', 'Shares'),
+                false
+            );
+        });
+
         // handle attach button.
         $('#modal-note-div #attach-button').click(function (event) {
             event.stopPropagation();
@@ -731,11 +771,11 @@ View.prototype = {
             $("#modal-note-div .quicknote").css("background-color", color);
         }
     },
-    _editableShares: function(shared_by, shared_with) {
+    _editableShares: function(shared_with, shared_by) {
         if (shared_with === undefined) {
             return $("#modal-note-div .slim-share").toArray().map(function (value) {
                 return {
-                    id: value.getAttribute('tag-id'),
+                    id: value.getAttribute('share-id'),
                     name: value.textContent.trim()
                 };
             });

js/templates/note-item.handlebars

@@ -1,16 +1,5 @@
 <div class="note-grid-item">
-	<div class="quicknote noselect {{#if active}}note-active{{/if}} {{#if isshared}}shared{{/if}} {{#if sharedwith}}shareowner{{/if}}" style="background-color: {{color}}" data-id="{{ id }}" data-timestamp="{{ timestamp }}" >
+	<div class="quicknote noselect" style="background-color: {{color}}" data-id="{{ id }}" data-timestamp="{{ timestamp }}" >
-		{{#if isshared}}
-		<div>
-			<div class='icon-share shared-title' title="Shared by {{ userid }}"></div>
-			<div class='note-title'>
-				{{{ title }}}
-			</div>
-		</div>
-		<div id='content' class='note-content'>
-			{{{ content }}}
-		</div>
-		{{else}}
 		<div class='note-header'>
 			<div class='note-attachts'>
 				{{#each attachts}}
@@ -28,11 +17,6 @@
 					<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
 				{{/if}}
 				<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
-				<!--
-				{{#if sharedwith}}
-				<div class='icon-share shared-title-owner' title="Shared with {{ sharedwith }}"></div>
-				{{/if}}
-				-->
 				<div class='note-title'>
 					{{{ title }}}
 				</div>
@@ -40,12 +24,16 @@
 			<div class='note-content'>
 				{{{ content }}}
 			</div>
+			<div class='note-shares'>
+				{{#each shared_with}}
+					<div class="icon-user slim-share" share-id="{{ shared_user }}" title="Shared with {{ shared_user }}">{{{ shared_user }}}</div>
+				{{/each}}
+			</div>
 			<div class='note-tags'>
 				{{#each tags}}
 					<div class="icon-tag slim-tag" tag-id="{{ id }}">{{{ name }}}</div>
 				{{/each}}
 			</div>
 		<div>
-		{{/if}}
 	</div>
 </div>

js/templates/notes.handlebars

@@ -14,14 +14,17 @@
 			</div>
 			<div class='note-body'>
 				<div>
-					{{#unless is_shared}}
+					{{#if is_shared}}
-					{{#if ispinned}}
+						<div class="icon-header-note icon-share" title="Shared by {{ userid }}"></div>
-						<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
+						<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
 					{{else}}
-						<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
+						{{#if ispinned}}
+							<div class="icon-header-note icon-pinned fixed-header-icon" title="{{t "quicknotes" "Unpin note"}}"></div>
+						{{else}}
+							<div class="icon-header-note icon-pin hide-header-icon" title="{{t "quicknotes" "Pin note"}}"></div>
+						{{/if}}
+						<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
 					{{/if}}
-					{{/unless}}
-					<div class="icon-header-note icon-delete hide-header-icon icon-delete-note" title="{{t "quicknotes" "Delete note"}}"></div>
 					<div class='note-title'>
 						{{{ title }}}
 					</div>
@@ -31,10 +34,7 @@
 				</div>
 				<div class='note-shares'>
 					{{#each shared_with}}
-						<div class="icon-user slim-share" share-id="{{ id }}" title="Shared with {{ shared_user }}">{{{ shared_user }}}</div>
+						<div class="icon-user slim-share" title="Shared with {{ shared_user }}">{{{ shared_user }}}</div>
-					{{/each}}
-					{{#each shared_by}}
-						<div class="icon-user slim-share" share-id="{{ id }}" title="Shared by {{ user_id }}">{{{ user_id }}}</div>
 					{{/each}}
 				</div>
 				<div class='note-tags'>

js/templates/shares.handlebars

@@ -1,8 +1,5 @@
 <div class='note-shares'>
 	{{#each shared_with}}
-		<div class="icon-user slim-share" share-id="{{ id }}" title="Shared with {{ shared_user }}">{{{ shared_user }}}</div>
+		<div class="icon-user slim-share" share-id="{{ shared_user }}" title="Shared with {{ shared_user }}">{{{ shared_user }}}</div>
-	{{/each}}
-	{{#each shared_by}}
-		<div class="icon-user slim-share" share-id="{{ id }}" title="Shared from {{ user_id }}">{{{ user_id }}}</div>
 	{{/each}}
 </div>