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/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',
               },
             )