feat: Support respective input types in custom attributes - filters (#4032)

* Support differnt input types in custom attributes

* Handle list type custom attributes

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components/widgets/conversation/ConversationAdvancedFilter.vue

@@ -141,6 +141,12 @@ export default {
       switch (key) {
         case 'date':
           return 'date';
+        case 'text':
+          return 'plain_text';
+        case 'list':
+          return 'search_select';
+        case 'checkbox':
+          return 'search_select';
         default:
           return 'plain_text';
       }
@@ -159,6 +165,47 @@ export default {
     },
     getDropdownValues(type) {
       const statusFilters = this.$t('CHAT_LIST.CHAT_STATUS_FILTER_ITEMS');
+      const allCustomAttributes = this.$store.getters[
+        'attributes/getAttributesByModel'
+      ](this.attributeModel);
+
+      const isCustomAttributeCheckbox = allCustomAttributes.find(attr => {
+        return (
+          attr.attribute_key === type &&
+          attr.attribute_display_type === 'checkbox'
+        );
+      });
+
+      if (isCustomAttributeCheckbox) {
+        return [
+          {
+            id: true,
+            name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
+          },
+          {
+            id: false,
+            name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
+          },
+        ];
+      }
+
+      const isCustomAttributeList = allCustomAttributes.find(attr => {
+        return (
+          attr.attribute_key === type && attr.attribute_display_type === 'list'
+        );
+      });
+
+      if (isCustomAttributeList) {
+        return allCustomAttributes
+          .find(attr => attr.attribute_key === type)
+          .attribute_values.map(item => {
+            return {
+              id: item,
+              name: item,
+            };
+          });
+      }
+
       switch (type) {
         case 'status':
           return [

app/javascript/dashboard/i18n/locale/en/advancedFilters.json

@@ -23,6 +23,10 @@
       "is_greater_than": "Is greater than",
       "is_lesser_than": "Is lesser than"
     },
+    "ATTRIBUTE_LABELS": {
+      "TRUE": "True",
+      "FALSE": "False"
+    },
     "ATTRIBUTES": {
       "STATUS": "Status",
       "ASSIGNEE_NAME": "Assignee Name",

app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue

@@ -147,6 +147,12 @@ export default {
       switch (key) {
         case 'date':
           return 'date';
+        case 'text':
+          return 'plain_text';
+        case 'list':
+          return 'search_select';
+        case 'checkbox':
+          return 'search_select';
         default:
           return 'plain_text';
       }
@@ -164,6 +170,44 @@ export default {
       return type.filterOperators;
     },
     getDropdownValues(type) {
+      const allCustomAttributes = this.$store.getters[
+        'attributes/getAttributesByModel'
+      ](this.attributeModel);
+      const isCustomAttributeCheckbox = allCustomAttributes.find(attr => {
+        return (
+          attr.attribute_key === type &&
+          attr.attribute_display_type === 'checkbox'
+        );
+      });
+      if (isCustomAttributeCheckbox) {
+        return [
+          {
+            id: true,
+            name: this.$t('FILTER.ATTRIBUTE_LABELS.TRUE'),
+          },
+          {
+            id: false,
+            name: this.$t('FILTER.ATTRIBUTE_LABELS.FALSE'),
+          },
+        ];
+      }
+
+      const isCustomAttributeList = allCustomAttributes.find(attr => {
+        return (
+          attr.attribute_key === type && attr.attribute_display_type === 'list'
+        );
+      });
+
+      if (isCustomAttributeList) {
+        return allCustomAttributes
+          .find(attr => attr.attribute_key === type)
+          .attribute_values.map(item => {
+            return {
+              id: item,
+              name: item,
+            };
+          });
+      }
       switch (type) {
         case 'country_code':
           return countries;