Implement editing comments

Signed-off-by: Julius Härtl <jus@bitgrid.net>

js/controller/ActivityController.js

@@ -53,8 +53,12 @@ class ActivityController {
 			self.activityservice.fetchNewerActivities(self.type, self.element.id).then(function () {});
 		}, true);
 
-
 		let $target = $('.newCommentForm .message');
+		this.applyAtWho($target);
+	}
+
+	applyAtWho($target) {
+		const self = this;
 		if (!$target) {
 			return;
 		}
@@ -104,6 +108,9 @@ class ActivityController {
 				'span[data-username="' + $el.find('[data-username]').data('username') + '"]'
 			).avatar();
 		});
+		$target.on('shown.atwho', function (je) {
+			$target.find('.avatar').avatar();
+		});
 	}
 
 	commentBodyToPlain(content) {
@@ -120,7 +127,7 @@ class ActivityController {
 
 	static _composeHTMLMention(uid, displayName) {
 		var avatar = '' +
-			'<span class="avatar" ng-attr-size="16" ' +
+			'<span class="avatar" data-username="' + _.escape(uid) + '" data-user="' + _.escape(uid) + '" ng-attr-size="16" ' +
 			'ng-attr-user="' + _.escape(uid) + '" ' +
 			'ng-attr-displayname="' + _.escape(displayName) + '" ng-attr-contactsmenu="true">' +
 			'</span>';
@@ -128,7 +135,7 @@ class ActivityController {
 		var isCurrentUser = (uid === OC.getCurrentUser().uid);
 
 		return '' +
-			'<span class="atwho-inserted">' +
+			'<span class="atwho-inserted" contenteditable="false">' +
 			'<span class="avatar-name-wrapper' + (isCurrentUser ? ' currentUser' : '') + '">' +
 			avatar +
 			'<strong>' + _.escape(displayName) + '</strong>' +
@@ -201,12 +208,38 @@ class ActivityController {
 	}
 
 	updateComment(item) {
-		let newMessage = 'Edited at ' + (new Date());
-		item.commentModel.save({
-			message: newMessage,
-		});
-		item.message = newMessage;
+		let message = this.formatMessage(item);
+		item.commentEdit = message;
+		let $target = $('.newCommentForm .message');
+		this.applyAtWho($target);
+		window.setTimeout(function () {
+			$target.find('.avatar').avatar(undefined, 16);
+		}, 0);
+	}
 
+	editComment(item) {
+		const self = this;
+		let content = this.commentBodyToPlain(item.commentEdit);
+		if (content.length < 1) {
+			OC.Notification.showTemporary(t('deck', 'Please provide a content for your comment.'));
+			return;
+		}
+		/** We need to save the model and afterwards run a fetch to update the mentions
+		 * and call apply to propagate the changes to angular
+		 */
+		item.commentModel.on('sync', function() {
+			item.commentModel.off('sync');
+			item.commentModel.fetch({
+				success: function() {
+					self.$scope.$apply();
+				}
+			});
+		});
+		item.commentModel.save({
+			message: content,
+		});
+		item.message = content;
+		item.commentEdit = undefined;
 	}
 
 	deleteComment(item) {

js/directive/contenteditable.js

@@ -22,9 +22,10 @@
 
 import app from '../app/App';
 
-app.directive("contenteditable", function() {
+app.directive("ngContenteditable", function($compile) {
 	return {
 		require: "ngModel",
+		restrict: 'A',
 		link: function(scope, element, attrs, ngModel) {
 
 			//read the text typed in the div (syncing model with the view)

templates/part.card.activity.html

@@ -5,13 +5,12 @@
 			<div class="author currentUser">{{ $ctrl.currentUser.displayName }}</div>
 		</div>
 		<form class="newCommentForm">
-			<div contenteditable="true" class="message" data-placeholder="{{ $ctrl.t('New comment …') }}" ng-model="$ctrl.$scope.newComment" ng-disabled="$ctrl.status.commentCreateLoading"></div>
+			<div ng-contenteditable contenteditable="true" class="message" data-placeholder="{{ $ctrl.t('New comment …') }}" ng-model="$ctrl.$scope.newComment" ng-disabled="$ctrl.status.commentCreateLoading"></div>
 			<input class="submit icon-confirm has-tooltip" type="submit"
 				   value="" title="" data-original-title="Post" ng-click="$ctrl.postComment()" ng-if="!$ctrl.status.commentCreateLoading">
 			<div class="submitLoading icon-loading-small" ng-if="$ctrl.status.commentCreateLoading"></div>
 		</form>
 	</div>
-</div>
 <ul class="activities" infinite-scroll="$ctrl.page()" infinite-scroll-container="'#app-sidebar'" infinite-scroll-disabled="$ctrl.activityservice.running" infinite-scroll-immediate-check="false">
 	<li ng-if="$ctrl.loadingNewer()"><div class="icon-loading-small"></div></li>
 	<li class="activity box" ng-repeat="activity in $ctrl.getActivityStream() track by $index">
@@ -35,8 +34,14 @@
 			</div>
 		</div>
 		<div class="activitymessage" ng-if="!activity.commentModel" ng-bind-html="activity.message"></div>
-		<div class="activitymessage" ng-if="activity.commentModel" bind-html-compile="$ctrl.formatMessage(activity)"></div>
+		<div class="activitymessage" ng-if="activity.commentModel && !activity.commentEdit" bind-html-compile="$ctrl.formatMessage(activity)"></div>
+		<form class="newCommentForm" ng-show="activity.commentEdit">
+			<div ng-contenteditable contenteditable="true" class="message" ng-model="activity.commentEdit"></div>
+			<input class="submit icon-confirm has-tooltip" type="submit"
+				   value="" title="" data-original-title="Post" ng-click="$ctrl.editComment(activity)">
+		</form>
 	</li>
 
 	<li ng-if="$ctrl.loading"><div class="icon-loading-small"></div></li>
 </ul>
+</div>