move delete action to subcomments

Signed-off-by: dartcafe <github@dartcafe.de>

2 files changed, 36 insertions, 16 deletions

diff --git a/src/js/components/Comments/CommentItem.vue b/src/js/components/Comments/CommentItem.vue
index 5e0107f2..732fd8ce 100644
--- a/src/js/components/Comments/CommentItem.vue
+++ b/src/js/components/Comments/CommentItem.vue
@@ -26,16 +26,18 @@
 		<div class="comment-item__content">
 			<span class="comment-item__user">{{ comment.user.displayName }}</span>
 			<span class="comment-item__date">{{ dateCommentedRelative }}</span>
-			<p v-for="(subComment) in comment.subComments"
+			<div v-for="(subComment) in comment.subComments"
 				:key="subComment.id"
-				class="comment-item__comment">
-				{{ subComment.comment }}
-			</p>
+				class="comment-item__subcomment">
+				<span class="comment-item__comment">
+					{{ subComment.comment }}
+				</span>
+				<ActionDelete v-if="comment.user.userId === acl.userId || acl.isOwner"
+					icon-mode
+					:title="t('polls', 'Delete comment')"
+					@delete="deleteComment(subComment)" />
+			</div>
 		</div>
-		<ActionDelete v-if="comment.user.userId === acl.userId || acl.isOwner"
-			icon-mode
-			:title="t('polls', 'Delete comment')"
-			@delete="deleteComment()" />
 	</div>
 </template>
 
@@ -68,9 +70,9 @@ export default {
 	},
 
 	methods: {
-		async deleteComment() {
+		async deleteComment(comment) {
 			try {
-				await this.$store.dispatch({ type: 'comments/delete', comment: this.comment })
+				await this.$store.dispatch({ type: 'comments/delete', comment })
 			} catch {
 				showError(t('polls', 'Error while deleting the comment'))
 			}
@@ -100,13 +102,30 @@ export default {
 		}
 	}
 
-	.comment-item__comment {
-		hyphens: auto;
-	}
-
 	.comment-item__content {
 		margin-left: 8px;
 		flex: 1 1;
 		padding-top: 2px;
+
+		.material-design-icon.delete-icon {
+			// display: none;
+			visibility: hidden;
+		}
+
+		.comment-item__subcomment {
+			display: flex;
+			&:hover {
+				.material-design-icon.delete-icon {
+					visibility: visible;
+					// display: flex;
+				}
+			}
+		}
+
+		.comment-item__comment {
+			hyphens: auto;
+			flex: 1;
+		}
 	}
+
 </style>
diff --git a/src/js/store/modules/comments.js b/src/js/store/modules/comments.js
index c18618f7..946cf300 100644
--- a/src/js/store/modules/comments.js
+++ b/src/js/store/modules/comments.js
@@ -93,8 +93,9 @@ const actions = {
 		}
 
 		try {
-			const response = await axios.post(generateUrl(`${endPoint}/comment`), { message: payload.message })
-			context.commit('add', { comment: response.data.comment })
+			await axios.post(generateUrl(`${endPoint}/comment`), { message: payload.message })
+			context.dispatch('list')
+			// context.commit('add', { comment: response.data.comment })
 		} catch (e) {
 			console.error('Error writing comment', { error: e.response }, { payload })
 			throw e