Traduções

Ficam na pasta src/lang/pt_br/words.json

As traduções seguem o seguinte padrão

{
  "phrase_in_english": "Frase em português"
}

Para as traduções mais genéricas, as traduções devem ser colocas no arquivo geral de traduções.

As traduções específicas devem ser colocadas no arquivo de traduções do módulo.

Quando for adicionada ou renomeada uma nova chave, isso deve ser feita em todas as linguagens.

Exceções

Para traduções muito grandes, deve ser utilizado alguma forma abreviada, de maneira mais contextual.

Geralmente é o caso das mensagens de confirmação e validações mais específicas.

As traduções devem seguir o que a mensagem está dizendo em portugues, por exemplo:

Exemplos

{
  "invalid_name": "Nome inválido",
  "cert_already_exists": "Certificado já existe",
  "name": "Nome",
  "restart_service_confirmation": "Tem certeza que deseja reiniciar o serviço {name}?", // tradução grande (exceção)
  "restart_service_warning": "ATENÇÃO: isso irá parar todas as instãncias do serviço" // tradução grande (exceção)
}

Eventos

Eventos no Vue são acompanhados por um “@”, num botão, seria algo como:

<template lang="pug">
 v-btn(
  @click="onSave"
 )
</template>

Esse botão está com evento que irá disparar um método de salvar.

Temos padrões sobre como escrevemos o nome desses métodos, que são muito importantes para nós mantermos um código organizado e limpo.

A maioria dos eventos tem o mesmo nome em todos os componentes, mas os que se diferenciam tem que se encaixar no padrão e ao mesmo tempo ter um nome explicativo sobre o que acontece dentro do método.

Os nomes dos eventos são criados da seguinte maneira:

– openNomeDoEvento: Esses são os eventos que envolvem abrir um formulário ou abrir uma dialog, os mais comuns são:

openNew: abre um formulário para criar um novo conjunto de dados;
openEdit: abre um formulário para editar dados já criados;
openDeleteDialog: abre uma dialog, para a confirmação da deleção de algum dado;

– goToNomeDoEvento: Esses são os eventos que envolvem mudar diretamente a url com o this.$router.push, ou seja, ir para outra rota da aplicação, os mais comuns, são:

goToDatails: você é redirecionado para os detalhes, isso ocorre muito nas nossas rotas que tem listas, pois nelas estão só as informações mais principais, então os detalhes são necessários para ter um relatório maior das informações listadas;
goToBack: tem o mesmo comportamento da seta ‘←’ que nós usamos para retornar a uma página anterior do Google Chrome, utilizamos para o usuário poder voltar, por exemplo, da tela de detalhes para a de listagem;

– onNomeDoEvento: Esses são todos os eventos que não se encaixam nas opções acima, os mais comuns são:

onApply: está no botão aplicar, quando nós criamos, por exemplo, uma regra de firewall, ela tem que ser aplicada para ter o comportamento esperado;
onAudit: está no botão auditar, que controla a auditoria dos elementos;
onSave: está no botão de salvar, que maioria das vezes se encontra em formulários;
onSaveApply: basicamente, é o conjunto de eventos do botão aplicar e salvar, abrange as duas funcionalidades em um só.

Confirmação para executar alguma ação

Em casos onde a operação que o usuário está pedindo pra executar necessita confirmação, o padrão é utilizar o componente web-stateful-action. Esse componente faz o monitoramento do status e coloca em loading a confirmação enquanto está rodando.

Esse componente utiliza watcher em cima do status e gera eventos conforme a mudança do status.

web-stateful-action(
  ref="install"
  main-attr="id"
  :action="installPackage"
  :status="actionStatus.installPackage"
  :success-message="$t('installed_successfully')"
  :error-message="$t('install_error')"
  @finish:success="getPackages"
)

this.$refs.install.execute(pkg, {
  title: this.$t("are_you_sure_you_want_activate", pkg),
});

Dialog de Deleção

Para as deleções, como mensagens e outras coisas são padrões. É reaproveitado o componente web-stateful-action, passando alguns parâmetros fixos, porém fica bastante parecida a implementação.

web-delete(
  ref="deleteMultipleHandler"
  main-attr="username"
  :status="actionStatus.deleteMultipleUsers"
  :action="deleteMultipleUsers"
  @finish:success="fetchUsers"
  @finish:error="fetchUsers"
)

Exemplo principal: Ver exemplo

Formulários

Existem 3 padrões principais de construir Form:

Form normal como dialog: Usado para cadastros simples, que não tem muitos campos;
Form normal como página: Usado para cadastros de configurações (serviço, etc.);
Form com múltiplos passos: Usado onde o cadastro tem múltiplos passos ou muitos campos para serem preenchidos.

Para os dialogs existe um componente único, que é it-form-dialog-template.

Form normal como dialog

Utilizar componente web-form-layout. Necessário expor um método público (acessado pelas refs) de open e close

web-form-layout(
  ref="userForm",
  fake-loading,
  :status="status"
  :title="title",
  :disabled-save="!isValid",
  @save="saveEvent",
  @loaded="loaded"
)

/**
  @public
 */
open(id = {}) {
  this.$refs.userForm.open()
}
/**
  @public
 */
close() {
  this.$refs.userForm.close()
}

Form com múltiplos passos

Geralmente é criado um componente por step. Ao passar os steps para os componentes ele cria os passos e os componentes de passos podem ser colocados como slots.

Exemplo principal: Ver exemplo

Listagem

A lista padrão utilizada é o it-list. Esse componente é um wrapper do v-data-table. É muito parecida a criação.

Todos os slots do v-data-table estão disponíveis em it-list

Para criar uma lista simples. Basta passar os itens no formato correto e os cabeçalhos. A it-list adiciona ações se necessário.

Para cada coluna é utilizado uma visualização. Se não for passado um slot indicando o formato da coluna, o padrão é um span

Geralmente o padrão para os tipos de valor é da seguinte forma:

Colunas principais: strong.
Valor Booleano: v-icon utilizando o check para true e minimize para false;
Variáveis categóricas: v-chip(small).

it-list(
  has-details
  :items="usersList",
  :headers="userHeaders",
  :cursor="cursor"
  :auditable="permissions.audit",
  :multiple-actions="multipleActions"
  @audit="auditEvent",
  @nextclick="nextPage",
  @prevclick="previousPage",
  @details="detailsEvent",
  @edit="editEvent",
  @delete="onDelete"
  @deleteall="onDeleteMultiple"
)
  template(v-slot:item.username="{item}")
    strong {{item.username}}
  template(v-slot:item.avatar="{item}")
    v-avatar(:color="getColor(item.username)", :size="32")
      span {{item.username.toUpperCase()[0]}}
  template(v-slot:item.superuser="{item}")
    v-icon {{item.superuser ? 'check' : 'minimize'}}
  template(v-slot:item.hasConsole="{item}")
    v-icon {{item.hasConsole ? 'check' : 'minimize'}}
  template(v-slot:item.level="{item}")
    span {{item.level || ''}}

Exemplo principal: Ver exemplo