Skip to content

Commit

Permalink
feat: better translations, some layout improvements and update vue va…
Browse files Browse the repository at this point in the history 
…lidate sintax
  • Loading branch information
@wkarts
wkarts authored Aug 6, 2024
1 parent 06a92c1 commit 3e9c6f7
Show file tree
Hide file tree
Showing 3 changed files with 158 additions and 139 deletions.
24 changes: 12 additions & 12 deletions app/javascript/dashboard/i18n/locale/pt_BR/inboxMgmt.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,9 +219,9 @@
"UNOAPI": "Unoapi"
},
"SEND_AGENT_NAME": {
"LABEL": "Enviar nome do agent",
"PLACEHOLDER": "Selecione para enviar o nome do agent.",
"ERROR": "Selecione para enviar o nome do agent."
"LABEL": "Enviar nome do agente",
"PLACEHOLDER": "Selecione para enviar o nome do agente.",
"ERROR": "Selecione para enviar o nome do agente."
},
"IGNORE_HISTORY": {
"LABEL": "Ignorar histórico ao connectar",
Expand Down Expand Up @@ -249,14 +249,14 @@
"ERROR": "Generate API Key"
},
"REJECT_CALLS": {
"LABEL": "Rejeitar chamada",
"PLACEHOLDER": "Rejeitar chamada.",
"ERROR": "Rejeitar chamada."
"LABEL": "Mensagem ao rejeitar chamada",
"PLACEHOLDER": "Mensagem enviada ao rejeitar chamada.",
"ERROR": "Para rejeitar chamadas esse campo é obrigatório."
},
"MESSAGE_CALLS_WEBHOOK": {
"LABEL": "Mensagem ao rejeitar chamada",
"PLACEHOLDER": "Mensagem ao rejeitar chamada.",
"ERROR": "Mensagem ao rejeitar chamada."
"LABEL": "Mensagem de retorno ao rejeitar chamada",
"PLACEHOLDER": "Mensagem de retorno ao rejeitar chamada.",
"ERROR": "Para obter retorno ao rejeitar chamada esse campo é obrigatório."
},
"IGNORE_BROADCAST_STATUSES": {
"LABEL": "Ignorar transmissão de status",
Expand Down Expand Up @@ -289,9 +289,9 @@
"ERROR": "Selecione para notificar mensagens com falha."
},
"COMPOSING_MESSAGE": {
"LABEL": "Compor mensagem",
"PLACEHOLDER": "Selecione para compor mensagem.",
"ERROR": "Selecione para compor mensagem."
"LABEL": "Enviar digitando mensagem",
"PLACEHOLDER": "Selecione para enviar digitando mensagem.",
"ERROR": "Selecione para enviar digitando mensagem."
},
"SEND_REACTION_AS_REPLY": {
"LABEL": "Mostrar reação como resposta",
Expand Down
74 changes: 36 additions & 38 deletions app/javascript/dashboard/routes/dashboard/settings/inbox/channels/Unoapi.vue
View file
Original file line number Diff line number Diff line change
@@ -1,129 +1,123 @@
<template>
<form class="mx-0 flex flex-wrap" @submit.prevent="createChannel()">
<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.inboxName.$error }">
<label :class="{ error: v$.inboxName.$error }">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.LABEL') }}
<input
v-model.trim="inboxName"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.PLACEHOLDER')"
@blur="$v.inboxName.$touch"
@blur="v$.inboxName.$touch"
/>
<span v-if="$v.inboxName.$error" class="message">
<span v-if="v$.inboxName.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.INBOX_NAME.ERROR') }}
</span>
</label>
</div>

<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.phoneNumber.$error }">
<label :class="{ error: v$.phoneNumber.$error }">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.LABEL') }}
<input
v-model.trim="phoneNumber"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.PLACEHOLDER')"
@blur="$v.phoneNumber.$touch"
@blur="v$.phoneNumber.$touch"
/>
<span v-if="$v.phoneNumber.$error" class="message">
<span v-if="v$.phoneNumber.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.PHONE_NUMBER.ERROR') }}
</span>
</label>
</div>

<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.apiKey.$error }">
<label :class="{ error: v$.apiKey.$error }">
<span>
{{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.LABEL') }}
</span>
<input
v-model.trim="apiKey"
type="text"
:placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.PLACEHOLDER')"
@blur="$v.apiKey.$touch"
@blur="v$.apiKey.$touch"
/>
<span v-if="$v.apiKey.$error" class="message">
<span v-if="v$.apiKey.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.API_KEY.ERROR') }}
</span>
</label>
</div>

<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%]">
<label :class="{ error: $v.url.$error }">
<label :class="{ error: v$.url.$error }">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.URL.LABEL') }}
<input
v-model.trim="url"
type="text"
placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.URL.PLACEHOLDER')"
:placeholder="$t('INBOX_MGMT.ADD.WHATSAPP.URL.PLACEHOLDER')"
/>
<span v-if="$v.url.$error" class="message">
<span v-if="v$.url.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.URL.ERROR') }}
</span>
</label>
</div>

<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%] config-helptext">
<label
:class="'switch-label ' + { error: $v.ignoreHistoryMessages.$error }"
>
<label :class="{ error: v$.sendAgentName.$error }" style="display: flex; align-items: center;">
<woot-switch
v-model="sendAgentName"
:value="sendAgentName"
class="switch"
style="flex: 0 0 auto; margin-right: 10px;"
/>
{{ $t('INBOX_MGMT.ADD.WHATSAPP.SEND_AGENT_NAME.LABEL') }}
<span v-if="$v.url.$error" class="message">
<span v-if="v$.sendAgentName.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.SEND_AGENT_NAME.ERROR') }}
</span>
</label>
</div>

<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%] config-helptext">
<label
:class="'switch-label ' + { error: $v.ignoreHistoryMessages.$error }"
>
<label :class="{ error: v$.ignoreGroupMessages.$error }" style="display: flex; align-items: center;">
<woot-switch
v-model="ignoreGroupMessages"
:value="ignoreGroupMessages"
class="switch"
style="flex: 0 0 auto; margin-right: 10px;"
/>
{{ $t('INBOX_MGMT.ADD.WHATSAPP.IGNORE_GROUPS.LABEL') }}
<span v-if="$v.ignoreGroupMessages.$error" class="message">
<span v-if="v$.ignoreGroupMessages.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.IGNORE_GROUPS.ERROR') }}
</span>
</label>
</div>

<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%] config-helptext">
<label
:class="'switch-label ' + { error: $v.ignoreHistoryMessages.$error }"
>
<label :class="{ error: v$.ignoreHistoryMessages.$error }" style="display: flex; align-items: center;">
<woot-switch
v-model="ignoreHistoryMessages"
:value="ignoreHistoryMessages"
class="switch"
style="flex: 0 0 auto; margin-right: 10px;"
/>
{{ $t('INBOX_MGMT.ADD.WHATSAPP.IGNORE_HISTORY.LABEL') }}
<span v-if="$v.ignoreHistoryMessages.$error" class="message">
<span v-if="v$.ignoreHistoryMessages.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.IGNORE_HISTORY.ERROR') }}
</span>
</label>
</div>

<div class="w-[65%] flex-shrink-0 flex-grow-0 max-w-[65%] config-helptext">
<label :class="{ error: $v.webhookSendNewMessages.$error }" style="display: flex; align-items: center;">
<label :class="{ error: v$.webhookSendNewMessages.$error }" style="display: flex; align-items: center;">
<woot-switch
v-model="webhookSendNewMessages"
:value="webhookSendNewMessages"
style="flex: 0 0 auto; margin-right: 10px;"
/>
{{ $t('INBOX_MGMT.ADD.WHATSAPP.WEBWOOK_SEND_NEW_MESSAGES.LABEL') }}
<span v-if="$v.webhookSendNewMessages.$error" class="message">
<span v-if="v$.webhookSendNewMessages.$error" class="message">
{{ $t('INBOX_MGMT.ADD.WHATSAPP.WEBWOOK_SEND_NEW_MESSAGES.ERROR') }}
</span>
</label>
</div>
<div class="w-full" style="margin-top: 20px">

<div class="w-full" style="margin-top: 20px;">
<woot-submit-button
:loading="uiFlags.isCreating"
:button-text="$t('INBOX_MGMT.ADD.WHATSAPP.SUBMIT_BUTTON')"
Expand All @@ -139,13 +133,16 @@

<script>
import { mapGetters } from 'vuex';
import alertMixin from 'shared/mixins/alertMixin';
import { required } from 'vuelidate/lib/validators';
import { useVuelidate } from '@vuelidate/core';
import { useAlert } from 'dashboard/composables';
import { required } from '@vuelidate/validators';
import router from '../../../../index';
import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
export default {
mixins: [alertMixin],
setup() {
return { v$: useVuelidate() };
},
data() {
return {
inboxName: '',
Expand Down Expand Up @@ -188,8 +185,8 @@ export default {
}
},
async createChannel() {
this.$v.$touch();
if (this.$v.$invalid) {
this.v$.$touch();
if (this.v$.$invalid) {
return;
}
Expand Down Expand Up @@ -225,7 +222,7 @@ export default {
},
});
} catch (error) {
this.showAlert(
useAlert(
this.$t('INBOX_MGMT.ADD.WHATSAPP.API.ERROR_MESSAGE') +
'\n detail:' +
error
Expand All @@ -235,6 +232,7 @@ export default {
},
};
</script>

<style lang="scss" scoped>
.switch {
flex: 0 0 auto;
Expand Down
Loading

0 comments on commit 3e9c6f7

Please sign in to comment.