diff --git a/src/App.vue b/src/App.vue index d3ddeba..6b8a962 100644 --- a/src/App.vue +++ b/src/App.vue @@ -257,7 +257,7 @@ pre { } p { - margin: 0 0 $line-height / 1.5; + margin: 0 0 $line-height / 5; } a:focus, diff --git a/src/api/comments.js b/src/api/comments.js index 397bdc8..0700e41 100644 --- a/src/api/comments.js +++ b/src/api/comments.js @@ -15,4 +15,12 @@ export default { }) .then(res => res.data) }, + editComment: (url, text, id) => { + return request + .put(`posts/${url}/comments/${id}`, + { + text + }) + .then(res => res.data) + }, } diff --git a/src/components/CommentForm.vue b/src/components/CommentForm.vue index b0c5076..d3b8cd0 100644 --- a/src/components/CommentForm.vue +++ b/src/components/CommentForm.vue @@ -27,23 +27,43 @@ import errors from '@/utils/errors' export default { props: { postUrl: String, // Url of the post the comment in - parentId: Number // Parent comment id + parentId: { // if this specified - then new comment will be send as child item + type: Number, + required: false + }, + comment: { // if this specified - we assume, that currently we in edit mode + type: Object, + required: false + } }, data () { return { isSending: false, - isMounted: false + isMounted: false, + isEditing: false } }, mounted () { this.isMounted = true + this.isEditing = false + + if (this.comment) { + this.$refs.editor.setContent(this.comment.text) + this.isEditing = true + } }, methods: { send () { this.isSending = true - this.$store - .dispatch('comments/postComment', + var task = null + if (!this.comment) { // is we don't have comment - then send new + task = this.$store.dispatch('comments/postComment', { url: this.postUrl, text: this.$refs.editor.getHtml(), parent: this.parentId }) + } else { // is we have comment - then edit current comment + task = this.$store.dispatch('comments/editComment', + { url: this.postUrl, text: this.$refs.editor.getHtml(), id: this.comment.id }) + } + task .then(comment => { this.isSending = false this.$refs.editor.setContent('') diff --git a/src/components/cards/CommentCard.vue b/src/components/cards/CommentCard.vue index e5f21a2..0e62dd1 100644 --- a/src/components/cards/CommentCard.vue +++ b/src/components/cards/CommentCard.vue @@ -15,10 +15,28 @@
- + + +
+
+ Редактирование + +
+
+ +
+ +
- + Ответить + Редактировать {{ comment.created_date | moment}} # @@ -59,6 +78,7 @@ :key="item.id" :comment="item" :post-url="postUrl" + :user="user" />
@@ -80,12 +100,14 @@ export default { props: [ 'comment', 'parentId', - 'postUrl' + 'postUrl', + 'user' ], data () { return { active: false, - isReplying: false + isReplying: false, + isEditing: false } }, mounted () { @@ -99,22 +121,41 @@ export default { reply () { this.isReplying = !this.isReplying }, + edit () { + this.isEditing = true + }, cancelReply () { this.isReplying = false }, + cancelEdit () { + this.isEditing = false + }, commentSent () { this.isReplying = false + this.isEditing = false + }, + canEdit (comment) { + if (!this.user) { + return false + } + if (this.user.id === comment.creator.id) { + return true + } + if (this.user.is_admin) { + return true + } + return false } }, computed: { - commentId () { - return 'comment_' + this.comment.id - }, ...mapGetters({ commentById: 'comments/byId', commentHasChilds: 'comments/hasChilds', commentChilds: 'comments/getChilds', - }) + }), + commentId () { + return 'comment_' + this.comment.id + }, }, components: { Avatar, diff --git a/src/components/elements/Sticker.vue b/src/components/elements/Sticker.vue index 844fd0b..8cb12a3 100644 --- a/src/components/elements/Sticker.vue +++ b/src/components/elements/Sticker.vue @@ -24,14 +24,12 @@ export default { diff --git a/src/pages/posts/PostPage.vue b/src/pages/posts/PostPage.vue index a56fff4..f810567 100644 --- a/src/pages/posts/PostPage.vue +++ b/src/pages/posts/PostPage.vue @@ -21,6 +21,7 @@ :key="item.id" :comment="item" :post-url="post.url" + :user="user" >
@@ -39,8 +40,13 @@ import CommentSkeleton from '@/components/skeletons/Comment.vue' export default { metaInfo () { + var title = 'Запись' + if (this.post) { + title = this.post.title + } + return { - title: this.post.title || 'Запись' + title: title } }, data: function () { diff --git a/src/store/comments.js b/src/store/comments.js index 8d444ed..dffb2c4 100644 --- a/src/store/comments.js +++ b/src/store/comments.js @@ -46,6 +46,16 @@ const actions = { return res.comment }) }, + editComment ({ commit }, { url, text, id }) { + return api.editComment(url, text, id).then(res => { + if (res.success !== 1) { + return Promise.reject(res.error) + } + + commit('editComment', res.comment) + return res.comment + }) + }, } const mutations = { @@ -54,6 +64,14 @@ const mutations = { }, addComment (state, comment) { state.current_comments = [comment].concat(state.current_comments) + }, + editComment (state, comment) { + state.current_comments = state.current_comments.map(c => { + if (c.id == comment.id) { + return comment + } + return c + }) } }