comments: Add comment edition.

Author: freezy

.idea/inspectionProfiles/Project_Default.xml

@@ -34,6 +34,7 @@ export default class ReleaseCommentComponent {
 			comment: '<',
 			release: '<',
 			menuMoveTo: '@',
+			menuMoveText: '@',
 			onMoved: '&',
 		};
 	}

src/app/releases/details/release.comment.component.js

@@ -34,12 +34,38 @@ export default class ReleaseCommentCtrl {
 		// set in the dom via component
 		this.comment = null;
 		this.release = null;
+		this.editing = false;
 		this.menuMoveTo = '';
 		this.onMoved = () => {};
 	}
 
-	moveComment(commentId, refName, refId) {
-		this.CommentResource.update({ id: commentId }, { _ref: { [refName]: refId }}, () => {
+	$onInit() {
+		const isOwner = this.AuthService.user && this.AuthService.user.id === this.comment.from.id;
+		this.hasMoveToMenu = this.menuMoveTo && this.AuthService.hasPermission('releases/moderate');
+		this.hasEditMenu = isOwner || this.AuthService.hasPermission('releases/moderate');
+		this.showMenu = this.hasMoveToMenu || this.hasEditMenu;
+	}
+
+	edit() {
+		this.editedMessage = this.comment.message;
+		this.editing = true;
+	}
+
+	cancelEdit() {
+		this.editing = false;
+		delete this.errors;
+		delete this.error;
+	}
+
+	updateComment() {
+		this.CommentResource.update({ id: this.comment.id }, { message: this.editedMessage }, () => {
+			this.comment.message = this.editedMessage;
+			this.editing = false;
+		}, this.ApiHelper.handleErrors(this));
+	}
+
+	moveComment(refName, refId) {
+		this.CommentResource.update({ id: this.comment.id }, { _ref: { [refName]: refId }}, () => {
 			this.onMoved();
 		}, this.ApiHelper.handleErrors(this));
 	}

src/app/releases/details/release.comment.ctrl.js

@@ -1,6 +1,6 @@
 include ../../template/_mixins
 
-.media.media--no-margin.collapse-in-animation
+.media.media--no-margin(ng-show="!vm.editing")
 	.collapse-in-animation-inner
 		.media-left.avatar
 			img.img-avatar.pull-left(gravatar-src="vm.comment.from.gravatar_id", gravatar-default="retro", fallback-icon="user")
@@ -11,10 +11,24 @@ include ../../template/_mixins
 					label
 					strong {{ vm.comment.from.name }}
 					|  commented {{ vm.comment.created_at | timeAgo }}
-					.pull-right(uib-dropdown, ng-if="vm.menuMoveTo && vm.AuthService.hasPermission('releases/moderate')")
+					.pull-right(uib-dropdown, ng-if="vm.showMenu")
 						a(uib-dropdown-toggle): +icon('kebab-horizontal')
 						ul.comment-dropdown-menu(uib-dropdown-menu)
-							li
-								a(ng-click="vm.moveComment(vm.comment.id, vm.menuMoveTo, vm.release.id)") Move to moderation comments
+							li(ng-if="vm.hasEditMenu"): a(ng-click="vm.edit()") Edit comment
+							li(ng-if="vm.hasMoveToMenu"): a(ng-click="vm.moveComment(vm.menuMoveTo, vm.release.id)") {{ vm.menuMoveText }}
 				.panel-body
 					div.markdown(markdown="vm.comment.message")
+div.cloak(ng-show="vm.editing")
+	editor(id="edit-comment-{{ vm.comment.id }}",
+		ng-model="vm.editedMessage",
+		user="vm.AuthService.user",
+		placeholder="Edit comment",
+		markdown-text="")
+	div.alert.alert-danger(ng-if="vm.errors.message")
+		p.shift-down-1px
+			+icon('warning').shift-up.space-right
+			| {{ vm.errors.message }}
+		.clearfix
+	button.btn.btn-hollow.pull-right.padder-top.padder-bottom(ng-click="vm.updateComment()", ng-disabled="!vm.editedMessage || vm.editedMessage.length === 0") Update Comment
+	button.btn.btn-hollow.pull-right.padder-top.padder-bottom.space-right(ng-click="vm.cancelEdit()") Cancel
+	.clearfix

src/app/releases/details/release.comment.pug

@@ -330,7 +330,7 @@ export default class ReleaseDetailsCtrl {
 		this.fetchedCommentPages = 0;
 
 		this.ReleaseCommentResource.query({ releaseId: this.release.id, per_page: this.commentsPagesize }, res => {
-			this.numComments = res.headers('x-list-count');
+			this.numComments = parseInt(res.headers('x-list-count'), 10);
 			this.fetchedCommentPages++;
 			this._addCommentsToHead(res.data);
 

src/app/releases/details/release.details.ctrl.js

@@ -111,6 +111,7 @@ include ../../template/_mixins
 					comment="comment",
 					release="vm.release",
 					menu-move-to="release",
+					menu-move-text="Move to public comments",
 					on-moved="vm.loadComments()")
 				editor(ng-model="vm.newModerationComment", user="vm.AuthService.user", placeholder="Comment about release moderation", markdown-text="Comments are parsed with Markdown.")
 
@@ -230,12 +231,22 @@ include ../../template/_mixins
 		//-- EXISTING COMMENTS
 		//---------------------------------------------------------------------
 		label(ng-show="!vm.numComments") No comments yet.
-		release-comment(ng-repeat="comment in vm.commentsHead track by comment.id", comment="comment", release="vm.release", menu-move-to="release_moderation")
+		release-comment(ng-repeat="comment in vm.commentsHead track by comment.id",
+			comment="comment",
+			release="vm.release",
+			menu-move-to="release_moderation",
+			menu-move-text="Move to moderation comments",
+			on-moved="vm.loadComments()")
 		.zigzag(ng-show="vm.hiddenComments > 0")
 			.panel.panel--inner
 				| {{ vm.hiddenComments }} hidden comments
 				label.a(ng-click="vm.loadMoreComments()") Load more...
-		release-comment(ng-repeat="comment in vm.commentsTail track by comment.id", comment="comment", release="vm.release", menu-move-to="release_moderation")
+		release-comment(ng-repeat="comment in vm.commentsTail track by comment.id",
+			comment="comment",
+			release="vm.release",
+			menu-move-to="release_moderation",
+			menu-move-text="Move to moderation comments",
+			on-moved="vm.loadComments()")
 
 		//-- NEW COMMENT
 		//---------------------------------------------------------------------

src/app/releases/details/release.details.pug

@@ -63,6 +63,12 @@
 				color $color-primary
 				.svg-icon
 					fill $color-primary
+			&[disabled]:hover
+				border-color $color-dark
+				color $color-light
+				.svg-icon
+					fill $color-light
+
 			&:active
 				box-shadow none
 				border-color $color-dark