feature: Filtering conversations and contacts with custom attributes (c…

…hatwoot#3851)

.codeclimate.yml

@@ -22,6 +22,9 @@ checks:
     enabled: true
     config:
       threshold: 300
+  method-lines:
+    config:
+      threshold: 50
 exclude_patterns:
   - 'spec/'
   - '**/specs/'
@@ -44,3 +47,4 @@ exclude_patterns:
   - 'app/javascript/shared/constants/countries.js'
   - 'app/javascript/dashboard/components/widgets/conversation/advancedFilterItems/languages.js'
   - 'app/javascript/dashboard/routes/dashboard/contacts/contactFilterItems/index.js'
+  - 'app/javascript/dashboard/components/widgets/FilterInput/FilterOperatorTypes.js'

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"
       />

app/javascript/dashboard/components/ui/DateTimePicker.vue

@@ -30,7 +30,7 @@ export default {
     },
     value: {
       type: Date,
-      default: () => [],
+      default: [],
     },
   },
 

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',
+  },
+];

app/javascript/dashboard/components/widgets/FilterInput.vue → 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: {

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;