====== Padrões de design - Páginas de edição ======

===== Resumo =====
Esse documento estabelece os padrões e fornece um guia para a definição do layout e da interface das telas de edição dos cadastros do sistema. O layout padrão do sistema contará com os campos do cadastro e seus botões de ação para editar, excluir e salvar.

===== Layout das páginas de edição =====

==== Visão geral ====

Após o usuário dar um clique no registro do [[softwares:geoservicos.online:requisitos:documentacao_tecnica:design_grid|grid]], o sistema deve levar o usuário até a página de visualização dos detalhes, onde possibilitará o usuário ver todas as informações do cadastro selecionado. Dentro dessa página de visualização dos detalhes o usuário poderá editar ou excluir o cadastro.

==== Regras gerais da página de edição ====

Logo que o usuário abre a página de visualização dos detalhes do cadastro, o sistema deve possibilitar o usuário voltar a [[softwares:geoservicos.online:requisitos:documentacao_tecnica:design_pagina_inicial_dos_modulos| página inicial do módulo]], editar o cadastro que está sendo visualizado ou excluir o cadastro. Se o usuário clique em voltar, o sistema deve direciona-lo para a página inicial do módulo, possibilitando que edite outro cadastro, porém se o usuário clicar no botão de edição do cadastro, o sistema deve trazer todos os campos desabilitados para edição mostrando respectivamente o nome do campo e as informações que foram digitadas anteriormente, para que as mesmas possam ser modificadas e se o usuário clicar no botão de exclusão, o sistema deve exibir uma mensagem perguntando se realmente deseja excluir o cadastro. 
Sempre que o usuário incluir um novo cadastro, ou realizar uma edição, caso os campos obrigatórios não forem preenchidos, o sistema deve exibir uma mensagem em vermelho abaixo do campo.

Sempre que o usuário logado estiver efetuando uma determinada ação, o sistema deve modificar o breadcrumb. Logo que o usuário for direcionado para a página de visualização dos detalhes do sistema, o sistema deve mostrar o caminho do breadcrumb com a função que está sendo executada, que neste será a página de visualização de detalhes, quando o usuário clicar no botão de edição e o sistema deve modificar o breadcrumb para editar.

**EX.:**
Página inicial/ Pessoas/ Editar pessoas **ou** Página inicial/ Pessoas/ Detalhes da pessoa.

Em todas as telas para a edição dos cadastros, o sistema deve exibir os campos no padrão do [[http://webapplayers.com/inspinia_admin-v2.9.3/md_skin/form_basic.html|template do inspinia]], com seus campos de formulários, datas, listas e marcações conforme foi definido nos [[softwares:geoservicos.online:requisitos:documentacao_tecnica:home| padrões de design]] do sistema.

Ao visualizar e implementar o novo layout do sistema, deve-se observar alguns pontos a fim de padronização em todas as páginas, que são:

  * O sistema deve abrir a página com os dados do cadastro com apenas um clique no registro do grid;
  * Ao abrir a página do cadastro, o sistema deve trazer os campos desabilitados com apenas a visualização dos registros;
  * Ao abrir a página de visualização dos detalhes, o sistema exibe o título da página como detalhes da página? Ex.: Detalhes da pessoa - Geoserviços;
  * Ao abrir a página de edição, o sistema exibe o título da página como edição da página? Ex.: Editar pessoa - Geoserviços;
  * Ao abrir a página de visualização dos detalhes, o sistema deve trazer habilitado apenas os botões de "Voltar", "Editar" e "Excluir";
  * Ao clicar no botão editar, o sistema deve ocultar os botões "Editar" e "Excluir" e manter habilitado os botões "Voltar" e "Salvar";
  * Ao incluir um novo cadastro, o sistema deve exibir habilitados os botões "Voltar" e "Salvar";
  * Na página de detalhes/edição, os botões devem sempre estar apresentados do lado esquerdo da página;
  * Sempre que houver dois ou mais botões em uma mesma página/formulário/alerta/modal, eles devem ser do mesmo tamanho. A não ser que: sejam grupos de botões diferentes ou seja um caso muito específico, com um nome muito grande em um dos botões;
  * Os campos relacionados devem estar próximos uns dos outros;
  * Os campos que utilizam check box (sim ou não, ativo ou inativo) devem estar na frente da pergunta e devem utilizar o botão switch padrão do layout inspinia;
  * Os switch estão com o texto correto (sim/não);
  * As guias do cadastro devem estar conforme o padrão do template;
  * O sistema deve exibir os check box conforme o padrão do template;
  * O sistema deve exibir as listas internas dos cadastros com poucas colunas, ocupando apenas metade da página;
  * O sistema deve exibir as listas internas dos cadastros com muitas colunas, ocupando toda a página;
  * Quando o botão for somente com ícone interno dos cadastros, o sistema não deve exibi-lo com cor de preenchimento;
  * Ao passar o mouse nos botões que tem apenas ícones nos cadastros internos, o sistema deve destaca-lo com a cor;
  * O sistema deve sempre exibir em tabelas, listas ou grids internos do sistema os botões de ação no canto superior direito da tabela;
  * O sistema deve sempre exibir em tabelas, listas ou grids internos do sistema o nome do campo no canto superior esquerdo da tabela alinhado ao centro(na vertical) com relação a altura dos botões;
  * Todos os botões do sistema devem ter um hint, exceto os do menu lateral que devem ser do tipo tooltip;
  * Qualquer parte do sistema, como página inicial, menu superior, grid e cadastros internos, devem ter o hint nos botões;
  * As ações dos botões no hint deve ser descrito como verbo. Ex.: Incluir, excluir, editar, salvar e cancelar;
  * Quando os botões forem relacionados a manipulação de itens de uma lista, os hints devem ser "Adicionar" ou "Remover";
  * Quando os botões forem relacionados a criar itens novos ou excluir itens de um sistema, o hint deve ser "Incluir" ou "Excluir".


=== Campos do tipo data ===

Os campos do tipo data devem sempre permitir a digitação da data através do teclado, respeitando sempre o formato DD/MM/AAAA. Um calendário deve ser exibido para oferecer um método alternativo para a inserção da data.

{{:softwares:geoservicos.online:requisitos:documentacao_tecnica:designguidelines:campo.data.png|Campo data}}

==== Exemplo de página de edição/detalhes ====

=== Página de edição ===
Abaixo temos um exemplo de como deve estar a disposição da página de edição em relação ao layout.

{{:softwares:geoservicos.online:requisitos:documentacao_tecnica:designguidelines:editar.png|Página de edição}}

=== Página de detalhes ===
Abaixo temos um exemplo de como deve estar a disposição da página de detalhes em relação ao layout.

{{:softwares:geoservicos.online:requisitos:documentacao_tecnica:designguidelines:detalhes.png|Página de detalhes}}


=== Exemplo de mensagem de alerta ===

{{:softwares:geoservicos.online:requisitos:documentacao_tecnica:designguidelines:alerta.png|Alerta}}

=== Exemplos de ícones da Página de edição ===

{{:softwares:geoservicos.online:requisitos:documentacao_tecnica:designguidelines:icones_pagina_de_edicao.png|Ícones página de edição}}

===== Observações =====
Nenhuma.

~~DISCUSSION|Sugira mudanças, aponte falhas ou contribua de alguma forma aqui:~~