refactor: use vuelidate for vue 3 in AddAutomationRule.vue

This commit is contained in:
Shivam Mishra
2024-07-24 17:01:50 +05:30
parent ff92e6ef63
commit 3ebf219ffa
@@ -7,22 +7,22 @@
v-model="automation.name"
:label="$t('AUTOMATION.ADD.FORM.NAME.LABEL')"
type="text"
:class="{ error: $v.automation.name.$error }"
:class="{ error: v$.automation.name.$error }"
:error="errors.name || ''"
:placeholder="$t('AUTOMATION.ADD.FORM.NAME.PLACEHOLDER')"
@blur="$v.automation.name.$touch"
@blur="v$.automation.name.$touch"
/>
<woot-input
v-model="automation.description"
:label="$t('AUTOMATION.ADD.FORM.DESC.LABEL')"
type="text"
:class="{ error: $v.automation.description.$error }"
:class="{ error: v$.automation.description.$error }"
:error="errors.description || ''"
:placeholder="$t('AUTOMATION.ADD.FORM.DESC.PLACEHOLDER')"
@blur="$v.automation.description.$touch"
@blur="v$.automation.description.$touch"
/>
<div class="event_wrapper">
<label :class="{ error: $v.automation.event_name.$error }">
<label :class="{ error: v$.automation.event_name.$error }">
{{ $t('AUTOMATION.ADD.FORM.EVENT.LABEL') }}
<select v-model="automation.event_name" @change="onEventChange()">
<option
@@ -33,7 +33,7 @@
{{ event.value }}
</option>
</select>
<span v-if="$v.automation.event_name.$error" class="message">
<span v-if="v$.automation.event_name.$error" class="message">
{{ $t('AUTOMATION.ADD.FORM.EVENT.ERROR') }}
</span>
</label>
@@ -102,7 +102,7 @@
:show-action-input="
showActionInput(automation.actions[i].action_name)
"
:v="$v.automation.actions.$each[i]"
:v="v$.automation.actions.$each[i]"
@resetAction="resetAction(i)"
@removeAction="removeAction(i)"
/>
@@ -140,6 +140,7 @@ import { mapGetters } from 'vuex';
import automationMethodsMixin from 'dashboard/mixins/automations/methodsMixin';
import filterInputBox from 'dashboard/components/widgets/FilterInput/Index.vue';
import automationActionInput from 'dashboard/components/widgets/AutomationActionInput.vue';
import { useVuelidate } from '@vuelidate/core';
import {
AUTOMATION_RULE_EVENTS,
@@ -158,7 +159,9 @@ export default {
default: () => {},
},
},
setup() {
return { v$: useVuelidate() };
},
data() {
return {
automationTypes: JSON.parse(JSON.stringify(AUTOMATIONS)),