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/Operations/Firmware/Firmware.vue b/src/views/Operations/Firmware/Firmware.vue
index 44a721a..db1a4c7 100644
--- a/src/views/Operations/Firmware/Firmware.vue
+++ b/src/views/Operations/Firmware/Firmware.vue
@@ -46,6 +46,7 @@
 import PageTitle from '@/components/Global/PageTitle';
 
 import LoadingBarMixin, { loading } from '@/components/Mixins/LoadingBarMixin';
+import { useI18n } from 'vue-i18n';
 
 export default {
   name: 'FirmwareSingleImage',
@@ -64,6 +65,7 @@
   },
   data() {
     return {
+      $t: useI18n().t,
       loading,
       isServerPowerOffRequired:
         process.env.VUE_APP_SERVER_OFF_REQUIRED === 'true',
diff --git a/src/views/Operations/Firmware/FirmwareAlertServerPower.vue b/src/views/Operations/Firmware/FirmwareAlertServerPower.vue
index 08e4ae9..94cac57 100644
--- a/src/views/Operations/Firmware/FirmwareAlertServerPower.vue
+++ b/src/views/Operations/Firmware/FirmwareAlertServerPower.vue
@@ -32,6 +32,7 @@
 
 <script>
 import Alert from '@/components/Global/Alert';
+import { useI18n } from 'vue-i18n';
 
 export default {
   components: { Alert },
@@ -42,6 +43,11 @@
       default: true,
     },
   },
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
   computed: {
     isOperationInProgress() {
       return this.$store.getters['controls/isOperationInProgress'];
diff --git a/src/views/Operations/Firmware/FirmwareCardsBmc.vue b/src/views/Operations/Firmware/FirmwareCardsBmc.vue
index bfca14c..2d18d5b 100644
--- a/src/views/Operations/Firmware/FirmwareCardsBmc.vue
+++ b/src/views/Operations/Firmware/FirmwareCardsBmc.vue
@@ -58,6 +58,8 @@
 import BVToastMixin from '@/components/Mixins/BVToastMixin';
 
 import ModalSwitchToRunning from './FirmwareModalSwitchToRunning';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
 
 export default {
   components: { IconSwitch, ModalSwitchToRunning, PageSection },
@@ -76,6 +78,7 @@
   },
   data() {
     return {
+      $t: useI18n().t,
       loading,
       switchToBackupImageDisabled:
         process.env.VUE_APP_SWITCH_TO_BACKUP_IMAGE_DISABLED === 'true',
@@ -87,9 +90,9 @@
     },
     sectionTitle() {
       if (this.isSingleFileUploadEnabled) {
-        return this.$t('pageFirmware.sectionTitleBmcCardsCombined');
+        return i18n.global.t('pageFirmware.sectionTitleBmcCardsCombined');
       }
-      return this.$t('pageFirmware.sectionTitleBmcCards');
+      return i18n.global.t('pageFirmware.sectionTitleBmcCards');
     },
     running() {
       return this.$store.getters['firmware/activeBmcFirmware'];
@@ -117,18 +120,24 @@
       this.startLoader();
       const timerId = setTimeout(() => {
         this.endLoader();
-        this.infoToast(this.$t('pageFirmware.toast.verifySwitchMessage'), {
-          title: this.$t('pageFirmware.toast.verifySwitch'),
-          refreshAction: true,
-        });
+        this.infoToast(
+          i18n.global.t('pageFirmware.toast.verifySwitchMessage'),
+          {
+            title: i18n.global.t('pageFirmware.toast.verifySwitch'),
+            refreshAction: true,
+          },
+        );
       }, 60000);
 
       this.$store
         .dispatch('firmware/switchBmcFirmwareAndReboot')
         .then(() =>
-          this.infoToast(this.$t('pageFirmware.toast.rebootStartedMessage'), {
-            title: this.$t('pageFirmware.toast.rebootStarted'),
-          }),
+          this.infoToast(
+            i18n.global.t('pageFirmware.toast.rebootStartedMessage'),
+            {
+              title: i18n.global.t('pageFirmware.toast.rebootStarted'),
+            },
+          ),
         )
         .catch(({ message }) => {
           this.errorToast(message);
diff --git a/src/views/Operations/Firmware/FirmwareCardsHost.vue b/src/views/Operations/Firmware/FirmwareCardsHost.vue
index 8fd0cac..852e9fb 100644
--- a/src/views/Operations/Firmware/FirmwareCardsHost.vue
+++ b/src/views/Operations/Firmware/FirmwareCardsHost.vue
@@ -38,9 +38,15 @@
 
 <script>
 import PageSection from '@/components/Global/PageSection';
+import { useI18n } from 'vue-i18n';
 
 export default {
   components: { PageSection },
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
   computed: {
     running() {
       return this.$store.getters['firmware/activeHostFirmware'];
diff --git a/src/views/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
index 3f114a9..dfb5c68 100644
--- a/src/views/Operations/Firmware/FirmwareFormUpdate.vue
+++ b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
@@ -50,6 +50,8 @@
 
 import FormFile from '@/components/Global/FormFile';
 import ModalUpdateFirmware from './FirmwareModalUpdateFirmware';
+import { useI18n } from 'vue-i18n';
+import i18n from '@/i18n';
 
 export default {
   components: { FormFile, ModalUpdateFirmware },
@@ -67,11 +69,12 @@
   },
   setup() {
     return {
-      v$: useVuelidate(),
+      $v: useVuelidate(),
     };
   },
   data() {
     return {
+      $t: useI18n().t,
       loading,
       file: null,
       isServerPowerOffRequired:
@@ -93,13 +96,16 @@
       this.startLoader();
       const timerId = setTimeout(() => {
         this.endLoader();
-        this.infoToast(this.$t('pageFirmware.toast.verifyUpdateMessage'), {
-          title: this.$t('pageFirmware.toast.verifyUpdate'),
-          refreshAction: true,
-        });
+        this.infoToast(
+          i18n.global.t('pageFirmware.toast.verifyUpdateMessage'),
+          {
+            title: i18n.global.t('pageFirmware.toast.verifyUpdate'),
+            refreshAction: true,
+          },
+        );
       }, 360000);
-      this.infoToast(this.$t('pageFirmware.toast.updateStartedMessage'), {
-        title: this.$t('pageFirmware.toast.updateStarted'),
+      this.infoToast(i18n.global.t('pageFirmware.toast.updateStartedMessage'), {
+        title: i18n.global.t('pageFirmware.toast.updateStarted'),
         timestamp: true,
       });
       this.dispatchWorkstationUpload(timerId);
diff --git a/src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue b/src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue
index dc4a497..9af8fb5 100644
--- a/src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue
+++ b/src/views/Operations/Firmware/FirmwareModalSwitchToRunning.vue
@@ -20,6 +20,7 @@
 </template>
 
 <script>
+import { useI18n } from 'vue-i18n';
 export default {
   props: {
     backup: {
@@ -27,5 +28,10 @@
       required: true,
     },
   },
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
 };
 </script>
diff --git a/src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue b/src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue
index 1835521..183cab7 100644
--- a/src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue
+++ b/src/views/Operations/Firmware/FirmwareModalUpdateFirmware.vue
@@ -28,7 +28,13 @@
 </template>
 
 <script>
+import { useI18n } from 'vue-i18n';
 export default {
+  data() {
+    return {
+      $t: useI18n().t,
+    };
+  },
   computed: {
     runningBmc() {
       return this.$store.getters['firmware/activeBmcFirmware'];