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

<template>
  <div v-if="item">
    <div class="flex gap-4 items-center">
      <h2
        class="mr-auto"
        v-text="item.title"
      />

      <BaseButton
        :disabled="isLoading"
        icon="reply"
        only-icon
        type="black"
        @click="reply"
      />

      <BaseButton
        :disabled="isLoading"
        icon="reply-all"
        only-icon
        type="black"
        @click="replyAll"
      />

      <BaseButton
        icon="calendar-plus"
        only-icon
        type="black"
        @click="createEvent"
      />

      <BaseButton
        icon="delete"
        only-icon
        type="black"
        @click="confirmDelete"
      />
    </div>

    <hr />

    <div class="flex justify-end gap-2">
      <div v-if="myReceiver">
        <BaseChip
          v-for="tag in myReceiver.tags"
          :key="tag['@id']"
          :value="tag"
          is-removable
          label-field="tag"
          @remove="onRemoveTagFromMessage(tag)"
        />
      </div>

      <BaseAutocomplete
        v-if="item.sender && item.sender['@id'] !== securityStore.user['@id']"
        id="search-tags"
        v-model="foundTag"
        :label="t('Tags')"
        :search="onSearchTags"
        option-label="tag"
        @item-select="onItemSelect"
      />
    </div>

    <div class="field space-x-4">
      <span>{{ t("From") }}</span>
      <MessageCommunicationParty
        v-if="item.sender"
        :username="item.sender.username"
        :full-name="item.sender.fullName"
        :profile-image-url="item.sender.illustrationUrl"
      />
      <span
        v-else
        v-t="'No sender'"
      />
    </div>

    <div class="field space-x-4">
      <span>{{ t("To") }}</span>
      <MessageCommunicationParty
        v-for="receiver in item.receiversTo"
        :key="receiver.receiver.id"
        :username="receiver.receiver.username"
        :full-name="receiver.receiver.fullName"
        :profile-image-url="receiver.receiver.illustrationUrl"
      />
    </div>

    <div class="field space-x-4">
      <span>{{ t("Cc") }}</span>
      <MessageCommunicationParty
        v-for="receiver in item.receiversCc"
        :key="receiver.receiver.id"
        :username="receiver.receiver.username"
        :full-name="receiver.receiver.fullName"
        :profile-image-url="receiver.receiver.illustrationUrl"
      />
    </div>

    <hr />

    <p v-text="relativeDatetime(item.sendDate)" />

    <div v-html="item.content" />

    <template v-if="item.attachments && item.attachments.length > 0">
      <BaseCard>
        <template #header>
          <p class="m-3">{{ item.attachments.length }} {{ $t("Attachments") }}</p>
        </template>

        <div
          class="q-gutter-y-sm q-gutter-x-sm row"
        >
          <div
            v-for="(attachment, index) in item.attachments"
            :key="index"
          >
            <div v-if="attachment.resourceNode.resourceFile.audio">
              <audio controls>
                <source :src="attachment.downloadUrl" />
              </audio>
            </div>

            <BaseButton
              v-else
              :href="attachment.downloadUrl"
              icon="attachment"
              type="primary"
            >
              {{ attachment.resourceNode.resourceFile.originalName }}
            </BaseButton>
          </div>
        </div>
      </BaseCard>
    </template>
    <Loading :visible="isLoading" />
  </div>
</template>

<script setup>
import { useStore } from "vuex"
import Loading from "../../components/Loading.vue"
import { computed, ref } from "vue"
import isEmpty from "lodash/isEmpty"
import { useRoute, useRouter } from "vue-router"
import BaseButton from "../../components/basecomponents/BaseButton.vue"
import { useConfirm } from "primevue/useconfirm"
import { useI18n } from "vue-i18n"
import BaseChip from "../../components/basecomponents/BaseChip.vue"
import BaseAutocomplete from "../../components/basecomponents/BaseAutocomplete.vue"
import { useFormatDate } from "../../composables/formatDate"
import { useMessageRelUserStore } from "../../store/messageRelUserStore"
import messageTagService from "../../services/messageTagService"
import { useSecurityStore } from "../../store/securityStore"
import BaseCard from "../../components/basecomponents/BaseCard.vue"
import MessageCommunicationParty from "./MessageCommunicationParty.vue"

const confirm = useConfirm()
const { t } = useI18n()

const isLoadingSelect = ref(false)
const store = useStore()
const securityStore = useSecurityStore()
//const find = store.getters["message/find"];
const route = useRoute()
const router = useRouter()
const messageRelUserStore = useMessageRelUserStore()

const { relativeDatetime } = useFormatDate()

let id = route.params.id
if (isEmpty(id)) {
  id = route.query.id
}

const isLoading = computed(() => store.state.message.isLoading)

const item = ref(null)
const myReceiver = ref(null)

store.dispatch("message/load", id).then((responseItem) => {
  item.value = responseItem

  myReceiver.value = [...responseItem.receiversTo, ...responseItem.receiversCc].find(
    ({ receiver }) => receiver["@id"] === securityStore.user["@id"],
  )

  // Change to read.
  if (myReceiver.value && false === myReceiver.value.read) {
    store
      .dispatch("messagereluser/update", {
        "@id": myReceiver.value["@id"],
        read: true,
      })
      .then(() => messageRelUserStore.findUnreadCount())
  }
})

function confirmDelete() {
  confirm.require({
    header: t("Confirmation"),
    message: t(`Are you sure you want to delete "${item.value.title}"?`),
    accept: async () => {
      await store.dispatch("message/del", item)

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

function getTagIndex(tag) {
  return myReceiver.value.tags.findIndex((receiverTag) => receiverTag["@id"] === tag["@id"])
}

function mapTagsToIds() {
  return myReceiver.value.tags.map((receiverTag) => receiverTag["@id"])
}

async function onRemoveTagFromMessage(tag) {
  const index = getTagIndex(tag)

  if (index < 0) {
    return
  }

  myReceiver.value.tags.splice(index, 1)

  const newTagIds = mapTagsToIds()

  await store.dispatch("messagereluser/update", {
    "@id": myReceiver.value["@id"],
    tags: newTagIds,
  })
}

function reply() {
  router.push({ name: "MessageReply", query: { ...route.query } })
}

function replyAll() {
  router.push({ name: `MessageReply`, query: { ...route.query, all: 1 } })
}

function createEvent() {
  let params = route.query
  router.push({ name: "CCalendarEventCreate", query: params })
}

const foundTag = ref("")

async function onSearchTags(query) {
  isLoadingSelect.value = true

  const { items } = await messageTagService.searchUserTags(securityStore.user["@id"], query)

  isLoadingSelect.value = false

  return items
}

async function onItemSelect({ value }) {
  const newTag = computed(() => store.state.messagetag.created)

  if (!value["@id"]) {
    try {
      await store.dispatch("messagetag/create", {
        user: securityStore.user["@id"],
        tag: value.tag,
      })
    } catch (e) {
      return
    }
  } else {
    const existingIndex = getTagIndex(value["@id"]) >= 0

    if (existingIndex) {
      return
    }
  }

  foundTag.value = ""

  if (myReceiver.value && newTag.value) {
    myReceiver.value.tags.push(newTag.value)

    const newTagIds = mapTagsToIds()

    await store.dispatch("messagereluser/update", {
      "@id": myReceiver.value["@id"],
      tags: newTagIds,
    })
  }
}
</script>