Message: Fix reply view - refs BT#20992

assets/vue/router/message.js

@@ -18,7 +18,7 @@ export default {
     {
       name: 'MessageReply',
       path: 'reply',
-      component: () => import('../views/message/Reply.vue')
+      component: () => import('../views/message/MessageReply.vue')
     },
     /*{
       name: 'MessageUpdate',

assets/vue/views/message/MessageReply.vue

@@ -0,0 +1,194 @@
+<template>
+  <MessageForm
+    ref="createForm"
+    :errors="violations"
+    :values="item"
+  >
+    <div
+      v-if="item.originalSender"
+      class="field"
+    >
+      <span v-t="'To'" />
+      <BaseChip
+        :value="item.originalSender"
+        image-field="illustrationUrl"
+        label-field="username"
+      />
+    </div>
+
+    <div
+      v-if="item.receiversCc"
+      class="field"
+    >
+      <span v-t="'Cc'" />
+      <BaseChip
+        v-for="messageRelUser in item.receiversCc"
+        :key="messageRelUser['@id']"
+        :value="messageRelUser.receiver"
+        image-field="illustrationUrl"
+        label-field="username"
+      />
+    </div>
+
+    <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: [
+            'fullpage 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="onReplyMessageForm"
+    />
+  </MessageForm>
+  <Loading :visible="isLoading" />
+</template>
+
+<script setup>
+import { useStore } from "vuex"
+import { computed, onMounted, ref } from "vue"
+import MessageForm from "../../components/message/Form.vue"
+import Loading from "../../components/Loading.vue"
+import isEmpty from "lodash/isEmpty"
+import { useRoute, useRouter } from "vue-router"
+import BaseChip from "../../components/basecomponents/BaseChip.vue"
+import { MESSAGE_TYPE_INBOX } from "../../components/message/constants"
+import BaseButton from "../../components/basecomponents/BaseButton.vue"
+import { useI18n } from "vue-i18n"
+import { useSecurityStore } from "../../store/securityStore"
+import { useNotification } from "../../composables/notification"
+
+const item = ref({})
+const store = useStore()
+const securityStore = useSecurityStore();
+const route = useRoute()
+const router = useRouter()
+
+const { t } = useI18n()
+const notification = useNotification()
+
+let id = isEmpty(route.params.id) ? route.query.id : route.params.id
+
+let replyAll = "1" === route.query.all
+
+onMounted(async () => {
+  const currentUser = computed(() => store.getters["security/getUser"])
+  const response = await store.dispatch("message/load", id)
+
+  item.value = await response
+
+  delete item.value["@id"]
+  delete item.value["id"]
+  delete item.value["firstReceiver"]
+  //delete item.value['receivers'];
+  delete item.value["sendDate"]
+
+  item.value["originalSender"] = item.value["sender"]
+  // New sender.
+  item.value["sender"] = currentUser.value["@id"]
+
+  // Set new receivers, will be loaded by onSendMessageForm()
+  if (replyAll) {
+    item.value.receiversTo.forEach((user) => {
+      // Dont' add original sender.
+      if (item.value["originalSender"]["@id"] === user.receiver["@id"]) {
+        return
+      }
+      // Dont' add the current user.
+      if (currentUser.value["@id"] === user.receiver["@id"]) {
+        return
+      }
+      item.value.receiversCc.push(user)
+    })
+
+    // Check that the original sender is not already in the Cc.
+    item.value.receiversCc.forEach(function (user, index, obj) {
+      if (item.value["originalSender"]["@id"] === user.receiver["@id"]) {
+        obj.splice(index, 1)
+      }
+    })
+
+    /*item.value.receiversTo.forEach(function (user, index, obj) {
+      if (currentUser.value['@id'] === user.receiver['@id']) {
+        obj.splice(index, 1);
+      }
+    });*/
+  } else {
+    item.value["receivers"] = []
+    item.value["receiversTo"] = null
+    item.value["receiversCc"] = null
+    item.value["receivers"][0] = item.value["originalSender"]
+  }
+
+  /*console.log('-----------------------');
+  console.log(item.value.receiversCc);
+  if (item.value.receiversCc) {
+    item.value.receiversCc.forEach(user => {
+      console.log(user);
+      // Send to inbox
+      usersCc.value.push(user.receiver);
+    });
+  }*/
+
+  // Set reply content.
+  item.value.content = `<br /><blockquote>${item.value.content}</blockquote>`
+})
+
+const isLoading = computed(() => store.state.message.isLoading)
+const violations = computed(() => store.state.message.violations)
+
+const currentUser = computed(() => securityStore.user)
+
+const createForm = ref()
+
+const onReplyMessageForm = async () => {
+  let users = []
+  users.push({
+    receiver: createForm.value.v$.item.$model.originalSender["@id"],
+    receiverType: 1,
+  })
+  if (createForm.value.v$.item.$model.receiversCc) {
+    createForm.value.v$.item.$model.receiversCc.forEach((user) => {
+      // Send to inbox
+      users.push({ receiver: user.receiver["@id"], receiverType: 2 })
+    })
+  }
+  createForm.value.v$.item.$model.sender = "/api/users/" + currentUser.value.id
+  createForm.value.v$.item.$model.receiversTo = null
+  createForm.value.v$.item.$model.receiversCc = null
+  createForm.value.v$.item.$model.receivers = users
+  createForm.value.v$.item.$model.msgType = MESSAGE_TYPE_INBOX
+
+  try {
+    await store.dispatch("message/create", createForm.value.v$.item.$model)
+
+    notification.showSuccessNotification("Message sent");
+
+    await router.push({
+      name: "MessageList"
+    })
+  } catch (e) {
+    notification.showErrorNotification(e)
+  }
+}
+</script>

assets/vue/views/message/Reply.vue

@@ -1,179 +0,0 @@
-<template>
-  <!--        :handle-submit="onSendMessageForm"-->
-  <Toolbar :handle-send="onReplyMessageForm" />
-
-  <MessageForm
-    ref="createForm"
-    :errors="violations"
-    :values="item"
-  >
-    <div
-      v-if="item.originalSender"
-      class="field"
-    >
-      <span v-t="'To'" />
-      <BaseChip
-        :value="item.originalSender"
-        image-field="illustrationUrl"
-        label-field="username"
-      />
-    </div>
-
-    <div v-if="item.receiversCc">
-      Cc:
-      <BaseChip
-        v-for="messageRelUser in item.receiversCc"
-        :key="messageRelUser['@id']"
-        :value="messageRelUser.receiver"
-        image-field="illustrationUrl"
-        label-field="username"
-      />
-    </div>
-
-    <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: [
-          'fullpage 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>
-  <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 { computed, onMounted, ref } from "vue"
-import MessageForm from "../../components/message/Form.vue"
-import Loading from "../../components/Loading.vue"
-import Toolbar from "../../components/Toolbar.vue"
-import CreateMixin from "../../mixins/CreateMixin"
-import isEmpty from "lodash/isEmpty"
-import useVuelidate from "@vuelidate/core"
-import { useRoute, useRouter } from "vue-router"
-import BaseChip from "../../components/basecomponents/BaseChip.vue"
-
-const servicePrefix = "Message"
-
-const { mapFields } = createHelpers({
-  getterType: "message/getField",
-  mutationType: "message/updateField",
-})
-
-export default {
-  name: "MessageReply",
-  servicePrefix,
-  mixins: [CreateMixin],
-  components: {
-    BaseChip,
-    Loading,
-    Toolbar,
-    MessageForm,
-  },
-  setup() {
-    const usersCc = ref([])
-    const item = ref({})
-    const isLoadingSelect = ref(false)
-    const store = useStore()
-    const route = useRoute()
-    const router = useRouter()
-
-    let id = route.params.id
-    if (isEmpty(id)) {
-      id = route.query.id
-    }
-
-    let replyAll = "1" === route.query["all"]
-
-    onMounted(async () => {
-      const currentUser = computed(() => store.getters["security/getUser"])
-      const response = await store.dispatch("message/load", id)
-
-      item.value = await response
-
-      delete item.value["@id"]
-      delete item.value["id"]
-      delete item.value["firstReceiver"]
-      //delete item.value['receivers'];
-      delete item.value["sendDate"]
-
-      item.value["originalSender"] = item.value["sender"]
-      // New sender.
-      item.value["sender"] = currentUser.value["@id"]
-
-      // Set new receivers, will be loaded by onSendMessageForm()
-      if (replyAll) {
-        item.value.receiversTo.forEach((user) => {
-          // Dont' add original sender.
-          if (item.value["originalSender"]["@id"] === user.receiver["@id"]) {
-            return
-          }
-          // Dont' add the current user.
-          if (currentUser.value["@id"] === user.receiver["@id"]) {
-            return
-          }
-          item.value.receiversCc.push(user)
-        })
-
-        // Check that the original sender is not already in the Cc.
-        item.value.receiversCc.forEach(function (user, index, obj) {
-          if (item.value["originalSender"]["@id"] === user.receiver["@id"]) {
-            obj.splice(index, 1)
-          }
-        })
-
-        /*item.value.receiversTo.forEach(function (user, index, obj) {
-          if (currentUser.value['@id'] === user.receiver['@id']) {
-            obj.splice(index, 1);
-          }
-        });*/
-      } else {
-        item.value["receivers"] = []
-        item.value["receiversTo"] = null
-        item.value["receiversCc"] = null
-        item.value["receivers"][0] = item.value["originalSender"]
-      }
-
-      /*console.log('-----------------------');
-      console.log(item.value.receiversCc);
-      if (item.value.receiversCc) {
-        item.value.receiversCc.forEach(user => {
-          console.log(user);
-          // Send to inbox
-          usersCc.value.push(user.receiver);
-        });
-      }*/
-
-      // Set reply content.
-      item.value.content = `<br /><blockquote>${item.value.content}</blockquote>`
-    })
-
-    return { v$: useVuelidate(), isLoadingSelect, usersCc, item }
-  },
-  computed: {
-    ...mapFields(["error", "isLoading", "created", "violations"]),
-    ...mapGetters({
-      isAuthenticated: "security/isAuthenticated",
-      currentUser: "security/getUser",
-    }),
-  },
-  methods: {
-    ...mapActions("message", ["create", "reset"]),
-  },
-}
-</script>