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/Certificates/Certificates.vue b/src/views/SecurityAndAccess/Certificates/Certificates.vue
index bceab5d..a55b66c 100644
--- a/src/views/SecurityAndAccess/Certificates/Certificates.vue
+++ b/src/views/SecurityAndAccess/Certificates/Certificates.vue
@@ -63,7 +63,7 @@
:empty-text="$t('global.table.emptyMessage')"
>
<template #cell(validFrom)="{ value }">
- {{ value }}
+ {{ $filters.formatDate(value) }}
</template>
<template #cell(validUntil)="{ value }">
@@ -71,7 +71,7 @@
v-if="getDaysUntilExpired(value) < 31"
:status="getIconStatus(value)"
/>
- {{ value }}
+ {{ $filters.formatDate(value) }}
</template>
<template #cell(actions)="{ value, item }">
@@ -113,6 +113,8 @@
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import LoadingBarMixin from '@/components/Mixins/LoadingBarMixin';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
export default {
name: 'Certificates',
@@ -134,29 +136,30 @@
},
data() {
return {
+ $t: useI18n().t,
isBusy: true,
modalCertificate: null,
fileTypeCorrect: undefined,
fields: [
{
key: 'certificate',
- label: this.$t('pageCertificates.table.certificate'),
+ label: i18n.global.t('pageCertificates.table.certificate'),
},
{
key: 'issuedBy',
- label: this.$t('pageCertificates.table.issuedBy'),
+ label: i18n.global.t('pageCertificates.table.issuedBy'),
},
{
key: 'issuedTo',
- label: this.$t('pageCertificates.table.issuedTo'),
+ label: i18n.global.t('pageCertificates.table.issuedTo'),
},
{
key: 'validFrom',
- label: this.$t('pageCertificates.table.validFrom'),
+ label: i18n.global.t('pageCertificates.table.validFrom'),
},
{
key: 'validUntil',
- label: this.$t('pageCertificates.table.validUntil'),
+ label: i18n.global.t('pageCertificates.table.validUntil'),
},
{
key: 'actions',
@@ -177,11 +180,11 @@
actions: [
{
value: 'replace',
- title: this.$t('pageCertificates.replaceCertificate'),
+ title: i18n.global.t('pageCertificates.replaceCertificate'),
},
{
value: 'delete',
- title: this.$t('pageCertificates.deleteCertificate'),
+ title: i18n.global.t('pageCertificates.deleteCertificate'),
enabled:
certificate.type === 'TrustStore Certificate' ? true : false,
},
@@ -242,14 +245,14 @@
initModalDeleteCertificate(certificate) {
this.$bvModal
.msgBoxConfirm(
- this.$t('pageCertificates.modal.deleteConfirmMessage', {
+ i18n.global.t('pageCertificates.modal.deleteConfirmMessage', {
issuedBy: certificate.issuedBy,
certificate: certificate.certificate,
}),
{
- title: this.$t('pageCertificates.deleteCertificate'),
- okTitle: this.$t('global.action.delete'),
- cancelTitle: this.$t('global.action.cancel'),
+ title: i18n.global.t('pageCertificates.deleteCertificate'),
+ okTitle: i18n.global.t('global.action.delete'),
+ cancelTitle: i18n.global.t('global.action.cancel'),
autoFocusButton: 'ok',
},
)
@@ -265,9 +268,13 @@
this.addNewCertificate(file, type);
} else {
this.errorToast(
- this.$t('pageCertificates.alert.incorrectCertificateFileType'),
+ i18n.global.t(
+ 'pageCertificates.alert.incorrectCertificateFileType',
+ ),
{
- title: this.$t('pageCertificates.toast.errorAddCertificate'),
+ title: i18n.global.t(
+ 'pageCertificates.toast.errorAddCertificate',
+ ),
},
);
}
diff --git a/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue b/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
index 03ab8f4..a74a1e4 100644
--- a/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
+++ b/src/views/SecurityAndAccess/Certificates/ModalGenerateCsr.vue
@@ -8,7 +8,7 @@
:title="$t('pageCertificates.modal.generateACertificateSigningRequest')"
@ok="onOkGenerateCsrModal"
@cancel="resetForm"
- @hidden="$v.$reset()"
+ @hidden="v$.$reset()"
>
<b-form id="generate-csr-form" novalidate>
<b-container fluid>
@@ -25,8 +25,8 @@
v-model="form.certificateType"
data-test-id="modalGenerateCsr-select-certificateType"
:options="certificateOptions"
- :state="getValidationState($v.form.certificateType)"
- @input="$v.form.certificateType.$touch()"
+ :state="getValidationState(v$.form.certificateType)"
+ @input="v$.form.certificateType.$touch()"
>
<template #first>
<b-form-select-option :value="null" disabled>
@@ -49,8 +49,8 @@
v-model="form.country"
data-test-id="modalGenerateCsr-select-country"
:options="countryOptions"
- :state="getValidationState($v.form.country)"
- @input="$v.form.country.$touch()"
+ :state="getValidationState(v$.form.country)"
+ @input="v$.form.country.$touch()"
>
<template #first>
<b-form-select-option :value="null" disabled>
@@ -75,7 +75,7 @@
v-model="form.state"
type="text"
data-test-id="modalGenerateCsr-input-state"
- :state="getValidationState($v.form.state)"
+ :state="getValidationState(v$.form.state)"
/>
<b-form-invalid-feedback role="alert">
{{ $t('global.form.fieldRequired') }}
@@ -92,7 +92,7 @@
v-model="form.city"
type="text"
data-test-id="modalGenerateCsr-input-city"
- :state="getValidationState($v.form.city)"
+ :state="getValidationState(v$.form.city)"
/>
<b-form-invalid-feedback role="alert">
{{ $t('global.form.fieldRequired') }}
@@ -111,7 +111,7 @@
v-model="form.companyName"
type="text"
data-test-id="modalGenerateCsr-input-companyName"
- :state="getValidationState($v.form.companyName)"
+ :state="getValidationState(v$.form.companyName)"
/>
<b-form-invalid-feedback role="alert">
{{ $t('global.form.fieldRequired') }}
@@ -128,7 +128,7 @@
v-model="form.companyUnit"
type="text"
data-test-id="modalGenerateCsr-input-companyUnit"
- :state="getValidationState($v.form.companyUnit)"
+ :state="getValidationState(v$.form.companyUnit)"
/>
<b-form-invalid-feedback role="alert">
{{ $t('global.form.fieldRequired') }}
@@ -147,7 +147,7 @@
v-model="form.commonName"
type="text"
data-test-id="modalGenerateCsr-input-commonName"
- :state="getValidationState($v.form.commonName)"
+ :state="getValidationState(v$.form.commonName)"
/>
<b-form-invalid-feedback role="alert">
{{ $t('global.form.fieldRequired') }}
@@ -240,8 +240,8 @@
v-model="form.keyPairAlgorithm"
data-test-id="modalGenerateCsr-select-keyPairAlgorithm"
:options="keyPairAlgorithmOptions"
- :state="getValidationState($v.form.keyPairAlgorithm)"
- @input="$v.form.keyPairAlgorithm.$touch()"
+ :state="getValidationState(v$.form.keyPairAlgorithm)"
+ @input="v$.form.keyPairAlgorithm.$touch()"
>
<template #first>
<b-form-select-option :value="null" disabled>
@@ -257,7 +257,7 @@
</b-row>
<b-row>
<b-col lg="12">
- <template v-if="$v.form.keyPairAlgorithm.$model === 'EC'">
+ <template v-if="v$.form.keyPairAlgorithm.$model === 'EC'">
<b-form-group
:label="$t('pageCertificates.modal.keyCurveId')"
label-for="key-curve-id"
@@ -267,8 +267,8 @@
v-model="form.keyCurveId"
data-test-id="modalGenerateCsr-select-keyCurveId"
:options="keyCurveIdOptions"
- :state="getValidationState($v.form.keyCurveId)"
- @input="$v.form.keyCurveId.$touch()"
+ :state="getValidationState(v$.form.keyCurveId)"
+ @input="v$.form.keyCurveId.$touch()"
>
<template #first>
<b-form-select-option :value="null" disabled>
@@ -281,7 +281,7 @@
</b-form-invalid-feedback>
</b-form-group>
</template>
- <template v-if="$v.form.keyPairAlgorithm.$model === 'RSA'">
+ <template v-if="v$.form.keyPairAlgorithm.$model === 'RSA'">
<b-form-group
:label="$t('pageCertificates.modal.keyBitLength')"
label-for="key-bit-length"
@@ -291,8 +291,8 @@
v-model="form.keyBitLength"
data-test-id="modalGenerateCsr-select-keyBitLength"
:options="keyBitLengthOptions"
- :state="getValidationState($v.form.keyBitLength)"
- @input="$v.form.keyBitLength.$touch()"
+ :state="getValidationState(v$.form.keyBitLength)"
+ @input="v$.form.keyBitLength.$touch()"
>
<template #first>
<b-form-select-option :value="null" disabled>
@@ -369,6 +369,7 @@
import BVToastMixin from '@/components/Mixins/BVToastMixin';
import VuelidateMixin from '@/components/Mixins/VuelidateMixin.js';
import { useVuelidate } from '@vuelidate/core';
+import { useI18n } from 'vue-i18n';
export default {
name: 'ModalGenerateCsr',
@@ -381,6 +382,7 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
certificateType: null,
country: null,
@@ -449,14 +451,14 @@
},
methods: {
handleSubmit() {
- this.$v.$touch();
- if (this.$v.$invalid) return;
+ this.v$.$touch();
+ if (this.v$.$invalid) return;
this.$store
.dispatch('certificates/generateCsr', this.form)
.then(({ data: { CSRString } }) => {
this.csrString = CSRString;
this.$bvModal.show('csr-string');
- this.$v.$reset();
+ this.v$.$reset();
});
},
resetForm() {
diff --git a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
index 60170f1..3a8cd3f 100644
--- a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
+++ b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
@@ -27,12 +27,12 @@
id="certificate-type"
v-model="form.certificateType"
:options="certificateOptions"
- :state="getValidationState($v.form.certificateType)"
- @input="$v.form.certificateType.$touch()"
+ :state="getValidationState(v$.form.certificateType)"
+ @input="v$.form.certificateType.$touch()"
>
</b-form-select>
<b-form-invalid-feedback role="alert">
- <template v-if="!$v.form.certificateType.required">
+ <template v-if="!v$.form.certificateType.required">
{{ $t('global.form.fieldRequired') }}
</template>
</b-form-invalid-feedback>
@@ -44,7 +44,7 @@
id="certificate-file"
v-model="form.file"
accept=".pem"
- :state="getValidationState($v.form.file)"
+ :state="getValidationState(v$.form.file)"
>
<template #invalid>
<b-form-invalid-feedback role="alert">
@@ -74,6 +74,7 @@
import { useVuelidate } from '@vuelidate/core';
import FormFile from '@/components/Global/FormFile';
+import { useI18n } from 'vue-i18n';
export default {
components: { FormFile },
@@ -98,6 +99,7 @@
},
data() {
return {
+ $t: useI18n().t,
form: {
certificateType: null,
file: 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.certificate,
file: this.form.file,
@@ -162,7 +164,7 @@
? this.certificateOptions[0].value
: null;
this.form.file = null;
- this.$v.$reset();
+ this.v$.$reset();
},
onOk(bvModalEvt) {
// prevent modal close