diff options
author | dartcafe <github@dartcafe.de> | 2021-02-12 11:02:37 +0300 |
---|---|---|
committer | dartcafe <github@dartcafe.de> | 2021-02-12 11:02:37 +0300 |
commit | 7aa455639b86215bfc61002b45611e490023e545 (patch) | |
tree | ff1bff4792021e26559f7a22af16f27f264a9d27 /src/js/components/Comments/Comments.vue | |
parent | 4f8985ab60b2a15e1b31eff0963ffc045e0d1d3b (diff) |
Move comment to CommentItem and let deletion be cancelable
Diffstat (limited to 'src/js/components/Comments/Comments.vue')
-rw-r--r-- | src/js/components/Comments/Comments.vue | 69 |
1 files changed, 6 insertions, 63 deletions
diff --git a/src/js/components/Comments/Comments.vue b/src/js/components/Comments/Comments.vue index 7e9ebfe7..144d53b2 100644 --- a/src/js/components/Comments/Comments.vue +++ b/src/js/components/Comments/Comments.vue @@ -21,40 +21,22 @@ --> <template> - <transition-group name="fade" class="comments" - tag="ul"> - <li v-for="(comment) in sortedList" :key="comment.id"> - <div class="comment-item"> - <UserItem v-bind="comment" /> - <Actions v-if="comment.userId === acl.userId || acl.isOwner"> - <ActionButton icon="icon-delete" @click="deleteComment(comment)"> - {{ t('polls', 'Delete comment') }} - </ActionButton> - </Actions> - <div class="date"> - {{ dateCommentedRelative(comment.dt) }} - </div> - </div> - - <div class="message wordwrap comment-content"> - {{ comment.comment }} - </div> - </li> + <transition-group name="fade" class="comments" tag="ul"> + <CommentItem v-for="(comment) in sortedList" :key="comment.id" + :comment="comment" + tag="li" /> </transition-group> </template> <script> import sortBy from 'lodash/sortBy' -import moment from '@nextcloud/moment' -import { showSuccess, showError } from '@nextcloud/dialogs' -import { Actions, ActionButton } from '@nextcloud/vue' +import CommentItem from './CommentItem' import { mapState } from 'vuex' export default { name: 'Comments', components: { - Actions, - ActionButton, + CommentItem, }, data() { return { @@ -66,7 +48,6 @@ export default { computed: { ...mapState({ comments: state => state.poll.comments.list, - acl: state => state.poll.acl, }), sortedList() { @@ -79,43 +60,5 @@ export default { }, - methods: { - deleteComment(comment) { - this.$store - .dispatch({ type: 'poll/comments/delete', comment: comment }) - .then(() => { - showSuccess(t('polls', 'Comment deleted')) - }) - .catch((error) => { - showError(t('polls', 'Error while deleting the comment')) - console.error(error.response) - }) - }, - dateCommentedRelative(date) { - return moment.utc(date).fromNow() - }, - }, } </script> - -<style scoped lang="scss"> - ul { - & > li { - margin-bottom: 30px; - & > .comment-item { - display: flex; - align-items: center; - - & > .date { - right: 0; - top: 5px; - opacity: 0.5; - } - } - & > .message { - margin-left: 53px; - flex: 1 1; - } - } - } -</style> |