Skip to content

Commit

Permalink
[Enhancement] Add ApiClient, refactor CannedResponse (chatwoot#183)
Browse files Browse the repository at this point in the history
  • Loading branch information
pranavrajs authored Oct 27, 2019
1 parent 50fc066 commit 6c60b60
Show file tree
Hide file tree
Showing 10 changed files with 309 additions and 320 deletions.
31 changes: 31 additions & 0 deletions app/javascript/dashboard/api/ApiClient.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
/* global axios */

const API_VERSION = `/api/v1`;

class ApiClient {
constructor(url) {
this.url = `${API_VERSION}/${url}`;
}

get() {
return axios.get(this.url);
}

show(id) {
return axios.get(`${this.url}/${id}`);
}

create(data) {
return axios.post(this.url, data);
}

update(id, data) {
return axios.patch(`${this.url}/${id}`, data);
}

delete(id) {
return axios.delete(`${this.url}/${id}`);
}
}

export default ApiClient;
120 changes: 12 additions & 108 deletions app/javascript/dashboard/api/cannedResponse.js
Original file line number Diff line number Diff line change
@@ -1,112 +1,16 @@
/* eslint no-console: 0 */
/* global axios */
/* eslint no-undef: "error" */
/* eslint no-unused-expressions: ["error", { "allowShortCircuit": true }] */
import endPoints from './endPoints';

export default {
getAllCannedResponses() {
const urlData = endPoints('cannedResponse').get();
const fetchPromise = new Promise((resolve, reject) => {
axios
.get(urlData.url)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
},
import ApiClient from './ApiClient';

searchCannedResponse({ searchKey }) {
let urlData = endPoints('cannedResponse').get();
urlData = `${urlData.url}?search=${searchKey}`;
const fetchPromise = new Promise((resolve, reject) => {
axios
.get(urlData)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
},
class CannedResponse extends ApiClient {
constructor() {
super('canned_responses');
}

addCannedResponse(cannedResponseObj) {
const urlData = endPoints('cannedResponse').post();
const fetchPromise = new Promise((resolve, reject) => {
axios
.post(urlData.url, cannedResponseObj)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
},
editCannedResponse(cannedResponseObj) {
const urlData = endPoints('cannedResponse').put(cannedResponseObj.id);
const fetchPromise = new Promise((resolve, reject) => {
axios
.put(urlData.url, cannedResponseObj)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
},
deleteCannedResponse(responseId) {
const urlData = endPoints('cannedResponse').delete(responseId);
const fetchPromise = new Promise((resolve, reject) => {
axios
.delete(urlData.url)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
},
getLabels() {
const urlData = endPoints('fetchLabels');
const fetchPromise = new Promise((resolve, reject) => {
axios
.get(urlData.url)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
},
// Get Inbox related to the account
getInboxes() {
const urlData = endPoints('fetchInboxes');
const fetchPromise = new Promise((resolve, reject) => {
axios
.get(urlData.url)
.then(response => {
console.log('fetch inboxes success');
resolve(response);
})
.catch(error => {
console.log('fetch inboxes failure');
reject(Error(error));
});
});
return fetchPromise;
},
};
get({ searchKey }) {
const url = searchKey ? `${this.url}?search=${searchKey}` : this.url;
return axios.get(url);
}
}

export default new CannedResponse();
128 changes: 80 additions & 48 deletions app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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) {
Expand All @@ -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();
}
Expand All @@ -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 = '';
Expand Down Expand Up @@ -189,19 +215,25 @@ 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;
},
},
};
</script>

<style lang="scss">
.send-button {
margin-bottom: 0;
}
.send-button {
margin-bottom: 0;
}
</style>
Loading

0 comments on commit 6c60b60

Please sign in to comment.