Replace vuelidate with custom validations

app/javascript/dashboard/components/widgets/FilterInput/Index.vue

@@ -3,7 +3,7 @@
   <div>
     <div
       class="rounded-md p-2 border border-solid"
-      :class="getInputErrorClass(v.values.$dirty, v.values.$error)"
+      :class="getInputErrorClass(errorMessage)"
     >
       <div class="flex">
         <select
@@ -115,8 +115,8 @@
           @click="removeFilter"
         />
       </div>
-      <p v-if="v.values.$dirty && v.values.$error" class="filter-error">
-        {{ $t('FILTER.EMPTY_VALUE_ERROR') }}
+      <p v-if="errorMessage" class="filter-error">
+        {{ errorMessage }}
       </p>
     </div>
 
@@ -173,10 +173,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    v: {
-      type: Object,
-      default: () => null,
-    },
     showUserInput: {
       type: Boolean,
       default: true,
@@ -193,6 +189,10 @@ export default {
       type: String,
       default: '',
     },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     attributeKey: {
@@ -271,8 +271,8 @@ export default {
     resetFilter() {
       this.$emit('resetFilter');
     },
-    getInputErrorClass(isDirty, hasError) {
-      return isDirty && hasError
+    getInputErrorClass(errorMessage) {
+      return errorMessage
         ? 'bg-red-50 dark:bg-red-800/50 border-red-100 dark:border-red-700/50'
         : 'bg-slate-50 dark:bg-slate-800 border-slate-75 dark:border-slate-700/50';
     },

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);