KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[Enhancement] Add ApiClient, refactor CannedResponse (#183)

Browse source
This commit is contained in:
Pranav Raj S 2019-10-27 10:48:26 +05:30 • committed by GitHub
parent 50fc06681c
commit 6c60b60240
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 311 additions and 322 deletions
Download patch file Download diff file Expand all files Collapse all files

128
app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
View file

@ -1,49 +1,71 @@
<template>
<div class="reply-box">
<div class="reply-box__top" :class="{ 'is-private': private }">
<div class="reply-box__top" :class="{ 'is-private': isPrivate }">
<canned-response
v-if="showCannedModal"
v-on-clickaway="hideCannedResponse"
data-dropdown-menu
:on-keyenter="replaceText"
:on-click="replaceText"
v-if="showCannedModal"
/>
<emoji-input v-on-clickaway="hideEmojiPicker" :on-click="emojiOnClick" v-if="showEmojiPicker"/>
<emoji-input
v-if="showEmojiPicker"
v-on-clickaway="hideEmojiPicker"
:on-click="emojiOnClick"
/>
<textarea
rows="1"
ref="messageInput"
v-model="message"
rows="1"
class="input"
type="text"
:placeholder="$t(messagePlaceHolder())"
@click="onClick()"
@blur="onBlur()"
v-bind:placeholder="$t(messagePlaceHolder())"
ref="messageInput"
/>
<i class="icon ion-happy-outline" :class="{ active: showEmojiPicker}" @click="toggleEmojiPicker()"></i>
<i
class="icon ion-happy-outline"
:class="{ active: showEmojiPicker }"
@click="toggleEmojiPicker()"
></i>
</div>
<div class="reply-box__bottom" >
<div class="reply-box__bottom">
<ul class="tabs">
<li class="tabs-title" v-bind:class="{ 'is-active': !private }">
<a href="#" @click="makeReply" >Reply</a>
<li class="tabs-title" :class="{ 'is-active': !isPrivate }">
<a href="#" @click="makeReply">Reply</a>
</li>
<li class="tabs-title is-private" v-bind:class="{ 'is-active': private }">
<li class="tabs-title is-private" :class="{ 'is-active': isPrivate }">
<a href="#" @click="makePrivate">Private Note</a>
</li>
<li class="tabs-title message-length" v-if="message.length">
<a :class="{ 'message-error': message.length > 620 }">{{ message.length }} / 640</a>
<li v-if="message.length" class="tabs-title message-length">
<a :class="{ 'message-error': message.length > 620 }">
{{ message.length }} / 640
</a>
</li>
</ul>
<button
@click="sendMessage"
type="button"
class="button send-button"
:disabled="disableButton()"
v-bind:class="{ 'disabled': message.length === 0 || message.length > 640,
'warning': private }"
:class="{
disabled: message.length === 0 || message.length > 640,
warning: isPrivate,
}"
@click="sendMessage"
>
{{ private ? $t('CONVERSATION.REPLYBOX.CREATE') : $t('CONVERSATION.REPLYBOX.SEND') }}
<i class="icon" :class="{ 'ion-android-send': !private, 'ion-android-lock': private }"></i>
{{
isPrivate
? $t('CONVERSATION.REPLYBOX.CREATE')
: $t('CONVERSATION.REPLYBOX.SEND')
}}
<i
class="icon"
:class="{
'ion-android-send': !isPrivate,
'ion-android-lock': isPrivate,
}"
></i>
</button>
</div>
</div>
@ -76,21 +98,6 @@ export default {
EmojiInput,
CannedResponse,
},
mounted() {
/* eslint-disable no-confusing-arrow */
document.addEventListener('keydown', (e) => {
if (this.isEscape(e)) {
this.hideEmojiPicker();
this.hideCannedResponse();
}
if (this.isEnter(e)) {
if (!e.shiftKey) {
e.preventDefault();
this.sendMessage();
}
}
});
},
watch: {
message(val) {
if (this.private) {
@ -103,34 +110,51 @@ export default {
this.showCannedModal = true;
if (val.length > 1) {
const searchKey = val.substr(1, val.length);
this.$store.dispatch('searchCannedResponse', {
this.$store.dispatch('getCannedResponse', {
searchKey,
});
} else {
this.$store.dispatch('fetchCannedResponse');
this.$store.dispatch('getCannedResponse');
}
} else {
this.showCannedModal = false;
}
},
},
mounted() {
/* eslint-disable no-confusing-arrow */
document.addEventListener('keydown', e => {
if (this.isEscape(e)) {
this.hideEmojiPicker();
this.hideCannedResponse();
}
if (this.isEnter(e)) {
if (!e.shiftKey) {
e.preventDefault();
this.sendMessage();
}
}
});
},
methods: {
isEnter(e) {
return e.keyCode === 13;
},
isEscape(e) {
return e.keyCode === 27; // ESCAPE
return e.keyCode === 27; // ESCAPE
},
sendMessage() {
const messageHasOnlyNewLines = !this.message.replace(/\n/g, '').length;
if (messageHasOnlyNewLines) {
return;
}
const messageAction = this.private ? 'addPrivateNote' : 'sendMessage';
const messageAction = this.isPrivate ? 'addPrivateNote' : 'sendMessage';
if (this.message.length !== 0 && !this.showCannedModal) {
this.$store.dispatch(messageAction, [this.currentChat.id, this.message]).then(() => {
this.$emit('scrollToMessage');
});
this.$store
.dispatch(messageAction, [this.currentChat.id, this.message])
.then(() => {
this.$emit('scrollToMessage');
});
this.clearMessage();
this.hideEmojiPicker();
}
@ -141,15 +165,17 @@ export default {
}, 200);
},
makePrivate() {
this.private = true;
this.isPrivate = true;
this.$refs.messageInput.focus();
},
makeReply() {
this.private = false;
this.isPrivate = false;
this.$refs.messageInput.focus();
},
emojiOnClick(emoji) {
this.message = emojione.shortnameToUnicode(`${this.message}${emoji.shortname} `);
this.message = emojione.shortnameToUnicode(
`${this.message}${emoji.shortname} `
);
},
clearMessage() {
this.message = '';
@ -189,11 +215,17 @@ export default {
},
disableButton() {
const messageHasOnlyNewLines = !this.message.replace(/\n/g, '').length;
return this.message.length === 0 || this.message.length > 640 || messageHasOnlyNewLines;
return (
this.message.length === 0 ||
this.message.length > 640 ||
messageHasOnlyNewLines
);
},
messagePlaceHolder() {
const placeHolder = this.private ? 'CONVERSATION.FOOTER.PRIVATE_MSG_INPUT' : 'CONVERSATION.FOOTER.MSG_INPUT';
const placeHolder = this.isPrivate
? 'CONVERSATION.FOOTER.PRIVATE_MSG_INPUT'
: 'CONVERSATION.FOOTER.MSG_INPUT';
return placeHolder;
},
},
@ -201,7 +233,7 @@ export default {
</script>
<style lang="scss">
.send-button {
margin-bottom: 0;
}
.send-button {
margin-bottom: 0;
}
</style>