refactor: update vue-i18n usage to Composition API

ui/src/components/shared/BaseBreadcrumb.vue

@@ -74,7 +74,7 @@ const breadcrumbs = computed(() => {
                   class="text-lightText text-h6 text-decoration-none"
                   to="/"
                 >
-                  {{ $t('nav.Home') }}
+                  {{ t('nav.Home') }}
                 </router-link>
                 <div class="d-flex align-center px-2">
                   /

ui/src/views/configurations/ConfigRemoveDialog.vue

@@ -4,8 +4,7 @@ import { useMutation } from '@vue/apollo-composable'
 import { GetConfigs, RemoveConfig } from '@/gql/config'
 import { IconAlertOctagon, IconTrash } from '@tabler/icons-vue'
 import { useUIStore } from '@/stores/ui'
-
-const uiStore = useUIStore()
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
   title: {
@@ -25,6 +24,8 @@ const props = defineProps({
     default: undefined,
   },
 })
+const uiStore = useUIStore()
+const { t } = useI18n()
 
 const dialog = ref(false)
 
@@ -99,15 +100,15 @@ onError(e => {
             />
           </template>
           <template #title>
-            {{ $t('msgs.sureRemoveConfig', 1) }}
+            {{ t('msgs.sureRemoveConfig', 1) }}
           </template>
         </v-list-item>
 
         <v-divider />
 
         <v-card-text class="text-medium-emphasis pa-6">
           <div class="text-h6 mb-6">
-            {{ $t('msgs.actionCantUndo') }}
+            {{ t('msgs.actionCantUndo') }}
           </div>
           <div class="my-4">
             Configuration: <v-chip
@@ -121,51 +122,18 @@ onError(e => {
         <v-card-actions>
           <v-spacer />
           <v-btn @click="dialog = false">
-            {{ $t('actions.Cancel') }}
+            {{ t('actions.Cancel') }}
           </v-btn>
           <v-btn
             color="error"
             :loading="loading"
             variant="flat"
             @click="removeConfig"
           >
-            {{ $t('actions.Remove') }}
+            {{ t('actions.Remove') }}
           </v-btn>
         </v-card-actions>
       </v-card>
     </template>
   </v-dialog>
-
-<!--  <v-btn color="error">-->
-<!--    <template #prepend>-->
-<!--      <IconTrash />-->
-<!--    </template>-->
-<!--    Remove-->
-<!--    <v-dialog v-model="dialog" activator="parent" max-width="600">-->
-<!--      <v-card-->
-<!--        subtitle="Are you sure you want to remove this configuration?"-->
-<!--        title="Remove Configuration"-->
-<!--      >-->
-<!--        <v-card-text>-->
-<!--          <v-chip color="error" label>{{ props.title }}</v-chip>-->
-<!--          <v-alert-->
-<!--            v-if="error"-->
-<!--            class="mt-4"-->
-<!--            color="error"-->
-<!--            :text="error.message"-->
-<!--          />-->
-<!--        </v-card-text>-->
-<!--        <v-card-actions>-->
-<!--          <v-btn-->
-<!--            color="error"-->
-<!--            :loading="loading"-->
-<!--            text="true"-->
-<!--            variant="outlined"-->
-<!--            @click="removeConfig({ title: props.title })"-->
-<!--          > Confirm </v-btn>-->
-<!--        </v-card-actions>-->
-<!--      </v-card>-->
-<!--    </v-dialog>-->
-<!--  </v-btn>-->
 </template>
-

ui/src/views/configurations/UsedByListDialog.vue

@@ -2,6 +2,7 @@
 import { PropType, ref } from 'vue'
 import { MachineDetail } from '@/typed-graph'
 import { IconSearch } from '@tabler/icons-vue'
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
   title: {
@@ -14,6 +15,8 @@ const props = defineProps({
   },
 })
 
+const { t, d } = useI18n()
+
 const searchValue = ref('')
 const dialog = ref(false)
 const headers = [
@@ -39,7 +42,7 @@ const headers = [
         @click="dialog = true"
       >
         {{ props.usedBy.length }}
-      </v-btn> {{ $t('fields.Node', props.usedBy.length) }}
+      </v-btn> {{ t('fields.Node', props.usedBy.length) }}
     </template>
     <template #default="{ }">
       <v-data-table-virtual
@@ -64,7 +67,7 @@ const headers = [
           </v-text-field>
         </template>
         <template #item.startupTime="{ value }">
-          {{ $d(value, 'short') }}
+          {{ d(value, 'short') }}
         </template>
       </v-data-table-virtual>
     </template>

ui/src/views/deals/PendingDeals.vue

@@ -5,10 +5,12 @@ import { computed, ComputedRef, ref } from 'vue'
 import { OpenSectorPiece } from '@/typed-graph'
 import { DealSealNow, GetPendingDeals } from '@/gql/deal'
 import { IconReload, IconSearch } from '@tabler/icons-vue'
+import { useI18n } from 'vue-i18n'
 import { useUIStore } from '@/stores/ui'
 import { formatBytes } from '@/utils/helpers/formatBytes'
 
 const uiStore = useUIStore()
+const { d } = useI18n()
 
 const { result, loading, refetch } = useQuery(GetPendingDeals, null, () => ({
   fetchPolicy: 'cache-first',
@@ -121,7 +123,7 @@ const fillProgress = computed(() => (spID: number, sectorNumber: number): number
         sticky
       >
         <template #item.createdAt="{ item }">
-          {{ $d(item.createdAt, 'short') }}
+          {{ d(item.createdAt, 'short') }}
         </template>
         <template #group-header="{ item, index, columns, toggleGroup, isGroupOpen }">
           <div

ui/src/views/machines/MachineList.vue

@@ -6,6 +6,9 @@ import { useQuery } from '@vue/apollo-composable'
 import { GetMachines } from '@/gql/machine'
 import { Machine } from '@/typed-graph'
 import { formatBytes } from '@/utils/helpers/formatBytes'
+import { useI18n } from 'vue-i18n'
+
+const { d } = useI18n()
 
 const { result, loading, refetch } = useQuery(GetMachines, null, () => ({
   fetchPolicy: 'cache-first',
@@ -154,12 +157,12 @@ const headers = [
             </template>
             <template #item.lastContact="{ value }">
               <div :title="value">
-                {{ $d(value, 'short') }}
+                {{ d(value, 'short') }}
               </div>
             </template>
             <template #item.detail.startupTime="{ value }">
               <div :title="value">
-                {{ $d(value, 'short') }}
+                {{ d(value, 'short') }}
               </div>
             </template>
             <template #item.ram="{ value }">

ui/src/views/machines/MachineSummaryCharts.vue

@@ -5,6 +5,9 @@ import { GetMachinesSummary } from '@/gql/machine'
 import { MachineSummary } from '@/typed-graph'
 import { formatBytes } from '@/utils/helpers/formatBytes'
 import { IconBrandSpeedtest, IconCpu, IconServer } from '@tabler/icons-vue'
+import { useI18n } from 'vue-i18n'
+
+const { t, d } = useI18n()
 
 const { result } = useQuery(GetMachinesSummary, null, () => ({
   fetchPolicy: 'cache-first',
@@ -35,13 +38,13 @@ const cards = computed(() => [
             <div class="d-flex align-items-center justify-space-between">
               <div>
                 <h5 class="text-h5">
-                  {{ $t('fields.'+card.text) }}
+                  {{ t('fields.'+card.text) }}
                 </h5>
                 <h3 class="text-h3 my-2">
                   {{ card.value }}
                 </h3>
                 <h6 class="text-caption font-weight-medium mb-0">
-                  {{ $d(new Date(), "short") }}
+                  {{ d(new Date(), "short") }}
                 </h6>
               </div>
               <span class="d-flex align-center">

ui/src/views/machines/MachineTasks.vue

@@ -7,7 +7,7 @@ import { GetMachineTasks } from '@/gql/machine'
 import { IconReload } from '@tabler/icons-vue'
 import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n()
+const { t, d } = useI18n()
 
 const props = defineProps({
   id: {
@@ -66,10 +66,10 @@ const headers = [
         </v-chip>
       </template>
       <template #item.updateTime="{ value }">
-        {{ $d(value, 'short') }}
+        {{ d(value, 'short') }}
       </template>
       <template #item.postedTime="{ value }">
-        {{ $d(value, 'short') }}
+        {{ d(value, 'short') }}
       </template>
       <template #item.previousTask="{ value }">
         <!--        todo: add router link to previous task details-->

ui/src/views/messages/widgets/MessageSendsTable.vue

@@ -5,6 +5,7 @@ import { computed, ComputedRef, ref } from "vue"
 import { MessageSend } from "@/typed-graph"
 import { IconInfoCircle, IconReload } from "@tabler/icons-vue"
 import { useTableSettingsStore } from "@/stores/table"
+import { useI18n } from "vue-i18n"
 
 const props = defineProps({
   account: {
@@ -21,6 +22,8 @@ const props = defineProps({
   },
 })
 
+const { d } = useI18n()
+
 const tableSettings = useTableSettingsStore()
 
 const localAccount = ref(props.account)
@@ -121,7 +124,7 @@ const headers = [
           <TruncatedChip :text="value" />
         </template>
         <template #item.sendTime="{ value }">
-          {{ value ? $d(value, 'short') : '' }}
+          {{ value ? d(value, 'short') : '' }}
         </template>
         <template #item.signedCid="{ value }">
           <TruncatedChip :text="value" />

ui/src/views/mining/overview/TabCard.vue

@@ -4,6 +4,7 @@ import { IconCaretDown, IconCaretUp, IconCaretUpDown } from "@tabler/icons-vue"
 import { useQuery } from "@vue/apollo-composable"
 import { GetMiningCountSummaryWithPrevious } from "@/gql/mining"
 import TabCardChart from "@/views/mining/overview/TabCardChart.vue"
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
   start: {
@@ -20,6 +21,8 @@ const props = defineProps({
   },
 })
 
+const { d } = useI18n()
+
 const items = ref(['Today', 'Last 7 days', 'Last 30 days'])
 const selected = ref('Today')
 
@@ -101,7 +104,7 @@ const cards = computed(() => {
                   {{ card.value }}
                 </h5>
                 <span class="text-lightText text-caption pt-2">
-                  {{ $d(props.start, 'toShortDay') }} - {{ $d(props.end, 'toShortDay') }}
+                  {{ d(props.start, 'toShortDay') }} - {{ d(props.end, 'toShortDay') }}
                 </span>
               </div>
               <div class="d-flex align-center">

ui/src/views/mining/wins/MiningTaskList.vue

@@ -5,6 +5,7 @@ import { GetMiningWins } from '@/gql/mining'
 import { useQuery } from '@vue/apollo-composable'
 import { IconInfoCircle } from '@tabler/icons-vue'
 import { useTableSettingsStore } from "@/stores/table"
+import { useI18n } from 'vue-i18n'
 
 const props = defineProps({
   start: {
@@ -25,6 +26,7 @@ const props = defineProps({
   },
 })
 
+const { d } = useI18n()
 const tableSettings = useTableSettingsStore()
 
 const page = ref(1)
@@ -142,10 +144,10 @@ const headers = [
           <TruncatedChip :text="value" />
         </template>
         <template #item.minedAt="{value}">
-          {{ $d(value, 'long') }}
+          {{ d(value, 'long') }}
         </template>
         <template #item.submittedAt="{value}">
-          {{ $d(value, 'long') }}
+          {{ d(value, 'long') }}
         </template>
         <template #item.minedHeader="{value}">
           <v-dialog>

ui/src/views/porep/SectorList.vue

@@ -9,8 +9,10 @@ import SectorRemoveDialog from '@/views/sectors/SectorRemoveDialog.vue'
 import { RestartAllFailedSector } from '@/gql/sector'
 import { useUIStore } from '@/stores/ui'
 import SectorRestart from '@/views/sectors/SectorRestart.vue'
+import { useI18n } from 'vue-i18n'
 
 const uiStore = useUIStore()
+const { d } = useI18n()
 
 const { result, loading, refetch } = useQuery(GetSectorsPoreps, null, () => ({
   fetchPolicy: 'network-only',
@@ -179,7 +181,7 @@ onDone(() => {
               </div>
             </template>
             <template #item.createTime="{value}">
-              {{ $d(value, 'short') }}
+              {{ d(value, 'short') }}
             </template>
             <template #item.actions="{ item }">
               <SectorRemoveDialog

ui/src/views/sectors/SectorRemoveDialog.vue

@@ -4,6 +4,7 @@ import { useMutation } from '@vue/apollo-composable'
 import { RemoveSector } from '@/gql/sector'
 import { IconAlertOctagon, IconTrash } from '@tabler/icons-vue'
 import { useUIStore } from '@/stores/ui'
+import { useI18n } from 'vue-i18n'
 
 interface Sector {
   spId: string,
@@ -30,6 +31,7 @@ const props = defineProps({
   },
 })
 
+const { t } = useI18n()
 const uiStore = useUIStore()
 
 const success = ref(0)
@@ -118,15 +120,15 @@ function removeSector () {
             />
           </template>
           <template #title>
-            {{ $t('msgs.sureRemoveSector', sectors.length) }}
+            {{ t('msgs.sureRemoveSector', sectors.length) }}
           </template>
         </v-list-item>
 
         <v-divider />
 
         <v-card-text class="text-medium-emphasis pa-6">
           <div class="text-h6 mb-6">
-            {{ $t('msgs.actionCantUndo') }}
+            {{ t('msgs.actionCantUndo') }}
           </div>
 
           <template v-if="sectors.length > 1">
@@ -169,14 +171,14 @@ function removeSector () {
                 class="my-4  text-overline"
                 style="color: yellow"
               >
-                ({{ $t('msgs.sectorNotFailed', props.sectors.length) }})
+                ({{ t('msgs.sectorNotFailed', props.sectors.length) }})
               </div>
             </v-col>
             <v-col cols="auto">
               <v-checkbox v-model="doubleCheck">
                 <template #label>
                   {{
-                    $t('msgs.understand')
+                    t('msgs.understand')
                   }}
                 </template>
               </v-checkbox>
@@ -186,7 +188,7 @@ function removeSector () {
         <v-card-actions>
           <v-spacer />
           <v-btn @click="dialog = false">
-            {{ $t('actions.Cancel') }}
+            {{ t('actions.Cancel') }}
           </v-btn>
           <v-btn
             color="error"
@@ -195,7 +197,7 @@ function removeSector () {
             variant="flat"
             @click="removeSector"
           >
-            {{ $t('actions.Remove') }}
+            {{ t('actions.Remove') }}
           </v-btn>
         </v-card-actions>
       </v-card>