feat: Add Advanced Conversation Filters (#3239)
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com> Co-authored-by: Pranav Raj S <pranav@chatwoot.com> Co-authored-by: Tejaswini <tejaswini@chatwoot.com>
This commit is contained in:
Fayaz Ahmed
@@ -1,14 +1,39 @@
|
||||
<template>
|
||||
l<template>
|
||||
<div class="conversations-list-wrap">
|
||||
<slot></slot>
|
||||
<div class="chat-list__top">
|
||||
<div class="chat-list__top" :class="{ filter__applied: hasAppliedFilters }">
|
||||
<h1 class="page-title text-truncate" :title="pageTitle">
|
||||
{{ pageTitle }}
|
||||
</h1>
|
||||
<chat-filter @statusFilterChange="updateStatusType" />
|
||||
|
||||
<div class="filter--actions">
|
||||
<chat-filter
|
||||
v-if="!hasAppliedFilters"
|
||||
@statusFilterChange="updateStatusType"
|
||||
/>
|
||||
<woot-button
|
||||
v-else
|
||||
variant="clear"
|
||||
color-scheme="danger"
|
||||
class="btn-clear-filters"
|
||||
@click="resetAndFetchData"
|
||||
>
|
||||
{{ $t('FILTER.CLEAR_BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
<woot-button
|
||||
v-tooltip.top-end="$t('FILTER.TOOLTIP_LABEL')"
|
||||
variant="clear"
|
||||
color-scheme="secondary"
|
||||
class="btn-filter"
|
||||
@click="onToggleAdvanceFiltersModal"
|
||||
>
|
||||
<i class="icon ion-ios-settings-strong" />
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<chat-type-tabs
|
||||
v-if="!hasAppliedFilters"
|
||||
:items="assigneeTabItems"
|
||||
:active-tab="activeAssigneeTab"
|
||||
class="tab--chat-type"
|
||||
@@ -37,7 +62,7 @@
|
||||
v-if="!hasCurrentPageEndReached && !chatListLoading"
|
||||
variant="clear"
|
||||
size="expanded"
|
||||
@click="fetchConversations"
|
||||
@click="loadMoreConversations"
|
||||
>
|
||||
{{ $t('CHAT_LIST.LOAD_MORE_CONVERSATIONS') }}
|
||||
</woot-button>
|
||||
@@ -53,6 +78,17 @@
|
||||
{{ $t('CHAT_LIST.EOF') }}
|
||||
</p>
|
||||
</div>
|
||||
<woot-modal
|
||||
:show.sync="showAdvancedFilters"
|
||||
:on-close="onToggleAdvanceFiltersModal"
|
||||
>
|
||||
<conversation-advanced-filter
|
||||
v-if="showAdvancedFilters"
|
||||
:filter-types="advancedFilterTypes"
|
||||
:on-close="onToggleAdvanceFiltersModal"
|
||||
@applyFilter="onApplyFilter"
|
||||
/>
|
||||
</woot-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -60,12 +96,16 @@
|
||||
import { mapGetters } from 'vuex';
|
||||
|
||||
import ChatFilter from './widgets/conversation/ChatFilter';
|
||||
import ConversationAdvancedFilter from './widgets/conversation/ConversationAdvancedFilter';
|
||||
import ChatTypeTabs from './widgets/ChatTypeTabs';
|
||||
import ConversationCard from './widgets/conversation/ConversationCard';
|
||||
import timeMixin from '../mixins/time';
|
||||
import eventListenerMixins from 'shared/mixins/eventListenerMixins';
|
||||
import conversationMixin from '../mixins/conversations';
|
||||
import wootConstants from '../constants';
|
||||
import advancedFilterTypes from './widgets/conversation/advancedFilterItems';
|
||||
import filterQueryGenerator from '../helper/filterQueryGenerator.js';
|
||||
|
||||
import {
|
||||
hasPressedAltAndJKey,
|
||||
hasPressedAltAndKKey,
|
||||
@@ -76,6 +116,7 @@ export default {
|
||||
ChatTypeTabs,
|
||||
ConversationCard,
|
||||
ChatFilter,
|
||||
ConversationAdvancedFilter,
|
||||
},
|
||||
mixins: [timeMixin, conversationMixin, eventListenerMixins],
|
||||
props: {
|
||||
@@ -96,6 +137,11 @@ export default {
|
||||
return {
|
||||
activeAssigneeTab: wootConstants.ASSIGNEE_TYPE.ME,
|
||||
activeStatus: wootConstants.STATUS_TYPE.OPEN,
|
||||
showAdvancedFilters: false,
|
||||
advancedFilterTypes: advancedFilterTypes.map(filter => ({
|
||||
...filter,
|
||||
attributeName: this.$t(`FILTER.ATTRIBUTES.${filter.attributeI18nKey}`),
|
||||
})),
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@@ -109,7 +155,11 @@ export default {
|
||||
currentUserID: 'getCurrentUserID',
|
||||
activeInbox: 'getSelectedInbox',
|
||||
conversationStats: 'conversationStats/getStats',
|
||||
appliedFilters: 'getAppliedFilters',
|
||||
}),
|
||||
hasAppliedFilters() {
|
||||
return this.appliedFilters.length;
|
||||
},
|
||||
assigneeTabItems() {
|
||||
return this.$t('CHAT_LIST.ASSIGNEE_TYPE_TABS').map(item => {
|
||||
const count = this.conversationStats[item.COUNT_KEY] || 0;
|
||||
@@ -131,9 +181,17 @@ export default {
|
||||
this.activeAssigneeTab
|
||||
);
|
||||
},
|
||||
currentPageFilterKey() {
|
||||
return this.hasAppliedFilters ? 'appliedFilters' : this.activeAssigneeTab;
|
||||
},
|
||||
currentFiltersPage() {
|
||||
return this.$store.getters['conversationPage/getCurrentPageFilter'](
|
||||
this.currentPageFilterKey
|
||||
);
|
||||
},
|
||||
hasCurrentPageEndReached() {
|
||||
return this.$store.getters['conversationPage/getHasEndReached'](
|
||||
this.activeAssigneeTab
|
||||
this.currentPageFilterKey
|
||||
);
|
||||
},
|
||||
conversationFilters() {
|
||||
@@ -160,13 +218,17 @@ export default {
|
||||
},
|
||||
conversationList() {
|
||||
let conversationList = [];
|
||||
const filters = this.conversationFilters;
|
||||
if (this.activeAssigneeTab === 'me') {
|
||||
conversationList = [...this.mineChatsList(filters)];
|
||||
} else if (this.activeAssigneeTab === 'unassigned') {
|
||||
conversationList = [...this.unAssignedChatsList(filters)];
|
||||
if (!this.hasAppliedFilters) {
|
||||
const filters = this.conversationFilters;
|
||||
if (this.activeAssigneeTab === 'me') {
|
||||
conversationList = [...this.mineChatsList(filters)];
|
||||
} else if (this.activeAssigneeTab === 'unassigned') {
|
||||
conversationList = [...this.unAssignedChatsList(filters)];
|
||||
} else {
|
||||
conversationList = [...this.allChatList(filters)];
|
||||
}
|
||||
} else {
|
||||
conversationList = [...this.allChatList(filters)];
|
||||
conversationList = [...this.chatLists];
|
||||
}
|
||||
|
||||
return conversationList;
|
||||
@@ -198,6 +260,17 @@ export default {
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
onApplyFilter(payload) {
|
||||
if (this.$route.name !== 'home') {
|
||||
this.$router.push({ name: 'home' });
|
||||
}
|
||||
this.$store.dispatch('conversationPage/reset');
|
||||
this.$store.dispatch('emptyAllConversations');
|
||||
this.fetchFilteredConversations(payload);
|
||||
},
|
||||
onToggleAdvanceFiltersModal() {
|
||||
this.showAdvancedFilters = !this.showAdvancedFilters;
|
||||
},
|
||||
getKeyboardListenerParams() {
|
||||
const allConversations = this.$refs.activeConversation.querySelectorAll(
|
||||
'div.conversations-list div.conversation'
|
||||
@@ -245,6 +318,7 @@ export default {
|
||||
resetAndFetchData() {
|
||||
this.$store.dispatch('conversationPage/reset');
|
||||
this.$store.dispatch('emptyAllConversations');
|
||||
this.$store.dispatch('clearConversationFilters');
|
||||
this.fetchConversations();
|
||||
},
|
||||
fetchConversations() {
|
||||
@@ -252,6 +326,23 @@ export default {
|
||||
.dispatch('fetchAllConversations', this.conversationFilters)
|
||||
.then(() => this.$emit('conversation-load'));
|
||||
},
|
||||
loadMoreConversations() {
|
||||
if (!this.hasAppliedFilters) {
|
||||
this.fetchConversations();
|
||||
} else {
|
||||
this.fetchFilteredConversations(this.appliedFilters);
|
||||
}
|
||||
},
|
||||
fetchFilteredConversations(payload) {
|
||||
let page = this.currentFiltersPage + 1;
|
||||
this.$store
|
||||
.dispatch('fetchFilteredConversations', {
|
||||
queryData: filterQueryGenerator(payload),
|
||||
page,
|
||||
})
|
||||
.then(() => this.$emit('conversation-load'));
|
||||
this.showAdvancedFilters = false;
|
||||
},
|
||||
updateAssigneeTab(selectedTab) {
|
||||
if (this.activeAssigneeTab !== selectedTab) {
|
||||
bus.$emit('clearSearchInput');
|
||||
@@ -273,6 +364,7 @@ export default {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '~dashboard/assets/scss/woot';
|
||||
|
||||
.spinner {
|
||||
margin-top: var(--space-normal);
|
||||
margin-bottom: var(--space-normal);
|
||||
@@ -295,4 +387,23 @@ export default {
|
||||
flex-basis: 46rem;
|
||||
}
|
||||
}
|
||||
.filter--actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.btn-filter {
|
||||
cursor: pointer;
|
||||
i {
|
||||
font-size: var(--font-size-two);
|
||||
}
|
||||
}
|
||||
.btn-clear-filters {
|
||||
color: var(--r-500);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.filter__applied {
|
||||
padding: var(--space-slab) 0 !important;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,284 @@
|
||||
<template>
|
||||
<div class="column">
|
||||
<woot-modal-header :header-title="$t('FILTER.TITLE')">
|
||||
<p>{{ $t('FILTER.SUBTITLE') }}</p>
|
||||
</woot-modal-header>
|
||||
<div class="row modal-content">
|
||||
<div class="medium-12 columns">
|
||||
<filter-input-box
|
||||
v-for="(filter, i) in appliedFilters"
|
||||
:key="i"
|
||||
v-model="appliedFilters[i]"
|
||||
:filter-attributes="filterAttributes"
|
||||
:input-type="getInputType(appliedFilters[i].attribute_key)"
|
||||
:operators="getOperators(appliedFilters[i].attribute_key)"
|
||||
:dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
|
||||
:show-query-operator="i !== appliedFilters.length - 1"
|
||||
:show-user-input="showUserInput(appliedFilters[i].filter_operator)"
|
||||
:v="$v.appliedFilters.$each[i]"
|
||||
@resetFilter="resetFilter(i, appliedFilters[i])"
|
||||
@removeFilter="removeFilter(i)"
|
||||
/>
|
||||
<div class="filter-actions">
|
||||
<button class="append-filter-btn" @click="appendNewFilter">
|
||||
<i class="icon ion-plus-circled margin-right-small" />
|
||||
<span>{{ $t('FILTER.ADD_NEW_FILTER') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-footer justify-content-end w-full">
|
||||
<woot-button class="button clear" @click.prevent="onClose">
|
||||
{{ $t('FILTER.CANCEL_BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
<woot-button @click="submitFilterQuery">
|
||||
{{ $t('FILTER.SUBMIT_BUTTON_LABEL') }}
|
||||
</woot-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import alertMixin from 'shared/mixins/alertMixin';
|
||||
import { required, requiredIf } from 'vuelidate/lib/validators';
|
||||
import filterInputBox from './components/FilterInput.vue';
|
||||
import languages from './advancedFilterItems/languages';
|
||||
import countries from './advancedFilterItems/countries';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
filterInputBox,
|
||||
},
|
||||
mixins: [alertMixin],
|
||||
props: {
|
||||
onClose: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
filterTypes: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
validations: {
|
||||
appliedFilters: {
|
||||
required,
|
||||
$each: {
|
||||
values: {
|
||||
required: requiredIf(prop => {
|
||||
let userInputRequired = true;
|
||||
if (
|
||||
prop.filter_operator !== 'is_present' ||
|
||||
prop.filter_operator !== 'is_not_present'
|
||||
)
|
||||
userInputRequired = false;
|
||||
return userInputRequired;
|
||||
}),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
appliedFilters: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
filterAttributes() {
|
||||
return this.filterTypes.map(type => {
|
||||
return {
|
||||
key: type.attributeKey,
|
||||
name: type.attributeName,
|
||||
attributeI18nKey: type.attributeI18nKey,
|
||||
};
|
||||
});
|
||||
},
|
||||
getAppliedFilters() {
|
||||
return this.$store.getters.getAppliedFilters;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('campaigns/get');
|
||||
if (this.getAppliedFilters.length) {
|
||||
this.appliedFilters = this.getAppliedFilters;
|
||||
} else {
|
||||
this.appliedFilters.push({
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
values: '',
|
||||
query_operator: 'and',
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getInputType(key) {
|
||||
const type = this.filterTypes.find(filter => filter.attributeKey === key);
|
||||
return type.inputType;
|
||||
},
|
||||
getOperators(key) {
|
||||
const type = this.filterTypes.find(filter => filter.attributeKey === key);
|
||||
return type.filterOperators;
|
||||
},
|
||||
// eslint-disable-next-line consistent-return
|
||||
getDropdownValues(type) {
|
||||
const statusFilters = this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS');
|
||||
switch (type) {
|
||||
case 'status':
|
||||
return [
|
||||
...Object.keys(statusFilters).map(status => {
|
||||
return {
|
||||
id: status,
|
||||
name: statusFilters[status].TEXT,
|
||||
};
|
||||
}),
|
||||
{
|
||||
id: 'all',
|
||||
name: this.$t('CHAT_LIST.FILTER_ALL'),
|
||||
},
|
||||
];
|
||||
case 'assignee_id':
|
||||
return this.$store.getters['agents/getAgents'];
|
||||
case 'contact':
|
||||
return this.$store.getters['contacts/getContacts'];
|
||||
case 'inbox_id':
|
||||
return this.$store.getters['inboxes/getInboxes'];
|
||||
case 'team_id':
|
||||
return this.$store.getters['teams/getTeams'];
|
||||
case 'campaign_id':
|
||||
return this.$store.getters['campaigns/getAllCampaigns'].map(i => {
|
||||
return {
|
||||
id: i.id,
|
||||
name: i.title,
|
||||
};
|
||||
});
|
||||
case 'labels':
|
||||
return this.$store.getters['labels/getLabels'].map(i => {
|
||||
return {
|
||||
id: i.id,
|
||||
name: i.title,
|
||||
};
|
||||
});
|
||||
case 'browser_language':
|
||||
return languages;
|
||||
case 'country_code':
|
||||
return countries;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
},
|
||||
appendNewFilter() {
|
||||
this.appliedFilters.push({
|
||||
attribute_key: 'status',
|
||||
filter_operator: 'equal_to',
|
||||
values: '',
|
||||
query_operator: 'and',
|
||||
});
|
||||
},
|
||||
removeFilter(index) {
|
||||
if (this.appliedFilters.length <= 1) {
|
||||
this.showAlert(this.$t('FILTER.FILTER_DELETE_ERROR'));
|
||||
} else {
|
||||
this.appliedFilters.splice(index, 1);
|
||||
}
|
||||
},
|
||||
submitFilterQuery() {
|
||||
this.$v.$touch();
|
||||
if (this.$v.$invalid) return;
|
||||
this.appliedFilters[this.appliedFilters.length - 1].query_operator = null;
|
||||
this.$store.dispatch(
|
||||
'setConversationFilters',
|
||||
JSON.parse(JSON.stringify(this.appliedFilters))
|
||||
);
|
||||
this.$emit('applyFilter', this.appliedFilters);
|
||||
},
|
||||
resetFilter(index, currentFilter) {
|
||||
this.appliedFilters[index].filter_operator = this.filterTypes.find(
|
||||
filter => filter.attributeKey === currentFilter.attribute_key
|
||||
).filterOperators[0].value;
|
||||
this.appliedFilters[index].values = '';
|
||||
},
|
||||
showUserInput(operatorType) {
|
||||
if (operatorType === 'is_present' || operatorType === 'is_not_present')
|
||||
return false;
|
||||
return true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.filter-modal-content {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--space-half);
|
||||
padding: var(--space-one);
|
||||
}
|
||||
.filter--attributes {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--space-one);
|
||||
}
|
||||
.filter--attribute_clearbtn {
|
||||
font-size: var(--space-two);
|
||||
margin-left: var(--space-one);
|
||||
cursor: pointer;
|
||||
}
|
||||
.filter--attributes_select {
|
||||
margin-bottom: var(--space-zero) !important;
|
||||
}
|
||||
|
||||
.filter--values_select {
|
||||
margin-bottom: var(--space-zero) !important;
|
||||
}
|
||||
|
||||
.padding-right-small {
|
||||
padding-right: var(--space-one);
|
||||
}
|
||||
.margin-right-small {
|
||||
margin-right: var(--space-three-fourths);
|
||||
}
|
||||
.append-filter-btn {
|
||||
width: 100%;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--space-one-fourths);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-woot);
|
||||
font-size: var(--font-size-one-and-half);
|
||||
padding: var(--space-one);
|
||||
height: var(----space-medium);
|
||||
cursor: pointer;
|
||||
}
|
||||
.filter-actions {
|
||||
margin: var(--space-two) var(--space-zero) var(--space-one) var(--space-zero);
|
||||
}
|
||||
.filter--attributes_input {
|
||||
margin-bottom: var(--space-zero) !important;
|
||||
}
|
||||
.filter--query_operator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin: var(--space-one) var(--space-zero);
|
||||
}
|
||||
.filter--query_operator_line {
|
||||
position: absolute;
|
||||
z-index: var(--z-index-low);
|
||||
width: 100%;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.filter--query_operator_container {
|
||||
position: relative;
|
||||
z-index: var(--z-index-twenty);
|
||||
margin: var(--space-zero);
|
||||
}
|
||||
.filter--query_operator_select {
|
||||
width: 100%;
|
||||
margin-bottom: var(--space-zero) !important;
|
||||
border: none;
|
||||
padding: var(--space-zero) var(--space-three) var(--space-zero)
|
||||
var(--space-two);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,257 @@
|
||||
const countries = [
|
||||
{ name: 'Afghanistan', id: 'AF' },
|
||||
{ name: 'Åland Islands', id: 'AX' },
|
||||
{ name: 'Albania', id: 'AL' },
|
||||
{ name: 'Algeria', id: 'DZ' },
|
||||
{ name: 'American Samoa', id: 'AS' },
|
||||
{ name: 'Andorra', id: 'AD' },
|
||||
{ name: 'Angola', id: 'AO' },
|
||||
{ name: 'Anguilla', id: 'AI' },
|
||||
{ name: 'Antarctica', id: 'AQ' },
|
||||
{ name: 'Antigua and Barbuda', id: 'AG' },
|
||||
{ name: 'Argentina', id: 'AR' },
|
||||
{ name: 'Armenia', id: 'AM' },
|
||||
{ name: 'Aruba', id: 'AW' },
|
||||
{ name: 'Australia', id: 'AU' },
|
||||
{ name: 'Austria', id: 'AT' },
|
||||
{ name: 'Azerbaijan', id: 'AZ' },
|
||||
{ name: 'Bahamas', id: 'BS' },
|
||||
{ name: 'Bahrain', id: 'BH' },
|
||||
{ name: 'Bangladesh', id: 'BD' },
|
||||
{ name: 'Barbados', id: 'BB' },
|
||||
{ name: 'Belarus', id: 'BY' },
|
||||
{ name: 'Belgium', id: 'BE' },
|
||||
{ name: 'Belize', id: 'BZ' },
|
||||
{ name: 'Benin', id: 'BJ' },
|
||||
{ name: 'Bermuda', id: 'BM' },
|
||||
{ name: 'Bhutan', id: 'BT' },
|
||||
{ name: 'Bolivia (Plurinational State of)', id: 'BO' },
|
||||
{ name: 'Bonaire, Sint Eustatius and Saba', id: 'BQ' },
|
||||
{ name: 'Bosnia and Herzegovina', id: 'BA' },
|
||||
{ name: 'Botswana', id: 'BW' },
|
||||
{ name: 'Bouvet Island', id: 'BV' },
|
||||
{ name: 'Brazil', id: 'BR' },
|
||||
{ name: 'British Indian Ocean Territory', id: 'IO' },
|
||||
{ name: 'United States Minor Outlying Islands', id: 'UM' },
|
||||
{ name: 'Virgin Islands (British)', id: 'VG' },
|
||||
{ name: 'Virgin Islands (U.S.)', id: 'VI' },
|
||||
{ name: 'Brunei Darussalam', id: 'BN' },
|
||||
{ name: 'Bulgaria', id: 'BG' },
|
||||
{ name: 'Burkina Faso', id: 'BF' },
|
||||
{ name: 'Burundi', id: 'BI' },
|
||||
{ name: 'Cambodia', id: 'KH' },
|
||||
{ name: 'Cameroon', id: 'CM' },
|
||||
{ name: 'Canada', id: 'CA' },
|
||||
{ name: 'Cabo Verde', id: 'CV' },
|
||||
{ name: 'Cayman Islands', id: 'KY' },
|
||||
{ name: 'Central African Republic', id: 'CF' },
|
||||
{ name: 'Chad', id: 'TD' },
|
||||
{ name: 'Chile', id: 'CL' },
|
||||
{ name: 'China', id: 'CN' },
|
||||
{ name: 'Christmas Island', id: 'CX' },
|
||||
{ name: 'Cocos (Keeling) Islands', id: 'CC' },
|
||||
{ name: 'Colombia', id: 'CO' },
|
||||
{ name: 'Comoros', id: 'KM' },
|
||||
{ name: 'Congo', id: 'CG' },
|
||||
{ name: 'Congo (Democratic Republic of the)', id: 'CD' },
|
||||
{ name: 'Cook Islands', id: 'CK' },
|
||||
{ name: 'Costa Rica', id: 'CR' },
|
||||
{ name: 'Croatia', id: 'HR' },
|
||||
{ name: 'Cuba', id: 'CU' },
|
||||
{ name: 'Curaçao', id: 'CW' },
|
||||
{ name: 'Cyprus', id: 'CY' },
|
||||
{ name: 'Czech Republic', id: 'CZ' },
|
||||
{ name: 'Denmark', id: 'DK' },
|
||||
{ name: 'Djibouti', id: 'DJ' },
|
||||
{ name: 'Dominica', id: 'DM' },
|
||||
{ name: 'Dominican Republic', id: 'DO' },
|
||||
{ name: 'Ecuador', id: 'EC' },
|
||||
{ name: 'Egypt', id: 'EG' },
|
||||
{ name: 'El Salvador', id: 'SV' },
|
||||
{ name: 'Equatorial Guinea', id: 'GQ' },
|
||||
{ name: 'Eritrea', id: 'ER' },
|
||||
{ name: 'Estonia', id: 'EE' },
|
||||
{ name: 'Ethiopia', id: 'ET' },
|
||||
{ name: 'Falkland Islands (Malvinas)', id: 'FK' },
|
||||
{ name: 'Faroe Islands', id: 'FO' },
|
||||
{ name: 'Fiji', id: 'FJ' },
|
||||
{ name: 'Finland', id: 'FI' },
|
||||
{ name: 'France', id: 'FR' },
|
||||
{ name: 'French Guiana', id: 'GF' },
|
||||
{ name: 'French Polynesia', id: 'PF' },
|
||||
{ name: 'French Southern Territories', id: 'TF' },
|
||||
{ name: 'Gabon', id: 'GA' },
|
||||
{ name: 'Gambia', id: 'GM' },
|
||||
{ name: 'Georgia', id: 'GE' },
|
||||
{ name: 'Germany', id: 'DE' },
|
||||
{ name: 'Ghana', id: 'GH' },
|
||||
{ name: 'Gibraltar', id: 'GI' },
|
||||
{ name: 'Greece', id: 'GR' },
|
||||
{ name: 'Greenland', id: 'GL' },
|
||||
{ name: 'Grenada', id: 'GD' },
|
||||
{ name: 'Guadeloupe', id: 'GP' },
|
||||
{ name: 'Guam', id: 'GU' },
|
||||
{ name: 'Guatemala', id: 'GT' },
|
||||
{ name: 'Guernsey', id: 'GG' },
|
||||
{ name: 'Guinea', id: 'GN' },
|
||||
{ name: 'Guinea-Bissau', id: 'GW' },
|
||||
{ name: 'Guyana', id: 'GY' },
|
||||
{ name: 'Haiti', id: 'HT' },
|
||||
{ name: 'Heard Island and McDonald Islands', id: 'HM' },
|
||||
{ name: 'Vatican City', id: 'VA' },
|
||||
{ name: 'Honduras', id: 'HN' },
|
||||
{ name: 'Hungary', id: 'HU' },
|
||||
{ name: 'Hong Kong', id: 'HK' },
|
||||
{ name: 'Iceland', id: 'IS' },
|
||||
{ name: 'India', id: 'IN' },
|
||||
{ name: 'Indonesia', id: 'ID' },
|
||||
{ name: 'Ivory Coast', id: 'CI' },
|
||||
{ name: 'Iran (Islamic Republic of)', id: 'IR' },
|
||||
{ name: 'Iraq', id: 'IQ' },
|
||||
{ name: 'Ireland', id: 'IE' },
|
||||
{ name: 'Isle of Man', id: 'IM' },
|
||||
{ name: 'Israel', id: 'IL' },
|
||||
{ name: 'Italy', id: 'IT' },
|
||||
{ name: 'Jamaica', id: 'JM' },
|
||||
{ name: 'Japan', id: 'JP' },
|
||||
{ name: 'Jersey', id: 'JE' },
|
||||
{ name: 'Jordan', id: 'JO' },
|
||||
{ name: 'Kazakhstan', id: 'KZ' },
|
||||
{ name: 'Kenya', id: 'KE' },
|
||||
{ name: 'Kiribati', id: 'KI' },
|
||||
{ name: 'Kuwait', id: 'KW' },
|
||||
{ name: 'Kyrgyzstan', id: 'KG' },
|
||||
{ name: "Lao People's Democratic Republic", id: 'LA' },
|
||||
{ name: 'Latvia', id: 'LV' },
|
||||
{ name: 'Lebanon', id: 'LB' },
|
||||
{ name: 'Lesotho', id: 'LS' },
|
||||
{ name: 'Liberia', id: 'LR' },
|
||||
{ name: 'Libya', id: 'LY' },
|
||||
{ name: 'Liechtenstein', id: 'LI' },
|
||||
{ name: 'Lithuania', id: 'LT' },
|
||||
{ name: 'Luxembourg', id: 'LU' },
|
||||
{ name: 'Macao', id: 'MO' },
|
||||
{ name: 'North Macedonia', id: 'MK' },
|
||||
{ name: 'Madagascar', id: 'MG' },
|
||||
{ name: 'Malawi', id: 'MW' },
|
||||
{ name: 'Malaysia', id: 'MY' },
|
||||
{ name: 'Maldives', id: 'MV' },
|
||||
{ name: 'Mali', id: 'ML' },
|
||||
{ name: 'Malta', id: 'MT' },
|
||||
{ name: 'Marshall Islands', id: 'MH' },
|
||||
{ name: 'Martinique', id: 'MQ' },
|
||||
{ name: 'Mauritania', id: 'MR' },
|
||||
{ name: 'Mauritius', id: 'MU' },
|
||||
{ name: 'Mayotte', id: 'YT' },
|
||||
{ name: 'Mexico', id: 'MX' },
|
||||
{ name: 'Micronesia (Federated States of)', id: 'FM' },
|
||||
{ name: 'Moldova (Republic of)', id: 'MD' },
|
||||
{ name: 'Monaco', id: 'MC' },
|
||||
{ name: 'Mongolia', id: 'MN' },
|
||||
{ name: 'Montenegro', id: 'ME' },
|
||||
{ name: 'Montserrat', id: 'MS' },
|
||||
{ name: 'Morocco', id: 'MA' },
|
||||
{ name: 'Mozambique', id: 'MZ' },
|
||||
{ name: 'Myanmar', id: 'MM' },
|
||||
{ name: 'Namibia', id: 'NA' },
|
||||
{ name: 'Nauru', id: 'NR' },
|
||||
{ name: 'Nepal', id: 'NP' },
|
||||
{ name: 'Netherlands', id: 'NL' },
|
||||
{ name: 'New Caledonia', id: 'NC' },
|
||||
{ name: 'New Zealand', id: 'NZ' },
|
||||
{ name: 'Nicaragua', id: 'NI' },
|
||||
{ name: 'Niger', id: 'NE' },
|
||||
{ name: 'Nigeria', id: 'NG' },
|
||||
{ name: 'Niue', id: 'NU' },
|
||||
{ name: 'Norfolk Island', id: 'NF' },
|
||||
{ name: "Korea (Democratic People's Republic of)", id: 'KP' },
|
||||
{ name: 'Northern Mariana Islands', id: 'MP' },
|
||||
{ name: 'Norway', id: 'NO' },
|
||||
{ name: 'Oman', id: 'OM' },
|
||||
{ name: 'Pakistan', id: 'PK' },
|
||||
{ name: 'Palau', id: 'PW' },
|
||||
{ name: 'Palestine, State of', id: 'PS' },
|
||||
{ name: 'Panama', id: 'PA' },
|
||||
{ name: 'Papua New Guinea', id: 'PG' },
|
||||
{ name: 'Paraguay', id: 'PY' },
|
||||
{ name: 'Peru', id: 'PE' },
|
||||
{ name: 'Philippines', id: 'PH' },
|
||||
{ name: 'Pitcairn', id: 'PN' },
|
||||
{ name: 'Poland', id: 'PL' },
|
||||
{ name: 'Portugal', id: 'PT' },
|
||||
{ name: 'Puerto Rico', id: 'PR' },
|
||||
{ name: 'Qatar', id: 'QA' },
|
||||
{ name: 'Republic of Kosovo', id: 'XK' },
|
||||
{ name: 'Réunion', id: 'RE' },
|
||||
{ name: 'Romania', id: 'RO' },
|
||||
{ name: 'Russian Federation', id: 'RU' },
|
||||
{ name: 'Rwanda', id: 'RW' },
|
||||
{ name: 'Saint Barthélemy', id: 'BL' },
|
||||
{ name: 'Saint Helena, Ascension and Tristan da Cunha', id: 'SH' },
|
||||
{ name: 'Saint Kitts and Nevis', id: 'KN' },
|
||||
{ name: 'Saint Lucia', id: 'LC' },
|
||||
{ name: 'Saint Martin (French part)', id: 'MF' },
|
||||
{ name: 'Saint Pierre and Miquelon', id: 'PM' },
|
||||
{ name: 'Saint Vincent and the Grenadines', id: 'VC' },
|
||||
{ name: 'Samoa', id: 'WS' },
|
||||
{ name: 'San Marino', id: 'SM' },
|
||||
{ name: 'Sao Tome and Principe', id: 'ST' },
|
||||
{ name: 'Saudi Arabia', id: 'SA' },
|
||||
{ name: 'Senegal', id: 'SN' },
|
||||
{ name: 'Serbia', id: 'RS' },
|
||||
{ name: 'Seychelles', id: 'SC' },
|
||||
{ name: 'Sierra Leone', id: 'SL' },
|
||||
{ name: 'Singapore', id: 'SG' },
|
||||
{ name: 'Sint Maarten (Dutch part)', id: 'SX' },
|
||||
{ name: 'Slovakia', id: 'SK' },
|
||||
{ name: 'Slovenia', id: 'SI' },
|
||||
{ name: 'Solomon Islands', id: 'SB' },
|
||||
{ name: 'Somalia', id: 'SO' },
|
||||
{ name: 'South Africa', id: 'ZA' },
|
||||
{ name: 'South Georgia and the South Sandwich Islands', id: 'GS' },
|
||||
{ name: 'Korea (Republic of)', id: 'KR' },
|
||||
{ name: 'Spain', id: 'ES' },
|
||||
{ name: 'Sri Lanka', id: 'LK' },
|
||||
{ name: 'Sudan', id: 'SD' },
|
||||
{ name: 'South Sudan', id: 'SS' },
|
||||
{ name: 'Suriname', id: 'SR' },
|
||||
{ name: 'Svalbard and Jan Mayen', id: 'SJ' },
|
||||
{ name: 'Swaziland', id: 'SZ' },
|
||||
{ name: 'Sweden', id: 'SE' },
|
||||
{ name: 'Switzerland', id: 'CH' },
|
||||
{ name: 'Syrian Arab Republic', id: 'SY' },
|
||||
{ name: 'Taiwan', id: 'TW' },
|
||||
{ name: 'Tajikistan', id: 'TJ' },
|
||||
{ name: 'Tanzania, United Republic of', id: 'TZ' },
|
||||
{ name: 'Thailand', id: 'TH' },
|
||||
{ name: 'Timor-Leste', id: 'TL' },
|
||||
{ name: 'Togo', id: 'TG' },
|
||||
{ name: 'Tokelau', id: 'TK' },
|
||||
{ name: 'Tonga', id: 'TO' },
|
||||
{ name: 'Trinidad and Tobago', id: 'TT' },
|
||||
{ name: 'Tunisia', id: 'TN' },
|
||||
{ name: 'Turkey', id: 'TR' },
|
||||
{ name: 'Turkmenistan', id: 'TM' },
|
||||
{ name: 'Turks and Caicos Islands', id: 'TC' },
|
||||
{ name: 'Tuvalu', id: 'TV' },
|
||||
{ name: 'Uganda', id: 'UG' },
|
||||
{ name: 'Ukraine', id: 'UA' },
|
||||
{ name: 'United Arab Emirates', id: 'AE' },
|
||||
{
|
||||
name: 'United Kingdom of Great Britain and Northern Ireland',
|
||||
id: 'GB',
|
||||
},
|
||||
{ name: 'United States of America', id: 'US' },
|
||||
{ name: 'Uruguay', id: 'UY' },
|
||||
{ name: 'Uzbekistan', id: 'UZ' },
|
||||
{ name: 'Vanuatu', id: 'VU' },
|
||||
{ name: 'Venezuela (Bolivarian Republic of)', id: 'VE' },
|
||||
{ name: 'Vietnam', id: 'VN' },
|
||||
{ name: 'Wallis and Futuna', id: 'WF' },
|
||||
{ name: 'Western Sahara', id: 'EH' },
|
||||
{ name: 'Yemen', id: 'YE' },
|
||||
{ name: 'Zambia', id: 'ZM' },
|
||||
{ name: 'Zimbabwe', id: 'ZW' },
|
||||
];
|
||||
|
||||
export default countries;
|
||||
@@ -0,0 +1,230 @@
|
||||
const filterTypes = [
|
||||
{
|
||||
attributeKey: 'status',
|
||||
attributeI18nKey: 'STATUS',
|
||||
inputType: 'multi_select',
|
||||
dataType: 'text',
|
||||
filterOperators: [
|
||||
{
|
||||
value: 'equal_to',
|
||||
label: 'Equal to',
|
||||
},
|
||||
{
|
||||
value: 'not_equal_to',
|
||||
label: 'Not equal to',
|
||||
},
|
||||
],
|
||||
attribute_type: 'standard',
|
||||
},
|
||||
{
|
||||
attributeKey: 'assignee_id',
|
||||
attributeI18nKey: 'ASSIGNEE_NAME',
|
||||
inputType: 'search_select',
|
||||
dataType: 'text',
|
||||
filterOperators: [
|
||||
{
|
||||
value: 'equal_to',
|
||||
label: 'Equal to',
|
||||
},
|
||||
{
|
||||
value: 'not_equal_to',
|
||||
label: 'Not equal to',
|
||||
},
|
||||
{
|
||||
value: 'is_present',
|
||||
label: 'Is present',
|
||||
},
|
||||
{
|
||||
value: 'is_not_present',
|
||||
label: 'Is not present',
|
||||
},
|
||||
],
|
||||
attribute_type: 'standard',
|
||||
},
|
||||
{
|
||||
attributeKey: 'inbox_id',
|
||||
attributeI18nKey: 'INBOX_NAME',
|
||||
inputType: 'search_select',
|
||||
dataType: 'text',
|
||||
filterOperators: [
|
||||
{
|
||||
value: 'equal_to',
|
||||
label: 'Equal to',
|
||||
},
|
||||
{
|
||||
value: 'not_equal_to',
|
||||
label: 'Not equal to',
|
||||
},
|
||||
{
|
||||
value: 'is_present',
|
||||
label: 'Is present',
|
||||
},
|
||||
{
|
||||
value: 'is_not_present',
|
||||
label: 'Is not present',
|
||||
},
|
||||
],
|
||||
attribute_type: 'standard',
|
||||
},
|
||||
{
|
||||
attributeKey: 'team_id',
|
||||
attributeI18nKey: 'TEAM_NAME',
|
||||
inputType: 'search_select',
|
||||
dataType: 'number',
|
||||
filterOperators: [
|
||||
{
|
||||
value: 'equal_to',
|
||||
label: 'Equal to',
|
||||
},
|
||||
{
|
||||
value: 'not_equal_to',
|
||||
label: 'Not equal to',
|
||||
},
|
||||
{
|
||||
value: 'is_present',
|
||||
label: 'Is present',
|
||||
},
|
||||
{
|
||||
value: 'is_not_present',
|
||||
label: 'Is not present',
|
||||
},
|
||||
],
|
||||
attribute_type: 'standard',
|
||||
},
|
||||
{
|
||||
attributeKey: 'display_id',
|
||||
attributeI18nKey: 'CONVERSATION_IDENTIFIER',
|
||||
inputType: 'plain_text',
|
||||
dataType: 'Number',
|
||||
filterOperators: [
|
||||
{
|
||||
value: 'equal_to',
|
||||
label: 'Equal to',
|
||||
},
|
||||
{
|
||||
value: 'not_equal_to',
|
||||
label: 'Not equal to',
|
||||
},
|
||||
{
|
||||
value: 'contains',
|
||||
label: 'Contains',
|
||||
},
|
||||
{
|
||||
value: 'does_not_contain',
|
||||
label: 'Does not contain',
|
||||
},
|
||||
],
|
||||
attribute_type: 'standard',
|
||||
},
|
||||
{
|
||||
attributeKey: 'campaign_id',
|
||||
attributeI18nKey: 'CAMPAIGN_NAME',
|
||||
inputType: 'search_select',
|
||||
dataType: 'Number',
|
||||
filterOperators: [
|
||||
{
|
||||
value: 'equal_to',
|
||||
label: 'Equal to',
|
||||
},
|
||||
{
|
||||
value: 'not_equal_to',
|
||||
label: 'Not equal to',
|
||||
},
|
||||
{
|
||||
value: 'is_present',
|
||||
label: 'Is present',
|
||||
},
|
||||
{
|
||||
value: 'is_not_present',
|
||||
label: 'Is not present',
|
||||
},
|
||||
],
|
||||
attribute_type: 'standard',
|
||||
},
|
||||
{
|
||||
attributeKey: 'labels',
|
||||
attributeI18nKey: 'LABELS',
|
||||
inputType: 'multi_select',
|
||||
dataType: 'text',
|
||||
filterOperators: [
|
||||
{
|
||||
value: 'equal_to',
|
||||
label: 'Equal to',
|
||||
},
|
||||
{
|
||||
value: 'not_equal_to',
|
||||
label: 'Not equal to',
|
||||
},
|
||||
{
|
||||
value: 'is_present',
|
||||
label: 'Is present',
|
||||
},
|
||||
{
|
||||
value: 'is_not_present',
|
||||
label: 'Is not present',
|
||||
},
|
||||
],
|
||||
attribute_type: 'standard',
|
||||
},
|
||||
{
|
||||
attributeKey: 'browser_language',
|
||||
attributeI18nKey: 'BROWSER_LANGUAGE',
|
||||
inputType: 'search_select',
|
||||
dataType: 'text',
|
||||
filterOperators: [
|
||||
{
|
||||
value: 'equal_to',
|
||||
label: 'Equal to',
|
||||
},
|
||||
{
|
||||
value: 'not_equal_to',
|
||||
label: 'Not equal to',
|
||||
},
|
||||
],
|
||||
attribute_type: 'additional_attributes',
|
||||
},
|
||||
{
|
||||
attributeKey: 'country_code',
|
||||
attributeI18nKey: 'COUNTRY_NAME',
|
||||
inputType: 'search_select',
|
||||
dataType: 'text',
|
||||
filterOperators: [
|
||||
{
|
||||
value: 'equal_to',
|
||||
label: 'Equal to',
|
||||
},
|
||||
{
|
||||
value: 'not_equal_to',
|
||||
label: 'Not equal to',
|
||||
},
|
||||
],
|
||||
attribute_type: 'additional_attributes',
|
||||
},
|
||||
{
|
||||
attributeKey: 'referer',
|
||||
attributeI18nKey: 'REFERER_LINK',
|
||||
inputType: 'plain_text',
|
||||
dataType: 'text',
|
||||
filterOperators: [
|
||||
{
|
||||
value: 'equal_to',
|
||||
label: 'Equal to',
|
||||
},
|
||||
{
|
||||
value: 'not_equal_to',
|
||||
label: 'Not equal to',
|
||||
},
|
||||
{
|
||||
value: 'contains',
|
||||
label: 'Contains',
|
||||
},
|
||||
{
|
||||
value: 'does_not_contain',
|
||||
label: 'Does not contain',
|
||||
},
|
||||
],
|
||||
attribute_type: 'additional_attributes',
|
||||
},
|
||||
];
|
||||
|
||||
export default filterTypes;
|
||||
@@ -0,0 +1,132 @@
|
||||
const languages = [
|
||||
{
|
||||
id: 'eng',
|
||||
name: 'English (en)',
|
||||
},
|
||||
{
|
||||
id: 'ar',
|
||||
name: 'العربية (ar)',
|
||||
},
|
||||
{
|
||||
id: 'nl',
|
||||
name: 'Nederlands (nl)',
|
||||
},
|
||||
{
|
||||
id: 'fr',
|
||||
name: 'Français (fr)',
|
||||
},
|
||||
{
|
||||
id: 'de',
|
||||
name: 'Deutsch (de)',
|
||||
},
|
||||
{
|
||||
id: 'हिन्दी (hi)',
|
||||
name: 'hi',
|
||||
},
|
||||
{
|
||||
id: 'it',
|
||||
name: 'Italiano (it)',
|
||||
},
|
||||
{
|
||||
id: 'ja',
|
||||
name: '日本語 (ja)',
|
||||
},
|
||||
{
|
||||
id: 'ko',
|
||||
name: '한국어 (ko)',
|
||||
},
|
||||
{
|
||||
id: 'pt',
|
||||
name: 'Português (pt)',
|
||||
},
|
||||
{
|
||||
id: 'ru',
|
||||
name: 'русский (ru)',
|
||||
},
|
||||
{
|
||||
id: 'zh',
|
||||
name: '中文 (zh)',
|
||||
},
|
||||
{
|
||||
id: 'es',
|
||||
name: 'Español (es)',
|
||||
},
|
||||
{
|
||||
id: 'ml',
|
||||
name: 'മലയാളം (ml)',
|
||||
},
|
||||
{
|
||||
id: 'ca',
|
||||
name: 'Català (ca)',
|
||||
},
|
||||
{
|
||||
id: 'el',
|
||||
name: 'ελληνικά (el)',
|
||||
},
|
||||
{
|
||||
id: 'pt-BR',
|
||||
name: 'Português Brasileiro (pt-BR)',
|
||||
},
|
||||
{
|
||||
id: 'ro',
|
||||
name: 'Română (ro)',
|
||||
},
|
||||
{
|
||||
id: 'ta',
|
||||
name: 'தமிழ் (ta)',
|
||||
},
|
||||
{
|
||||
id: 'fa',
|
||||
name: 'فارسی (fa)',
|
||||
},
|
||||
{
|
||||
id: 'zh-TW',
|
||||
name: '中文 (台湾) (zh-TW)',
|
||||
},
|
||||
{
|
||||
id: 'vi',
|
||||
name: 'Tiếng Việt (vi)',
|
||||
},
|
||||
{
|
||||
id: 'da',
|
||||
name: 'dansk (da)',
|
||||
},
|
||||
{
|
||||
id: 'tr',
|
||||
name: 'Türkçe (tr)',
|
||||
},
|
||||
{
|
||||
id: 'cs',
|
||||
name: 'čeština (cs)',
|
||||
},
|
||||
{
|
||||
id: 'fi',
|
||||
name: 'suomi, suomen kieli (fi)',
|
||||
},
|
||||
{
|
||||
id: 'id',
|
||||
name: 'Bahasa Indonesia (id)',
|
||||
},
|
||||
{
|
||||
id: 'sv',
|
||||
name: 'Svenska (sv)',
|
||||
},
|
||||
{
|
||||
id: 'hu',
|
||||
name: 'magyar nyelv (hu)',
|
||||
},
|
||||
{
|
||||
id: 'no',
|
||||
name: 'norsk (no)',
|
||||
},
|
||||
{
|
||||
id: 'zh-CN',
|
||||
name: '中文 (zh-CN)',
|
||||
},
|
||||
{
|
||||
id: 'pl',
|
||||
name: 'język polski (pl)',
|
||||
},
|
||||
];
|
||||
|
||||
export default languages;
|
||||
@@ -0,0 +1,197 @@
|
||||
<template>
|
||||
<div class="filters">
|
||||
<div class="filter--attributes">
|
||||
<select
|
||||
v-model="attribute_key"
|
||||
class="filter--attributes_select"
|
||||
@change="resetFilter()"
|
||||
>
|
||||
<option
|
||||
v-for="attribute in filterAttributes"
|
||||
:key="attribute.key"
|
||||
:value="attribute.key"
|
||||
>
|
||||
{{ $t(`FILTER.ATTRIBUTES.${attribute.attributeI18nKey}`) }}
|
||||
</option>
|
||||
</select>
|
||||
<button class="filter--attribute_clearbtn" @click="removeFilter">
|
||||
<i class="icon ion-close-circled" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="filter-values">
|
||||
<div class="row">
|
||||
<div
|
||||
class="columns padding-right-small"
|
||||
:class="showUserInput ? 'small-4' : 'small-12'"
|
||||
>
|
||||
<select v-model="filter_operator" class="filter--values_select">
|
||||
<option
|
||||
v-for="(operator, o) in operators"
|
||||
:key="o"
|
||||
:value="operator.value"
|
||||
>
|
||||
{{ $t(`FILTER.OPERATOR_LABELS.${operator.value}`) }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="showUserInput" class="small-8 columns">
|
||||
<div
|
||||
v-if="inputType === 'multi_select'"
|
||||
class="multiselect-wrap--small"
|
||||
>
|
||||
<multiselect
|
||||
v-model="values"
|
||||
track-by="id"
|
||||
label="name"
|
||||
:placeholder="'Select'"
|
||||
:multiple="true"
|
||||
selected-label
|
||||
:select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
|
||||
deselect-label=""
|
||||
:options="dropdownValues"
|
||||
:allow-empty="false"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="inputType === 'search_select'"
|
||||
class="multiselect-wrap--small"
|
||||
>
|
||||
<multiselect
|
||||
v-model="values"
|
||||
track-by="id"
|
||||
label="name"
|
||||
:placeholder="'Select'"
|
||||
selected-label
|
||||
:select-label="$t('FORMS.MULTISELECT.ENTER_TO_SELECT')"
|
||||
deselect-label=""
|
||||
:options="dropdownValues"
|
||||
:allow-empty="false"
|
||||
:option-height="104"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
v-else
|
||||
v-model="values"
|
||||
type="text"
|
||||
class="filter--attributes_input"
|
||||
placeholder="Enter value"
|
||||
/>
|
||||
<div v-if="v.values.$dirty && v.values.$error" class="filter-error">
|
||||
{{ $t('FILTER.EMPTY_VALUE_ERROR') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showQueryOperator" class="filter--query_operator">
|
||||
<hr class="filter--query_operator_line" />
|
||||
<div class="filter--query_operator_container">
|
||||
<select v-model="query_operator" class="filter--query_operator_select">
|
||||
<option value="and">
|
||||
{{ $t('FILTER.QUERY_DROPDOWN_LABELS.AND') }}
|
||||
</option>
|
||||
<option value="or">
|
||||
{{ $t('FILTER.QUERY_DROPDOWN_LABELS.OR') }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
filterAttributes: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
inputType: {
|
||||
type: String,
|
||||
default: 'plain_text',
|
||||
},
|
||||
operators: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
dropdownValues: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
showQueryOperator: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
v: {
|
||||
type: Object,
|
||||
default: () => null,
|
||||
},
|
||||
showUserInput: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
attribute_key: {
|
||||
get() {
|
||||
if (!this.value) return null;
|
||||
return this.value.attribute_key;
|
||||
},
|
||||
set(value) {
|
||||
const payload = this.value || {};
|
||||
this.$emit('input', { ...payload, attribute_key: value });
|
||||
},
|
||||
},
|
||||
filter_operator: {
|
||||
get() {
|
||||
if (!this.value) return null;
|
||||
return this.value.filter_operator;
|
||||
},
|
||||
set(value) {
|
||||
const payload = this.value || {};
|
||||
this.$emit('input', { ...payload, filter_operator: value });
|
||||
},
|
||||
},
|
||||
values: {
|
||||
get() {
|
||||
if (!this.value) return null;
|
||||
return this.value.values;
|
||||
},
|
||||
set(value) {
|
||||
const payload = this.value || {};
|
||||
this.$emit('input', { ...payload, values: value });
|
||||
},
|
||||
},
|
||||
query_operator: {
|
||||
get() {
|
||||
if (!this.value) return null;
|
||||
return this.value.query_operator;
|
||||
},
|
||||
set(value) {
|
||||
const payload = this.value || {};
|
||||
this.$emit('input', { ...payload, query_operator: value });
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
removeFilter() {
|
||||
this.$emit('removeFilter');
|
||||
},
|
||||
resetFilter() {
|
||||
this.$emit('resetFilter');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.multiselect {
|
||||
margin-bottom: var(--space-zero) !important;
|
||||
}
|
||||
.filter-error {
|
||||
color: var(--r-500);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user