Skip to content
Console Kit Documentation

Padrão de Edição com Nome da Entidade

Padrão de Edição com Nome da Entidade

Section titled “Padrão de Edição com Nome da Entidade”

Sobre

Section titled “Sobre”

Este padrão define como exibir o nome da entidade sendo editada no cabeçalho do formulário de edição. O objetivo é fornecer contexto claro ao usuário sobre qual item específico está sendo modificado, melhorando a experiência de navegação e reduzindo erros de edição.

Contexto & Problema

Section titled “Contexto & Problema”

Em formulários de edição, especialmente quando há múltiplas entidades similares, o usuário pode perder o contexto sobre qual item está sendo editado. Isso pode levar a modificações acidentais ou confusão sobre o estado atual da interface.

Quando Usar

Section titled “Quando Usar”
  • Em formulários de edição de entidades nomeadas (usuários, projetos, configurações, etc.)
  • Quando há navegação entre múltiplos itens para edição
  • Em interfaces onde o contexto da entidade sendo editada é crítico para o usuário

Componentes Utilizados

Section titled “Componentes Utilizados”
  • Heading (Console Kit Blocks)
  • Form (Console Kit Blocks)
  • Breadcrumb (Console Kit Blocks)

Exemplo Visual

Section titled “Exemplo Visual”

Exemplo de formulário com nome da entidade

Edge Application > Edit Workload - Teste

Comportamento Esperado

Section titled “Comportamento Esperado”
  1. Nome da entidade: Exibir claramente o nome/identificador da entidade sendo editada
  2. Contexto hierárquico: Mostrar onde a entidade se encontra na estrutura (breadcrumb)
  3. Ação atual: Indicar que se trata de uma operação de edição
  4. Informações complementares: Incluir dados relevantes como status ou tipo

Implementação

Section titled “Implementação”
editFormHeader.js
const EditFormHeader = {
    // Renderiza o cabeçalho com nome da entidade
    renderHeader: (entity, entityType) => {
        const headerContainer = document.querySelector('[data-edit-header]');


        const headerHTML = `
            <div class="edit-form-header">
                <nav class="breadcrumb">
                    <a href="/${entityType.toLowerCase()}s">${entityType}s</a>
                    <span class="separator">></span>
                    <span class="current">Edit ${entityType}</span>
                </nav>


                <div class="entity-info">
                    <h1 class="entity-name">
                        <span class="entity-type">${entityType}:</span>
                        <span class="entity-title">${entity.name || entity.title}</span>
                    </h1>


                    ${entity.status ? `<span class="entity-status status-${entity.status.toLowerCase()}">${entity.status}</span>` : ''}
                </div>


                <div class="form-actions">
                    <button type="button" class="btn-secondary" data-action="cancel">Cancel</button>
                    <button type="submit" class="btn-primary" data-action="save">Save</button>
                </div>
            </div>
        `;


        headerContainer.innerHTML = headerHTML;
    },


    // Atualiza o título quando o nome da entidade muda
    updateEntityName: (newName) => {
        const titleElement = document.querySelector('.entity-title');
        if (titleElement) {
            titleElement.textContent = newName;
        }


        // Atualiza também o título da página
        document.title = `Edit ${newName}`;
    },


    // Gerencia estados de loading
    showLoadingState: () => {
        const headerContainer = document.querySelector('[data-edit-header]');
        headerContainer.innerHTML = `
            <div class="edit-form-header loading">
                <div class="skeleton-breadcrumb"></div>
                <div class="skeleton-title"></div>
            </div>
        `;
    }
};


// Exemplo de uso
const loadEntityForEdit = async (entityId, entityType) => {
    EditFormHeader.showLoadingState();


    try {
        const response = await fetch(`/api/${entityType.toLowerCase()}s/${entityId}`);
        const entity = await response.json();


        EditFormHeader.renderHeader(entity, entityType);


        // Listener para mudanças no nome
        const nameField = document.querySelector('[name="name"]');
        if (nameField) {
            nameField.addEventListener('input', (e) => {
                EditFormHeader.updateEntityName(e.target.value);
            });
        }


    } catch (error) {
        console.error('Error loading entity:', error);
    }
};

Boas Práticas

Section titled “Boas Práticas”

Anti-padrões

Section titled “Anti-padrões”

Acessibilidade

Section titled “Acessibilidade”
  • Use elementos de heading apropriados (h1, h2) para estruturar o cabeçalho
  • Implemente aria-label descritivo para o formulário de edição
  • Garanta que mudanças no título sejam anunciadas por leitores de tela
  • Mantenha contraste adequado entre o nome da entidade e o fundo
  • Use aria-current="page" no breadcrumb para indicar a página atual

Referências

Section titled “Referências”