fix: Update the relevant agent presence only (#5220)
This commit is contained in:
parent
cbcee6414c
commit
657bd44418
11 changed files with 100 additions and 62 deletions
|
@ -41,7 +41,7 @@
|
|||
:header="this.$t('OVERVIEW_REPORTS.AGENT_CONVERSATIONS.HEADER')"
|
||||
>
|
||||
<agent-table
|
||||
:total-agents="agentsCount"
|
||||
:agents="agents"
|
||||
:agent-metrics="agentConversationMetric"
|
||||
:page-index="pageIndex"
|
||||
:is-loading="uiFlags.isFetchingAgentConversationMetric"
|
||||
|
@ -70,7 +70,7 @@ export default {
|
|||
computed: {
|
||||
...mapGetters({
|
||||
agentStatus: 'agents/getAgentStatus',
|
||||
agentsCount: 'agents/getAgentsCount',
|
||||
agents: 'agents/getAgents',
|
||||
accountConversationMetric: 'getAccountConversationMetric',
|
||||
agentConversationMetric: 'getAgentConversationMetric',
|
||||
uiFlags: 'getOverviewUIFlags',
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
/>
|
||||
<div v-if="agentMetrics.length > 0" class="table-pagination">
|
||||
<ve-pagination
|
||||
:total="totalAgents"
|
||||
:total="agents.length"
|
||||
:page-index="pageIndex"
|
||||
:page-size="25"
|
||||
:page-size-option="[25]"
|
||||
|
@ -43,9 +43,9 @@ export default {
|
|||
VePagination,
|
||||
},
|
||||
props: {
|
||||
totalAgents: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
agents: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
agentMetrics: {
|
||||
type: Array,
|
||||
|
@ -60,19 +60,17 @@ export default {
|
|||
default: 1,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
tableData() {
|
||||
return this.agentMetrics.map(agent => {
|
||||
const agentInformation = this.getAgentInformation(agent.id);
|
||||
return {
|
||||
agent: agent.name,
|
||||
email: agent.email,
|
||||
thumbnail: agent.thumbnail,
|
||||
agent: agentInformation.name,
|
||||
email: agentInformation.email,
|
||||
thumbnail: agentInformation.thumbnail,
|
||||
open: agent.metric.open || 0,
|
||||
unattended: agent.metric.unattended || 0,
|
||||
status: agent.availability,
|
||||
status: agentInformation.availability_status,
|
||||
};
|
||||
});
|
||||
},
|
||||
|
@ -123,11 +121,13 @@ export default {
|
|||
];
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
onPageNumberChange(pageIndex) {
|
||||
this.$emit('page-change', pageIndex);
|
||||
},
|
||||
getAgentInformation(id) {
|
||||
return this.agents.find(agent => agent.id === Number(id));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
@ -35,9 +35,6 @@ export const getters = {
|
|||
};
|
||||
return status;
|
||||
},
|
||||
getAgentsCount($state) {
|
||||
return $state.records.length;
|
||||
},
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
|
@ -73,14 +70,15 @@ export const actions = {
|
|||
throw new Error(error);
|
||||
}
|
||||
},
|
||||
|
||||
updatePresence: async ({ commit, dispatch }, data) => {
|
||||
commit(types.default.SET_AGENT_UPDATING_STATUS, true);
|
||||
commit(types.default.UPDATE_AGENTS_PRESENCE, data);
|
||||
dispatch('updateReportAgentStatus', data, { root: true });
|
||||
commit(types.default.SET_AGENT_UPDATING_STATUS, false);
|
||||
updateSingleAgentPresence: ({ commit }, { id, availabilityStatus }) => {
|
||||
commit(types.default.UPDATE_SINGLE_AGENT_PRESENCE, {
|
||||
id,
|
||||
availabilityStatus,
|
||||
});
|
||||
},
|
||||
updatePresence: async ({ commit }, data) => {
|
||||
commit(types.default.UPDATE_AGENTS_PRESENCE, data);
|
||||
},
|
||||
|
||||
delete: async ({ commit }, agentId) => {
|
||||
commit(types.default.SET_AGENT_DELETING_STATUS, true);
|
||||
try {
|
||||
|
@ -113,6 +111,14 @@ export const mutations = {
|
|||
[types.default.EDIT_AGENT]: MutationHelpers.update,
|
||||
[types.default.DELETE_AGENT]: MutationHelpers.destroy,
|
||||
[types.default.UPDATE_AGENTS_PRESENCE]: MutationHelpers.updatePresence,
|
||||
[types.default.UPDATE_SINGLE_AGENT_PRESENCE]: (
|
||||
$state,
|
||||
{ id, availabilityStatus }
|
||||
) =>
|
||||
MutationHelpers.updateSingleRecordPresence($state.records, {
|
||||
id,
|
||||
availabilityStatus,
|
||||
}),
|
||||
};
|
||||
|
||||
export default {
|
||||
|
|
|
@ -159,7 +159,10 @@ export const actions = {
|
|||
const userData = response.data;
|
||||
const { id } = userData;
|
||||
commit(types.SET_CURRENT_USER, response.data);
|
||||
dispatch('agents/updatePresence', { [id]: params.availability });
|
||||
dispatch('agents/updateSingleAgentPresence', {
|
||||
id,
|
||||
availabilityStatus: params.availability,
|
||||
});
|
||||
} catch (error) {
|
||||
// Ignore error
|
||||
}
|
||||
|
|
|
@ -1,10 +1,6 @@
|
|||
/* eslint no-console: 0 */
|
||||
/* eslint no-param-reassign: 0 */
|
||||
/* eslint no-shadow: 0 */
|
||||
import * as types from '../mutation-types';
|
||||
import Report from '../../api/reports';
|
||||
import Vue from 'vue';
|
||||
|
||||
import { downloadCsvFile } from '../../helper/downloadHelper';
|
||||
|
||||
const state = {
|
||||
|
@ -116,9 +112,6 @@ export const actions = {
|
|||
commit(types.default.TOGGLE_AGENT_CONVERSATION_METRIC_LOADING, false);
|
||||
});
|
||||
},
|
||||
updateReportAgentStatus({ commit }, data) {
|
||||
commit(types.default.UPDATE_REPORT_AGENTS_STATUS, data);
|
||||
},
|
||||
downloadAgentReports(_, reportObj) {
|
||||
return Report.getAgentReports(reportObj)
|
||||
.then(response => {
|
||||
|
@ -179,16 +172,6 @@ const mutations = {
|
|||
[types.default.TOGGLE_AGENT_CONVERSATION_METRIC_LOADING](_state, flag) {
|
||||
_state.overview.uiFlags.isFetchingAgentConversationMetric = flag;
|
||||
},
|
||||
[types.default.UPDATE_REPORT_AGENTS_STATUS](_state, data) {
|
||||
_state.overview.agentConversationMetric.forEach((element, index) => {
|
||||
const availabilityStatus = data[element.id];
|
||||
Vue.set(
|
||||
_state.overview.agentConversationMetric[index],
|
||||
'availability',
|
||||
availabilityStatus || 'offline'
|
||||
);
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
|
|
|
@ -96,13 +96,21 @@ describe('#actions', () => {
|
|||
});
|
||||
|
||||
describe('#updatePresence', () => {
|
||||
it('sends correct actions if API is success', async () => {
|
||||
it('sends correct actions', async () => {
|
||||
const data = { users: { 1: 'online' }, contacts: { 2: 'online' } };
|
||||
actions.updatePresence({ commit, dispatch }, data);
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.default.SET_AGENT_UPDATING_STATUS, true],
|
||||
[types.default.UPDATE_AGENTS_PRESENCE, data],
|
||||
[types.default.SET_AGENT_UPDATING_STATUS, false],
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#updateSingleAgentPresence', () => {
|
||||
it('sends correct actions', async () => {
|
||||
const data = { id: 1, availabilityStatus: 'online' };
|
||||
actions.updateSingleAgentPresence({ commit, dispatch }, data);
|
||||
expect(commit.mock.calls).toEqual([
|
||||
[types.default.UPDATE_SINGLE_AGENT_PRESENCE, data],
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -129,19 +129,4 @@ describe('#getters', () => {
|
|||
offline: 1,
|
||||
});
|
||||
});
|
||||
|
||||
it('getAgentStatus', () => {
|
||||
const state = {
|
||||
records: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Agent 1',
|
||||
email: 'agent1@chatwoot.com',
|
||||
confirmed: true,
|
||||
availability_status: 'online',
|
||||
},
|
||||
],
|
||||
};
|
||||
expect(getters.getAgentsCount(state)).toEqual(1);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -97,4 +97,44 @@ describe('#mutations', () => {
|
|||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#UPDATE_SINGLE_AGENT_PRESENCE', () => {
|
||||
it('updates single agent presence', () => {
|
||||
const state = {
|
||||
records: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Agent1',
|
||||
email: 'agent1@chatwoot.com',
|
||||
availability_status: 'offline',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Agent1',
|
||||
email: 'agent1@chatwoot.com',
|
||||
availability_status: 'online',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
mutations[types.default.UPDATE_SINGLE_AGENT_PRESENCE](state, {
|
||||
id: 1,
|
||||
availabilityStatus: 'busy',
|
||||
});
|
||||
expect(state.records).toEqual([
|
||||
{
|
||||
id: 1,
|
||||
name: 'Agent1',
|
||||
email: 'agent1@chatwoot.com',
|
||||
availability_status: 'busy',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Agent1',
|
||||
email: 'agent1@chatwoot.com',
|
||||
availability_status: 'online',
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -80,7 +80,10 @@ describe('#actions', () => {
|
|||
],
|
||||
]);
|
||||
expect(dispatch.mock.calls).toEqual([
|
||||
['agents/updatePresence', { 1: 'offline' }],
|
||||
[
|
||||
'agents/updateSingleAgentPresence',
|
||||
{ availabilityStatus: 'offline', id: 1 },
|
||||
],
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -70,6 +70,7 @@ export default {
|
|||
EDIT_AGENT: 'EDIT_AGENT',
|
||||
DELETE_AGENT: 'DELETE_AGENT',
|
||||
UPDATE_AGENTS_PRESENCE: 'UPDATE_AGENTS_PRESENCE',
|
||||
UPDATE_SINGLE_AGENT_PRESENCE: 'UPDATE_SINGLE_AGENT_PRESENCE',
|
||||
|
||||
// Canned Response
|
||||
SET_CANNED_UI_FLAG: 'SET_CANNED_UI_FLAG',
|
||||
|
@ -150,7 +151,6 @@ export default {
|
|||
SET_AGENT_CONVERSATION_METRIC: 'SET_AGENT_CONVERSATION_METRIC',
|
||||
TOGGLE_AGENT_CONVERSATION_METRIC_LOADING:
|
||||
'TOGGLE_AGENT_CONVERSATION_METRIC_LOADING',
|
||||
UPDATE_REPORT_AGENTS_STATUS: 'UPDATE_AGENTS_STATUS',
|
||||
|
||||
// Conversation Metadata
|
||||
SET_CONVERSATION_METADATA: 'SET_CONVERSATION_METADATA',
|
||||
|
|
|
@ -45,6 +45,16 @@ export const updatePresence = (state, data) => {
|
|||
});
|
||||
};
|
||||
|
||||
export const updateSingleRecordPresence = (
|
||||
records,
|
||||
{ id, availabilityStatus }
|
||||
) => {
|
||||
const [selectedRecord] = records.filter(record => record.id === Number(id));
|
||||
if (selectedRecord) {
|
||||
Vue.set(selectedRecord, 'availability_status', availabilityStatus);
|
||||
}
|
||||
};
|
||||
|
||||
export const destroy = (state, id) => {
|
||||
state.records = state.records.filter(record => record.id !== id);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue