akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Replace vuelidate with custom validations

Browse Source
This commit is contained in:
Fayaz Ahmed
2024-07-18 23:53:39 +05:30
parent 1361c921de
commit 9aeccf63c4
4 changed files with 72 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components/widgets/FilterInput/Index.vue
+9 -9
View File
@@ -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
+19 -36
View File
@@ -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);
app/javascript/dashboard/helper/conversationAdvancedFilterValidation.js
+24
View File
@@ -0,0 +1,24 @@
export const validateConversationOrContactFilters = filters => {
const errors = {};
filters.forEach((filter, index) => {
if (!filter.attribute_key) {
errors[`filter_${index}`] = 'Attribute key is required';
} else if (!filter.filter_operator) {
errors[`filter_${index}`] = 'Filter operator is required';
} else if (
filter.filter_operator !== 'is_present' &&
filter.filter_operator !== 'is_not_present' &&
!filter.values
) {
errors[`filter_${index}`] = 'Value is required';
} else if (
filter.filter_operator === 'days_before' &&
(parseInt(filter.values, 10) <= 0 || parseInt(filter.values, 10) >= 999)
) {
errors[`filter_${index}`] = 'Value must be between 1 and 998';
}
});
return errors;
};
app/javascript/dashboard/routes/dashboard/contacts/components/ContactsAdvancedFilters.vue
+20 -31
View File
@@ -41,7 +41,7 @@
:dropdown-values="getDropdownValues(appliedFilters[i].attribute_key)"
:show-query-operator="i !== appliedFilters.length - 1"
:show-user-input="showUserInput(appliedFilters[i].filter_operator)"
:v="$v.appliedFilters.$each[i]"
:error-message="validationErrors[`filter_${i}`]"
@resetFilter="resetFilter(i, appliedFilters[i])"
@removeFilter="removeFilter(i)"
/>
@@ -90,7 +90,6 @@
<script>
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import FilterInputBox from '../../../../components/widgets/FilterInput/Index.vue';
import countries from 'shared/constants/countries.js';
import { mapGetters } from 'vuex';
@@ -98,6 +97,8 @@ import { filterAttributeGroups } from '../contactFilterItems';
import filterMixin from 'shared/mixins/filterMixin';
import * as OPERATORS from 'dashboard/components/widgets/FilterInput/FilterOperatorTypes.js';
import { CONTACTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
import { validateConversationOrContactFilters } from 'dashboard/helper/conversationAdvancedFilterValidation.js';
export default {
components: {
FilterInputBox,
@@ -125,22 +126,6 @@ export default {
default: '',
},
},
validations: {
appliedFilters: {
required,
$each: {
values: {
required,
ensureBetween0to999(value, prop) {
if (prop.filter_operator === 'days_before') {
return parseInt(value, 10) > 0 && parseInt(value, 10) < 999;
}
return true;
},
},
},
},
},
data() {
return {
show: true,
@@ -152,6 +137,7 @@ export default {
filterAttributeGroups,
attributeModel: 'contact_attribute',
filtersFori18n: 'CONTACTS_FILTER',
validationErrors: {},
};
},
computed: {
@@ -314,20 +300,23 @@ export default {
}
},
submitFilterQuery() {
this.$v.$touch();
if (this.$v.$invalid) return;
this.$store.dispatch(
'contacts/setContactFilters',
JSON.parse(JSON.stringify(this.appliedFilters))
this.validationErrors = validateConversationOrContactFilters(
this.appliedFilters
);
this.$emit('applyFilter', this.appliedFilters);
this.$track(CONTACTS_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(
'contacts/setContactFilters',
JSON.parse(JSON.stringify(this.appliedFilters))
);
this.$emit('applyFilter', this.appliedFilters);
this.$track(CONTACTS_EVENTS.APPLY_FILTER, {
applied_filters: this.appliedFilters.map(filter => ({
key: filter.attribute_key,
operator: filter.filter_operator,
query_operator: filter.query_operator,
})),
});
}
},
updateSegment() {
this.$emit(