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

[Refactor] Cleanup agent store and actions (#373)

Browse source 
* Cleanup agent store and actions

* Move set/create/update/destroy to helpers

* Update mutation specs

* Add specs for API helper

* Fix edit/delete action visibility

* Add actions specs

* Remove unused API helpers

* Remove duplicates

* Remove duplicates

* Fix duplicate
This commit is contained in:
Pranav Raj S 2019-12-21 22:54:35 +05:30 committed by Sojan Jose
parent a92e3817f8
commit 2ce7438c79
26 changed files with 613 additions and 576 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
app/javascript/dashboard/api/account.js
View file

@ -1,142 +1,32 @@
/* eslint no-console: 0 */
/* global axios */
/* eslint no-undef: "error" */
/* eslint no-unused-expressions: ["error", { "allowShortCircuit": true }] */
import endPoints from './endPoints';
export default {
getAgents() {
const urlData = endPoints('fetchAgents');
const fetchPromise = new Promise((resolve, reject) => {
axios
.get(urlData.url)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
},
addAgent(agentInfo) {
const urlData = endPoints('addAgent');
const fetchPromise = new Promise((resolve, reject) => {
axios
.post(urlData.url, agentInfo)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
},
editAgent(agentInfo) {
const urlData = endPoints('editAgent')(agentInfo.id);
const fetchPromise = new Promise((resolve, reject) => {
axios
.put(urlData.url, agentInfo)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
},
deleteAgent(agentId) {
const urlData = endPoints('deleteAgent')(agentId);
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;
return axios.get(urlData.url);
},
// Get Inbox related to the account
getInboxes() {
const urlData = endPoints('fetchInboxes');
const fetchPromise = new Promise((resolve, reject) => {
axios
.get(urlData.url)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
return axios.get(urlData.url);
},
deleteInbox(id) {
const urlData = endPoints('inbox').delete(id);
const fetchPromise = new Promise((resolve, reject) => {
axios
.delete(urlData.url)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
return axios.delete(urlData.url);
},
listInboxAgents(id) {
const urlData = endPoints('inbox').agents.get(id);
const fetchPromise = new Promise((resolve, reject) => {
axios
.get(urlData.url)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
return axios.get(urlData.url);
},
updateInboxAgents(inboxId, agentList) {
const urlData = endPoints('inbox').agents.post();
const fetchPromise = new Promise((resolve, reject) => {
axios
.post(urlData.url, {
return axios.post(urlData.url, {
user_ids: agentList,
inbox_id: inboxId,
})
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
},
};

9
app/javascript/dashboard/api/agents.js Normal file
View file

@ -0,0 +1,9 @@
import ApiClient from './ApiClient';
class Agents extends ApiClient {
constructor() {
super('agents');
}
}
export default new Agents();

60
app/javascript/dashboard/api/auth.js
View file

@ -9,12 +9,7 @@ import Cookies from 'js-cookie';
import endPoints from './endPoints';
import { frontendURL } from '../helper/URLHelper';
export default {
login(creds) {
return new Promise((resolve, reject) => {
axios
.post('auth/sign_in', creds)
.then(response => {
const setAuthCredentials = response => {
const expiryDate = moment.unix(response.headers.expiry);
Cookies.set('auth_data', response.headers, {
expires: expiryDate.diff(moment(), 'days'),
@ -22,6 +17,21 @@ export default {
Cookies.set('user', response.data.data, {
expires: expiryDate.diff(moment(), 'days'),
});
};
const clearCookiesOnLogout = () => {
Cookies.remove('auth_data');
Cookies.remove('user');
window.location = frontendURL('login');
};
export default {
login(creds) {
return new Promise((resolve, reject) => {
axios
.post('auth/sign_in', creds)
.then(response => {
setAuthCredentials(response);
resolve();
})
.catch(error => {
@ -39,13 +49,7 @@ export default {
email: creds.email,
})
.then(response => {
const expiryDate = moment.unix(response.headers.expiry);
Cookies.set('auth_data', response.headers, {
expires: expiryDate.diff(moment(), 'days'),
});
Cookies.set('user', response.data.data, {
expires: expiryDate.diff(moment(), 'days'),
});
setAuthCredentials(response);
resolve(response);
})
.catch(error => {
@ -64,9 +68,7 @@ export default {
})
.catch(error => {
if (error.response.status === 401) {
Cookies.remove('auth_data');
Cookies.remove('user');
window.location = frontendURL('login');
clearCookiesOnLogout();
}
reject(error);
});
@ -79,9 +81,7 @@ export default {
axios
.delete(urlData.url)
.then(response => {
Cookies.remove('auth_data');
Cookies.remove('user');
window.location = frontendURL('login');
clearCookiesOnLogout();
resolve(response);
})
.catch(error => {
@ -122,17 +122,8 @@ export default {
},
verifyPasswordToken({ confirmationToken }) {
return new Promise((resolve, reject) => {
axios
.post('auth/confirmation', {
return axios.post('auth/confirmation', {
confirmation_token: confirmationToken,
})
.then(response => {
resolve(response);
})
.catch(error => {
reject(error.response);
});
});
},
@ -162,15 +153,6 @@ export default {
resetPassword({ email }) {
const urlData = endPoints('resetPassword');
return new Promise((resolve, reject) => {
axios
.post(urlData.url, { email })
.then(response => {
resolve(response);
})
.catch(error => {
reject(error.response);
});
});
return axios.post(urlData.url, { email });
},
};

36
app/javascript/dashboard/api/channels.js
View file

@ -8,49 +8,19 @@ export default {
// Get Inbox related to the account
createChannel(channel, channelParams) {
const urlData = endPoints('createChannel')(channel, channelParams);
const fetchPromise = new Promise((resolve, reject) => {
axios
.post(urlData.url, urlData.params)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
return axios.post(urlData.url, urlData.params);
},
addAgentsToChannel(inboxId, agentsId) {
const urlData = endPoints('addAgentsToChannel');
urlData.params.inbox_id = inboxId;
urlData.params.user_ids = agentsId;
const fetchPromise = new Promise((resolve, reject) => {
axios
.post(urlData.url, urlData.params)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
return axios.post(urlData.url, urlData.params);
},
fetchFacebookPages(token) {
const urlData = endPoints('fetchFacebookPages');
urlData.params.omniauth_token = token;
const fetchPromise = new Promise((resolve, reject) => {
axios
.post(urlData.url, urlData.params)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
return axios.post(urlData.url, urlData.params);
},
};

16
app/javascript/dashboard/api/endPoints.js
View file

@ -32,22 +32,6 @@ const endPoints = {
url: 'api/v1/inboxes.json',
},
fetchAgents: {
url: 'api/v1/agents.json',
},
addAgent: {
url: 'api/v1/agents.json',
},
editAgent(id) {
return { url: `api/v1/agents/${id}` };
},
deleteAgent({ id }) {
return { url: `api/v1/agents/${id}` };
},
createChannel(channel, channelParams) {
return {
url: `api/v1/callbacks/register_${channel}_page.json`,

26
app/javascript/dashboard/api/reports.js
View file

@ -4,31 +4,11 @@ import endPoints from './endPoints';
export default {
getAccountReports(metric, from, to) {
const urlData = endPoints('reports').account(metric, from, to);
const fetchPromise = new Promise((resolve, reject) => {
axios
.get(urlData.url)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
const { url } = endPoints('reports').account(metric, from, to);
return axios.get(url);
},
getAccountSummary(accountId, from, to) {
const urlData = endPoints('reports').accountSummary(accountId, from, to);
const fetchPromise = new Promise((resolve, reject) => {
axios
.get(urlData.url)
.then(response => {
resolve(response);
})
.catch(error => {
reject(Error(error));
});
});
return fetchPromise;
return axios.get(urlData.url);
},
};

13
app/javascript/dashboard/api/specs/agents.spec.js Normal file
View file

@ -0,0 +1,13 @@
import agents from '../agents';
import ApiClient from '../ApiClient';
describe('#AgentAPI', () => {
it('creates correct instance', () => {
expect(agents).toBeInstanceOf(ApiClient);
expect(agents).toHaveProperty('get');
expect(agents).toHaveProperty('show');
expect(agents).toHaveProperty('create');
expect(agents).toHaveProperty('update');
expect(agents).toHaveProperty('delete');
});
});

2
app/javascript/dashboard/components/ChatList.vue
View file

@ -71,7 +71,7 @@ export default {
this.$store.dispatch('emptyAllConversations');
this.fetchData();
this.$store.dispatch('fetchAgents');
this.$store.dispatch('agents/get');
},
computed: {
...mapGetters({

2
app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue
View file

@ -76,7 +76,7 @@ export default {
computed: {
...mapGetters({
agents: 'getVerifiedAgents',
agents: 'agents/getVerifiedAgents',
currentChat: 'getSelectedChat',
}),
agentList() {

88
app/javascript/dashboard/routes/dashboard/settings/agents/AddAgent.vue
View file

@ -1,6 +1,5 @@
<template>
<woot-modal :show.sync="show" :on-close="onClose">
<div class="column content-box">
<woot-modal-header
:header-image="headerImage"
@ -8,15 +7,20 @@
:header-content="$t('AGENT_MGMT.ADD.DESC')"
/>
<form class="row" v-on:submit.prevent="addAgent()">
<form class="row" @submit.prevent="addAgent()">
<div class="medium-12 columns">
<label :class="{ 'error': $v.agentName.$error }">
<label :class="{ error: $v.agentName.$error }">
{{ $t('AGENT_MGMT.ADD.FORM.NAME.LABEL') }}
<input type="text" v-model.trim="agentName" @input="$v.agentName.$touch" :placeholder="$t('AGENT_MGMT.ADD.FORM.NAME.PLACEHOLDER')">
<input
v-model.trim="agentName"
type="text"
:placeholder="$t('AGENT_MGMT.ADD.FORM.NAME.PLACEHOLDER')"
@input="$v.agentName.$touch"
/>
</label>
</div>
<div class="medium-12 columns">
<label :class="{ 'error': $v.agentType.$error }">
<label :class="{ error: $v.agentType.$error }">
{{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.LABEL') }}
<multiselect
v-model="agentType"
@ -24,27 +28,36 @@
:searchable="false"
label="label"
:placeholder="$t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.PLACEHOLDER')"
@select="setPageName"
:allow-empty="true"
:close-on-select="true"
@select="setPageName"
/>
<span class="message" v-if="$v.agentType.$error">
<span v-if="$v.agentType.$error" class="message">
{{ $t('AGENT_MGMT.ADD.FORM.AGENT_TYPE.ERROR') }}
</span>
</label>
</div>
<div class="medium-12 columns">
<label :class="{ 'error': $v.agentEmail.$error }">
<label :class="{ error: $v.agentEmail.$error }">
{{ $t('AGENT_MGMT.ADD.FORM.EMAIL.LABEL') }}
<input type="text" v-model.trim="agentEmail" @input="$v.agentEmail.$touch" :placeholder="$t('AGENT_MGMT.ADD.FORM.EMAIL.PLACEHOLDER')">
<input
v-model.trim="agentEmail"
type="text"
:placeholder="$t('AGENT_MGMT.ADD.FORM.EMAIL.PLACEHOLDER')"
@input="$v.agentEmail.$touch"
/>
</label>
</div>
<div class="modal-footer">
<div class="medium-12 columns">
<woot-submit-button
:disabled="$v.agentEmail.$invalid || $v.agentName.$invalid || addAgentsApi.showLoading"
:disabled="
$v.agentEmail.$invalid ||
$v.agentName.$invalid ||
uiFlags.isCreating
"
:button-text="$t('AGENT_MGMT.ADD.FORM.SUBMIT')"
:loading="addAgentsApi.showLoading"
:loading="uiFlags.isCreating"
/>
<a @click="onClose">Cancel</a>
</div>
@ -58,18 +71,12 @@
/* global bus */
/* eslint no-console: 0 */
import { required, minLength, email } from 'vuelidate/lib/validators';
import PageHeader from '../SettingsSubPageHeader';
import { mapGetters } from 'vuex';
const agentImg = require('assets/images/agent.svg');
export default {
props: [
'onClose',
],
components: {
PageHeader,
},
props: ['onClose'],
data() {
return {
agentName: '',
@ -77,11 +84,6 @@ export default {
agentType: this.$t('AGENT_MGMT.AGENT_TYPES')[1],
vertical: 'bottom',
horizontal: 'center',
addAgentsApi: {
showAlert: false,
showLoading: false,
message: '',
},
agentTypeList: this.$t('AGENT_MGMT.AGENT_TYPES'),
show: true,
};
@ -90,6 +92,9 @@ export default {
headerImage() {
return agentImg;
},
...mapGetters({
uiFlags: 'agents/getUIFlags',
}),
},
validations: {
agentName: {
@ -110,36 +115,21 @@ export default {
this.$v.agentType.$touch();
this.agentType = name;
},
showAlert() {
bus.$emit('newToastMessage', this.addAgentsApi.message);
showAlert(message) {
bus.$emit('newToastMessage', message);
},
resetForm() {
this.agentName = this.agentEmail = '';
this.$v.agentName.$reset();
this.$v.agentEmail.$reset();
},
addAgent() {
// Show loading on button
this.addAgentsApi.showLoading = true;
// Make API Calls
this.$store.dispatch('addAgent', {
async addAgent() {
try {
await this.$store.dispatch('agents/create', {
name: this.agentName,
email: this.agentEmail,
role: this.agentType.name.toLowerCase(),
})
.then(() => {
// Reset Form, Show success message
this.addAgentsApi.showLoading = false;
this.addAgentsApi.message = this.$t('AGENT_MGMT.ADD.API.SUCCESS_MESSAGE');
this.showAlert();
this.resetForm();
this.onClose();
})
.catch(() => {
this.addAgentsApi.showLoading = false;
this.addAgentsApi.message = this.$t('AGENT_MGMT.ADD.API.ERROR_MESSAGE');
this.showAlert();
});
this.showAlert(this.$t('AGENT_MGMT.ADD.API.SUCCESS_MESSAGE'));
this.onClose();
} catch (error) {
this.showAlert(this.$t('AGENT_MGMT.ADD.API.ERROR_MESSAGE'));
}
},
},
};

12
app/javascript/dashboard/routes/dashboard/settings/agents/DeleteAgent.vue
View file

@ -1,12 +1,6 @@
<template>
<modal
:show.sync="show"
:on-close="onClose"
>
<woot-modal-header
:header-title="title"
:header-content="message"
/>
<modal :show.sync="show" :on-close="onClose">
<woot-modal-header :header-title="title" :header-content="message" />
<div class="modal-footer delete-item">
<button class="button" @click="onClose">
{{ rejectText }}
@ -19,13 +13,11 @@
</template>
<script>
import PageHeader from '../SettingsSubPageHeader';
import Modal from '../../../../components/Modal';
export default {
components: {
Modal,
PageHeader,
},
props: {
show: Boolean,

82
app/javascript/dashboard/routes/dashboard/settings/agents/EditAgent.vue
View file

@ -21,9 +21,9 @@
<multiselect
v-model.trim="agentType"
:options="agentTypeList"
label="label"
:placeholder="$t('AGENT_MGMT.EDIT.FORM.AGENT_TYPE.PLACEHOLDER')"
:searchable="false"
label="label"
@select="setPageName"
/>
<span v-if="$v.agentType.$error" class="message">
@ -37,10 +37,10 @@
:disabled="
$v.agentType.$invalid ||
$v.agentName.$invalid ||
editAgentsApi.showLoading
uiFlags.isUpdating
"
:button-text="$t('AGENT_MGMT.EDIT.FORM.SUBMIT')"
:loading="editAgentsApi.showLoading"
:loading="uiFlags.isUpdating"
/>
<a @click="onClose">
{{ $t('AGENT_MGMT.EDIT.CANCEL_BUTTON_TEXT') }}
@ -62,7 +62,7 @@
/* global bus */
/* eslint no-console: 0 */
import { required, minLength } from 'vuelidate/lib/validators';
import { mapGetters } from 'vuex';
import WootSubmitButton from '../../../../components/buttons/FormSubmitButton';
import Modal from '../../../../components/Modal';
import Auth from '../../../../api/auth';
@ -81,11 +81,6 @@ export default {
},
data() {
return {
editAgentsApi: {
showAlert: false,
showLoading: false,
message: '',
},
agentTypeList: this.$t('AGENT_MGMT.AGENT_TYPES'),
agentName: this.name,
agentType: {
@ -111,66 +106,41 @@ export default {
pageTitle() {
return `${this.$t('AGENT_MGMT.EDIT.TITLE')} - ${this.name}`;
},
...mapGetters({
uiFlags: 'agents/getUIFlags',
}),
},
methods: {
setPageName({ name }) {
this.$v.agentType.$touch();
this.agentType = name;
},
showAlert() {
bus.$emit('newToastMessage', this.editAgentsApi.message);
showAlert(message) {
bus.$emit('newToastMessage', message);
},
resetForm() {
this.agentName = '';
this.agentType = '';
this.$v.agentName.$reset();
this.$v.agentType.$reset();
},
editAgent() {
// Show loading on button
this.editAgentsApi.showLoading = true;
// Make API Calls
this.$store
.dispatch('editAgent', {
async editAgent() {
try {
await this.$store.dispatch('agents/update', {
id: this.id,
name: this.agentName,
role: this.agentType.name.toLowerCase(),
})
.then(() => {
// Reset Form, Show success message
this.editAgentsApi.showLoading = false;
this.editAgentsApi.message = this.$t(
'AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'
);
this.showAlert();
this.resetForm();
setTimeout(() => {
});
this.showAlert(this.$t('AGENT_MGMT.EDIT.API.SUCCESS_MESSAGE'));
this.onClose();
}, 10);
})
.catch(() => {
this.editAgentsApi.showLoading = false;
this.editAgentsApi.message = this.$t(
'AGENT_MGMT.EDIT.API.ERROR_MESSAGE'
);
this.showAlert();
});
} catch (error) {
console.log(error);
this.showAlert(this.$t('AGENT_MGMT.EDIT.API.ERROR_MESSAGE'));
}
},
resetPassword() {
// Call resetPassword from Auth Service
Auth.resetPassword(this.agentCredentials)
.then(() => {
this.editAgentsApi.message = this.$t(
'AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_SUCCESS_MESSAGE'
async resetPassword() {
try {
await Auth.resetPassword(this.agentCredentials);
this.showAlert(
this.$t('AGENT_MGMT.EDIT.PASSWORD_RESET.ADMIN_SUCCESS_MESSAGE')
);
this.showAlert();
})
.catch(() => {
this.editAgentsApi.message = this.$t(
'AGENT_MGMT.EDIT.PASSWORD_RESET.ERROR_MESSAGE'
);
this.showAlert();
});
} catch (error) {
this.showAlert(this.$t('AGENT_MGMT.EDIT.PASSWORD_RESET.ERROR_MESSAGE'));
}
},
},
};

69
app/javascript/dashboard/routes/dashboard/settings/agents/Index.vue
View file

@ -13,17 +13,17 @@
<div class="row">
<div class="small-8 columns">
<woot-loading-state
v-if="fetchStatus"
v-if="uiFlags.isFetching"
:message="$t('AGENT_MGMT.LOADING')"
/>
<p v-if="!fetchStatus && !agentList.length">
<div v-else>
<p v-if="!agentList.length">
{{ $t('AGENT_MGMT.LIST.404') }}
</p>
<table v-if="!fetchStatus && agentList.length" class="woot-table">
<table v-else class="woot-table">
<tbody>
<tr v-for="(agent, index) in agentList" :key="agent.email">
<!-- Gravtar Image -->
<td>
<thumbnail
:src="gravatarUrl(agent.email)"
@ -49,28 +49,29 @@
</td>
<!-- Actions -->
<td>
<div v-if="showActions(agent)" class="button-wrapper">
<div @click="openEditPopup(agent)">
<div class="button-wrapper">
<woot-submit-button
v-if="showEditAction(agent)"
:button-text="$t('AGENT_MGMT.EDIT.BUTTON_TEXT')"
icon-class="ion-edit"
button-class="link hollow grey-btn"
@click="openEditPopup(agent)"
/>
</div>
<div @click="openDeletePopup(agent, index)">
<woot-submit-button
v-if="showDeleteAction(agent)"
:button-text="$t('AGENT_MGMT.DELETE.BUTTON_TEXT')"
:loading="loading[agent.id]"
icon-class="ion-close-circled"
button-class="link hollow grey-btn"
@click="openDeletePopup(agent, index)"
/>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="small-4 columns">
<span v-html="$t('AGENT_MGMT.SIDEBAR_TXT')"></span>
</div>
@ -79,7 +80,6 @@
<woot-modal :show.sync="showAddPopup" :on-close="hideAddPopup">
<add-agent :on-close="hideAddPopup" />
</woot-modal>
<!-- Edit Agent -->
<woot-modal :show.sync="showEditPopup" :on-close="hideEditPopup">
<edit-agent
@ -91,7 +91,6 @@
:on-close="hideEditPopup"
/>
</woot-modal>
<!-- Delete Agent -->
<delete-agent
:show.sync="showDeletePopup"
@ -102,8 +101,6 @@
:confirm-text="deleteConfirmText"
:reject-text="deleteRejectText"
/>
<!-- Loader Status -->
</div>
</template>
<script>
@ -138,8 +135,9 @@ export default {
},
computed: {
...mapGetters({
agentList: 'getAgents',
fetchStatus: 'getAgentFetchStatus',
agentList: 'agents/getAgents',
uiFlags: 'agents/getUIFlags',
currentUserId: 'getCurrentUserID',
}),
deleteConfirmText() {
return `${this.$t('AGENT_MGMT.DELETE.CONFIRM.YES')} ${
@ -158,20 +156,31 @@ export default {
},
},
mounted() {
this.$store.dispatch('fetchAgents');
this.$store.dispatch('agents/get');
},
methods: {
showActions(agent) {
showEditAction(agent) {
return this.currentUserId !== agent.id;
},
showDeleteAction(agent) {
if (this.currentUserId === agent.id) {
return false;
}
if (!agent.confirmed) {
return true;
}
if (agent.role === 'administrator') {
const adminList = this.agentList.filter(
item => item.role === 'administrator'
);
return adminList.length !== 1;
return this.verifiedAdministrators().length !== 1;
}
return true;
},
// List Functions
// Gravatar URL
verifiedAdministrators() {
return this.agentList.filter(
agent => agent.role === 'administrator' && agent.confirmed
);
},
gravatarUrl(email) {
const hash = md5(email);
return `${window.WootConstants.GRAVATAR_URL}${hash}?default=404`;
@ -206,17 +215,13 @@ export default {
this.closeDeletePopup();
this.deleteAgent(this.currentAgent.id);
},
deleteAgent(id) {
this.$store
.dispatch('deleteAgent', {
id,
})
.then(() => {
async deleteAgent(id) {
try {
await this.$store.dispatch('agents/delete', id);
this.showAlert(this.$t('AGENT_MGMT.DELETE.API.SUCCESS_MESSAGE'));
})
.catch(() => {
} catch (error) {
this.showAlert(this.$t('AGENT_MGMT.DELETE.API.ERROR_MESSAGE'));
});
}
},
// Show SnackBar
showAlert(message) {

4
app/javascript/dashboard/routes/dashboard/settings/inbox/AddAgents.vue
View file

@ -73,12 +73,12 @@ export default {
computed: {
...mapGetters({
agentList: 'getAgents',
agentList: 'agents/getAgents',
}),
},
mounted() {
this.$store.dispatch('fetchAgents');
this.$store.dispatch('agents/get');
},
methods: {

4
app/javascript/dashboard/routes/dashboard/settings/inbox/Settings.vue
View file

@ -88,7 +88,7 @@ export default {
},
computed: {
...mapGetters({
agentList: 'getAgents',
agentList: 'agents/getAgents',
}),
webWidgetScript() {
return createWebsiteWidgetScript(this.inbox.websiteToken);
@ -98,7 +98,7 @@ export default {
},
},
mounted() {
this.$store.dispatch('fetchAgents').then(() => {
this.$store.dispatch('agents/get').then(() => {
this.fetchAttachedAgents();
});
},

4
app/javascript/dashboard/store/getters.js
View file

@ -1,4 +0,0 @@
/* eslint arrow-body-style: ["error", "always"] */
// export default (state) => {
// };

27
app/javascript/dashboard/store/index.js
View file

@ -1,28 +1,25 @@
import Vue from 'vue';
import Vuex from 'vuex';
import * as getters from './getters';
import agents from './modules/agents';
import auth from './modules/auth';
import conversations from './modules/conversations';
import sideMenuItems from './modules/sidebar';
import AccountState from './modules/AccountState';
import Channel from './modules/channels';
import cannedResponse from './modules/cannedResponse';
import reports from './modules/reports';
import billing from './modules/billing';
import cannedResponse from './modules/cannedResponse';
import Channel from './modules/channels';
import conversations from './modules/conversations';
import reports from './modules/reports';
import sideMenuItems from './modules/sidebar';
Vue.use(Vuex);
export default new Vuex.Store({
getters,
modules: {
agents,
auth,
conversations,
sideMenuItems,
AccountState,
Channel,
cannedResponse,
reports,
billing,
cannedResponse,
Channel,
conversations,
reports,
sideMenuItems,
},
});

108
app/javascript/dashboard/store/modules/AccountState.js
View file

@ -1,108 +0,0 @@
/* eslint no-console: 0 */
/* eslint no-param-reassign: 0 */
/* eslint no-shadow: 0 */
import * as types from '../mutation-types';
import Account from '../../api/account';
import { setLoadingStatus, getLoadingStatus } from '../utils/api';
const state = {
agents: [],
fetchAPIloadingStatus: false,
};
const getters = {
getAgents(_state) {
return _state.agents;
},
getVerifiedAgents(_state) {
return _state.agents.filter(element => element.confirmed);
},
getAgentFetchStatus: getLoadingStatus,
};
const actions = {
fetchAgents({ commit }) {
commit(types.default.SET_AGENT_FETCHING_STATUS, true);
Account.getAgents()
.then(response => {
commit(types.default.SET_AGENT_FETCHING_STATUS, false);
commit(types.default.SET_AGENTS, response);
})
.catch();
},
addAgent({ commit }, agentInfo) {
return new Promise((resolve, reject) => {
Account.addAgent(agentInfo)
.then(response => {
commit(types.default.ADD_AGENT, response);
resolve();
})
.catch(response => {
reject(response);
});
});
},
editAgent({ commit }, agentInfo) {
return new Promise((resolve, reject) => {
Account.editAgent(agentInfo)
.then(response => {
commit(types.default.EDIT_AGENT, response, agentInfo.id);
resolve();
})
.catch(response => {
reject(response);
});
});
},
deleteAgent({ commit }, agentId) {
return new Promise((resolve, reject) => {
Account.deleteAgent(agentId)
.then(response => {
if (response.status === 200) {
commit(types.default.DELETE_AGENT, agentId);
}
resolve();
})
.catch(response => {
reject(response);
});
});
},
};
const mutations = {
// List
[types.default.SET_AGENT_FETCHING_STATUS]: setLoadingStatus,
// List
[types.default.SET_AGENTS](_state, response) {
_state.agents = response.data;
},
// Add Agent
[types.default.ADD_AGENT](_state, response) {
if (response.status === 200) {
_state.agents.push(response.data);
}
},
// Edit Agent
[types.default.EDIT_AGENT](_state, response) {
if (response.status === 200) {
_state.agents.forEach((element, index) => {
if (element.id === response.data.id) {
_state.agents[index] = response.data;
}
});
}
},
// Delete Agent
[types.default.DELETE_AGENT](_state, { id }) {
_state.agents = _state.agents.filter(agent => agent.id !== id);
},
};
export default {
state,
getters,
actions,
mutations,
};

99
app/javascript/dashboard/store/modules/agents.js Normal file
View file

@ -0,0 +1,99 @@
import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
import * as types from '../mutation-types';
import AgentAPI from '../../api/agents';
export const state = {
records: [],
uiFlags: {
isFetching: false,
isCreating: false,
isUpdating: false,
isDeleting: false,
},
};
export const getters = {
getAgents($state) {
return $state.records;
},
getVerifiedAgents($state) {
return $state.records.filter(record => record.confirmed);
},
getUIFlags($state) {
return $state.uiFlags;
},
};
export const actions = {
get: async ({ commit }) => {
commit(types.default.SET_AGENT_FETCHING_STATUS, true);
try {
const response = await AgentAPI.get();
commit(types.default.SET_AGENT_FETCHING_STATUS, false);
commit(types.default.SET_AGENTS, response.data);
} catch (error) {
commit(types.default.SET_AGENT_FETCHING_STATUS, false);
}
},
create: async ({ commit }, agentInfo) => {
commit(types.default.SET_AGENT_CREATING_STATUS, true);
try {
const response = await AgentAPI.create(agentInfo);
commit(types.default.ADD_AGENT, response.data);
commit(types.default.SET_AGENT_CREATING_STATUS, false);
} catch (error) {
commit(types.default.SET_AGENT_CREATING_STATUS, false);
throw new Error(error);
}
},
update: async ({ commit }, { id, ...agentParams }) => {
commit(types.default.SET_AGENT_UPDATING_STATUS, true);
try {
const response = await AgentAPI.update(id, agentParams);
commit(types.default.EDIT_AGENT, response.data);
commit(types.default.SET_AGENT_UPDATING_STATUS, false);
} catch (error) {
commit(types.default.SET_AGENT_UPDATING_STATUS, false);
throw new Error(error);
}
},
delete: async ({ commit }, agentId) => {
commit(types.default.SET_AGENT_DELETING_STATUS, true);
try {
await AgentAPI.delete(agentId);
commit(types.default.DELETE_AGENT, agentId);
commit(types.default.SET_AGENT_DELETING_STATUS, false);
} catch (error) {
commit(types.default.SET_AGENT_DELETING_STATUS, false);
throw new Error(error);
}
},
};
export const mutations = {
[types.default.SET_AGENT_FETCHING_STATUS]($state, status) {
$state.uiFlags.isFetching = status;
},
[types.default.SET_AGENT_CREATING_STATUS]($state, status) {
$state.uiFlags.isCreating = status;
},
[types.default.SET_AGENT_UPDATING_STATUS]($state, status) {
$state.uiFlags.isUpdating = status;
},
[types.default.SET_AGENT_DELETING_STATUS]($state, status) {
$state.uiFlags.isDeleting = status;
},
[types.default.SET_AGENTS]: MutationHelpers.set,
[types.default.ADD_AGENT]: MutationHelpers.create,
[types.default.EDIT_AGENT]: MutationHelpers.update,
[types.default.DELETE_AGENT]: MutationHelpers.destroy,
};
export default {
namespaced: true,
state,
getters,
actions,
mutations,
};

29
app/javascript/dashboard/store/modules/cannedResponse.js
View file

@ -1,6 +1,4 @@
/* eslint no-console: 0 */
/* eslint no-param-reassign: 0 */
/* eslint no-shadow: 0 */
import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
import * as types from '../mutation-types';
import CannedResponseAPI from '../../api/cannedResponse';
@ -87,27 +85,10 @@ const mutations = {
};
},
[types.default.SET_CANNED](_state, data) {
_state.records = data;
},
[types.default.ADD_CANNED](_state, data) {
_state.records.push(data);
},
[types.default.EDIT_CANNED](_state, data) {
_state.records.forEach((element, index) => {
if (element.id === data.id) {
_state.records[index] = data;
}
});
},
[types.default.DELETE_CANNED](_state, id) {
_state.records = _state.records.filter(
cannedResponse => cannedResponse.id !== id
);
},
[types.default.SET_CANNED]: MutationHelpers.set,
[types.default.ADD_CANNED]: MutationHelpers.create,
[types.default.EDIT_CANNED]: MutationHelpers.update,
[types.default.DELETE_CANNED]: MutationHelpers.destroy,
};
export default {

94
app/javascript/dashboard/store/modules/specs/agents/actions.spec.js Normal file
View file

@ -0,0 +1,94 @@
import axios from 'axios';
import { actions } from '../../agents';
import * as types from '../../../mutation-types';
import agentList from './fixtures';
const commit = jest.fn();
global.axios = axios;
jest.mock('axios');
describe('#actions', () => {
describe('#get', () => {
it('sends correct actions if API is success', async () => {
axios.get.mockResolvedValue({ data: agentList });
await actions.get({ commit });
expect(commit.mock.calls).toEqual([
[types.default.SET_AGENT_FETCHING_STATUS, true],
[types.default.SET_AGENT_FETCHING_STATUS, false],
[types.default.SET_AGENTS, agentList],
]);
});
it('sends correct actions if API is error', async () => {
axios.get.mockRejectedValue({ message: 'Incorrect header' });
await actions.get({ commit });
expect(commit.mock.calls).toEqual([
[types.default.SET_AGENT_FETCHING_STATUS, true],
[types.default.SET_AGENT_FETCHING_STATUS, false],
]);
});
});
describe('#create', () => {
it('sends correct actions if API is success', async () => {
axios.post.mockResolvedValue({ data: agentList[0] });
await actions.create({ commit }, agentList[0]);
expect(commit.mock.calls).toEqual([
[types.default.SET_AGENT_CREATING_STATUS, true],
[types.default.ADD_AGENT, agentList[0]],
[types.default.SET_AGENT_CREATING_STATUS, false],
]);
});
it('sends correct actions if API is error', async () => {
axios.post.mockRejectedValue({ message: 'Incorrect header' });
await expect(actions.create({ commit })).rejects.toThrow(Error);
expect(commit.mock.calls).toEqual([
[types.default.SET_AGENT_CREATING_STATUS, true],
[types.default.SET_AGENT_CREATING_STATUS, false],
]);
});
});
describe('#update', () => {
it('sends correct actions if API is success', async () => {
axios.patch.mockResolvedValue({ data: agentList[0] });
await actions.update({ commit }, agentList[0]);
expect(commit.mock.calls).toEqual([
[types.default.SET_AGENT_UPDATING_STATUS, true],
[types.default.EDIT_AGENT, agentList[0]],
[types.default.SET_AGENT_UPDATING_STATUS, false],
]);
});
it('sends correct actions if API is error', async () => {
axios.patch.mockRejectedValue({ message: 'Incorrect header' });
await expect(actions.update({ commit }, agentList[0])).rejects.toThrow(
Error
);
expect(commit.mock.calls).toEqual([
[types.default.SET_AGENT_UPDATING_STATUS, true],
[types.default.SET_AGENT_UPDATING_STATUS, false],
]);
});
});
describe('#delete', () => {
it('sends correct actions if API is success', async () => {
axios.delete.mockResolvedValue({ data: agentList[0] });
await actions.delete({ commit }, agentList[0].id);
expect(commit.mock.calls).toEqual([
[types.default.SET_AGENT_DELETING_STATUS, true],
[types.default.DELETE_AGENT, agentList[0].id],
[types.default.SET_AGENT_DELETING_STATUS, false],
]);
});
it('sends correct actions if API is error', async () => {
axios.delete.mockRejectedValue({ message: 'Incorrect header' });
await expect(actions.delete({ commit }, agentList[0].id)).rejects.toThrow(
Error
);
expect(commit.mock.calls).toEqual([
[types.default.SET_AGENT_DELETING_STATUS, true],
[types.default.SET_AGENT_DELETING_STATUS, false],
]);
});
});
});

28
app/javascript/dashboard/store/modules/specs/agents/fixtures.js Normal file
View file

@ -0,0 +1,28 @@
export default [
{
id: 1,
provider: 'email',
uid: 'agent1@chatwoot.com',
name: 'Agent1',
email: 'agent1@chatwoot.com',
account_id: 1,
created_at: '2019-11-18T02:21:06.225Z',
updated_at: '2019-12-20T07:43:35.794Z',
pubsub_token: 'random-1',
role: 'agent',
confirmed: true,
},
{
id: 2,
provider: 'email',
uid: 'agent2@chatwoot.com',
name: 'Agent2',
email: 'agent2@chatwoot.com',
account_id: 1,
created_at: '2019-11-18T02:21:06.225Z',
updated_at: '2019-12-20T07:43:35.794Z',
pubsub_token: 'random-2',
role: 'agent',
confirmed: true,
},
];

80
app/javascript/dashboard/store/modules/specs/agents/getters.spec.js Normal file
View file

@ -0,0 +1,80 @@
import { getters } from '../../agents';
describe('#getters', () => {
it('getAgents', () => {
const state = {
records: [
{
id: 1,
name: 'Agent 1',
email: 'agent1@chatwoot.com',
confirmed: true,
},
{
id: 2,
name: 'Agent 2',
email: 'agent2@chatwoot.com',
confirmed: false,
},
],
};
expect(getters.getAgents(state)).toEqual([
{
id: 1,
name: 'Agent 1',
email: 'agent1@chatwoot.com',
confirmed: true,
},
{
id: 2,
name: 'Agent 2',
email: 'agent2@chatwoot.com',
confirmed: false,
},
]);
});
it('getVerifiedAgents', () => {
const state = {
records: [
{
id: 1,
name: 'Agent 1',
email: 'agent1@chatwoot.com',
confirmed: true,
},
{
id: 2,
name: 'Agent 2',
email: 'agent2@chatwoot.com',
confirmed: false,
},
],
};
expect(getters.getVerifiedAgents(state)).toEqual([
{
id: 1,
name: 'Agent 1',
email: 'agent1@chatwoot.com',
confirmed: true,
},
]);
});
it('getUIFlags', () => {
const state = {
uiFlags: {
isFetching: true,
isCreating: false,
isUpdating: false,
isDeleting: false,
},
};
expect(getters.getUIFlags(state)).toEqual({
isFetching: true,
isCreating: false,
isUpdating: false,
isDeleting: false,
});
});
});

63
app/javascript/dashboard/store/modules/specs/agents/mutations.spec.js Normal file
View file

@ -0,0 +1,63 @@
import * as types from '../../../mutation-types';
import { mutations } from '../../agents';
describe('#mutations', () => {
describe('#SET_AGENTS', () => {
it('set agent records', () => {
const state = { records: [] };
mutations[types.default.SET_AGENTS](state, [
{ id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' },
]);
expect(state.records).toEqual([
{
id: 1,
name: 'Agent1',
email: 'agent1@chatwoot.com',
},
]);
});
});
describe('#ADD_AGENT', () => {
it('push newly created agent data to the store', () => {
const state = {
records: [{ id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' }],
};
mutations[types.default.ADD_AGENT](state, {
id: 2,
name: 'Agent2',
email: 'agent2@chatwoot.com',
});
expect(state.records).toEqual([
{ id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' },
{ id: 2, name: 'Agent2', email: 'agent2@chatwoot.com' },
]);
});
});
describe('#EDIT_AGENT', () => {
it('sets allMessagesLoaded flag if payload is empty', () => {
const state = {
records: [{ id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' }],
};
mutations[types.default.EDIT_AGENT](state, {
id: 1,
name: 'Agent2',
email: 'agent2@chatwoot.com',
});
expect(state.records).toEqual([
{ id: 1, name: 'Agent2', email: 'agent2@chatwoot.com' },
]);
});
});
describe('#DELETE_AGENT', () => {
it('sets allMessagesLoaded flag if payload is empty', () => {
const state = {
records: [{ id: 1, name: 'Agent1', email: 'agent1@chatwoot.com' }],
};
mutations[types.default.DELETE_AGENT](state, 1);
expect(state.records).toEqual([]);
});
});
});

3
app/javascript/dashboard/store/mutation-types.js
View file

@ -42,6 +42,9 @@ export default {
// Agent
SET_AGENT_FETCHING_STATUS: 'SET_AGENT_FETCHING_STATUS',
SET_AGENT_CREATING_STATUS: 'SET_AGENT_CREATING_STATUS',
SET_AGENT_UPDATING_STATUS: 'SET_AGENT_UPDATING_STATUS',
SET_AGENT_DELETING_STATUS: 'SET_AGENT_DELETING_STATUS',
SET_AGENTS: 'SET_AGENTS',
ADD_AGENT: 'ADD_AGENT',
EDIT_AGENT: 'EDIT_AGENT',

19
app/javascript/shared/helpers/vuex/mutationHelpers.js Normal file
View file

@ -0,0 +1,19 @@
export const set = (state, data) => {
state.records = data;
};
export const create = (state, data) => {
state.records.push(data);
};
export const update = (state, data) => {
state.records.forEach((element, index) => {
if (element.id === data.id) {
state.records[index] = data;
}
});
};
export const destroy = (state, id) => {
state.records = state.records.filter(record => record.id !== id);
};