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

chore: Update availability status everywhere if the user changes the status from the account menu (#2581)

Browse source 
* add agent mixin

* apply agent mixin in components

* review fixes

* fix specs
This commit is contained in:
Muhsin Keloth 2021-07-09 13:20:54 +05:30 committed by GitHub
parent 4a2195aeda
commit 64e69a85f8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 140 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -39,7 +39,7 @@
:loading="uiFlags.isFetching"
:allow-empty="true"
deselect-label=""
:options="agentList"
:options="agentsList"
:placeholder="$t('CONVERSATION.ASSIGNMENT.SELECT_AGENT')"
select-label=""
label="name"
@ -67,6 +67,7 @@
import { mapGetters } from 'vuex';
import MoreActions from './MoreActions';
import Thumbnail from '../Thumbnail';
import agentMixin from '../../../mixins/agentMixin.js';
import AvailabilityStatusBadge from '../conversation/AvailabilityStatusBadge';
export default {
@ -75,7 +76,7 @@ export default {
Thumbnail,
AvailabilityStatusBadge,
},
mixins: [agentMixin],
props: {
chat: {
type: Object,
@ -90,12 +91,12 @@ export default {
data() {
return {
currentChatAssignee: null,
inboxId: null,
};
},
computed: {
...mapGetters({
getAgents: 'inboxAssignableAgents/getAssignableAgents',
uiFlags: 'inboxAssignableAgents/getUIFlags',
currentChat: 'getSelectedChat',
}),
@ -109,22 +110,10 @@ export default {
this.chat.meta.sender.id
);
},
agentList() {
const { inbox_id: inboxId } = this.chat;
const agents = this.getAgents(inboxId) || [];
return [
{
confirmed: true,
name: 'None',
id: 0,
role: 'agent',
account_id: 0,
email: 'None',
},
...agents,
];
},
},
mounted() {
const { inbox_id: inboxId } = this.chat;
this.inboxId = inboxId;
},
methods: {

35
app/javascript/dashboard/mixins/agentMixin.js Normal file
View file

@ -0,0 +1,35 @@
import { mapGetters } from 'vuex';
export default {
computed: {
assignableAgents() {
return this.$store.getters['inboxAssignableAgents/getAssignableAgents'](
this.inboxId
);
},
...mapGetters({
currentUser: 'getCurrentUser',
}),
agentsList() {
const agents = this.assignableAgents || [];
return [
{
confirmed: true,
name: 'None',
id: 0,
role: 'agent',
account_id: 0,
email: 'None',
},
...agents,
].map(item =>
item.id === this.currentUser.id
? {
...item,
availability_status: this.currentUser.availability_status,
}
: item
);
},
},
};

54
app/javascript/dashboard/mixins/specs/agentFixtures.js Normal file
View file

@ -0,0 +1,54 @@
export default {
allAgents: [
{
account_id: 1,
availability_status: 'online',
available_name: 'John K',
confirmed: true,
email: 'john@chatwoot.com',
id: 1,
name: 'John Kennady',
role: 'administrator',
},
{
account_id: 1,
availability_status: 'busy',
available_name: 'Samuel K',
confirmed: true,
email: 'samuel@chatwoot.com',
id: 2,
name: 'Samuel Keta',
role: 'agent',
},
],
formattedAgents: [
{
account_id: 0,
confirmed: true,
email: 'None',
id: 0,
name: 'None',
role: 'agent',
},
{
account_id: 1,
availability_status: 'busy',
available_name: 'John K',
confirmed: true,
email: 'john@chatwoot.com',
id: 1,
name: 'John Kennady',
role: 'administrator',
},
{
account_id: 1,
availability_status: 'busy',
available_name: 'Samuel K',
confirmed: true,
email: 'samuel@chatwoot.com',
id: 2,
name: 'Samuel Keta',
role: 'agent',
},
],
};

38
app/javascript/dashboard/mixins/specs/agentMixin.spec.js Normal file
View file

@ -0,0 +1,38 @@
import { shallowMount, createLocalVue } from '@vue/test-utils';
import agentMixin from '../agentMixin';
import agentFixtures from './agentFixtures';
import Vuex from 'vuex';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('agentMixin', () => {
let getters;
let store;
beforeEach(() => {
getters = {
getCurrentUser: () => ({
id: 1,
availability_status: 'busy',
}),
};
store = new Vuex.Store({ getters });
});
it('return formatted agents', () => {
const Component = {
render() {},
title: 'TestComponent',
mixins: [agentMixin],
data() {
return { inboxId: 1 };
},
computed: {
assignableAgents() {
return agentFixtures.allAgents;
},
},
};
const wrapper = shallowMount(Component, { store, localVue });
expect(wrapper.vm.agentsList).toEqual(agentFixtures.formattedAgents);
});
});

12
app/javascript/dashboard/routes/dashboard/conversation/ContactPanel.vue
View file

@ -131,6 +131,7 @@
<script>
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import agentMixin from '../../../mixins/agentMixin';
import ContactConversations from './ContactConversations.vue';
import ContactDetailsItem from './ContactDetailsItem.vue';
@ -150,7 +151,7 @@ export default {
ConversationLabels,
AvailabilityStatusBadge,
},
mixins: [alertMixin],
mixins: [alertMixin, agentMixin],
props: {
conversationId: {
type: [Number, String],
@ -170,7 +171,6 @@ export default {
currentChat: 'getSelectedChat',
teams: 'teams/getTeams',
currentUser: 'getCurrentUser',
getAgents: 'inboxAssignableAgents/getAssignableAgents',
uiFlags: 'inboxAssignableAgents/getUIFlags',
}),
currentConversationMetaData() {
@ -195,8 +195,9 @@ export default {
return this.additionalAttributes.initiated_at;
},
browserName() {
return `${this.browser.browser_name || ''} ${this.browser
.browser_version || ''}`;
return `${this.browser.browser_name || ''} ${
this.browser.browser_version || ''
}`;
},
contactAdditionalAttributes() {
return this.contact.additional_attributes || {};
@ -235,9 +236,6 @@ export default {
contact() {
return this.$store.getters['contacts/getContact'](this.contactId);
},
agentsList() {
return [{ id: 0, name: 'None' }, ...this.getAgents(this.inboxId)];
},
teamsList() {
return [{ id: 0, name: 'None' }, ...this.teams];
},