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

app/javascript/shared/mixins/filterMixin.js

@@ -0,0 +1,44 @@
+// import groupBy from 'lodash.groupby';
+
+export default {
+  methods: {
+    setFilterAttributes() {
+      const allCustomAttributes = this.$store.getters[
+        'attributes/getAttributesByModel'
+      ](this.attributeModel);
+      const customAttributesFormatted = {
+        name: this.$t(`${this.filtersFori18n}.GROUPS.CUSTOM_ATTRIBUTES`),
+        attributes: allCustomAttributes.map(attr => {
+          return {
+            key: attr.attribute_key,
+            name: attr.attribute_display_name,
+          };
+        }),
+      };
+      const allFilterGroups = this.filterAttributeGroups.map(group => {
+        return {
+          name: this.$t(`${this.filtersFori18n}.GROUPS.${group.i18nGroup}`),
+          attributes: group.attributes.map(attribute => {
+            return {
+              key: attribute.key,
+              name: this.$t(
+                `${this.filtersFori18n}.ATTRIBUTES.${attribute.i18nKey}`
+              ),
+            };
+          }),
+        };
+      });
+      const customAttributeTypes = allCustomAttributes.map(attr => {
+        return {
+          attributeKey: attr.attribute_key,
+          attributeI18nKey: `CUSTOM_ATTRIBUTE_${attr.attribute_display_type.toUpperCase()}`,
+          inputType: this.customAttributeInputType(attr.attribute_display_type),
+          filterOperators: this.getOperatorTypes(attr.attribute_display_type),
+          attributeModel: 'custom_attributes',
+        };
+      });
+      this.filterTypes = [...this.filterTypes, ...customAttributeTypes];
+      this.filterGroups = [...allFilterGroups, customAttributesFormatted];
+    },
+  },
+};

app/javascript/shared/mixins/specs/MockComponent.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="test"></div>
+</template>
+
+<script>
+export default {
+  name: 'MockComponent',
+};
+</script>

app/javascript/shared/mixins/specs/filterFixtures.js

@@ -0,0 +1,29 @@
+export const filterGroups = [
+  {
+    name: 'Standard Filters',
+    attributes: [
+      { key: 'status', name: 'Status' },
+      { key: 'assignee_id', name: 'Assignee Name' },
+      { key: 'inbox_id', name: 'Inbox Name' },
+      { key: 'team_id', name: 'Team Name' },
+      { key: 'display_id', name: 'Conversation Identifier' },
+      { key: 'campaign_id', name: 'Campaign Name' },
+      { key: 'labels', name: 'Labels' },
+    ],
+  },
+  {
+    name: 'Additional Filters',
+    attributes: [
+      { key: 'browser_language', name: 'Browser Language' },
+      { key: 'country_code', name: 'Country Name' },
+      { key: 'referer', name: 'Referer link' },
+    ],
+  },
+  {
+    name: 'Custom Attributes',
+    attributes: [
+      { key: 'signed_up_at', name: 'Signed Up At' },
+      { key: 'test', name: 'Test' },
+    ],
+  },
+];

app/javascript/shared/mixins/specs/filterMixin.spec.js

@@ -0,0 +1,13 @@
+import filterMixin from '../filterMixin';
+import { shallowMount } from '@vue/test-utils';
+import MockComponent from './MockComponent.vue';
+
+describe('Test mixin function', () => {
+  const wrapper = shallowMount(MockComponent, {
+    mixins: [filterMixin],
+  });
+
+  it('should return proper value from bool', () => {
+    expect(wrapper.vm.setFilterAttributes).toBeTruthy();
+  });
+});