translate instance root components

body, header, connectPhone

Author: gabrielpastori1

src/components/instance/InstanceBody.vue

@@ -2,7 +2,7 @@
   <v-tabs v-model="tab" background-color="transparent" color="primary" grow>
     <v-tab v-for="tab in tabs" :key="tab.id" :value="tab.id">
       <v-icon start>{{ tab.icon }}</v-icon>
-      {{ tab.title }}
+      {{ $t(`instanceTabs.${tab.id}`) }}
     </v-tab>
   </v-tabs>
 
@@ -62,7 +62,6 @@ export default {
       {
         id: "settings",
         icon: "mdi-cog",
-        title: "Configurações",
         components: [
           "Options",
           "Webhook",
@@ -75,7 +74,6 @@ export default {
       {
         id: "message",
         icon: "mdi-message",
-        title: "Mensagens",
         components: [
           "OpenSendMessage",
           "HasWhatsapp",
@@ -87,7 +85,6 @@ export default {
       {
         id: "profile",
         icon: "mdi-account",
-        title: "Perfil",
         components: [
           "ConnectionAlert",
           "BasicInfo",

src/components/instance/InstanceHeader.vue

@@ -63,7 +63,7 @@
         size="small"
       >
         <v-icon start>mdi-restart</v-icon>
-        {{ restart.success ? "Reiniciada!" : "Reiniciar" }}
+        {{ restart.success ? `${$t("restarted")}` : `${$t("restart")}` }}
       </v-btn>
       <v-btn
         @click="disconnectInstance"
@@ -76,7 +76,7 @@
         size="small"
       >
         <v-icon start>mdi-cellphone-nfc-off</v-icon>
-        {{ disconnect.confirm ? "Tem Certeza?" : "Desconectar" }}
+        {{ disconnect.confirm ? `${$t("sure")}` : `${$t("disconnect")}` }}
       </v-btn>
     </div>
   </v-card>
@@ -157,10 +157,8 @@ export default {
   computed: {
     owner() {
       if (!this.instance?.instance?.owner)
-        return (
-          this.statusMapper[this.instance.instance.status]?.text ||
-          "Desconhecido"
-        );
+        return this.$t(`status.${this.instance.instance.status}`) || this.$t("unknown");
+
       return (this.instance?.instance?.owner || "").split("@")[0];
     },
   },

src/components/modal/ConnectPhone.vue

@@ -1,17 +1,23 @@
 <template>
-  <v-card v-if="instance.instance?.status != 'open'" @click="startConnect" elevation="0">
+  <v-card
+    v-if="instance.instance?.status != 'open'"
+    @click="startConnect"
+    elevation="0"
+  >
     <v-alert
       icon="mdi-qrcode-scan"
       color="deep-orange-darken-2"
       class="text-white"
     >
       <div class="d-flex justify-space-between align-center flex-wrap">
-        <b>Telefone não conectado</b>
-        <v-btn @click="startConnect" size="small"> Conectar </v-btn>
+        <b>{{ $t("connectPhone.title") }}</b>
+        <v-btn @click="startConnect" size="small">
+          {{ $t("connection.action") }}
+        </v-btn>
       </div>
     </v-alert>
   </v-card>
-  <v-dialog v-model="dialog" max-width="350px">
+  <v-dialog v-model="dialog" max-width="350px" :persistent="loading">
     <v-card :loading="loading && qrCode">
       <v-card-text class="pt-6">
         <v-img v-if="qrCode" :src="qrCode" width="300px" height="300px" />
@@ -38,7 +44,7 @@
           class="mt-2"
         >
           <v-icon start size="small">mdi-refresh</v-icon>
-          Atualizar
+          {{ $t("refresh") }}
         </v-btn>
 
         <v-alert type="error" v-if="error" class="mt-2">
@@ -47,7 +53,9 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn text @click="dialog = false" :disabled="loading"> Cancel </v-btn>
+        <v-btn text @click="dialog = false" :disabled="loading">
+          {{ $t("cancel") }}
+        </v-btn>
         <v-spacer></v-spacer>
       </v-card-actions>
     </v-card>

src/components/modal/Settings.vue

@@ -32,7 +32,9 @@
       </v-card-text>
       <v-card-actions>
         <div class="d-flex flex-wrap justify-space-between w-100 align-center">
-          <v-btn size="small" text @click="showAbout"> {{ $t('about.title') }} </v-btn>
+          <v-btn size="small" text @click="showAbout">
+            {{ $t("about.title") }}
+          </v-btn>
           <div class="d-flex justify-end flex-grow-1 gap-1">
             <v-btn
               v-if="!!AppStore.connection.host"
@@ -72,16 +74,18 @@
               :disabled="!valid"
               :loading="loading"
             >
-            {{ $t('connection.action')  }}
-          </v-btn>
+              {{ $t("connection.action") }}
+            </v-btn>
           </div>
         </div>
       </v-card-actions>
     </v-card>
 
     <v-card class="mt-2" v-if="connectionsList && connectionsList.length > 1">
       <v-card-text>
-        <h3 class="mb-4">{{ $t('connection.saved') }}</h3>
+        <h3 class="mb-4">
+          {{ $t("connection.saved", connectionsList.length) }}
+        </h3>
         <v-list>
           <v-list-item
             v-for="conect in connectionsList"

src/i18n/en.js

@@ -1,15 +1,21 @@
-
+// src/i18n/en.js
 import { en } from 'vuetify/locale'
 
-
 export default {
   $vuetify: { ...en },
   all: "All",
   close: "Close",
+  cancel: "Cancel",
+  restart: "Restart",
+  restarted: "Restarted",
+  refresh: "Refresh",
+  disconnect: "Disconnect",
+  sure: "Sure?",
   instance: "Instance | Instances",
   search: "Search",
   loading: "Loading",
   noInstances: "No instances found",
+  unknown: "Unknown",
   status: {
     close: "Disconnected",
     connecting: "Connecting",
@@ -28,5 +34,13 @@ export default {
     title: "Configure connection",
     action: "Connect",
     saved: "Connection saved | Connections saved",
+  },
+  instanceTabs: {
+    settings: "Settings",
+    message: "Messages",
+    profile: "Profile",
+  },
+  connectPhone: {
+    title: "Phone not connected"
   }
 }

src/i18n/pt.js

@@ -1,15 +1,21 @@
-
+// src/i18n/pt.js
 import { pt } from 'vuetify/locale'
 
-
 export default {
   $vuetify: { ...pt },
   all: "Todo | Todos",
   close: "Fechar",
+  cancel: "Cancelar",
+  restart: "Reiniciar",
+  restarted: "Reiniciada",
+  refresh: "Atualizar",
+  disconnect: "Desconectar",
+  sure: "Tem certeza?",
   instance: "Instância | Instâncias",
   search: "Pesquisar",
   loading: "Carregando",
   noInstances: "Nenhuma instância encontrada",
+  unknown: "Desconhecido",
   status: {
     close: "Desconectado",
     connecting: "Conectando",
@@ -28,8 +34,13 @@ export default {
     title: "Configurar conexão",
     action: "Conectar",
     saved: "Conexão salva | Conexões salvas",
+  },
+  instanceTabs: {
+    settings: "Configurações",
+    message: "Mensagens",
+    profile: "Perfil",
+  },
+  connectPhone: {
+    title: "Telefone não conectado"
   }
-
-
-
 }