chamilo-lms/assets/vue/views/message/MessageCreate.vue

<template>
  <!--        :handle-submit="onSendMessageForm"-->
  <MessageForm
    v-model:attachments="attachments"
    :values="item"
  >
    <!--          @input="v$.item.receiversTo.$touch()"-->

    <BaseAutocomplete
      id="to"
      v-model="usersTo"
      :label="t('To')"
      :search="asyncFind"
      is-multiple
    />

    <BaseAutocomplete
      id="cc"
      v-model="usersCc"
      :label="t('Cc')"
      :search="asyncFind"
      is-multiple
    />

    <div class="field">
      <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',
        }"
        required
      />
    </div>

    <BaseButton
      :label="t('Send')"
      icon="plus"
      type="primary"
      @click="onSubmit"
    />
  </MessageForm>
  <Loading :visible="isLoading" />
</template>

<script setup>
import { useStore } from "vuex"
import MessageForm from "../../components/message/Form.vue"
import Loading from "../../components/Loading.vue"
import { computed, ref } from "vue"
import axios from "axios"
import { ENTRYPOINT } from "../../config/entrypoint"
import BaseAutocomplete from "../../components/basecomponents/BaseAutocomplete.vue"
import BaseButton from "../../components/basecomponents/BaseButton.vue"
import { useI18n } from "vue-i18n"
import { useRoute, useRouter } from "vue-router"
import { MESSAGE_TYPE_INBOX } from "../../components/message/constants"

const store = useStore()
const router = useRouter()
const route = useRoute()
const { t } = useI18n()

const asyncFind = (query) => {
  return axios
    .get(ENTRYPOINT + "users", {
      params: {
        username: query,
      },
    })
    .then((response) => {
      let data = response.data

      return (
        data["hydra:member"]?.map((member) => ({
          name: member.fullName,
          value: member["@id"],
        })) ?? []
      )
    })
    .catch(function (error) {
      console.log(error)
    })
}

const currentUser = computed(() => store.getters["security/getUser"])

const item = ref({
  sender: currentUser.value["@id"],
  receivers: [],
  msgType: MESSAGE_TYPE_INBOX,
  title: "",
  content: "",
})

const attachments = ref([])

const usersTo = ref([])

const usersCc = ref([])

const receiversTo = computed(() =>
  usersTo.value.map((userTo) => ({
    receiver: userTo.value,
    receiverType: 1,
  })),
)

const receiversCc = computed(() =>
  usersCc.value.map((userCc) => ({
    receiver: userCc.value,
    receiverType: 2,
  })),
)

const isLoading = computed(() => store.getters["message/isLoading"])
const messageCreated = computed(() => store.state.message.created)

const onSubmit = () => {
  item.value.receivers = [...receiversTo.value, ...receiversCc.value]

  store.dispatch("message/create", item.value).then(() => {
    if (attachments.value.length > 0) {
      attachments.value.forEach((attachment) =>
        store.dispatch("messageattachment/createWithFormData", {
          messageId: messageCreated.value.id,
          file: attachment,
        }),
      )
    }

    router.push({
      name: "MessageList",
      query: route.query,
    })
  })
}

const browser = (callback, value, meta) => {
  let url = "/resources/personal_files/"

  if (meta.filetype === "image") {
    url = url + "&type=images"
  } else {
    url = url + "&type=files"
  }

  window.addEventListener("message", function (event) {
    var data = event.data
    if (data.url) {
      url = data.url
      console.log(meta) // {filetype: "image", fieldname: "src"}
      callback(url)
    }
  })

  tinymce.activeEditor.windowManager.openUrl(
    {
      url: url,
      title: "file manager",
    },
    {
      oninsert: function (file, fm) {
        var url, reg, info

        url = fm.convAbsUrl(file.url)

        info = file.name + " (" + fm.formatSize(file.size) + ")"

        if (meta.filetype === "file") {
          callback(url, { text: info, title: info })
        }

        if (meta.filetype === "image") {
          callback(url, { alt: info })
        }

        if (meta.filetype === "media") {
          callback(url)
        }
      },
    },
  )
}
</script>