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/ModalSettings.vue b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
index 8932eb5..91db825 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
@@ -27,17 +27,17 @@
type="number"
aria-describedby="lockout-threshold-help-block"
data-test-id="userManagement-input-lockoutThreshold"
- :state="getValidationState($v.form.lockoutThreshold)"
- @input="$v.form.lockoutThreshold.$touch()"
+ :state="getValidationState(v$.form.lockoutThreshold)"
+ @input="v$.form.lockoutThreshold.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.lockoutThreshold.required">
+ <template v-if="!v$.form.lockoutThreshold.required">
{{ $t('global.form.fieldRequired') }}
</template>
<template
v-if="
- !$v.form.lockoutThreshold.minLength ||
- !$v.form.lockoutThreshold.maxLength
+ !v$.form.lockoutThreshold.minLength ||
+ !v$.form.lockoutThreshold.maxLength
"
>
{{
@@ -60,7 +60,7 @@
class="mb-2"
:value="0"
data-test-id="userManagement-radio-manualUnlock"
- @input="$v.form.unlockMethod.$touch()"
+ @input="v$.form.unlockMethod.$touch()"
>
{{ $t('pageUserManagement.modal.manual') }}
</b-form-radio>
@@ -69,7 +69,7 @@
name="unlock-method"
:value="1"
data-test-id="userManagement-radio-automaticUnlock"
- @input="$v.form.unlockMethod.$touch()"
+ @input="v$.form.unlockMethod.$touch()"
>
{{ $t('pageUserManagement.modal.automaticAfterTimeout') }}
</b-form-radio>
@@ -82,15 +82,15 @@
aria-describedby="lockout-duration-help-block"
type="number"
data-test-id="userManagement-input-lockoutDuration"
- :state="getValidationState($v.form.lockoutDuration)"
- :readonly="$v.form.unlockMethod.$model === 0"
- @input="$v.form.lockoutDuration.$touch()"
+ :state="getValidationState(v$.form.lockoutDuration)"
+ :readonly="v$.form.unlockMethod.$model === 0"
+ @input="v$.form.lockoutDuration.$touch()"
/>
<b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.lockoutDuration.required">
+ <template v-if="!v$.form.lockoutDuration.required">
{{ $t('global.form.fieldRequired') }}
</template>
- <template v-else-if="!$v.form.lockoutDuration.minvalue">
+ <template v-else-if="!v$.form.lockoutDuration.minvalue">
{{ $t('global.form.mustBeAtLeast', { value: 1 }) }}
</template>
</b-form-invalid-feedback>
@@ -124,6 +124,7 @@
<script>
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
import { useVuelidate } from '@vuelidate/core';
+import { useI18n } from 'vue-i18n';
import {
required,
@@ -147,6 +148,7 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
lockoutThreshold: 0,
unlockMethod: 0,
@@ -181,15 +183,15 @@
},
methods: {
handleSubmit() {
- this.$v.$touch();
- if (this.$v.$invalid) return;
+ this.v$.$touch();
+ if (this.v$.$invalid) return;
let lockoutThreshold;
let lockoutDuration;
- if (this.$v.form.lockoutThreshold.$dirty) {
+ if (this.v$.form.lockoutThreshold.$dirty) {
lockoutThreshold = this.form.lockoutThreshold;
}
- if (this.$v.form.unlockMethod.$dirty) {
+ if (this.v$.form.unlockMethod.$dirty) {
lockoutDuration = this.form.unlockMethod
? this.form.lockoutDuration
: 0;
@@ -215,7 +217,7 @@
this.form.lockoutDuration = this.settings.lockoutDuration
? this.settings.lockoutDuration
: null;
- this.$v.$reset(); // clear validations
+ this.v$.$reset(); // clear validations
},
},
};
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) {
diff --git a/src/views/SecurityAndAccess/UserManagement/TableRoles.vue b/src/views/SecurityAndAccess/UserManagement/TableRoles.vue
index 9fb8013..5d92856 100644
--- a/src/views/SecurityAndAccess/UserManagement/TableRoles.vue
+++ b/src/views/SecurityAndAccess/UserManagement/TableRoles.vue
@@ -25,6 +25,7 @@
<script>
import Checkmark20 from '@carbon/icons-vue/es/checkmark/20';
+import i18n from '@/i18n';
export default {
components: {
@@ -34,7 +35,7 @@
return {
items: [
{
- description: this.$t(
+ description: i18n.global.t(
'pageUserManagement.tableRoles.configureComponentsManagedByThisService',
),
administrator: true,
@@ -43,7 +44,7 @@
noaccess: false,
},
{
- description: this.$t(
+ description: i18n.global.t(
'pageUserManagement.tableRoles.configureManagerResources',
),
administrator: true,
@@ -52,7 +53,7 @@
noaccess: false,
},
{
- description: this.$t(
+ description: i18n.global.t(
'pageUserManagement.tableRoles.updatePasswordForCurrentUserAccount',
),
administrator: true,
@@ -61,7 +62,7 @@
noaccess: false,
},
{
- description: this.$t(
+ description: i18n.global.t(
'pageUserManagement.tableRoles.configureUsersAndTheirAccounts',
),
administrator: true,
@@ -70,7 +71,7 @@
noaccess: false,
},
{
- description: this.$t(
+ description: i18n.global.t(
'pageUserManagement.tableRoles.logInToTheServiceAndReadResources',
),
administrator: true,
@@ -82,26 +83,26 @@
fields: [
{
key: 'description',
- label: this.$t('pageUserManagement.tableRoles.privilege'),
+ label: i18n.global.t('pageUserManagement.tableRoles.privilege'),
},
{
key: 'administrator',
- label: this.$t('pageUserManagement.tableRoles.administrator'),
+ label: i18n.global.t('pageUserManagement.tableRoles.administrator'),
class: 'text-center',
},
{
key: 'operator',
- label: this.$t('pageUserManagement.tableRoles.operator'),
+ label: i18n.global.t('pageUserManagement.tableRoles.operator'),
class: 'text-center',
},
{
key: 'readonly',
- label: this.$t('pageUserManagement.tableRoles.readOnly'),
+ label: i18n.global.t('pageUserManagement.tableRoles.readOnly'),
class: 'text-center',
},
{
key: 'noaccess',
- label: this.$t('pageUserManagement.tableRoles.noAccess'),
+ label: i18n.global.t('pageUserManagement.tableRoles.noAccess'),
class: 'text-center',
},
],
diff --git a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
index 43f3a40..99c344b 100644
--- a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
+++ b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
@@ -133,6 +133,8 @@
} from '@/components/Mixins/BVTableSelectableMixin';
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
export default {
name: 'UserManagement',
@@ -156,6 +158,7 @@
},
data() {
return {
+ $t: useI18n().t,
isBusy: true,
activeUser: null,
setting: {},
@@ -165,15 +168,15 @@
},
{
key: 'username',
- label: this.$t('pageUserManagement.table.username'),
+ label: i18n.global.t('pageUserManagement.table.username'),
},
{
key: 'privilege',
- label: this.$t('pageUserManagement.table.privilege'),
+ label: i18n.global.t('pageUserManagement.table.privilege'),
},
{
key: 'status',
- label: this.$t('pageUserManagement.table.status'),
+ label: i18n.global.t('pageUserManagement.table.status'),
},
{
key: 'actions',
@@ -184,15 +187,15 @@
tableToolbarActions: [
{
value: 'delete',
- label: this.$t('global.action.delete'),
+ label: i18n.global.t('global.action.delete'),
},
{
value: 'enable',
- label: this.$t('global.action.enable'),
+ label: i18n.global.t('global.action.enable'),
},
{
value: 'disable',
- label: this.$t('global.action.disable'),
+ label: i18n.global.t('global.action.disable'),
},
],
selectedRows: selectedRows,
@@ -219,7 +222,7 @@
{
value: 'edit',
enabled: this.editEnable(user),
- title: this.$t('pageUserManagement.editUser'),
+ title: i18n.global.t('pageUserManagement.editUser'),
},
{
value: 'delete',
@@ -229,7 +232,7 @@
: true && user.UserName === 'root'
? false
: true,
- title: this.$tc('pageUserManagement.deleteUser'),
+ title: i18n.global.t('pageUserManagement.deleteUser'),
},
],
...user,
@@ -267,13 +270,13 @@
initModalDelete(user) {
this.$bvModal
.msgBoxConfirm(
- this.$t('pageUserManagement.modal.deleteConfirmMessage', {
+ i18n.global.t('pageUserManagement.modal.deleteConfirmMessage', {
user: user.username,
}),
{
- title: this.$tc('pageUserManagement.deleteUser'),
- okTitle: this.$tc('pageUserManagement.deleteUser'),
- cancelTitle: this.$t('global.action.cancel'),
+ title: i18n.global.t('pageUserManagement.deleteUser'),
+ okTitle: i18n.global.t('pageUserManagement.deleteUser'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
autoFocusButton: 'ok',
},
)
@@ -316,20 +319,20 @@
case 'delete':
this.$bvModal
.msgBoxConfirm(
- this.$tc(
+ i18n.global.t(
'pageUserManagement.modal.batchDeleteConfirmMessage',
this.selectedRows.length,
),
{
- title: this.$tc(
+ title: i18n.global.t(
'pageUserManagement.deleteUser',
this.selectedRows.length,
),
- okTitle: this.$tc(
+ okTitle: i18n.global.t(
'pageUserManagement.deleteUser',
this.selectedRows.length,
),
- cancelTitle: this.$t('global.action.cancel'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
autoFocusButton: 'ok',
},
)