Message: Allow message attachments - refs BT#21648

assets/vue/components/message/Form.vue

@@ -10,42 +10,40 @@
       <slot></slot>
     </div>
 
-    <div>
+    <div class="space-y-4">
-      <div v-if="attachments && attachments.length > 0">
+      <p class="text-h6">
-        <div
+        <BaseIcon icon="attachment" />
-          v-t="'Attachments'"
+        {{ t("Attachments") }}
-          class="text-h6"
+      </p>
-        />
 
-        <ul>
+      <ul
+        v-if="attachments && attachments.length > 0"
+        class="space-y-2"
+      >
         <li
           v-for="(attachment, index) in attachments"
           :key="index"
-            class="my-2"
+          class="text-body-2"
-          >
+          v-text="attachment.originalName"
-            <audio
+        />
-              v-if="attachment.type.indexOf('audio') === 0"
-              class="max-w-full"
-              controls
-            >
-              <source :src="window.URL.createObjectURL(attachment)" />
-            </audio>
-          </li>
       </ul>
 
-        <hr />
+      <BaseUploader
-      </div>
+        field-name="file"
-
+        :endpoint="resourceFileService.endpoint"
-      <AudioRecorder @attach-audio="attachAudios" />
+        @upload-success="onUploadSuccess"
+      />
     </div>
   </div>
 </template>
 
 <script setup>
-import AudioRecorder from "../AudioRecorder"
 import BaseInputText from "../basecomponents/BaseInputText.vue"
 import { useI18n } from "vue-i18n"
 import { computed } from "vue"
+import BaseIcon from "../basecomponents/BaseIcon.vue"
+import BaseUploader from "../basecomponents/BaseUploader.vue"
+import resourceFileService from "../../services/resourceFileService"
 
 const attachments = defineModel("attachments", {
   type: Array,
@@ -70,5 +68,5 @@ const { t } = useI18n()
 
 const item = computed(() => props.initialValues || props.values)
 
-const attachAudios = (audio) => attachments.value.push(audio)
+const onUploadSuccess = (resource) => attachments.value.push(resource)
 </script>

assets/vue/services/resourceFileService.js

@@ -0,0 +1,12 @@
+import baseService from "./baseService"
+
+const endpoint = "/api/resource_files"
+
+const post = async (formData) => {
+  return await baseService.postForm(endpoint, formData)
+}
+
+export default {
+  endpoint,
+  post,
+}

assets/vue/views/message/MessageCreate.vue

@@ -91,6 +91,7 @@ const item = ref({
   msgType: MESSAGE_TYPE_INBOX,
   title: "",
   content: "",
+  attachments: [],
 })
 
 const attachments = ref([])
@@ -127,6 +128,10 @@ const onSubmit = async () => {
   if (!canSubmitMessage.value) {
     return
   }
+
+  item.value.attachments = attachments.value.map((attachment) => ({
+    resourceFileToAttach: attachment["@id"],
+  }))
   item.value.receivers = [...receiversTo.value, ...receiversCc.value]
   isLoading.value = true