Vuelidate, I18n, and filter are upgraded to vue3
While navigating to the pages i18n, vuelidate, and filters errors
occurred. i18n, and vuelidate code changes in each page adapted to
vue3. Filter global function for date and time format implemented
in the main.js file and those files which as called the filter
functions.
Change-Id: If1a2ee22d47750faef1c35ef2c263299067d9a20
Signed-off-by: Surya Venkatesan <suryav@ami.com>
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
index dca9736..44ab516 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
@@ -14,7 +14,7 @@
<b-row v-if="!newUser && manualUnlockPolicy && user.Locked">
<b-col sm="9">
<alert :show="true" variant="warning" small>
- <template v-if="!$v.form.manualUnlock.$dirty">
+ <template v-if="!v$.form.manualUnlock.$dirty">
{{ $t('pageUserManagement.modal.accountLocked') }}
</template>
<template v-else>
@@ -30,9 +30,9 @@
/>
<b-button
variant="primary"
- :disabled="$v.form.manualUnlock.$dirty"
+ :disabled="v$.form.manualUnlock.$dirty"
data-test-id="userManagement-button-manualUnlock"
- @click="$v.form.manualUnlock.$touch()"
+ @click="v$.form.manualUnlock.$touch()"
>
{{ $t('pageUserManagement.modal.unlock') }}
</b-button>
@@ -46,7 +46,7 @@
name="user-status"
:value="true"
data-test-id="userManagement-radioButton-statusEnabled"
- @input="$v.form.status.$touch()"
+ @input="v$.form.status.$touch()"
>
{{ $t('global.status.enabled') }}
</b-form-radio>
@@ -56,7 +56,7 @@
data-test-id="userManagement-radioButton-statusDisabled"
:value="false"
:disabled="!newUser && originalUsername === disabled"
- @input="$v.form.status.$touch()"
+ @input="v$.form.status.$touch()"
>
{{ $t('global.status.disabled') }}
</b-form-radio>
@@ -80,20 +80,20 @@
type="text"
aria-describedby="username-help-block"
data-test-id="userManagement-input-username"
- :state="getValidationState($v.form.username)"
+ :state="getValidationState(v$.form.username)"
:disabled="!newUser && originalUsername === disabled"
- @input="$v.form.username.$touch()"
+ @input="v$.form.username.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.username.required">
+ <template v-if="!v$.form.username.required">
{{ $t('global.form.fieldRequired') }}
</template>
- <template v-else-if="!$v.form.username.maxLength">
+ <template v-else-if="!v$.form.username.maxLength">
{{
$t('global.form.lengthMustBeBetween', { min: 1, max: 16 })
}}
</template>
- <template v-else-if="!$v.form.username.pattern">
+ <template v-else-if="!v$.form.username.pattern">
{{ $t('global.form.invalidFormat') }}
</template>
</b-form-invalid-feedback>
@@ -107,9 +107,9 @@
v-model="form.privilege"
:options="privilegeTypes"
data-test-id="userManagement-select-privilege"
- :state="getValidationState($v.form.privilege)"
+ :state="getValidationState(v$.form.privilege)"
:disabled="!newUser && originalUsername === 'root'"
- @input="$v.form.privilege.$touch()"
+ @input="v$.form.privilege.$touch()"
>
<template #first>
<b-form-select-option :value="null" disabled>
@@ -118,7 +118,7 @@
</template>
</b-form-select>
<b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.privilege.required">
+ <template v-if="!v$.form.privilege.required">
{{ $t('global.form.fieldRequired') }}
</template>
</b-form-invalid-feedback>
@@ -144,17 +144,17 @@
type="password"
data-test-id="userManagement-input-password"
aria-describedby="password-help-block"
- :state="getValidationState($v.form.password)"
+ :state="getValidationState(v$.form.password)"
class="form-control-with-button"
- @input="$v.form.password.$touch()"
+ @input="v$.form.password.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.password.required">
+ <template v-if="!v$.form.password.required">
{{ $t('global.form.fieldRequired') }}
</template>
<template
v-if="
- !$v.form.password.minLength || !$v.form.password.maxLength
+ !v$.form.password.minLength || !v$.form.password.maxLength
"
>
{{
@@ -177,16 +177,16 @@
v-model="form.passwordConfirmation"
data-test-id="userManagement-input-passwordConfirmation"
type="password"
- :state="getValidationState($v.form.passwordConfirmation)"
+ :state="getValidationState(v$.form.passwordConfirmation)"
class="form-control-with-button"
- @input="$v.form.passwordConfirmation.$touch()"
+ @input="v$.form.passwordConfirmation.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.passwordConfirmation.required">
+ <template v-if="!v$.form.passwordConfirmation.required">
{{ $t('global.form.fieldRequired') }}
</template>
<template
- v-else-if="!$v.form.passwordConfirmation.sameAsPassword"
+ v-else-if="!v$.form.passwordConfirmation.sameAsPassword"
>
{{ $t('pageUserManagement.modal.passwordsDoNotMatch') }}
</template>
@@ -237,6 +237,7 @@
import InputPasswordToggle from '@/components/Global/InputPasswordToggle';
import Alert from '@/components/Global/Alert';
+import { useI18n } from 'vue-i18n';
export default {
components: { Alert, InputPasswordToggle },
@@ -258,6 +259,7 @@
},
data() {
return {
+ $t: useI18n().t,
originalUsername: '',
form: {
status: true,
@@ -329,28 +331,28 @@
let userData = {};
if (this.newUser) {
- this.$v.$touch();
- if (this.$v.$invalid) return;
+ this.v$.$touch();
+ if (this.v$.$invalid) return;
userData.username = this.form.username;
userData.status = this.form.status;
userData.privilege = this.form.privilege;
userData.password = this.form.password;
} else {
- if (this.$v.$invalid) return;
+ if (this.v$.$invalid) return;
userData.originalUsername = this.originalUsername;
- if (this.$v.form.status.$dirty) {
+ if (this.v$.form.status.$dirty) {
userData.status = this.form.status;
}
- if (this.$v.form.username.$dirty) {
+ if (this.v$.form.username.$dirty) {
userData.username = this.form.username;
}
- if (this.$v.form.privilege.$dirty) {
+ if (this.v$.form.privilege.$dirty) {
userData.privilege = this.form.privilege;
}
- if (this.$v.form.password.$dirty) {
+ if (this.v$.form.password.$dirty) {
userData.password = this.form.password;
}
- if (this.$v.form.manualUnlock.$dirty) {
+ if (this.v$.form.manualUnlock.$dirty) {
// If form manualUnlock control $dirty then
// set user Locked property to false
userData.locked = false;
@@ -376,13 +378,13 @@
this.form.privilege = null;
this.form.password = '';
this.form.passwordConfirmation = '';
- this.$v.$reset();
+ this.v$.$reset();
this.$emit('hidden');
},
requirePassword() {
if (this.newUser) return true;
- if (this.$v.form.password.$dirty) return true;
- if (this.$v.form.passwordConfirmation.$dirty) return true;
+ if (this.v$.form.password.$dirty) return true;
+ if (this.v$.form.passwordConfirmation.$dirty) return true;
return false;
},
onOk(bvModalEvt) {