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

feat: Added support for Created At, Last Activity At filters in the UI (#4031)

Browse Source
This commit is contained in:
Fayaz Ahmed
2022-03-14 20:24:53 +05:30
committed by GitHub
parent c62d74a01d
commit 4a2452173e
10 changed files with 152 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.js
View File

@@ -69,7 +69,22 @@ export const OPERATOR_TYPES_4 = [
label: 'Is greater than',
},
{
value: 'is_lesser_than',
label: 'Is lesser than',
value: 'is_less_than',
label: 'Is less than',
},
];
export const OPERATOR_TYPES_5 = [
{
value: 'is_greater_than',
label: 'Is greater than',
},
{
value: 'is_less_than',
label: 'Is less than',
},
{
value: 'days_before',
label: 'Is x days before',
},
];

15
app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.spec.js Normal file
View File

@@ -0,0 +1,15 @@
import {
OPERATOR_TYPES_1,
OPERATOR_TYPES_2,
OPERATOR_TYPES_3,
OPERATOR_TYPES_4,
} from './FilterOperatorTypes';
describe('#filterOperators', () => {
it('Matches the correct Operators', () => {
expect(OPERATOR_TYPES_1).toMatchObject(OPERATOR_TYPES_1);
expect(OPERATOR_TYPES_2).toMatchObject(OPERATOR_TYPES_2);
expect(OPERATOR_TYPES_3).toMatchObject(OPERATOR_TYPES_3);
expect(OPERATOR_TYPES_4).toMatchObject(OPERATOR_TYPES_4);
});
});

4
app/javascript/dashboard/components/widgets/FilterInput/Index.vue
View File

@@ -141,6 +141,10 @@ export default {
type: String,
default: 'plain_text',
},
dataType: {
type: String,
default: 'plain_text',
},
operators: {
type: Array,
default: () => [],

18
app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
View File

@@ -10,7 +10,12 @@
:key="i"
v-model="appliedFilters[i]"
:filter-groups="filterGroups"
:input-type="getInputType(appliedFilters[i].attribute_key)"
:input-type="
getInputType(
appliedFilters[i].attribute_key,
appliedFilters[i].filter_operator
)
"
:operators="getOperators(appliedFilters[i].attribute_key)"
:dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
:show-query-operator="i !== appliedFilters.length - 1"
@@ -56,6 +61,7 @@ import { mapGetters } from 'vuex';
import { filterAttributeGroups } from './advancedFilterItems';
import filterMixin from 'shared/mixins/filterMixin';
import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
export default {
components: {
FilterInputBox,
@@ -76,6 +82,12 @@ export default {
required,
$each: {
values: {
ensureBetween0to999(value, prop) {
if (prop.filter_operator === 'days_before') {
return parseInt(value, 10) > 0 && parseInt(value, 10) < 999;
}
return true;
},
required: requiredIf(prop => {
return !(
prop.filter_operator === 'is_present' ||
@@ -155,7 +167,9 @@ export default {
const type = this.filterTypes.find(filter => filter.attributeKey === key);
return type.attributeModel;
},
getInputType(key) {
getInputType(key, operator) {
if (key === 'created_at' || key === 'last_activity_at')
if (operator === 'days_before') return 'plain_text';
const type = this.filterTypes.find(filter => filter.attributeKey === key);
return type.inputType;
},

9
app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/advancedFilterItems.spec.js Normal file
View File

@@ -0,0 +1,9 @@
import defaultFilters from './index';
import { filterAttributeGroups } from './index';
describe('#filterItems', () => {
it('Matches the correct filterItems', () => {
expect(defaultFilters).toMatchObject(defaultFilters);
expect(filterAttributeGroups).toMatchObject(filterAttributeGroups);
});
});

33
app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js
View File

@@ -2,6 +2,7 @@ import {
OPERATOR_TYPES_1,
OPERATOR_TYPES_2,
OPERATOR_TYPES_3,
OPERATOR_TYPES_5,
} from '../../FilterInput/FilterOperatorTypes';
const filterTypes = [
@@ -85,6 +86,30 @@ const filterTypes = [
filterOperators: OPERATOR_TYPES_3,
attributeModel: 'additional',
},
{
attributeKey: 'created_at',
attributeI18nKey: 'CREATED_AT',
inputType: 'date',
dataType: 'text',
filterOperators: OPERATOR_TYPES_5,
attributeModel: 'standard',
},
{
attributeKey: 'last_activity_at',
attributeI18nKey: 'LAST_ACTIVITY',
inputType: 'date',
dataType: 'text',
filterOperators: OPERATOR_TYPES_5,
attributeModel: 'standard',
},
{
attributeKey: 'referer',
attributeI18nKey: 'REFERER_LINK',
inputType: 'plain_text',
dataType: 'text',
filterOperators: OPERATOR_TYPES_5,
attributeModel: 'standard',
},
];
export const filterAttributeGroups = [
@@ -120,6 +145,14 @@ export const filterAttributeGroups = [
key: 'labels',
i18nKey: 'LABELS',
},
{
key: 'created_at',
i18nKey: 'CREATED_AT',
},
{
key: 'last_activity_at',
i18nKey: 'LAST_ACTIVITY',
},
],
},
{

7
app/javascript/dashboard/i18n/locale/en/advancedFilters.json
View File

@@ -21,7 +21,8 @@
"is_present": "Is present",
"is_not_present": "Is not present",
"is_greater_than": "Is greater than",
"is_lesser_than": "Is lesser than"
"is_less_than": "Is lesser than",
"days_before": "Is x days before"
},
"ATTRIBUTE_LABELS": {
"TRUE": "True",
@@ -42,7 +43,9 @@
"CUSTOM_ATTRIBUTE_TEXT": "Text",
"CUSTOM_ATTRIBUTE_NUMBER": "Number",
"CUSTOM_ATTRIBUTE_LINK": "Link",
"CUSTOM_ATTRIBUTE_CHECKBOX": "Checkbox"
"CUSTOM_ATTRIBUTE_CHECKBOX": "Checkbox",
"CREATED_AT": "Created At",
"LAST_ACTIVITY": "Last Activity"
},
"GROUPS": {
"STANDARD_FILTERS": "Standard Filters",

7
app/javascript/dashboard/i18n/locale/en/contactFilters.json
View File

@@ -22,7 +22,8 @@
"is_present": "Is present",
"is_not_present": "Is not present",
"is_greater_than": "Is greater than",
"is_lesser_than": "Is lesser than"
"is_lesser_than": "Is lesser than",
"days_before": "Is x days before"
},
"ATTRIBUTES": {
"NAME": "Name",
@@ -35,7 +36,9 @@
"CUSTOM_ATTRIBUTE_TEXT": "Text",
"CUSTOM_ATTRIBUTE_NUMBER": "Number",
"CUSTOM_ATTRIBUTE_LINK": "Link",
"CUSTOM_ATTRIBUTE_CHECKBOX": "Checkbox"
"CUSTOM_ATTRIBUTE_CHECKBOX": "Checkbox",
"CREATED_AT": "Created At",
"LAST_ACTIVITY": "Last Activity"
},
"GROUPS": {
"STANDARD_FILTERS": "Standard Filters",

17
app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
View File

@@ -11,7 +11,12 @@
v-model="appliedFilters[i]"
:filter-groups="filterGroups"
:grouped-filters="true"
:input-type="getInputType(appliedFilters[i].attribute_key)"
:input-type="
getInputType(
appliedFilters[i].attribute_key,
appliedFilters[i].filter_operator
)
"
:operators="getOperators(appliedFilters[i].attribute_key)"
:dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
:show-query-operator="i !== appliedFilters.length - 1"
@@ -86,6 +91,12 @@ export default {
$each: {
values: {
required,
ensureBetween0to999(value, prop) {
if (prop.filter_operator === 'days_before') {
return parseInt(value, 10) > 0 && parseInt(value, 10) < 999;
}
return true;
},
},
},
},
@@ -161,7 +172,9 @@ export default {
const type = this.filterTypes.find(filter => filter.attributeKey === key);
return type.attributeModel;
},
getInputType(key) {
getInputType(key, operator) {
if (key === 'created_at' || key === 'last_activity_at')
if (operator === 'days_before') return 'plain_text';
const type = this.filterTypes.find(filter => filter.attributeKey === key);
return type.inputType;
},

33
app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js
View File

@@ -1,6 +1,7 @@
import {
OPERATOR_TYPES_1,
OPERATOR_TYPES_3,
OPERATOR_TYPES_5,
} from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
const filterTypes = [
{
@@ -51,6 +52,30 @@ const filterTypes = [
filterOperators: OPERATOR_TYPES_3,
attribute_type: 'standard',
},
{
attributeKey: 'created_at',
attributeI18nKey: 'CREATED_AT',
inputType: 'date',
dataType: 'text',
filterOperators: OPERATOR_TYPES_5,
attributeModel: 'standard',
},
{
attributeKey: 'last_activity_at',
attributeI18nKey: 'LAST_ACTIVITY',
inputType: 'date',
dataType: 'text',
filterOperators: OPERATOR_TYPES_5,
attributeModel: 'standard',
},
{
attributeKey: 'referer',
attributeI18nKey: 'REFERER_LINK',
inputType: 'plain_text',
dataType: 'text',
filterOperators: OPERATOR_TYPES_5,
attributeModel: 'standard',
},
];
export const filterAttributeGroups = [
@@ -82,6 +107,14 @@ export const filterAttributeGroups = [
key: 'city',
i18nKey: 'CITY',
},
{
key: 'created_at',
i18nKey: 'CREATED_AT',
},
{
key: 'last_activity_at',
i18nKey: 'LAST_ACTIVITY',
},
],
},
];