Criando Tabela De Salas: Guia Completo E Detalhado

Olá, pessoal! 👋 Neste artigo, vamos mergulhar na criação de um componente de tabela super útil para a gestão de espaços acadêmicos, especificamente para listar e gerenciar as SALAS. Se você está trabalhando com o projeto GEA (Gestão de Espaço Acadêmico) ou algo similar, este guia é para você! Vamos construir um componente robusto e eficiente, seguindo as melhores práticas e otimizando cada detalhe.

Entendendo o Componente de Tabela de Salas

O objetivo principal é criar um componente de tabela que exiba de forma clara e organizada as informações sobre as salas de um ambiente acadêmico. Este componente não apenas lista os dados, mas também gerencia sua própria lógica de busca, permitindo que os usuários encontrem rapidamente as salas que precisam. Além disso, ele inclui funcionalidades de edição e exclusão, tornando-o uma ferramenta completa para a gestão de espaços.

Este componente será modelado com base nos componentes SpaceManagementTable e FuncionarioTableComponent, já existentes no projeto. Isso garante consistência no design e na funcionalidade, facilitando a integração e a manutenção do código. Ao seguir este padrão, você estará contribuindo para um sistema mais coeso e fácil de entender.

Passo a Passo: Criando o Componente de Tabela de Salas

1. Estrutura de Arquivos e Declaração

O primeiro passo é criar os arquivos essenciais para o componente. No diretório src/app/components/secretaria/espacos-table/, você precisará criar os seguintes arquivos:

• espacos-table.component.ts: Onde reside a lógica do componente.
• espacos-table.component.html: Onde você definirá a estrutura HTML da tabela.
• espacos-table.component.css: Onde você aplicará os estilos CSS para a aparência da tabela.

Após a criação dos arquivos, você precisará declarar e exportar o componente no SharedModule (ou AppModule, dependendo da estrutura do seu projeto). Isso torna o componente acessível em toda a aplicação. A declaração geralmente envolve importar o componente no módulo e adicioná-lo à lista de declarations.

2. Interfaces: Inputs e Outputs

As interfaces são essenciais para a comunicação e a troca de dados entre o componente de tabela e seus componentes pais. Vamos definir os Inputs (dados recebidos do componente pai) e os Outputs (eventos que o componente emite para o componente pai).

@Input() data: Sala[] = []: Este Input recebe um array de objetos Sala. Cada objeto Sala contém as informações de uma sala específica (nome, piso, tipo, etc.).

@Input() totalPages: number = 1: Indica o número total de páginas disponíveis para a paginação. Útil para controlar a exibição dos dados em várias páginas.

@Input() currentPage: number = 1: Representa a página atual que está sendo exibida. Utilizado em conjunto com totalPages para a paginação.

@Input() isLoading: boolean = false: Indica se o componente está carregando dados. Usado para exibir um indicador de carregamento (spinner) enquanto os dados são buscados.

@Output() searchChange = new EventEmitter<string>(): Emite um evento sempre que o usuário altera o termo de busca. O componente pai recebe esse evento e pode atualizar os dados da tabela com base no termo de busca.

@Output() pageChange = new EventEmitter<number>(): Emite um evento quando o usuário clica em um botão de paginação para mudar de página. O componente pai responde a esse evento, buscando os dados da página selecionada.

@Output() editClick = new EventEmitter<Espaco>(): Emite um evento quando o usuário clica no ícone de edição de uma sala. O componente pai recebe esse evento e pode exibir um formulário de edição com os dados da sala selecionada.

@Output() deleteClick = new EventEmitter<Espaco>(): Emite um evento quando o usuário clica no ícone de exclusão de uma sala. O componente pai recebe esse evento e pode exibir uma confirmação de exclusão.

3. Layout e Lógica de Busca no HTML

O template HTML define a estrutura visual da tabela. Vamos detalhar os elementos e a lógica de busca:

• Campo de Busca:

  • <input class="buscar-pelo-nome">: Este é o campo de entrada para o usuário inserir o termo de busca.
  • [(ngModel)]: Utilizado para fazer o data binding bidirecional com a propriedade searchTerm. Isso significa que qualquer alteração no campo de busca atualiza automaticamente a propriedade searchTerm, e vice-versa.
  • (ngModelChange): Dispara o método onSearchChange() sempre que o valor do campo de busca é alterado. Isso garante que a busca seja atualizada em tempo real.

• Cabeçalho da Tabela (<thead>): Define as colunas da tabela:

  • "Nome": O nome da sala.
  • "Piso": O piso onde a sala está localizada.
  • "Tipo de Espaço": O tipo de espaço (ex: sala de aula, laboratório).
  • "Disciplinas": As disciplinas associadas à sala.
  • "Ações": Coluna com os ícones de editar e excluir.

• Corpo da Tabela (<tbody>): Itera sobre o array @Input() data para exibir os dados de cada sala.

  • Use *ngFor="let sala of data" para iterar sobre cada sala no array.
  • Exiba os dados de cada sala nas células da tabela (nome, piso, tipo, etc.).

• Coluna "Ações": Contém os ícones de editar e excluir.

  • (editClick): Dispara o evento editClick quando o usuário clica no ícone de edição. Passa os dados da sala selecionada.
  • (deleteClick): Dispara o evento deleteClick quando o usuário clica no ícone de exclusão. Passa os dados da sala selecionada.

• Componente de Paginação: Renderize o componente de paginação para permitir a navegação entre as páginas, com base nos Inputs totalPages e currentPage. Utilize os Outputs pageChange para responder aos cliques nos botões de paginação.

4. Lógica no TypeScript

O arquivo TypeScript (espacos-table.component.ts) contém a lógica do componente. Vamos focar no método onSearchChange():

• onSearchChange(): Este método é acionado quando o usuário digita no campo de busca.
  • Ele emite o evento this.searchChange.emit(this.searchTerm), enviando o termo de busca para o componente pai.
  • O componente pai recebe o termo de busca e pode chamar uma função para buscar as salas correspondentes no backend.

5. Estilização (CSS)

O arquivo CSS (espacos-table.component.css) deve conter os estilos para a tabela. Isso inclui:

• Estilos para a tabela em si (bordas, espaçamentos, etc.).
• Estilos para o cabeçalho (<thead>).
• Estilos para o corpo da tabela (<tbody>).
• Estilos para os ícones de editar e excluir.
• Estilos para o campo de busca.
• Estilos para o componente de paginação.

Dica: Utilize as classes CSS do Figma como referência para garantir que o componente tenha a aparência correta e consistente com o design do projeto.

Dicas e Melhores Práticas

• Reuso de Componentes: Se possível, utilize componentes reutilizáveis para a tabela, paginação e outros elementos visuais. Isso reduz a duplicação de código e facilita a manutenção.
• Testes: Crie testes unitários para garantir que o componente funcione corretamente e que a lógica de busca, edição e exclusão estejam corretas.
• Acessibilidade: Garanta que o componente seja acessível para todos os usuários. Utilize atributos aria-* e outros recursos para melhorar a acessibilidade.
• Performance: Otimize o componente para garantir que ele tenha bom desempenho, especialmente quando lidar com grandes volumes de dados. Utilize lazy loading de dados, paginação e outras técnicas de otimização.
• Documentação: Documente o código do componente, incluindo os Inputs, Outputs e a lógica de cada método. Isso facilita a compreensão e a manutenção do código por outros desenvolvedores.

Conclusão

A criação do componente de tabela de salas é um passo crucial para a gestão eficiente de espaços acadêmicos. Ao seguir este guia, você terá um componente robusto, funcional e alinhado com as melhores práticas de desenvolvimento. Lembre-se de adaptar o código e os estilos às necessidades específicas do seu projeto. Com dedicação e atenção aos detalhes, você estará no caminho certo para criar uma ferramenta valiosa para a sua aplicação.

Recursos Adicionais:

Para mais informações sobre desenvolvimento Angular e melhores práticas, consulte a Documentação Oficial do Angular. Boa sorte e bons códigos! 🚀