|
|
|
@ -1,95 +1,95 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<!-- :handle-submit="onSendMessageForm"--> |
|
|
|
<!-- :handle-submit="onSendMessageForm"--> |
|
|
|
<Toolbar |
|
|
|
<Toolbar |
|
|
|
:handle-send="onSendMessageForm" |
|
|
|
:handle-send="onSendMessageForm" |
|
|
|
/> |
|
|
|
/> |
|
|
|
<MessageForm |
|
|
|
<MessageForm |
|
|
|
ref="createForm" |
|
|
|
ref="createForm" |
|
|
|
:values="item" |
|
|
|
:errors="violations" |
|
|
|
:errors="violations" |
|
|
|
:values="item" |
|
|
|
> |
|
|
|
> |
|
|
|
|
|
|
|
|
|
|
|
<!-- @input="v$.item.receiversTo.$touch()"--> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<VueMultiselect |
|
|
|
<!-- @input="v$.item.receiversTo.$touch()"--> |
|
|
|
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" |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/> |
|
|
|
<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 |
|
|
|
<VueMultiselect |
|
|
|
id="cc" |
|
|
|
id="cc" |
|
|
|
placeholder="Cc" |
|
|
|
v-model="item.receiversCc" |
|
|
|
v-model="item.receiversCc" |
|
|
|
:allow-empty="true" |
|
|
|
:loading="isLoadingSelect" |
|
|
|
:internal-search="false" |
|
|
|
:options="usersCc" |
|
|
|
:loading="isLoadingSelect" |
|
|
|
:multiple="true" |
|
|
|
:multiple="true" |
|
|
|
:searchable="true" |
|
|
|
:options="usersCc" |
|
|
|
:internal-search="false" |
|
|
|
:searchable="true" |
|
|
|
@search-change="asyncFindCc" |
|
|
|
label="username" |
|
|
|
limit-text="3" |
|
|
|
limit="3" |
|
|
|
limit="3" |
|
|
|
limit-text="3" |
|
|
|
label="username" |
|
|
|
placeholder="Cc" |
|
|
|
track-by="id" |
|
|
|
track-by="id" |
|
|
|
:allow-empty="true" |
|
|
|
@search-change="asyncFindCc" |
|
|
|
/> |
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
<!-- @filter-abort="abortFilterFn"--> |
|
|
|
<!-- @filter-abort="abortFilterFn"--> |
|
|
|
<!-- <q-select--> |
|
|
|
<!-- <q-select--> |
|
|
|
<!-- filled--> |
|
|
|
<!-- filled--> |
|
|
|
<!-- v-model="item.receivers"--> |
|
|
|
<!-- v-model="item.receivers"--> |
|
|
|
<!-- use-input--> |
|
|
|
<!-- use-input--> |
|
|
|
<!-- use-chips--> |
|
|
|
<!-- use-chips--> |
|
|
|
<!-- :options="users"--> |
|
|
|
<!-- :options="users"--> |
|
|
|
<!-- input-debounce="0"--> |
|
|
|
<!-- input-debounce="0"--> |
|
|
|
<!-- label="Lazy filter"--> |
|
|
|
<!-- label="Lazy filter"--> |
|
|
|
<!-- @filter="asyncFind"--> |
|
|
|
<!-- @filter="asyncFind"--> |
|
|
|
<!-- style="width: 250px"--> |
|
|
|
<!-- style="width: 250px"--> |
|
|
|
<!-- hint="With use-chips"--> |
|
|
|
<!-- hint="With use-chips"--> |
|
|
|
<!-- :error-message="receiversErrors"--> |
|
|
|
<!-- :error-message="receiversErrors"--> |
|
|
|
<!-- />--> |
|
|
|
<!-- />--> |
|
|
|
<TinyEditor |
|
|
|
<TinyEditor |
|
|
|
v-model="item.content" |
|
|
|
v-model="item.content" |
|
|
|
required |
|
|
|
:init="{ |
|
|
|
:init="{ |
|
|
|
skin_url: '/build/libs/tinymce/skins/ui/oxide', |
|
|
|
skin_url: '/build/libs/tinymce/skins/ui/oxide', |
|
|
|
content_css: '/build/libs/tinymce/skins/content/default/content.css', |
|
|
|
content_css: '/build/libs/tinymce/skins/content/default/content.css', |
|
|
|
branding: false, |
|
|
|
branding: false, |
|
|
|
relative_urls: false, |
|
|
|
relative_urls: false, |
|
|
|
height: 500, |
|
|
|
height: 500, |
|
|
|
toolbar_mode: 'sliding', |
|
|
|
toolbar_mode: 'sliding', |
|
|
|
file_picker_callback : browser, |
|
|
|
file_picker_callback : browser, |
|
|
|
autosave_ask_before_unload: true, |
|
|
|
autosave_ask_before_unload: true, |
|
|
|
plugins: [ |
|
|
|
plugins: [ |
|
|
|
'advlist autolink lists link image charmap print preview anchor', |
|
|
|
'advlist autolink lists link image charmap print preview anchor', |
|
|
|
'searchreplace visualblocks code fullscreen', |
|
|
|
'searchreplace visualblocks code fullscreen', |
|
|
|
'insertdatetime media table paste wordcount emoticons' |
|
|
|
'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', |
|
|
|
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> |
|
|
|
</MessageForm> |
|
|
|
<Loading :visible="isLoading" /> |
|
|
|
<Loading |
|
|
|
|
|
|
|
:visible="isLoading" |
|
|
|
|
|
|
|
/> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<style src="vue-multiselect/dist/vue-multiselect.css"></style> |
|
|
|
<style src="vue-multiselect/dist/vue-multiselect.css"></style> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
<script> |
|
|
|
import {mapActions, mapGetters, useStore} from 'vuex'; |
|
|
|
import {mapActions, mapGetters} from 'vuex'; |
|
|
|
import { createHelpers } from 'vuex-map-fields'; |
|
|
|
import {createHelpers} from 'vuex-map-fields'; |
|
|
|
import MessageForm from '../../components/message/Form.vue'; |
|
|
|
import MessageForm from '../../components/message/Form.vue'; |
|
|
|
import Loading from '../../components/Loading.vue'; |
|
|
|
import Loading from '../../components/Loading.vue'; |
|
|
|
import Toolbar from '../../components/Toolbar.vue'; |
|
|
|
import Toolbar from '../../components/Toolbar.vue'; |
|
|
|
@ -99,9 +99,10 @@ import axios from "axios"; |
|
|
|
import {ENTRYPOINT} from "../../config/entrypoint"; |
|
|
|
import {ENTRYPOINT} from "../../config/entrypoint"; |
|
|
|
import useVuelidate from "@vuelidate/core"; |
|
|
|
import useVuelidate from "@vuelidate/core"; |
|
|
|
import VueMultiselect from 'vue-multiselect' |
|
|
|
import VueMultiselect from 'vue-multiselect' |
|
|
|
|
|
|
|
|
|
|
|
const servicePrefix = 'Message'; |
|
|
|
const servicePrefix = 'Message'; |
|
|
|
|
|
|
|
|
|
|
|
const { mapFields } = createHelpers({ |
|
|
|
const {mapFields} = createHelpers({ |
|
|
|
getterType: 'message/getField', |
|
|
|
getterType: 'message/getField', |
|
|
|
mutationType: 'message/updateField' |
|
|
|
mutationType: 'message/updateField' |
|
|
|
}); |
|
|
|
}); |
|
|
|
@ -116,12 +117,12 @@ export default { |
|
|
|
MessageForm, |
|
|
|
MessageForm, |
|
|
|
VueMultiselect |
|
|
|
VueMultiselect |
|
|
|
}, |
|
|
|
}, |
|
|
|
setup () { |
|
|
|
setup() { |
|
|
|
const usersTo = ref([]); |
|
|
|
const usersTo = ref([]); |
|
|
|
const usersCc = ref([]); |
|
|
|
const usersCc = ref([]); |
|
|
|
const isLoadingSelect = ref(false); |
|
|
|
const isLoadingSelect = ref(false); |
|
|
|
|
|
|
|
|
|
|
|
function asyncFind (query) { |
|
|
|
function asyncFind(query) { |
|
|
|
if (query.toString().length < 3) { |
|
|
|
if (query.toString().length < 3) { |
|
|
|
throw new Error('error'); |
|
|
|
throw new Error('error'); |
|
|
|
} |
|
|
|
} |
|
|
|
@ -175,6 +176,17 @@ export default { |
|
|
|
}), |
|
|
|
}), |
|
|
|
}, |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
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']) |
|
|
|
...mapActions('message', ['create', 'reset']) |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
|