Social: add/delete comments using social_posts API

assets/vue/components/social/CommentForm.vue

@@ -8,6 +8,7 @@
     <div class="row justify-end">
       <q-btn
         :label="$t('Post')"
+        :loading="isLoading"
         icon="send"
         @click="sendComment"
       />
@@ -18,7 +19,9 @@
 <script>
 import {ref} from "vue";
 import {useStore} from "vuex";
-import {MESSAGE_TYPE_WALL} from "../message/constants";
+import axios from "axios";
+import {ENTRYPOINT} from "../../config/entrypoint";
+import {SOCIAL_TYPE_WALL_COMMENT} from "./constants";
 
 export default {
   name: "WallCommentForm",
@@ -28,28 +31,40 @@ export default {
       required: true,
     }
   },
-  setup(props) {
+  emits: ["comment-posted"],
+  setup(props, {emit}) {
     const store = useStore();
 
     const currentUser = store.getters['security/getUser'];
 
     const comment = ref('');
+    const isLoading = ref(false);
 
-    async function sendComment() {
-      await store.dispatch('message/create', {
-        title: 'Comment',
-        content: comment.value,
-        msgType: MESSAGE_TYPE_WALL,
-        sender: currentUser['@id'],
-        parent: props.post['@id'],
-      });
+    function sendComment() {
+      isLoading.value = true;
 
-      comment.value = '';
+      axios
+        .post(ENTRYPOINT + 'social_posts', {
+          content: comment.value,
+          type: SOCIAL_TYPE_WALL_COMMENT,
+          sender: currentUser['@id'],
+          parent: props.post['@id'],
+        })
+        .then(response => {
+          emit('comment-posted', response.data);
+
+          comment.value = '';
+        })
+        .finally(() => {
+          isLoading.value = false
+        })
+      ;
     }
 
     return {
       sendComment,
-      comment
+      comment,
+      isLoading,
     };
   }
 }

assets/vue/components/social/WallComment.vue

@@ -1,49 +1,66 @@
 <template>
-  <q-item bordered>
+  <q-item>
     <q-item-section avatar top>
       <q-avatar>
         <img :src="comment.sender.illustrationUrl">
       </q-avatar>
     </q-item-section>
 
-    <q-item-section>
-      <q-item-label class="font-bold" lines="1">{{ comment.sender.username }}</q-item-label>
+    <q-item-section top>
+      <q-item-label lines="1">
+        <span class="text-weight-medium">{{ comment.sender.fullName }}</span>
+      </q-item-label>
       <q-item-label v-html="comment.content" />
-      <q-item-label caption>{{ $filters.relativeDatetime(comment.sendDate) }}</q-item-label>
+      <q-item-label
+        :title="$filters.abbreviatedDatetime(comment.sendDate)"
+        caption
+      >
+        {{ $filters.relativeDatetime(comment.sendDate) }}
+      </q-item-label>
     </q-item-section>
 
     <q-item-section side top>
-      <q-btn
-        v-if="enableFeedback"
-        :label="comment.countFeedbackLikes"
-        :title="$t('Like')"
-        dense
-        flat
-        icon="mdi-heart-plus"
-      />
-      <q-btn
-        v-if="enableFeedback && !disableDislike"
-        :label="comment.countFeedbackDislikes"
-        :title="$t('Dislike')"
-        dense
-        flat
-        icon="mdi-heart-remove"
-      />
-      <q-btn
-        v-if="isOwner"
-        :title="$t('Delete comment')"
-        dense
-        flat
-        icon="delete"
-        @click="deleteComment"
-      />
+      <div class="text-grey-8 q-gutter-xs">
+        <q-btn
+          v-if="enableFeedback"
+          :label="comment.countFeedbackLikes"
+          :title="$t('Like')"
+          class="gt-xs"
+          dense
+          flat
+          icon="mdi-heart-plus"
+          size="12px"
+        />
+        <q-btn
+          v-if="enableFeedback && !disableDislike"
+          :label="comment.countFeedbackDislikes"
+          :title="$t('Dislike')"
+          class="gt-xs"
+          dense
+          flat
+          icon="mdi-heart-remove"
+          size="12px"
+        />
+        <q-btn
+          v-if="isOwner"
+          :loading="isLoading"
+          :title="$t('Delete comment')"
+          class="gt-xs"
+          dense
+          flat
+          icon="delete"
+          size="12px"
+          @click="deleteComment"
+        />
+      </div>
     </q-item-section>
   </q-item>
 </template>
 
 <script>
 import {useStore} from "vuex";
-import {ref} from "vue";
+import {computed, ref} from "vue";
+import axios from "axios";
 
 export default {
   name: "WallComment",
@@ -53,16 +70,21 @@ export default {
       required: true
     }
   },
-  emits: ['deleted'],
+  emits: ['comment-deleted'],
   setup(props, context) {
     const store = useStore();
 
+    const isLoading = ref(false);
     const currentUser = store.getters['security/getUser'];
 
     function deleteComment() {
-      store
-        .dispatch('socialpost/del', props.comment)
-        .then(() => context.emit('deleted'));
+      isLoading.value = true;
+
+      axios
+        .delete(props.comment['@id'])
+        .then(() => context.emit('comment-deleted', props.comment))
+        .finally(() => isLoading.value = false)
+      ;
     }
 
     const enableFeedback = ref(window.config['social.social_enable_messages_feedback'] === 'true');
@@ -70,9 +92,10 @@ export default {
 
     return {
       deleteComment,
-      isOwner: currentUser['@id'] === props.comment.sender['@id'],
+      isOwner: computed(() => currentUser['@id'] === props.comment.sender['@id']),
       enableFeedback,
       disableDislike,
+      isLoading,
     };
   }
 }

assets/vue/components/social/WallPost.vue

@@ -64,11 +64,11 @@
         v-for="(comment, index) in comments"
         :key="index"
         :comment="comment"
-        @deleted="onDeletedComment(index)"
+        @comment-deleted="onCommentDeleted(index, $event)"
       />
     </q-list>
 
-    <WallCommentForm :post="post" />
+    <WallCommentForm :post="post" @comment-posted="onCommentPosted" />
   </q-card>
 </template>
 
@@ -104,13 +104,18 @@ export default {
             itemsPerPage: 3,
           }
         })
-        .then(response => comments.push(...response.data['hydra:member']));
+        .then(response => comments.push(...response.data['hydra:member']))
+      ;
     }
 
-    function onDeletedComment(index) {
+    function onCommentDeleted(index, event) {
       comments.splice(index, 1);
     }
 
+    function onCommentPosted(newComment) {
+      comments.unshift(newComment);
+    }
+
     onMounted(loadComments);
 
     return {
@@ -118,7 +123,8 @@ export default {
       containsImage,
       containsVideo,
       comments,
-      onDeletedComment,
+      onCommentDeleted,
+      onCommentPosted,
     }
   }
 }