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/Ldap/Ldap.vue b/src/views/SecurityAndAccess/Ldap/Ldap.vue
index 28d2b1c..eab2737 100644
--- a/src/views/SecurityAndAccess/Ldap/Ldap.vue
+++ b/src/views/SecurityAndAccess/Ldap/Ldap.vue
@@ -44,7 +44,7 @@
:disabled="
!caCertificateExpiration || !ldapCertificateExpiration
"
- @change="$v.form.secureLdapEnabled.$touch()"
+ @change="v$.form.secureLdapEnabled.$touch()"
>
{{ $t('global.action.enable') }}
</b-form-checkbox>
@@ -52,12 +52,12 @@
<dl>
<dt>{{ $t('pageLdap.form.caCertificateValidUntil') }}</dt>
<dd v-if="caCertificateExpiration">
- {{ caCertificateExpiration }}
+ {{ $filters.formatDate(caCertificateExpiration) }}
</dd>
<dd v-else>--</dd>
<dt>{{ $t('pageLdap.form.ldapCertificateValidUntil') }}</dt>
<dd v-if="ldapCertificateExpiration">
- {{ ldapCertificateExpiration }}
+ {{ $filters.formatDate(ldapCertificateExpiration) }}
</dd>
<dd v-else>--</dd>
</dl>
@@ -105,8 +105,8 @@
id="server-uri"
v-model="form.serverUri"
data-test-id="ldap-input-serverUri"
- :state="getValidationState($v.form.serverUri)"
- @change="$v.form.serverUri.$touch()"
+ :state="getValidationState(v$.form.serverUri)"
+ @change="v$.form.serverUri.$touch()"
/>
<b-form-invalid-feedback role="alert">
{{ $t('global.form.fieldRequired') }}
@@ -123,8 +123,8 @@
id="bind-dn"
v-model="form.bindDn"
data-test-id="ldap-input-bindDn"
- :state="getValidationState($v.form.bindDn)"
- @change="$v.form.bindDn.$touch()"
+ :state="getValidationState(v$.form.bindDn)"
+ @change="v$.form.bindDn.$touch()"
/>
<b-form-invalid-feedback role="alert">
{{ $t('global.form.fieldRequired') }}
@@ -143,9 +143,9 @@
id="bind-password"
v-model="form.bindPassword"
type="password"
- :state="getValidationState($v.form.bindPassword)"
+ :state="getValidationState(v$.form.bindPassword)"
class="form-control-with-button"
- @change="$v.form.bindPassword.$touch()"
+ @change="v$.form.bindPassword.$touch()"
/>
<b-form-invalid-feedback role="alert">
{{ $t('global.form.fieldRequired') }}
@@ -162,8 +162,8 @@
id="base-dn"
v-model="form.baseDn"
data-test-id="ldap-input-baseDn"
- :state="getValidationState($v.form.baseDn)"
- @change="$v.form.baseDn.$touch()"
+ :state="getValidationState(v$.form.baseDn)"
+ @change="v$.form.baseDn.$touch()"
/>
<b-form-invalid-feedback role="alert">
{{ $t('global.form.fieldRequired') }}
@@ -182,7 +182,7 @@
id="user-id-attribute"
v-model="form.userIdAttribute"
data-test-id="ldap-input-userIdAttribute"
- @change="$v.form.userIdAttribute.$touch()"
+ @change="v$.form.userIdAttribute.$touch()"
/>
</b-form-group>
</b-col>
@@ -198,7 +198,7 @@
id="group-id-attribute"
v-model="form.groupIdAttribute"
data-test-id="ldap-input-groupIdAttribute"
- @change="$v.form.groupIdAttribute.$touch()"
+ @change="v$.form.groupIdAttribute.$touch()"
/>
</b-form-group>
</b-col>
@@ -243,6 +243,7 @@
import PageSection from '@/components/Global/PageSection';
import InfoTooltip from '@/components/Global/InfoTooltip';
import TableRoleGroups from './TableRoleGroups';
+import { useI18n } from 'vue-i18n';
export default {
name: 'Ldap',
@@ -265,6 +266,7 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
ldapAuthenticationEnabled: this.$store.getters['ldap/isServiceEnabled'],
secureLdapEnabled: false,
@@ -388,8 +390,8 @@
this.form.groupIdAttribute = groupsAttribute;
},
handleSubmit() {
- this.$v.$touch();
- if (this.$v.$invalid) return;
+ this.v$.$touch();
+ if (this.v$.$invalid) return;
const data = {
serviceEnabled: this.form.ldapAuthenticationEnabled,
activeDirectoryEnabled: this.form.activeDirectoryEnabled,
@@ -411,12 +413,12 @@
})
.finally(() => {
this.form.bindPassword = '';
- this.$v.form.$reset();
+ this.v$.form.$reset();
this.endLoader();
});
},
onChangeServiceType(isActiveDirectoryEnabled) {
- this.$v.form.activeDirectoryEnabled.$touch();
+ this.v$.form.activeDirectoryEnabled.$touch();
const serviceType = isActiveDirectoryEnabled
? this.activeDirectory
: this.ldap;
@@ -425,7 +427,7 @@
this.setFormValues(serviceType);
},
onChangeldapAuthenticationEnabled(isServiceEnabled) {
- this.$v.form.ldapAuthenticationEnabled.$touch();
+ this.v$.form.ldapAuthenticationEnabled.$touch();
if (!isServiceEnabled) {
// Request will fail if sent with empty values.
// The frontend only checks for required fields
diff --git a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
index 9b50abd..d22aa6a 100644
--- a/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
+++ b/src/views/SecurityAndAccess/Ldap/ModalAddRoleGroup.vue
@@ -29,8 +29,8 @@
<b-form-input
id="role-group-name"
v-model="form.groupName"
- :state="getValidationState($v.form.groupName)"
- @input="$v.form.groupName.$touch()"
+ :state="getValidationState(v$.form.groupName)"
+ @input="v$.form.groupName.$touch()"
/>
<b-form-invalid-feedback role="alert">
{{ $t('global.form.fieldRequired') }}
@@ -46,8 +46,8 @@
id="privilege"
v-model="form.groupPrivilege"
:options="accountRoles"
- :state="getValidationState($v.form.groupPrivilege)"
- @input="$v.form.groupPrivilege.$touch()"
+ :state="getValidationState(v$.form.groupPrivilege)"
+ @input="v$.form.groupPrivilege.$touch()"
>
<template v-if="!roleGroup" #first>
<b-form-select-option :value="null" disabled>
@@ -83,6 +83,7 @@
import { required, requiredIf } from '@vuelidate/validators';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
import { useVuelidate } from '@vuelidate/core';
+import { useI18n } from 'vue-i18n';
export default {
mixins: [VuelidateMixin],
@@ -106,6 +107,7 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
groupName: null,
groupPrivilege: null,
@@ -140,8 +142,8 @@
},
methods: {
handleSubmit() {
- this.$v.$touch();
- if (this.$v.$invalid) return;
+ this.v$.$touch();
+ if (this.v$.$invalid) return;
this.$emit('ok', {
addNew: !this.roleGroup,
groupName: this.form.groupName,
@@ -157,7 +159,7 @@
resetForm() {
this.form.groupName = null;
this.form.groupPrivilege = null;
- this.$v.$reset();
+ this.v$.$reset();
this.$emit('hidden');
},
onOk(bvModalEvt) {
diff --git a/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue b/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
index eeebfb9..f73d927 100644
--- a/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
+++ b/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
@@ -108,6 +108,8 @@
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import ModalAddRoleGroup from './ModalAddRoleGroup';
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
export default {
components: {
@@ -122,6 +124,7 @@
mixins: [BVTableSelectableMixin, BVToastMixin, LoadingBarMixin],
data() {
return {
+ $t: useI18n().t,
isBusy: true,
activeRoleGroup: null,
fields: [
@@ -132,12 +135,12 @@
{
key: 'groupName',
sortable: true,
- label: this.$t('pageLdap.tableRoleGroups.groupName'),
+ label: i18n.global.t('pageLdap.tableRoleGroups.groupName'),
},
{
key: 'groupPrivilege',
sortable: true,
- label: this.$t('pageLdap.tableRoleGroups.groupPrivilege'),
+ label: i18n.global.t('pageLdap.tableRoleGroups.groupPrivilege'),
},
{
key: 'actions',
@@ -149,7 +152,7 @@
batchActions: [
{
value: 'delete',
- label: this.$t('global.action.delete'),
+ label: i18n.global.t('global.action.delete'),
},
],
selectedRows: selectedRows,
@@ -167,12 +170,12 @@
actions: [
{
value: 'edit',
- title: this.$t('global.action.edit'),
+ title: i18n.global.t('global.action.edit'),
enabled: this.isServiceEnabled,
},
{
value: 'delete',
- title: this.$t('global.action.delete'),
+ title: i18n.global.t('global.action.delete'),
enabled: this.isServiceEnabled,
},
],
@@ -189,14 +192,14 @@
onBatchAction() {
this.$bvModal
.msgBoxConfirm(
- this.$tc(
+ i18n.global.t(
'pageLdap.modal.deleteRoleGroupBatchConfirmMessage',
this.selectedRows.length,
),
{
- title: this.$t('pageLdap.modal.deleteRoleGroup'),
- okTitle: this.$t('global.action.delete'),
- cancelTitle: this.$t('global.action.cancel'),
+ title: i18n.global.t('pageLdap.modal.deleteRoleGroup'),
+ okTitle: i18n.global.t('global.action.delete'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
autoFocusButton: 'ok',
},
)
@@ -221,13 +224,13 @@
case 'delete':
this.$bvModal
.msgBoxConfirm(
- this.$t('pageLdap.modal.deleteRoleGroupConfirmMessage', {
+ i18n.global.t('pageLdap.modal.deleteRoleGroupConfirmMessage', {
groupName: row.groupName,
}),
{
- title: this.$t('pageLdap.modal.deleteRoleGroup'),
- okTitle: this.$t('global.action.delete'),
- cancelTitle: this.$t('global.action.cancel'),
+ title: i18n.global.t('pageLdap.modal.deleteRoleGroup'),
+ okTitle: i18n.global.t('global.action.delete'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
autoFocusButton: 'ok',
},
)