feature: Filtering conversations and contacts with custom attributes (#3851)

2022-02-01 13:13:55 +05:30
parent e0d24e0a73
commit 52d1821cd3
16 changed files with 451 additions and 284 deletions
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -129,7 +129,7 @@
    >
      <conversation-advanced-filter
        v-if="showAdvancedFilters"
-        :filter-types="advancedFilterTypes"
+        :initial-filter-types="advancedFilterTypes"
        :on-close="onToggleAdvanceFiltersModal"
        @applyFilter="onApplyFilter"
      />
--- a/app/javascript/dashboard/components/ui/DateTimePicker.vue
+++ b/app/javascript/dashboard/components/ui/DateTimePicker.vue
@@ -30,7 +30,7 @@ export default {
    },
    value: {
      type: Date,
-      default: () => [],
+      default: [],
    },
  },

--- a/app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.js
+++ b/app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.js
@@ -0,0 +1,75 @@
+export const OPERATOR_TYPES_1 = [
+  {
+    value: 'equal_to',
+    label: 'Equal to',
+  },
+  {
+    value: 'not_equal_to',
+    label: 'Not equal to',
+  },
+];
+
+export const OPERATOR_TYPES_2 = [
+  {
+    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',
+  },
+];
+
+export const OPERATOR_TYPES_3 = [
+  {
+    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',
+  },
+];
+
+export const OPERATOR_TYPES_4 = [
+  {
+    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',
+  },
+  {
+    value: 'is_greater_than',
+    label: 'Is greater than',
+  },
+  {
+    value: 'is_lesser_than',
+    label: 'Is lesser than',
+  },
+];
--- a/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+++ b/app/javascript/dashboard/components/widgets/FilterInput/Index.vue
@@ -3,6 +3,27 @@
    <div class="filter">
      <div class="filter-inputs">
        <select
+          v-if="groupedFilters"
+          v-model="attributeKey"
+          class="filter__question"
+          @change="resetFilter()"
+        >
+          <optgroup
+            v-for="(group, i) in filterGroups"
+            :key="i"
+            :label="group.name"
+          >
+            <option
+              v-for="attribute in group.attributes"
+              :key="attribute.key"
+              :value="attribute.key"
+            >
+              {{ attribute.name }}
+            </option>
+          </optgroup>
+        </select>
+        <select
+          v-else
          v-model="attributeKey"
          class="filter__question"
          @change="resetFilter()"
@@ -63,6 +84,14 @@
              :option-height="104"
            />
          </div>
+          <div v-else-if="inputType === 'date'" class="multiselect-wrap--small">
+            <input
+              v-model="values"
+              type="date"
+              :editable="false"
+              class="answer--text-input datepicker"
+            />
+          </div>
          <input
            v-else
            v-model="values"
@@ -132,6 +161,14 @@ export default {
      type: Boolean,
      default: true,
    },
+    groupedFilters: {
+      type: Boolean,
+      default: true,
+    },
+    filterGroups: {
+      type: Array,
+      default: () => [],
+    },
  },
  computed: {
    attributeKey: {
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue
@@ -9,12 +9,13 @@
          v-for="(filter, i) in appliedFilters"
          :key="i"
          v-model="appliedFilters[i]"
-          :filter-attributes="filterAttributes"
+          :filter-groups="filterGroups"
          :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)"
+          :grouped-filters="true"
          :v="$v.appliedFilters.$each[i]"
          @resetFilter="resetFilter(i, appliedFilters[i])"
          @removeFilter="removeFilter(i)"
@@ -48,22 +49,24 @@
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
 import { required, requiredIf } from 'vuelidate/lib/validators';
-import FilterInputBox from '../FilterInput.vue';
+import FilterInputBox from '../FilterInput/Index.vue';
 import languages from './advancedFilterItems/languages';
-import countries from '/app/javascript/shared/constants/countries.js';
+import countries from 'shared/constants/countries.js';
 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,
  },
-  mixins: [alertMixin],
+  mixins: [alertMixin, filterMixin],
  props: {
    onClose: {
      type: Function,
      default: () => {},
    },
-    filterTypes: {
+    initialFilterTypes: {
      type: Array,
      default: () => [],
    },
@@ -87,22 +90,21 @@ export default {
    return {
      show: true,
      appliedFilters: [],
+      filterTypes: this.initialFilterTypes,
+      filterAttributeGroups,
+      filterGroups: [],
+      allCustomAttributes: [],
+      attributeModel: 'conversation_attribute',
+      filtersFori18n: 'FILTER',
    };
  },
  computed: {
-    filterAttributes() {
-      return this.filterTypes.map(type => {
-        return {
-          key: type.attributeKey,
-          name: this.$t(`FILTER.ATTRIBUTES.${type.attributeI18nKey}`),
-        };
-      });
-    },
    ...mapGetters({
      getAppliedConversationFilters: 'getAppliedConversationFilters',
    }),
  },
  mounted() {
+    this.setFilterAttributes();
    this.$store.dispatch('campaigns/get');
    if (this.getAppliedConversationFilters.length) {
      this.appliedFilters = [...this.getAppliedConversationFilters];
@@ -112,10 +114,41 @@ export default {
        filter_operator: 'equal_to',
        values: '',
        query_operator: 'and',
+        attribute_model: 'standard',
      });
    }
  },
  methods: {
+    getOperatorTypes(key) {
+      switch (key) {
+        case 'list':
+          return OPERATORS.OPERATOR_TYPES_1;
+        case 'text':
+          return OPERATORS.OPERATOR_TYPES_3;
+        case 'number':
+          return OPERATORS.OPERATOR_TYPES_1;
+        case 'link':
+          return OPERATORS.OPERATOR_TYPES_1;
+        case 'date':
+          return OPERATORS.OPERATOR_TYPES_4;
+        case 'checkbox':
+          return OPERATORS.OPERATOR_TYPES_1;
+        default:
+          return OPERATORS.OPERATOR_TYPES_1;
+      }
+    },
+    customAttributeInputType(key) {
+      switch (key) {
+        case 'date':
+          return 'date';
+        default:
+          return 'plain_text';
+      }
+    },
+    getAttributeModel(key) {
+      const type = this.filterTypes.find(filter => filter.attributeKey === key);
+      return type.attributeModel;
+    },
    getInputType(key) {
      const type = this.filterTypes.find(filter => filter.attributeKey === key);
      return type.inputType;
--- a/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js
+++ b/app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/index.js
@@ -1,229 +1,144 @@
+import {
+  OPERATOR_TYPES_1,
+  OPERATOR_TYPES_2,
+  OPERATOR_TYPES_3,
+} from '../../FilterInput/FilterOperatorTypes';
+
 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',
+    filterOperators: OPERATOR_TYPES_1,
+    attributeModel: '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',
+    filterOperators: OPERATOR_TYPES_2,
+    attributeModel: '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',
+    filterOperators: OPERATOR_TYPES_2,
+    attributeModel: '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',
+    filterOperators: OPERATOR_TYPES_2,
+    attributeModel: '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',
+    filterOperators: OPERATOR_TYPES_3,
+    attributeModel: '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',
+    filterOperators: OPERATOR_TYPES_2,
+    attributeModel: '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',
+    filterOperators: OPERATOR_TYPES_2,
+    attributeModel: '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',
+    filterOperators: OPERATOR_TYPES_1,
+    attributeModel: 'additional',
  },
  {
    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',
+    filterOperators: OPERATOR_TYPES_1,
+    attributeModel: 'additional',
  },
  {
    attributeKey: 'referer',
    attributeI18nKey: 'REFERER_LINK',
    inputType: 'plain_text',
    dataType: 'text',
-    filterOperators: [
+    filterOperators: OPERATOR_TYPES_3,
+    attributeModel: 'additional',
+  },
+];
+
+export const filterAttributeGroups = [
+  {
+    name: 'Standard Filters',
+    i18nGroup: 'STANDARD_FILTERS',
+    attributes: [
      {
-        value: 'equal_to',
-        label: 'Equal to',
+        key: 'status',
+        i18nKey: 'STATUS',
      },
      {
-        value: 'not_equal_to',
-        label: 'Not equal to',
+        key: 'assignee_id',
+        i18nKey: 'ASSIGNEE_NAME',
      },
      {
-        value: 'contains',
-        label: 'Contains',
+        key: 'inbox_id',
+        i18nKey: 'INBOX_NAME',
      },
      {
-        value: 'does_not_contain',
-        label: 'Does not contain',
+        key: 'team_id',
+        i18nKey: 'TEAM_NAME',
+      },
+      {
+        key: 'display_id',
+        i18nKey: 'CONVERSATION_IDENTIFIER',
+      },
+      {
+        key: 'campaign_id',
+        i18nKey: 'CAMPAIGN_NAME',
+      },
+      {
+        key: 'labels',
+        i18nKey: 'LABELS',
+      },
+    ],
+  },
+  {
+    name: 'Additional Filters',
+    i18nGroup: 'ADDITIONAL_FILTERS',
+    attributes: [
+      {
+        key: 'browser_language',
+        i18nKey: 'BROWSER_LANGUAGE',
+      },
+      {
+        key: 'country_code',
+        i18nKey: 'COUNTRY_NAME',
+      },
+      {
+        key: 'referer',
+        i18nKey: 'REFERER_LINK',
      },
    ],
-    attribute_type: 'additional_attributes',
  },
 ];