Comments editing

src/App.vue

@@ -257,7 +257,7 @@ pre {
 }
 
 p {
-  margin: 0 0 $line-height / 1.5;
+  margin: 0 0 $line-height / 5;
 }
 
 a:focus,

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)
+  },
 }

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('')

src/components/cards/CommentCard.vue

@@ -15,19 +15,38 @@
           </div>
 
           <div class="tile-subtitle">
-            <post-body class="mt-1 comment-body" :html="comment.text" />
+            <post-body v-if="!isEditing" class="mt-1 comment-body" :html="comment.text" />
+
+            <div class="panel mt-2" v-if="isEditing">
+              <h6 class="panel-header mb-0">
+                Редактирование
+                <button
+                  class="btn btn-link btn-sm float-right tooltip"
+                  @click="cancelEdit"
+                  data-tooltip="Отменить"
+                >
+                  <i class="icon icon-cross"></i>
+                </button>
+              </h6>
+              <div class="panel-body" style="overflow:visible">
+                <comment-form :post-url="postUrl" :comment="comment" @sent="commentSent" />
+              </div>
+              <div class="panel-footer pb-0"></div>
+            </div>
 
             <vote
               class="float-right"
+              v-if="!isEditing"
               :rating="comment.rating"
               :votedUp="comment.user_voted > 0"
               :votedDown="comment.user_voted < 0"
               :id="comment.id"
               :type="'comment'"
             />
 
-            <small class="subpanel text-gray">
+            <small class="subpanel text-gray" v-if="!isEditing">
               <a href="#" data-tooltip="Ответить" @click.prevent="reply">Ответить</a>
+              <a v-if="canEdit(comment)" href="#" @click.prevent="edit">Редактировать</a>
 
               <span>{{ comment.created_date | moment}}</span>
               <a :href="'#' + commentId" title="Ссылка на комментарий">#</a>
@@ -59,6 +78,7 @@
           :key="item.id"
           :comment="item"
           :post-url="postUrl"
+          :user="user"
         />
       </div>
     </div>
@@ -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,

src/components/elements/Sticker.vue

@@ -24,14 +24,12 @@ export default {
 
 <style lang="scss" scoped>
 .sticker {
-  padding: 4px;
+  padding-left: 4px;
+  padding-right: 4px;
 
   img {
-    width: 48px;
-  }
-  p {
-    width: 48px;
-    text-align: center;
+    // width: 24px;
+    height: 24px;
   }
 }
 </style>

src/pages/posts/PostPage.vue

@@ -21,6 +21,7 @@
         :key="item.id"
         :comment="item"
         :post-url="post.url"
+        :user="user"
       ></comment-card>
       <div class="bottom-padd"></div>
     </div>
@@ -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 () {

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
+    })
   }
 }