Social: Allow comment in post

assets/vue/components/socialnetwork/Post.vue

@@ -48,12 +48,36 @@
       :src="attachment.contentUrl"
     />
     <q-card-section v-html="message.content" />
+
+    <q-separator />
+
+    <q-list
+      v-if="comments.length"
+    >
+      <q-item-label header>{{ $t('Comments') }}</q-item-label>
+
+      <SocialNetworkPostComment
+        v-for="(comment, index) in comments"
+        :key="index"
+        :comment="comment"
+        @deleted="onDeletedComment(index)"
+      />
+    </q-list>
+
+    <SocialNetworkPostForm :post="message" />
   </q-card>
 </template>
 
 <script>
+import SocialNetworkPostForm from "./PostForm";
+import {onMounted, reactive} from "vue";
+import SocialNetworkPostComment from "./PostComment";
+import {MESSAGE_TYPE_WALL} from "../message/constants";
+import {useStore} from "vuex";
+
 export default {
   name: "SocialNetworkPost",
+  components: {SocialNetworkPostComment, SocialNetworkPostForm},
   props: {
     message: {
       type: Object,
@@ -62,14 +86,38 @@ export default {
   },
   setup(props) {
     const attachment = props.message.attachments.length ? props.message.attachments[0] : null;
+    let comments = reactive([]);
 
     const containsImage = attachment && attachment.resourceNode.resourceFile.mimeType.includes('image/');
     const containsVideo = attachment && attachment.resourceNode.resourceFile.mimeType.includes('video/');
 
+    function loadComments() {
+      const store = useStore();
+
+      store
+        .dispatch(
+          'message/findAll',
+          {
+            parent: props.message['@id'],
+            msgType: MESSAGE_TYPE_WALL,
+            'order[sendDate]': 'desc',
+          }
+        )
+        .then(response => comments.push(...response));
+    }
+
+    function onDeletedComment(index) {
+      comments.splice(index, 1);
+    }
+
+    onMounted(loadComments);
+
     return {
       attachment,
       containsImage,
-      containsVideo
+      containsVideo,
+      comments,
+      onDeletedComment,
     }
   }
 }

assets/vue/components/socialnetwork/PostComment.vue

@@ -0,0 +1,59 @@
+<template>
+  <q-item bordered>
+    <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-label v-html="comment.content" />
+      <q-item-label caption>{{ $filters.relativeDatetime(comment.sendDate) }}</q-item-label>
+    </q-item-section>
+
+    <q-item-section
+      v-if="isOwner"
+      side
+      top
+    >
+      <q-btn
+        :aria-label="$t('Delete comment')"
+        dense
+        icon="delete"
+        @click="deleteComment"
+      />
+    </q-item-section>
+  </q-item>
+</template>
+
+<script>
+import {useStore} from "vuex";
+
+export default {
+  name: "SocialNetworkPostComment",
+  props: {
+    comment: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ['deleted'],
+  setup(props, context) {
+    const store = useStore();
+
+    const currentUser = store.getters['security/getUser'];
+
+    function deleteComment() {
+      store
+        .dispatch('message/del', props.comment)
+        .then(() => context.emit('deleted'));
+    }
+
+    return {
+      deleteComment,
+      isOwner: currentUser['@id'] === props.comment.sender['@id'],
+    };
+  }
+}
+</script>

assets/vue/components/socialnetwork/PostForm.vue

@@ -0,0 +1,56 @@
+<template>
+  <q-form class="q-gutter-md p-4 pt-0">
+    <q-input
+      v-model="comment"
+      :label="$t('Write new comment')"
+      autogrow
+    />
+    <div class="row justify-end">
+      <q-btn
+        :label="$t('Post')"
+        icon="send"
+        @click="sendComment"
+      />
+    </div>
+  </q-form>
+</template>
+
+<script>
+import {ref} from "vue";
+import {useStore} from "vuex";
+import {MESSAGE_TYPE_WALL} from "../message/constants";
+
+export default {
+  name: "SocialNetworkPostForm",
+  props: {
+    post: {
+      type: Object,
+      required: true,
+    }
+  },
+  setup(props) {
+    const store = useStore();
+
+    const currentUser = store.getters['security/getUser'];
+
+    const comment = ref('');
+
+    async function sendComment() {
+      await store.dispatch('message/create', {
+        title: 'Comment',
+        content: comment.value,
+        msgType: MESSAGE_TYPE_WALL,
+        sender: currentUser['@id'],
+        parent: props.post['@id'],
+      });
+
+      comment.value = '';
+    }
+
+    return {
+      sendComment,
+      comment
+    };
+  }
+}
+</script>

src/CoreBundle/Entity/Message.php

@@ -93,6 +93,7 @@ use Symfony\Component\Validator\Constraints as Assert;
     'sender' => 'exact',
     'receivers.receiver' => 'exact',
     'receivers.tags.tag' => 'exact',
+    'parent' => 'exact',
 ])]
 class Message
 {
@@ -216,6 +217,7 @@ class Message
      * @ORM\ManyToOne(targetEntity="Message", inversedBy="children")
      * @ORM\JoinColumn(name="parent_id", referencedColumnName="id")
      */
+    #[Groups(['message:write'])]
     protected ?Message $parent = null;
 
     /**