LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: Replace attributeMixin within the component (#9919)

Browse Source 
# Pull Request Template

## Description

This PR will replace the usage of `attributeMixin` within the component
itself. And moved the component from option API to composition API and
updated the styles and related component

Fixes
https://linear.app/chatwoot/issue/CW-3444/rewrite-attributemixin-mixin-to-a-composable

## Type of change

- [x] New feature (non-breaking change which adds functionality)

## How Has This Been Tested?

**Test cases**
1. Add custom attributes for both conversation and contact from the
settings
2. See all attributes are showing based on the conversation and contact
in both conversation and contact sidebar.
3. Try all CRUD operations like EDIT, DELETE. 
4. Check whether styles are properly showing or not (Background color
based on odd/even)

## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [x] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules
This commit is contained in:
Sivin Varghese
2024-08-12 18:26:07 +05:30
committed by GitHub
parent 4c6572c2c9
commit b1da3dc7cf
6 changed files with 192 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
app/javascript/dashboard/mixins/attributeMixin.js
View File

@@ -1,49 +0,0 @@
import { mapGetters } from 'vuex';
import { isValidURL } from '../helper/URLHelper';
export default {
computed: {
...mapGetters({
currentChat: 'getSelectedChat',
accountId: 'getCurrentAccountId',
}),
attributes() {
return this.$store.getters['attributes/getAttributesByModel'](
this.attributeType
);
},
customAttributes() {
if (this.attributeType === 'conversation_attribute')
return this.currentChat.custom_attributes || {};
return this.contact.custom_attributes || {};
},
contactIdentifier() {
return (
this.currentChat.meta?.sender?.id ||
this.$route.params.contactId ||
this.contactId
);
},
contact() {
return this.$store.getters['contacts/getContact'](this.contactIdentifier);
},
conversationId() {
return this.currentChat.id;
},
},
methods: {
isAttributeNumber(attributeValue) {
return (
Number.isInteger(Number(attributeValue)) && Number(attributeValue) > 0
);
},
attributeDisplayType(attributeValue) {
if (this.isAttributeNumber(attributeValue)) {
return 'number';
}
if (isValidURL(attributeValue)) {
return 'link';
}
return 'text';
},
},
};

145
app/javascript/dashboard/mixins/specs/attributeMixin.spec.js
View File

@@ -1,145 +0,0 @@
import { shallowMount, createLocalVue } from '@vue/test-utils';
import attributeMixin from '../attributeMixin';
import Vuex from 'vuex';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('attributeMixin', () => {
let getters;
let actions;
let store;
beforeEach(() => {
actions = { updateUISettings: vi.fn(), toggleSidebarUIState: vi.fn() };
getters = {
getSelectedChat: () => ({
id: 7165,
custom_attributes: {
product_id: 2021,
},
meta: {
sender: {
id: 1212,
},
},
}),
getCurrentAccountId: () => 1,
attributeType: () => 'conversation_attribute',
};
store = new Vuex.Store({ actions, getters });
});
it('returns currently selected conversation id', () => {
const Component = {
render() {},
title: 'TestComponent',
mixins: [attributeMixin],
};
const wrapper = shallowMount(Component, { store, localVue });
expect(wrapper.vm.conversationId).toEqual(7165);
});
it('return display type if attribute passed', () => {
const Component = {
render() {},
title: 'TestComponent',
mixins: [attributeMixin],
};
const wrapper = shallowMount(Component, { store, localVue });
expect(wrapper.vm.attributeDisplayType('date')).toBe('text');
expect(
wrapper.vm.attributeDisplayType('https://www.chatwoot.com/pricing')
).toBe('link');
expect(wrapper.vm.attributeDisplayType(9988)).toBe('number');
});
it('return true if number is passed', () => {
const Component = {
render() {},
title: 'TestComponent',
mixins: [attributeMixin],
};
const wrapper = shallowMount(Component, { store, localVue });
expect(wrapper.vm.isAttributeNumber(9988)).toBe(true);
});
it('returns currently selected contact', () => {
const Component = {
render() {},
title: 'TestComponent',
mixins: [attributeMixin],
computed: {
contact() {
return {
id: 7165,
custom_attributes: {
product_id: 2021,
},
};
},
},
};
const wrapper = shallowMount(Component, { store, localVue });
expect(wrapper.vm.contact).toEqual({
id: 7165,
custom_attributes: {
product_id: 2021,
},
});
});
it('returns currently selected contact id', () => {
const Component = {
render() {},
title: 'TestComponent',
mixins: [attributeMixin],
};
const wrapper = shallowMount(Component, { store, localVue });
expect(wrapper.vm.contactIdentifier).toEqual(1212);
});
it('returns currently selected conversation custom attributes', () => {
const Component = {
render() {},
title: 'TestComponent',
mixins: [attributeMixin],
computed: {
contact() {
return {
id: 7165,
custom_attributes: {
product_id: 2021,
},
};
},
},
};
const wrapper = shallowMount(Component, { store, localVue });
expect(wrapper.vm.customAttributes).toEqual({
product_id: 2021,
});
});
it('returns currently selected contact custom attributes', () => {
const Component = {
render() {},
title: 'TestComponent',
mixins: [attributeMixin],
computed: {
contact() {
return {
id: 7165,
custom_attributes: {
cloudCustomer: true,
},
};
},
},
};
const wrapper = shallowMount(Component, { store, localVue });
expect(wrapper.vm.customAttributes).toEqual({
cloudCustomer: true,
});
});
});