Replace vuelidate with custom validations

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

@@ -41,7 +41,7 @@
           :show-query-operator="i !== appliedFilters.length - 1"
           :show-user-input="showUserInput(appliedFilters[i].filter_operator)"
           :grouped-filters="true"
-          :v="$v.appliedFilters.$each[i]"
+          :error-message="validationErrors[`filter_${i}`]"
           @resetFilter="resetFilter(i, appliedFilters[i])"
           @removeFilter="removeFilter(i)"
         />
@@ -80,7 +80,6 @@
 
 <script>
 import alertMixin from 'shared/mixins/alertMixin';
-import { required, requiredIf } from 'vuelidate/lib/validators';
 import FilterInputBox from '../FilterInput/Index.vue';
 import languages from './advancedFilterItems/languages';
 import countries from 'shared/constants/countries.js';
@@ -89,6 +88,7 @@ import { filterAttributeGroups } from './advancedFilterItems';
 import filterMixin from 'shared/mixins/filterMixin';
 import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
 import { CONVERSATION_EVENTS } from '../../../helper/AnalyticsHelper/events';
+import { validateConversationOrContactFilters } from 'dashboard/helper/conversationAdvancedFilterValidation.js';
 
 export default {
   components: {
@@ -117,27 +117,6 @@ export default {
       default: false,
     },
   },
-  validations: {
-    appliedFilters: {
-      required,
-      $each: {
-        values: {
-          ensureBetween0to999(value, prop) {
-            if (prop.filter_operator === 'days_before') {
-              return parseInt(value, 10) > 0 && parseInt(value, 10) < 999;
-            }
-            return true;
-          },
-          required: requiredIf(prop => {
-            return !(
-              prop.filter_operator === 'is_present' ||
-              prop.filter_operator === 'is_not_present'
-            );
-          }),
-        },
-      },
-    },
-  },
   data() {
     return {
       show: true,
@@ -149,6 +128,7 @@ export default {
       allCustomAttributes: [],
       attributeModel: 'conversation_attribute',
       filtersFori18n: 'FILTER',
+      validationErrors: {},
     };
   },
   computed: {
@@ -347,20 +327,23 @@ export default {
       }
     },
     submitFilterQuery() {
-      this.$v.$touch();
-      if (this.$v.$invalid) return;
-      this.$store.dispatch(
-        'setConversationFilters',
-        JSON.parse(JSON.stringify(this.appliedFilters))
+      this.validationErrors = validateConversationOrContactFilters(
+        this.appliedFilters
       );
-      this.$emit('applyFilter', this.appliedFilters);
-      this.$track(CONVERSATION_EVENTS.APPLY_FILTER, {
-        applied_filters: this.appliedFilters.map(filter => ({
-          key: filter.attribute_key,
-          operator: filter.filter_operator,
-          query_operator: filter.query_operator,
-        })),
-      });
+      if (Object.keys(this.validationErrors).length === 0) {
+        this.$store.dispatch(
+          'setConversationFilters',
+          JSON.parse(JSON.stringify(this.appliedFilters))
+        );
+        this.$emit('applyFilter', this.appliedFilters);
+        this.$track(CONVERSATION_EVENTS.APPLY_FILTER, {
+          applied_filters: this.appliedFilters.map(filter => ({
+            key: filter.attribute_key,
+            operator: filter.filter_operator,
+            query_operator: filter.query_operator,
+          })),
+        });
+      }
     },
     updateSavedCustomViews() {
       this.$emit('updateFolder', this.appliedFilters, this.activeFolderNewName);