From e543f00657b46fe8b7eeb29b6fbef877962f18b2 Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <angelfqc.18@gmail.com>
Date: Wed, 29 Sep 2021 17:00:24 -0500
Subject: [PATCH 1/4] Message: Allow sent recorded audio as attachment

---
 assets/vue/components/AudioRecorder.vue       | 60 +++++++++++++------
 assets/vue/components/message/Form.vue        | 26 +++++++-
 assets/vue/main.js                            |  8 +++
 assets/vue/services/messageattachment.js      |  3 +
 assets/vue/views/message/Create.vue           | 11 ++++
 .../Api/CreateMessageAttachmentAction.php     | 51 ++++++++++++++++
 src/CoreBundle/Entity/Message.php             |  2 +-
 src/CoreBundle/Entity/MessageAttachment.php   | 37 +++++++++++-
 8 files changed, 176 insertions(+), 22 deletions(-)
 create mode 100644 assets/vue/services/messageattachment.js
 create mode 100644 src/CoreBundle/Controller/Api/CreateMessageAttachmentAction.php

diff --git a/assets/vue/components/AudioRecorder.vue b/assets/vue/components/AudioRecorder.vue
index c9b1a451ca..c2bb0ea25f 100644
--- a/assets/vue/components/AudioRecorder.vue
+++ b/assets/vue/components/AudioRecorder.vue
@@ -1,26 +1,37 @@
 <template>
-    <div class="py-2">
+    <div class="py-4">
         <q-btn v-if="!isRecording" color="primary" icon="mic" :label="$t('Start recording')" @click="record()"/>
 
-        <q-btn v-if="isRecording" color="red" icon="stop" :label="$t('Stop recording')" @click="stop()"/>
+        <q-btn v-if="isRecording" :label="$t('Stop recording')" color="red" icon="stop" @click="stop()"/>
 
         <div v-for="(audio, index) in audioList" :key="index" class="py-2">
-            <audio controls style="max-width: 100%;">
-                <source :src="audio">
+            <audio controls class="max-w-full">
+                <source :src="URL.createObjectURL(audio)">
             </audio>
+            {{ $t('Size') }} {{ audio.size }}
+            <q-btn :label="$t('Attach')" class="my-1" color="green" icon="attachment" size="sm"
+                   @click="attachAudio(audio)"/>
         </div>
     </div>
 </template>
 
 <script>
-import {ref} from "vue";
+import {reactive, toRefs} from "vue";
 
 export default {
     name: "AudioRecorder",
-
-    setup() {
-        const isRecording = ref(false)
-        const audioList = ref([]);
+    props: {
+        multiple: {
+            type: Boolean,
+            required: false,
+            default: true
+        },
+    },
+    setup(props, {emit}) {
+        const recorderState = reactive({
+            isRecording: false,
+            audioList: [],
+        });
 
         let mediaRecorder = null;
         let mediaChunks = [];
@@ -37,16 +48,17 @@ export default {
                         mediaChunks.push(e.data)
                     };
                     mediaRecorder.onstop = e => {
-                        const blob = new Blob(mediaChunks, {type: 'audio/ogg; codecs=opus'});
-                        const audioUrl = URL.createObjectURL(blob);
+                        stream.getAudioTracks()[0].stop();
+
+                        const audioItem = new Blob(mediaChunks, {type: 'audio/ogg; codecs=opus'});
 
                         mediaChunks = [];
 
-                        audioList.value.push(audioUrl);
+                        recorderState.audioList.push(audioItem);
                     };
                     mediaRecorder.start();
 
-                    isRecording.value = true;
+                    recorderState.isRecording = true;
                 })
                 .catch(console.log);
         }
@@ -56,16 +68,30 @@ export default {
                 return;
             }
 
+            if (false === props.multiple && recorderState.audioList.length > 0) {
+                recorderState.audioList.shift();
+            }
+
             mediaRecorder.stop();
-            mediaRecorder.stream.getAudioTracks()[0].stop();
-            isRecording.value = false;
+            recorderState.isRecording = false;
+        }
+
+        function attachAudio(audio) {
+            emit('attach-audio', audio);
+
+            const index = recorderState.audioList.indexOf(audio);
+
+            if (index >= 0) {
+                recorderState.audioList.splice(index, 1);
+            }
         }
 
         return {
             record,
             stop,
-            audioList,
-            isRecording
+            ...toRefs(recorderState),
+            attachAudio,
+            URL
         };
     }
 }
diff --git a/assets/vue/components/message/Form.vue b/assets/vue/components/message/Form.vue
index 2821e026ac..bfc1236f2d 100644
--- a/assets/vue/components/message/Form.vue
+++ b/assets/vue/components/message/Form.vue
@@ -15,9 +15,20 @@
           <slot></slot>
         </v-col>
         <v-col md="3">
-          <div v-text="$t('Atachments')" class="text-h6"/>
+          <div v-if="item.attachments && item.attachments.length > 0">
+            <div v-text="$t('Atachments')" class="text-h6"/>
+            <ul>
+              <li v-for="(attachment, index) in item.attachments" :key="index" class="my-2">
+                <audio v-if="attachment.type.indexOf('audio') === 0" controls class="max-w-full">
+                  <source :src="URL.createObjectURL(attachment)">
+                </audio>
+              </li>
+            </ul>
 
-          <AudioRecorder></AudioRecorder>
+            <hr class="my-2">
+          </div>
+
+          <AudioRecorder @attach-audio="attachAudios"></AudioRecorder>
         </v-col>
       </v-row>
     </v-container>
@@ -34,7 +45,7 @@ export default {
   name: 'MessageForm',
   components: {AudioRecorder},
   setup() {
-    return { v$: useVuelidate() }
+    return { v$: useVuelidate(), URL }
   },
   props: {
     values: {
@@ -89,6 +100,15 @@ export default {
       return this.errors || {};
     }
   },
+  methods: {
+    attachAudios(audio) {
+      if (!this.item.attachments) {
+        this.item.attachments = [];
+      }
+
+      this.item.attachments.push(audio);
+    }
+  },
   validations: {
     item: {
       title: {
diff --git a/assets/vue/main.js b/assets/vue/main.js
index 120c1e9cd2..4b5613c3e8 100644
--- a/assets/vue/main.js
+++ b/assets/vue/main.js
@@ -14,6 +14,7 @@ import personalFileService from './services/personalfile';
 import resourceLinkService from './services/resourcelink';
 import resourceNodeService from './services/resourcenode';
 import messageService from './services/message';
+import messageAttachmentService from './services/messageattachment';
 import messageRelUserService from './services/messagereluser';
 import userService from './services/user';
 import userGroupService from './services/usergroup';
@@ -95,6 +96,13 @@ store.registerModule(
     })
 );
 
+store.registerModule(
+    'messageattachment',
+    makeCrudModule({
+        service: messageAttachmentService
+    })
+);
+
 store.registerModule(
     'messagereluser',
     makeCrudModule({
diff --git a/assets/vue/services/messageattachment.js b/assets/vue/services/messageattachment.js
new file mode 100644
index 0000000000..8bba2c5943
--- /dev/null
+++ b/assets/vue/services/messageattachment.js
@@ -0,0 +1,3 @@
+import makeService from './api';
+
+export default makeService('message_attachments');
diff --git a/assets/vue/views/message/Create.vue b/assets/vue/views/message/Create.vue
index 8021bd0bc1..6298bcf774 100644
--- a/assets/vue/views/message/Create.vue
+++ b/assets/vue/views/message/Create.vue
@@ -175,6 +175,17 @@ export default {
     }),
   },
   methods: {
+    onCreated(message) {
+      if (this.item.attachments) {
+        this.item.attachments.forEach(attachment => {
+          this.createWithFormData({
+            messageId: message.id,
+            file: attachment
+          });
+        })
+      }
+    },
+    ...mapActions('messageattachment', ['createWithFormData']),
     ...mapActions('message', ['create', 'reset'])
   }
 };
diff --git a/src/CoreBundle/Controller/Api/CreateMessageAttachmentAction.php b/src/CoreBundle/Controller/Api/CreateMessageAttachmentAction.php
new file mode 100644
index 0000000000..6ea6ae693b
--- /dev/null
+++ b/src/CoreBundle/Controller/Api/CreateMessageAttachmentAction.php
@@ -0,0 +1,51 @@
+<?php
+
+/* For licensing terms, see /license.txt */
+
+declare(strict_types=1);
+
+namespace Chamilo\CoreBundle\Controller\Api;
+
+use Chamilo\CoreBundle\Entity\Message;
+use Chamilo\CoreBundle\Entity\MessageAttachment;
+use Chamilo\CoreBundle\Repository\Node\MessageAttachmentRepository;
+use Doctrine\ORM\EntityManager;
+use Exception;
+use Symfony\Component\HttpFoundation\File\UploadedFile;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpKernel\Exception\BadRequestHttpException;
+
+class CreateMessageAttachmentAction extends BaseResourceFileAction
+{
+    /**
+     * @throws Exception
+     */
+    public function __invoke(Request $request, MessageAttachmentRepository $repo, EntityManager $em): MessageAttachment
+    {
+        /** @var UploadedFile $uploadedFile */
+        $uploadedFile = $request->files->get('file');
+
+        if (!$uploadedFile) {
+            throw new BadRequestHttpException('file is required');
+        }
+
+        $messageRepo = $em->getRepository(Message::class);
+
+        $message = $messageRepo->find($request->get('messageId'));
+
+        $attachment = (new MessageAttachment())
+            ->setFilename($uploadedFile->getFilename())
+            ->setMessage($message)
+            ->setParent($message->getSender())
+            ->setCreator($message->getSender())
+        ;
+
+        $message->addAttachment($attachment);
+
+        $em->persist($attachment);
+        $repo->addFile($attachment, $uploadedFile);
+        $em->flush();
+
+        return $attachment;
+    }
+}
diff --git a/src/CoreBundle/Entity/Message.php b/src/CoreBundle/Entity/Message.php
index d91426c839..bd6c1aa19b 100644
--- a/src/CoreBundle/Entity/Message.php
+++ b/src/CoreBundle/Entity/Message.php
@@ -234,7 +234,7 @@ class Message
     /**
      * @var Collection|MessageAttachment[]
      *
-     * @ORM\OneToMany(targetEntity="MessageAttachment", mappedBy="message", cascade={"remove"})
+     * @ORM\OneToMany(targetEntity="MessageAttachment", mappedBy="message", cascade={"remove", "persist"})
      */
     protected Collection $attachments;
 
diff --git a/src/CoreBundle/Entity/MessageAttachment.php b/src/CoreBundle/Entity/MessageAttachment.php
index 6a7c02e3ae..ea31ff6c08 100644
--- a/src/CoreBundle/Entity/MessageAttachment.php
+++ b/src/CoreBundle/Entity/MessageAttachment.php
@@ -6,6 +6,8 @@ declare(strict_types=1);
 
 namespace Chamilo\CoreBundle\Entity;
 
+use ApiPlatform\Core\Annotation\ApiResource;
+use Chamilo\CoreBundle\Controller\Api\CreateMessageAttachmentAction;
 use Doctrine\ORM\Mapping as ORM;
 
 /**
@@ -14,6 +16,39 @@ use Doctrine\ORM\Mapping as ORM;
  * @ORM\Table(name="message_attachment")
  * @ORM\Entity(repositoryClass="Chamilo\CoreBundle\Repository\Node\MessageAttachmentRepository")
  */
+#[ApiResource(
+    collectionOperations: [
+        'get',
+        'post' => [
+            'controller' => CreateMessageAttachmentAction::class,
+            'deserialize' => false,
+            'validation_groups' => ['Default', 'message_attachment:create'],
+            'openapi_context' => [
+                'requestBody' => [
+                    'content' => [
+                        'multipart/form-data' => [
+                            'schema' => [
+                                'type' => 'object',
+                                'properties' => [
+                                    'file' => [
+                                        'type' => 'string',
+                                        'format' => 'binary',
+                                    ],
+                                    'messageId' => [
+                                        'type' => 'integer',
+                                    ],
+                                ],
+                            ],
+                        ],
+                    ],
+                ],
+            ],
+        ],
+    ],
+    iri: 'http://schema.org/MediaObject',
+    itemOperations: ['get'],
+    normalizationContext: ['groups' => 'message:read']
+)]
 class MessageAttachment extends AbstractResource implements ResourceInterface
 {
     /**
@@ -39,7 +74,7 @@ class MessageAttachment extends AbstractResource implements ResourceInterface
     protected int $size;
 
     /**
-     * @ORM\ManyToOne(targetEntity="Chamilo\CoreBundle\Entity\Message", inversedBy="attachments")
+     * @ORM\ManyToOne(targetEntity="Chamilo\CoreBundle\Entity\Message", inversedBy="attachments", cascade={"persist"})
      * @ORM\JoinColumn(name="message_id", referencedColumnName="id", nullable=false)
      */
     protected Message $message;

From 6f7e5f74d503022f43b7a893ba808cf615e39b89 Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <angelfqc.18@gmail.com>
Date: Wed, 29 Sep 2021 17:40:25 -0500
Subject: [PATCH 2/4] Minor: Format code

---
 assets/vue/components/AudioRecorder.vue       | 198 ++++++++++--------
 assets/vue/components/message/Form.vue        |  32 ++-
 assets/vue/views/message/Create.vue           | 141 ++++++-------
 .../Api/CreateMessageAttachmentAction.php     |   2 +-
 src/CoreBundle/Entity/MessageAttachment.php   |  34 +--
 5 files changed, 224 insertions(+), 183 deletions(-)

diff --git a/assets/vue/components/AudioRecorder.vue b/assets/vue/components/AudioRecorder.vue
index c2bb0ea25f..28e4436366 100644
--- a/assets/vue/components/AudioRecorder.vue
+++ b/assets/vue/components/AudioRecorder.vue
@@ -1,99 +1,125 @@
 <template>
-    <div class="py-4">
-        <q-btn v-if="!isRecording" color="primary" icon="mic" :label="$t('Start recording')" @click="record()"/>
-
-        <q-btn v-if="isRecording" :label="$t('Stop recording')" color="red" icon="stop" @click="stop()"/>
-
-        <div v-for="(audio, index) in audioList" :key="index" class="py-2">
-            <audio controls class="max-w-full">
-                <source :src="URL.createObjectURL(audio)">
-            </audio>
-            {{ $t('Size') }} {{ audio.size }}
-            <q-btn :label="$t('Attach')" class="my-1" color="green" icon="attachment" size="sm"
-                   @click="attachAudio(audio)"/>
-        </div>
+  <div class="py-4">
+    <q-btn
+      v-if="!isRecording"
+      :label="$t('Start recording')"
+      color="primary"
+      icon="mic"
+      @click="record()"
+    />
+
+    <q-btn
+      v-if="isRecording"
+      :label="$t('Stop recording')"
+      color="red"
+      icon="stop"
+      @click="stop()"
+    />
+
+    <div
+      v-for="(audio, index) in audioList"
+      :key="index"
+      class="py-2"
+    >
+      <audio
+        class="max-w-full"
+        controls
+      >
+        <source
+          :src="URL.createObjectURL(audio)"
+        >
+      </audio>
+      <q-btn
+        :label="$t('Attach')"
+        class="my-1"
+        color="green"
+        icon="attachment"
+        size="sm"
+        @click="attachAudio(audio)"
+      />
     </div>
+  </div>
 </template>
 
 <script>
 import {reactive, toRefs} from "vue";
 
 export default {
-    name: "AudioRecorder",
-    props: {
-        multiple: {
-            type: Boolean,
-            required: false,
-            default: true
-        },
+  name: "AudioRecorder",
+  props: {
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: true
     },
-    setup(props, {emit}) {
-        const recorderState = reactive({
-            isRecording: false,
-            audioList: [],
-        });
-
-        let mediaRecorder = null;
-        let mediaChunks = [];
-
-        function record() {
-            if (!navigator.mediaDevices.getUserMedia) {
-                return;
-            }
-
-            navigator.mediaDevices.getUserMedia({audio: true})
-                .then((stream) => {
-                    mediaRecorder = new MediaRecorder(stream);
-                    mediaRecorder.ondataavailable = e => {
-                        mediaChunks.push(e.data)
-                    };
-                    mediaRecorder.onstop = e => {
-                        stream.getAudioTracks()[0].stop();
-
-                        const audioItem = new Blob(mediaChunks, {type: 'audio/ogg; codecs=opus'});
-
-                        mediaChunks = [];
-
-                        recorderState.audioList.push(audioItem);
-                    };
-                    mediaRecorder.start();
-
-                    recorderState.isRecording = true;
-                })
-                .catch(console.log);
-        }
-
-        function stop() {
-            if (!mediaRecorder) {
-                return;
-            }
-
-            if (false === props.multiple && recorderState.audioList.length > 0) {
-                recorderState.audioList.shift();
-            }
-
-            mediaRecorder.stop();
-            recorderState.isRecording = false;
-        }
-
-        function attachAudio(audio) {
-            emit('attach-audio', audio);
-
-            const index = recorderState.audioList.indexOf(audio);
-
-            if (index >= 0) {
-                recorderState.audioList.splice(index, 1);
-            }
-        }
-
-        return {
-            record,
-            stop,
-            ...toRefs(recorderState),
-            attachAudio,
-            URL
-        };
+  },
+  setup(props, {emit}) {
+    const recorderState = reactive({
+      isRecording: false,
+      audioList: [],
+    });
+
+    let mediaRecorder = null;
+    let mediaChunks = [];
+
+    function record() {
+      if (!navigator.mediaDevices.getUserMedia) {
+        return;
+      }
+
+      navigator.mediaDevices.getUserMedia({audio: true})
+        .then((stream) => {
+          mediaRecorder = new MediaRecorder(stream);
+          mediaRecorder.ondataavailable = e => {
+            mediaChunks.push(e.data)
+          };
+          mediaRecorder.onstop = e => {
+            stream.getAudioTracks()[0].stop();
+
+            const audioItem = new Blob(mediaChunks, {type: 'audio/ogg; codecs=opus'});
+
+            mediaChunks = [];
+
+            recorderState.audioList.push(audioItem);
+          };
+          mediaRecorder.start();
+
+          recorderState.isRecording = true;
+        })
+        .catch(console.log);
     }
+
+    function stop() {
+      if (!mediaRecorder) {
+        return;
+      }
+
+      if (false === props.multiple && recorderState.audioList.length > 0) {
+        recorderState.audioList.shift();
+      }
+
+      mediaRecorder.stop();
+      recorderState.isRecording = false;
+    }
+
+    function attachAudio(audio) {
+      emit('attach-audio', audio);
+
+      const index = recorderState.audioList.indexOf(audio);
+
+      if (index >= 0) {
+        recorderState.audioList.splice(index, 1);
+      }
+    }
+
+    return {
+      record,
+      stop,
+      ...toRefs(recorderState),
+      attachAudio,
+      URL
+    };
+  }
 }
 </script>
 
diff --git a/assets/vue/components/message/Form.vue b/assets/vue/components/message/Form.vue
index bfc1236f2d..5d3344fa40 100644
--- a/assets/vue/components/message/Form.vue
+++ b/assets/vue/components/message/Form.vue
@@ -16,11 +16,21 @@
         </v-col>
         <v-col md="3">
           <div v-if="item.attachments && item.attachments.length > 0">
-            <div v-text="$t('Atachments')" class="text-h6"/>
+            <div class="text-h6" v-text="$t('Atachments')"/>
             <ul>
-              <li v-for="(attachment, index) in item.attachments" :key="index" class="my-2">
-                <audio v-if="attachment.type.indexOf('audio') === 0" controls class="max-w-full">
-                  <source :src="URL.createObjectURL(attachment)">
+              <li
+                v-for="(attachment, index) in item.attachments"
+                :key="index"
+                class="my-2"
+              >
+                <audio
+                  v-if="attachment.type.indexOf('audio') === 0"
+                  class="max-w-full"
+                  controls
+                >
+                  <source
+                    :src="URL.createObjectURL(attachment)"
+                  >
                 </audio>
               </li>
             </ul>
@@ -28,7 +38,9 @@
             <hr class="my-2">
           </div>
 
-          <AudioRecorder @attach-audio="attachAudios"></AudioRecorder>
+          <AudioRecorder
+            @attach-audio="attachAudios"
+          />
         </v-col>
       </v-row>
     </v-container>
@@ -38,14 +50,14 @@
 <script>
 import has from 'lodash/has';
 import useVuelidate from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
+import {required} from '@vuelidate/validators';
 import AudioRecorder from "../AudioRecorder";
 
 export default {
   name: 'MessageForm',
   components: {AudioRecorder},
   setup() {
-    return { v$: useVuelidate(), URL }
+    return {v$: useVuelidate(), URL}
   },
   props: {
     values: {
@@ -54,11 +66,13 @@ export default {
     },
     errors: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
     initialValues: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     },
   },
   data() {
diff --git a/assets/vue/views/message/Create.vue b/assets/vue/views/message/Create.vue
index 6298bcf774..15a8a802ae 100644
--- a/assets/vue/views/message/Create.vue
+++ b/assets/vue/views/message/Create.vue
@@ -1,69 +1,67 @@
 <template>
-    <!--        :handle-submit="onSendMessageForm"-->
-    <Toolbar
-        :handle-send="onSendMessageForm"
-    />
-    <MessageForm
-      ref="createForm"
-      :values="item"
-      :errors="violations"
-    >
-
-      <!--          @input="v$.item.receiversTo.$touch()"-->
+  <!--        :handle-submit="onSendMessageForm"-->
+  <Toolbar
+    :handle-send="onSendMessageForm"
+  />
+  <MessageForm
+    ref="createForm"
+    :errors="violations"
+    :values="item"
+  >
 
-      <VueMultiselect
-          id="to"
-          placeholder="To"
-          v-model="item.receiversTo"
-          :loading="isLoadingSelect"
-          :options="usersTo"
-          :multiple="true"
-          :searchable="true"
-          :internal-search="false"
-          @search-change="asyncFindTo"
-          limit-text="3"
-          limit="3"
-          label="username"
-          track-by="id"
-          :allow-empty="false"
+    <!--          @input="v$.item.receiversTo.$touch()"-->
 
-      />
+    <VueMultiselect
+      id="to"
+      v-model="item.receiversTo"
+      :allow-empty="false"
+      :internal-search="false"
+      :loading="isLoadingSelect"
+      :multiple="true"
+      :options="usersTo"
+      :searchable="true"
+      label="username"
+      limit="3"
+      limit-text="3"
+      placeholder="To"
+      track-by="id"
+      @search-change="asyncFindTo"
+    />
 
-      <VueMultiselect
-          id="cc"
-          placeholder="Cc"
-          v-model="item.receiversCc"
-          :loading="isLoadingSelect"
-          :options="usersCc"
-          :multiple="true"
-          :searchable="true"
-          :internal-search="false"
-          @search-change="asyncFindCc"
-          limit-text="3"
-          limit="3"
-          label="username"
-          track-by="id"
-          :allow-empty="true"
-      />
+    <VueMultiselect
+      id="cc"
+      v-model="item.receiversCc"
+      :allow-empty="true"
+      :internal-search="false"
+      :loading="isLoadingSelect"
+      :multiple="true"
+      :options="usersCc"
+      :searchable="true"
+      label="username"
+      limit="3"
+      limit-text="3"
+      placeholder="Cc"
+      track-by="id"
+      @search-change="asyncFindCc"
+    />
 
-      <!--          @filter-abort="abortFilterFn"-->
-<!--      <q-select-->
-<!--          filled-->
-<!--          v-model="item.receivers"-->
-<!--          use-input-->
-<!--          use-chips-->
-<!--          :options="users"-->
-<!--          input-debounce="0"-->
-<!--          label="Lazy filter"-->
-<!--          @filter="asyncFind"-->
-<!--          style="width: 250px"-->
-<!--          hint="With use-chips"-->
-<!--          :error-message="receiversErrors"-->
-<!--      />-->
-      <TinyEditor
-        v-model="item.content"
-        required
-        :init="{
+    <!--          @filter-abort="abortFilterFn"-->
+    <!--      <q-select-->
+    <!--          filled-->
+    <!--          v-model="item.receivers"-->
+    <!--          use-input-->
+    <!--          use-chips-->
+    <!--          :options="users"-->
+    <!--          input-debounce="0"-->
+    <!--          label="Lazy filter"-->
+    <!--          @filter="asyncFind"-->
+    <!--          style="width: 250px"-->
+    <!--          hint="With use-chips"-->
+    <!--          :error-message="receiversErrors"-->
+    <!--      />-->
+    <TinyEditor
+      v-model="item.content"
+      :init="{
           skin_url: '/build/libs/tinymce/skins/ui/oxide',
           content_css: '/build/libs/tinymce/skins/content/default/content.css',
           branding: false,
@@ -78,18 +76,20 @@
             'insertdatetime media table paste wordcount emoticons'
           ],
           toolbar: 'undo redo | bold italic underline strikethrough | insertfile image media template link | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | code codesample | ltr rtl',
-        }
-        "
+        }"
+      required
     />
-    </MessageForm>
-    <Loading :visible="isLoading" />
+  </MessageForm>
+  <Loading
+    :visible="isLoading"
+  />
 </template>
 
 <style src="vue-multiselect/dist/vue-multiselect.css"></style>
 
 <script>
-import {mapActions, mapGetters, useStore} from 'vuex';
-import { createHelpers } from 'vuex-map-fields';
+import {mapActions, mapGetters} from 'vuex';
+import {createHelpers} from 'vuex-map-fields';
 import MessageForm from '../../components/message/Form.vue';
 import Loading from '../../components/Loading.vue';
 import Toolbar from '../../components/Toolbar.vue';
@@ -99,9 +99,10 @@ import axios from "axios";
 import {ENTRYPOINT} from "../../config/entrypoint";
 import useVuelidate from "@vuelidate/core";
 import VueMultiselect from 'vue-multiselect'
+
 const servicePrefix = 'Message';
 
-const { mapFields } = createHelpers({
+const {mapFields} = createHelpers({
   getterType: 'message/getField',
   mutationType: 'message/updateField'
 });
@@ -116,12 +117,12 @@ export default {
     MessageForm,
     VueMultiselect
   },
-  setup () {
+  setup() {
     const usersTo = ref([]);
     const usersCc = ref([]);
     const isLoadingSelect = ref(false);
 
-    function asyncFind (query) {
+    function asyncFind(query) {
       if (query.toString().length < 3) {
         throw new Error('error');
       }
diff --git a/src/CoreBundle/Controller/Api/CreateMessageAttachmentAction.php b/src/CoreBundle/Controller/Api/CreateMessageAttachmentAction.php
index 6ea6ae693b..6249d1e1e0 100644
--- a/src/CoreBundle/Controller/Api/CreateMessageAttachmentAction.php
+++ b/src/CoreBundle/Controller/Api/CreateMessageAttachmentAction.php
@@ -25,7 +25,7 @@ class CreateMessageAttachmentAction extends BaseResourceFileAction
         /** @var UploadedFile $uploadedFile */
         $uploadedFile = $request->files->get('file');
 
-        if (!$uploadedFile) {
+        if (empty($uploadedFile)) {
             throw new BadRequestHttpException('file is required');
         }
 
diff --git a/src/CoreBundle/Entity/MessageAttachment.php b/src/CoreBundle/Entity/MessageAttachment.php
index ea31ff6c08..2441185d88 100644
--- a/src/CoreBundle/Entity/MessageAttachment.php
+++ b/src/CoreBundle/Entity/MessageAttachment.php
@@ -96,9 +96,14 @@ class MessageAttachment extends AbstractResource implements ResourceInterface
         return $this->getFilename();
     }
 
-    public function setPath(string $path): self
+    public function getFilename(): string
     {
-        $this->path = $path;
+        return $this->filename;
+    }
+
+    public function setFilename(string $filename): self
+    {
+        $this->filename = $filename;
 
         return $this;
     }
@@ -113,9 +118,9 @@ class MessageAttachment extends AbstractResource implements ResourceInterface
         return $this->path;
     }
 
-    public function setComment(string $comment): self
+    public function setPath(string $path): self
     {
-        $this->comment = $comment;
+        $this->path = $path;
 
         return $this;
     }
@@ -130,9 +135,9 @@ class MessageAttachment extends AbstractResource implements ResourceInterface
         return $this->comment;
     }
 
-    public function setSize(int $size): self
+    public function setComment(string $comment): self
     {
-        $this->size = $size;
+        $this->comment = $comment;
 
         return $this;
     }
@@ -142,9 +147,9 @@ class MessageAttachment extends AbstractResource implements ResourceInterface
         return $this->size;
     }
 
-    public function setMessage(Message $message): self
+    public function setSize(int $size): self
     {
-        $this->message = $message;
+        $this->size = $size;
 
         return $this;
     }
@@ -154,16 +159,16 @@ class MessageAttachment extends AbstractResource implements ResourceInterface
         return $this->message;
     }
 
-    public function setFilename(string $filename): self
+    public function setMessage(Message $message): self
     {
-        $this->filename = $filename;
+        $this->message = $message;
 
         return $this;
     }
 
-    public function getFilename(): string
+    public function getResourceIdentifier(): int
     {
-        return $this->filename;
+        return $this->getId();
     }
 
     /**
@@ -176,11 +181,6 @@ class MessageAttachment extends AbstractResource implements ResourceInterface
         return $this->id;
     }
 
-    public function getResourceIdentifier(): int
-    {
-        return $this->getId();
-    }
-
     public function getResourceName(): string
     {
         return $this->getFilename();

From 7172018780a85d45a619738676065877513795d1 Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <angelfqc.18@gmail.com>
Date: Wed, 29 Sep 2021 18:16:55 -0500
Subject: [PATCH 3/4] Minor: Format code

---
 assets/vue/components/AudioRecorder.vue     |  3 ++-
 assets/vue/components/message/Form.vue      |  9 +++++--
 assets/vue/views/message/Create.vue         | 30 ++++++++++-----------
 src/CoreBundle/Entity/MessageAttachment.php |  2 +-
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/assets/vue/components/AudioRecorder.vue b/assets/vue/components/AudioRecorder.vue
index 28e4436366..62a0977061 100644
--- a/assets/vue/components/AudioRecorder.vue
+++ b/assets/vue/components/AudioRecorder.vue
@@ -119,7 +119,8 @@ export default {
       attachAudio,
       URL
     };
-  }
+  },
+  emits: ['attachAudio'],
 }
 </script>
 
diff --git a/assets/vue/components/message/Form.vue b/assets/vue/components/message/Form.vue
index 5d3344fa40..308de17d80 100644
--- a/assets/vue/components/message/Form.vue
+++ b/assets/vue/components/message/Form.vue
@@ -15,8 +15,13 @@
           <slot></slot>
         </v-col>
         <v-col md="3">
-          <div v-if="item.attachments && item.attachments.length > 0">
-            <div class="text-h6" v-text="$t('Atachments')"/>
+          <div
+            v-if="item.attachments && item.attachments.length > 0"
+          >
+            <div
+              class="text-h6"
+              v-text="$t('Atachments')"
+            />
             <ul>
               <li
                 v-for="(attachment, index) in item.attachments"
diff --git a/assets/vue/views/message/Create.vue b/assets/vue/views/message/Create.vue
index 15a8a802ae..ddc164b472 100644
--- a/assets/vue/views/message/Create.vue
+++ b/assets/vue/views/message/Create.vue
@@ -62,21 +62,21 @@
     <TinyEditor
       v-model="item.content"
       :init="{
-          skin_url: '/build/libs/tinymce/skins/ui/oxide',
-          content_css: '/build/libs/tinymce/skins/content/default/content.css',
-          branding: false,
-          relative_urls: false,
-          height: 500,
-          toolbar_mode: 'sliding',
-          file_picker_callback : browser,
-          autosave_ask_before_unload: true,
-          plugins: [
-            'advlist autolink lists link image charmap print preview anchor',
-            'searchreplace visualblocks code fullscreen',
-            'insertdatetime media table paste wordcount emoticons'
-          ],
-          toolbar: 'undo redo | bold italic underline strikethrough | insertfile image media template link | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | code codesample | ltr rtl',
-        }"
+        skin_url: '/build/libs/tinymce/skins/ui/oxide',
+        content_css: '/build/libs/tinymce/skins/content/default/content.css',
+        branding: false,
+        relative_urls: false,
+        height: 500,
+        toolbar_mode: 'sliding',
+        file_picker_callback : browser,
+        autosave_ask_before_unload: true,
+        plugins: [
+          'advlist autolink lists link image charmap print preview anchor',
+          'searchreplace visualblocks code fullscreen',
+          'insertdatetime media table paste wordcount emoticons'
+        ],
+        toolbar: 'undo redo | bold italic underline strikethrough | insertfile image media template link | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | code codesample | ltr rtl',
+      }"
       required
     />
   </MessageForm>
diff --git a/src/CoreBundle/Entity/MessageAttachment.php b/src/CoreBundle/Entity/MessageAttachment.php
index 2441185d88..03cb1e161d 100644
--- a/src/CoreBundle/Entity/MessageAttachment.php
+++ b/src/CoreBundle/Entity/MessageAttachment.php
@@ -47,7 +47,7 @@ use Doctrine\ORM\Mapping as ORM;
     ],
     iri: 'http://schema.org/MediaObject',
     itemOperations: ['get'],
-    normalizationContext: ['groups' => 'message:read']
+    normalizationContext: ['groups' => 'message:read'],
 )]
 class MessageAttachment extends AbstractResource implements ResourceInterface
 {

From ffcff54577c9967147163384b71841a99055bca5 Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <angelfqc.18@gmail.com>
Date: Thu, 30 Sep 2021 17:00:23 -0500
Subject: [PATCH 4/4] PHPUnit: Test to send message with attachment

---
 .../Repository/MessageRepositoryTest.php      | 101 +++++++++++++-----
 1 file changed, 72 insertions(+), 29 deletions(-)

diff --git a/tests/CoreBundle/Repository/MessageRepositoryTest.php b/tests/CoreBundle/Repository/MessageRepositoryTest.php
index 5065554435..77d05eced2 100644
--- a/tests/CoreBundle/Repository/MessageRepositoryTest.php
+++ b/tests/CoreBundle/Repository/MessageRepositoryTest.php
@@ -168,43 +168,86 @@ class MessageRepositoryTest extends AbstractApiTest
     {
         self::bootKernel();
 
-        $em = $this->getEntityManager();
+        $user1 = $this->getUser('admin');
+        $user2 = $this->createUser('user2');
 
-        $messageAttachmentRepo = self::getContainer()->get(MessageAttachmentRepository::class);
-        $messageRepo = self::getContainer()->get(MessageRepository::class);
+        $user1Token = $this->getUserTokenFromUser($user1);
 
-        $admin = $this->getUser('admin');
-        $testUser = $this->createUser('test');
+        $client = $this->createClientWithCredentials($user1Token);
 
-        // Create message.
-        $message = (new Message())
-            ->setTitle('hello')
-            ->setContent('content')
-            ->setMsgType(Message::MESSAGE_TYPE_INBOX)
-            ->setSender($admin)
-            ->addReceiver($testUser)
-        ;
-
-        $this->assertHasNoEntityViolations($message);
-        $messageRepo->update($message);
+        $responseMessage = $client->request(
+            'POST',
+            '/api/messages',
+            [
+                'json' => [
+                    'msgType' => Message::MESSAGE_TYPE_INBOX,
+                    'title' => 'Message title',
+                    'content' => 'Message content',
+                    'receivers' => [
+                        [
+                            'receiver' => "/api/users/{$user2->getId()}",
+                            'receiverType' => MessageRelUser::TYPE_TO,
+                        ],
+                    ],
+                    'sender' => "/api/users/{$user1->getId()}",
+                ],
+            ]
+        );
 
-        $file = $this->getUploadedFile();
+        $this->assertResponseIsSuccessful();
+        $this->assertResponseHeaderSame('content-type', 'application/ld+json; charset=utf-8');
+        $this->assertJsonContains(
+            [
+                '@context' => '/api/contexts/Message',
+                '@type' => 'Message',
+                'sender' => [
+                    '@id' => "/api/users/{$user1->getId()}",
+                ],
+                'receiversTo' => [
+                    [
+                        '@type' => 'MessageRelUser',
+                        'receiver' => [
+                            '@id' => "/api/users/{$user2->getId()}",
+                        ],
+                        'receiverType' => MessageRelUser::TYPE_TO,
+                    ],
+                ],
+                'msgType' => Message::MESSAGE_TYPE_INBOX,
+                'title' => 'Message title',
+                'content' => 'Message content',
+            ]
+        );
 
-        $attachment = (new MessageAttachment())
-            ->setFilename($file->getFilename())
-            ->setMessage($message)
-            ->setParent($message->getSender())
-            ->setCreator($message->getSender())
-        ;
-        $message->addAttachment($attachment);
+        $messageId = $responseMessage->toArray()['id'];
 
-        $em->persist($attachment);
-        $messageAttachmentRepo->addFile($attachment, $file);
-        $em->flush();
+        $file = $this->getUploadedFile();
 
-        $em->clear();
+        $responseAttachment = $client->request(
+            'POST',
+            '/api/message_attachments',
+            [
+                'headers' => [
+                    'Content-Type' => 'multipart/form-data',
+                ],
+                'extra' => [
+                    'files' => [
+                        'file' => $file,
+                    ],
+                    'parameters' => [
+                        'messageId' => $messageId,
+                    ],
+                ],
+            ]
+        );
 
-        $this->assertSame(1, $messageAttachmentRepo->count([]));
+        $this->assertResponseIsSuccessful();
+        $this->assertResponseHeaderSame('content-type', 'application/ld+json; charset=utf-8');
+        $this->assertJsonContains(
+            [
+                '@context' => '/api/contexts/MessageAttachment',
+                '@type' => 'http://schema.org/MediaObject',
+            ]
+        );
     }
 
     public function testDeleteMessage(): void