feat: Ability to edit saved folders (#7236)
* feat: Ability to edit saved filters Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
This commit is contained in:
Sivin Varghese
119
app/javascript/dashboard/helper/customViewsHelper.js
Normal file
119
app/javascript/dashboard/helper/customViewsHelper.js
Normal file
@@ -0,0 +1,119 @@
|
||||
export const getInputType = (key, operator, filterTypes) => {
|
||||
if (key === 'created_at' || key === 'last_activity_at')
|
||||
if (operator === 'days_before') return 'plain_text';
|
||||
const type = filterTypes.find(filter => filter.attributeKey === key);
|
||||
return type?.inputType;
|
||||
};
|
||||
|
||||
export const generateCustomAttributesInputType = type => {
|
||||
const filterInputTypes = {
|
||||
text: 'string',
|
||||
number: 'string',
|
||||
date: 'string',
|
||||
checkbox: 'multi_select',
|
||||
list: 'multi_select',
|
||||
link: 'string',
|
||||
};
|
||||
return filterInputTypes[type];
|
||||
};
|
||||
|
||||
export const getAttributeInputType = (key, allCustomAttributes) => {
|
||||
const customAttribute = allCustomAttributes.find(
|
||||
attr => attr.attribute_key === key
|
||||
);
|
||||
const { attribute_display_type } = customAttribute;
|
||||
const filterInputTypes = generateCustomAttributesInputType(
|
||||
attribute_display_type
|
||||
);
|
||||
return filterInputTypes;
|
||||
};
|
||||
|
||||
export const getValuesName = (values, list, idKey, nameKey) => {
|
||||
const item = list?.find(v => v[idKey] === values[0]);
|
||||
return {
|
||||
id: values[0],
|
||||
name: item ? item[nameKey] : values[0],
|
||||
};
|
||||
};
|
||||
|
||||
const getValuesForLabels = (values, labels) => {
|
||||
const selectedLabels = labels.filter(label => values.includes(label.title));
|
||||
return selectedLabels.map(({ title }) => ({
|
||||
id: title,
|
||||
name: title,
|
||||
}));
|
||||
};
|
||||
|
||||
const getValuesForLanguages = (values, languages) => {
|
||||
const selectedLanguages = languages.filter(language =>
|
||||
values.includes(language.id)
|
||||
);
|
||||
return selectedLanguages.map(({ id, name }) => ({
|
||||
id: id.toLowerCase(),
|
||||
name: name,
|
||||
}));
|
||||
};
|
||||
|
||||
const getValuesForCountries = (values, countries) => {
|
||||
const selectedCountries = countries.filter(country =>
|
||||
values.includes(country.id)
|
||||
);
|
||||
return selectedCountries.map(({ id, name }) => ({
|
||||
id: id,
|
||||
name: name,
|
||||
}));
|
||||
};
|
||||
|
||||
export const getValuesForFilter = (filter, params) => {
|
||||
const { attribute_key, values } = filter;
|
||||
const {
|
||||
languages,
|
||||
countries,
|
||||
agents,
|
||||
inboxes,
|
||||
teams,
|
||||
campaigns,
|
||||
labels,
|
||||
} = params;
|
||||
switch (attribute_key) {
|
||||
case 'assignee_id':
|
||||
return getValuesName(values, agents, 'id', 'name');
|
||||
case 'inbox_id':
|
||||
return getValuesName(values, inboxes, 'id', 'name');
|
||||
case 'team_id':
|
||||
return getValuesName(values, teams, 'id', 'name');
|
||||
case 'campaign_id':
|
||||
return getValuesName(values, campaigns, 'id', 'title');
|
||||
case 'labels': {
|
||||
return getValuesForLabels(values, labels);
|
||||
}
|
||||
case 'browser_language': {
|
||||
return getValuesForLanguages(values, languages);
|
||||
}
|
||||
case 'country_code': {
|
||||
return getValuesForCountries(values, countries);
|
||||
}
|
||||
default:
|
||||
return { id: values[0], name: values[0] };
|
||||
}
|
||||
};
|
||||
|
||||
export const generateValuesForEditCustomViews = (filter, params) => {
|
||||
const { attribute_key, filter_operator, values } = filter;
|
||||
const { filterTypes, allCustomAttributes } = params;
|
||||
const inboxType = getInputType(attribute_key, filter_operator, filterTypes);
|
||||
|
||||
if (inboxType === undefined) {
|
||||
const filterInputTypes = getAttributeInputType(
|
||||
attribute_key,
|
||||
allCustomAttributes
|
||||
);
|
||||
return filterInputTypes === 'string'
|
||||
? values[0].toString()
|
||||
: { id: values[0], name: values[0] };
|
||||
}
|
||||
|
||||
return inboxType === 'multi_select' || inboxType === 'search_select'
|
||||
? getValuesForFilter(filter, params)
|
||||
: values[0].toString();
|
||||
};
|
||||
@@ -1,9 +1,12 @@
|
||||
const setArrayValues = item => {
|
||||
return item.values[0]?.id ? item.values.map(val => val.id) : item.values;
|
||||
};
|
||||
const generatePayload = data => {
|
||||
// Make a copy of data to avoid vue data reactivity issues
|
||||
const filters = JSON.parse(JSON.stringify(data));
|
||||
let payload = filters.map(item => {
|
||||
if (Array.isArray(item.values)) {
|
||||
item.values = item.values.map(val => val.id);
|
||||
item.values = setArrayValues(item);
|
||||
} else if (typeof item.values === 'object') {
|
||||
item.values = [item.values.id];
|
||||
} else if (!item.values) {
|
||||
|
||||
278
app/javascript/dashboard/helper/specs/customViewsHelper.spec.js
Normal file
278
app/javascript/dashboard/helper/specs/customViewsHelper.spec.js
Normal file
@@ -0,0 +1,278 @@
|
||||
import {
|
||||
getAttributeInputType,
|
||||
getInputType,
|
||||
getValuesName,
|
||||
getValuesForFilter,
|
||||
generateValuesForEditCustomViews,
|
||||
generateCustomAttributesInputType,
|
||||
} from '../customViewsHelper';
|
||||
import advancedFilterTypes from 'dashboard/components/widgets/conversation/advancedFilterItems/index';
|
||||
|
||||
describe('customViewsHelper', () => {
|
||||
describe('#getInputType', () => {
|
||||
it('should return plain_text if key is created_at or last_activity_at and operator is days_before', () => {
|
||||
const filterTypes = [
|
||||
{ attributeKey: 'created_at', inputType: 'date' },
|
||||
{ attributeKey: 'last_activity_at', inputType: 'date' },
|
||||
];
|
||||
expect(getInputType('created_at', 'days_before', filterTypes)).toEqual(
|
||||
'plain_text'
|
||||
);
|
||||
expect(
|
||||
getInputType('last_activity_at', 'days_before', filterTypes)
|
||||
).toEqual('plain_text');
|
||||
});
|
||||
|
||||
it('should return inputType if key is not created_at or last_activity_at', () => {
|
||||
const filterTypes = [
|
||||
{ attributeKey: 'created_at', inputType: 'date' },
|
||||
{ attributeKey: 'last_activity_at', inputType: 'date' },
|
||||
{ attributeKey: 'test', inputType: 'string' },
|
||||
];
|
||||
expect(getInputType('test', 'days_before', filterTypes)).toEqual(
|
||||
'string'
|
||||
);
|
||||
});
|
||||
|
||||
it('should return undefined if key is not created_at or last_activity_at and inputType is not present', () => {
|
||||
const filterTypes = [
|
||||
{ attributeKey: 'created_at', inputType: 'date' },
|
||||
{ attributeKey: 'last_activity_at', inputType: 'date' },
|
||||
{ attributeKey: 'test', inputType: 'string' },
|
||||
];
|
||||
expect(getInputType('test', 'days_before', filterTypes)).toEqual(
|
||||
'string'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#getAttributeInputType', () => {
|
||||
it('should return multi_select if attribute_display_type is checkbox or list', () => {
|
||||
const allCustomAttributes = [
|
||||
{ attribute_key: 'test', attribute_display_type: 'checkbox' },
|
||||
{ attribute_key: 'test2', attribute_display_type: 'list' },
|
||||
];
|
||||
expect(getAttributeInputType('test', allCustomAttributes)).toEqual(
|
||||
'multi_select'
|
||||
);
|
||||
expect(getAttributeInputType('test2', allCustomAttributes)).toEqual(
|
||||
'multi_select'
|
||||
);
|
||||
});
|
||||
|
||||
it('should return string if attribute_display_type is text, number, date or link', () => {
|
||||
const allCustomAttributes = [
|
||||
{ attribute_key: 'test', attribute_display_type: 'text' },
|
||||
{ attribute_key: 'test2', attribute_display_type: 'number' },
|
||||
{ attribute_key: 'test3', attribute_display_type: 'date' },
|
||||
{ attribute_key: 'test4', attribute_display_type: 'link' },
|
||||
];
|
||||
expect(getAttributeInputType('test', allCustomAttributes)).toEqual(
|
||||
'string'
|
||||
);
|
||||
expect(getAttributeInputType('test2', allCustomAttributes)).toEqual(
|
||||
'string'
|
||||
);
|
||||
expect(getAttributeInputType('test3', allCustomAttributes)).toEqual(
|
||||
'string'
|
||||
);
|
||||
expect(getAttributeInputType('test4', allCustomAttributes)).toEqual(
|
||||
'string'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('#getValuesName', () => {
|
||||
it('should return id and name if item is present', () => {
|
||||
const list = [{ id: 1, name: 'test' }];
|
||||
const idKey = 'id';
|
||||
const nameKey = 'name';
|
||||
const values = [1];
|
||||
expect(getValuesName(values, list, idKey, nameKey)).toEqual({
|
||||
id: 1,
|
||||
name: 'test',
|
||||
});
|
||||
});
|
||||
|
||||
it('should return id and value if item is not present', () => {
|
||||
const list = [{ id: 1, name: 'test' }];
|
||||
const idKey = 'id';
|
||||
const nameKey = 'name';
|
||||
const values = [2];
|
||||
expect(getValuesName(values, list, idKey, nameKey)).toEqual({
|
||||
id: 2,
|
||||
name: 2,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('#getValuesForFilter', () => {
|
||||
it('should return id and name if attribute_key is assignee_id', () => {
|
||||
const filter = { attribute_key: 'assignee_id', values: [1] };
|
||||
const params = { agents: [{ id: 1, name: 'test' }] };
|
||||
expect(getValuesForFilter(filter, params)).toEqual({
|
||||
id: 1,
|
||||
name: 'test',
|
||||
});
|
||||
});
|
||||
|
||||
it('should return id and name if attribute_key is inbox_id', () => {
|
||||
const filter = { attribute_key: 'inbox_id', values: [1] };
|
||||
const params = { inboxes: [{ id: 1, name: 'test' }] };
|
||||
expect(getValuesForFilter(filter, params)).toEqual({
|
||||
id: 1,
|
||||
name: 'test',
|
||||
});
|
||||
});
|
||||
|
||||
it('should return id and name if attribute_key is team_id', () => {
|
||||
const filter = { attribute_key: 'team_id', values: [1] };
|
||||
const params = { teams: [{ id: 1, name: 'test' }] };
|
||||
expect(getValuesForFilter(filter, params)).toEqual({
|
||||
id: 1,
|
||||
name: 'test',
|
||||
});
|
||||
});
|
||||
|
||||
it('should return id and title if attribute_key is campaign_id', () => {
|
||||
const filter = { attribute_key: 'campaign_id', values: [1] };
|
||||
const params = { campaigns: [{ id: 1, title: 'test' }] };
|
||||
expect(getValuesForFilter(filter, params)).toEqual({
|
||||
id: 1,
|
||||
name: 'test',
|
||||
});
|
||||
});
|
||||
|
||||
it('should return id and title if attribute_key is labels', () => {
|
||||
const filter = { attribute_key: 'labels', values: ['test'] };
|
||||
const params = { labels: [{ title: 'test' }] };
|
||||
expect(getValuesForFilter(filter, params)).toEqual([
|
||||
{ id: 'test', name: 'test' },
|
||||
]);
|
||||
});
|
||||
|
||||
it('should return id and name if attribute_key is browser_language', () => {
|
||||
const filter = { attribute_key: 'browser_language', values: ['en'] };
|
||||
const params = { languages: [{ id: 'en', name: 'English' }] };
|
||||
expect(getValuesForFilter(filter, params)).toEqual([
|
||||
{ id: 'en', name: 'English' },
|
||||
]);
|
||||
});
|
||||
|
||||
it('should return id and name if attribute_key is country_code', () => {
|
||||
const filter = { attribute_key: 'country_code', values: ['IN'] };
|
||||
const params = { countries: [{ id: 'IN', name: 'India' }] };
|
||||
expect(getValuesForFilter(filter, params)).toEqual([
|
||||
{ id: 'IN', name: 'India' },
|
||||
]);
|
||||
});
|
||||
|
||||
it('should return id and name if attribute_key is not present', () => {
|
||||
const filter = { attribute_key: 'test', values: [1] };
|
||||
const params = {};
|
||||
expect(getValuesForFilter(filter, params)).toEqual({
|
||||
id: 1,
|
||||
name: 1,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('#generateValuesForEditCustomViews', () => {
|
||||
it('should return id and name if inboxType is multi_select or search_select', () => {
|
||||
const filter = {
|
||||
attribute_key: 'assignee_id',
|
||||
filter_operator: 'and',
|
||||
values: [1],
|
||||
};
|
||||
const params = {
|
||||
filterTypes: advancedFilterTypes,
|
||||
allCustomAttributes: [],
|
||||
agents: [{ id: 1, name: 'test' }],
|
||||
};
|
||||
expect(generateValuesForEditCustomViews(filter, params)).toEqual({
|
||||
id: 1,
|
||||
name: 'test',
|
||||
});
|
||||
});
|
||||
|
||||
it('should return id and name if inboxType is not multi_select or search_select', () => {
|
||||
const filter = {
|
||||
attribute_key: 'assignee_id',
|
||||
filter_operator: 'and',
|
||||
values: [1],
|
||||
};
|
||||
const params = {
|
||||
filterTypes: advancedFilterTypes,
|
||||
allCustomAttributes: [],
|
||||
agents: [{ id: 1, name: 'test' }],
|
||||
};
|
||||
expect(generateValuesForEditCustomViews(filter, params)).toEqual({
|
||||
id: 1,
|
||||
name: 'test',
|
||||
});
|
||||
});
|
||||
|
||||
it('should return id and name if inboxType is undefined', () => {
|
||||
const filter = {
|
||||
attribute_key: 'test2',
|
||||
filter_operator: 'and',
|
||||
values: [1],
|
||||
};
|
||||
const params = {
|
||||
filterTypes: advancedFilterTypes,
|
||||
allCustomAttributes: [
|
||||
{ attribute_key: 'test', attribute_display_type: 'checkbox' },
|
||||
{ attribute_key: 'test2', attribute_display_type: 'list' },
|
||||
],
|
||||
};
|
||||
expect(generateValuesForEditCustomViews(filter, params)).toEqual({
|
||||
id: 1,
|
||||
name: 1,
|
||||
});
|
||||
});
|
||||
|
||||
it('should return value as string if filterInputTypes is string', () => {
|
||||
const filter = {
|
||||
attribute_key: 'test',
|
||||
filter_operator: 'and',
|
||||
values: [1],
|
||||
};
|
||||
const params = {
|
||||
filterTypes: advancedFilterTypes,
|
||||
allCustomAttributes: [
|
||||
{ attribute_key: 'test', attribute_display_type: 'date' },
|
||||
{ attribute_key: 'test2', attribute_display_type: 'list' },
|
||||
],
|
||||
};
|
||||
expect(generateValuesForEditCustomViews(filter, params)).toEqual('1');
|
||||
});
|
||||
});
|
||||
|
||||
describe('#generateCustomAttributesInputType', () => {
|
||||
it('should return string if type is text', () => {
|
||||
expect(generateCustomAttributesInputType('text')).toEqual('string');
|
||||
});
|
||||
|
||||
it('should return string if type is number', () => {
|
||||
expect(generateCustomAttributesInputType('number')).toEqual('string');
|
||||
});
|
||||
|
||||
it('should return string if type is date', () => {
|
||||
expect(generateCustomAttributesInputType('date')).toEqual('string');
|
||||
});
|
||||
|
||||
it('should return multi_select if type is checkbox', () => {
|
||||
expect(generateCustomAttributesInputType('checkbox')).toEqual(
|
||||
'multi_select'
|
||||
);
|
||||
});
|
||||
|
||||
it('should return multi_select if type is list', () => {
|
||||
expect(generateCustomAttributesInputType('list')).toEqual('multi_select');
|
||||
});
|
||||
|
||||
it('should return string if type is link', () => {
|
||||
expect(generateCustomAttributesInputType('link')).toEqual('string');
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user