Entendendo um ciclo de vida do componente de tabela

O kit de ferramentas do desenvolvedor fornece esquemas Angulares que podem criar componentes de tabela para você usar em seu aplicativo. Aprenda sobre a estrutura do componente para entender como as tabelas são implementadas e configuradas

Visão Geral do Componente de Tabela

Uma definição de tabela típica envolve as seguintes características:

Cabeçalho da tabela: O cabeçalho da tabela é um literal de cadeia (convertido) ou uma referência de modelo (nos casos em que o cabeçalho envolve estilo customizado)
Cabeçalhos da coluna da tabela..: As sequências de cabeçalho da coluna da tabela juntamente com outras propriedades, como sortable ou sorted
Ações da barra de ferramentas da tabela: As ações a serem mostradas na barra de ferramentas da tabela Cada ação é geralmente associada a um retorno de chamada para chamar quando selecionado.
Conteúdo da barra de ferramentas da tabela: O conteúdo a ser mostrado na barra de ferramentas da tabela. Cada conteúdo é geralmente associado a uma referência de modelo (ícone) e um retorno de chamada para chamar quando selecionado.
Ações do menu overflow: O menu overflow é exibido na última coluna de cada linha.

Um componente de aplicativo típico que define uma tabela conclui as seguintes ações:

Define o componente de tabela em um arquivo de configuração (buc-table-config.json).
Converte cabeçalhos e literais de ação
Opcionalmente, ativa ou desativa colunas com base nas configurações do administrador do Locatário
Opcionalmente, ativa ou desativa ações da barra de ferramentas, conteúdo ou ações do menu overflow com base em linhas selecionadas.
Permite que os usuários configurem as colunas da tabela
Chama uma ou mais APIs para preencher a tabela. Os dados retornados pela API são correspondidos usando o nome da coluna.

A estrutura gerencia o ciclo de vida da tabela e simplifica a implementação do componente de aplicativo A estrutura separa a definição de tabela da implementação da tabela A definição de tabela é gerenciada como uma configuração e carregada de um JSON (buc-table-config.json). A estrutura carrega a configuração de tabela e inicializa a tabela. O componente de aplicativo implementa a lógica de negócios, como buscar os dados da tabela e implementar ações.

A estrutura carrega a configuração de tabela a partir de três arquivos:

O arquivo JSON customizado para uma rota específica: <module>/packages/<route>/src-custom/assets/custom/buc-table-config.json
As configurações de tabela específicas do aplicativo padrão de <module>/packages/<module-short-name>-shared/assets/<module>/buc-table-config.json
Configuração de tabela específica de componentes comuns do <module>/node_modules/@buc/common-components/assets/common-components/buc-table-config.json

Durante a compilação, os três arquivos são mesclados; dando prioridade ao arquivo JSON customizado. Para obter mais informações sobre o arquivo de configuração JSON, consulte Sintaxe JSON.

Implementação de tabela

A estrutura fornece uma classe base BaseTableComponent para todos os componentes que contêm uma tabela.. Essa classe inicializa a configuração da tabela BucTableConfiguration com base no nome da tabela especificado pelo componente.

A classe BaseTableComponent inclui os métodos chave a seguir:

initializeTable(tableName, templateMapping)

Inicializa a configuração de tabela com base nos arquivos buc-table-config.json definidos Após a inicialização, a subclasse (componente) pode remover qualquer cabeçalho de coluna com base em substituições de nível de locatário. As substituições de nível de locatário referem-se a Configurações> Configurações de Exibição> Campos de dados que os administradores podem modificar

disableTableFieldConfiguration

Por padrão, o BaseTableComponent ativa a configuração de tabela É possível desativar a configuração de tabela chamando esse método para que os usuários não possam alterar as colunas de dentro da IU

applyUserPreference

Após a inicialização da tabela, o subcomponente chama esse método para carregar as preferências de coluna do usuário. Por padrão, esse método aciona a tabela a ser carregada Se desejar atrasar o carregamento da tabela, transmita false como um parâmetro para este método

loadTable

Carrega a tabela com os dados Esse método delega para o método fetchTableData para permitir que as subclasses implementem a lógica de negócios para buscar os dados Em seguida, esse método chama o método getDataForColumn para permitir que as subclasses preparem os dados para cada coluna no cabeçalho da tabela

fetchTableData

Esse método abstrato deve ser implementado por subclasses para buscar uma matriz de dados para preencher a tabela

getDataForColumn

Dependendo do cenário, será necessário usar getDataForColumn ou getDataForCustomColumn.

Este método abstrato deve ser implementado por subclasses para criar os dados para a coluna

Se você estiver incluindo uma nova tabela ou incluindo colunas em uma tabela no arquivo buc-table-config.json padrão: se uma coluna não incluir a propriedade dataBinding , getDataForColumn será chamado.

getDataForCustomColumn

Dependendo do cenário, será necessário usar getDataForCustomColumn ou getDataForColumn.

Este método abstrato deve ser implementado por subclasses para criar os dados para a coluna

Se você estiver incluindo uma nova tabela ou incluindo colunas em uma tabela existente usando o arquivo buc-table-config.json customizado: se uma coluna não incluir a propriedade dataBinding , getDataForCustomColumn será chamado.

updateSortCriteria

Esse método é chamado na subclasse para manipular os critérios de classificação para a tabela Todos os cabeçalhos que incluem a propriedade classificada são fornecidos para a subclasse para decidir a preferência de classificação final Por padrão, a classificação de várias colunas está indisponível A primeira coluna que tiver sorted configurado como true é usada para classificação

setActionResourceIds

Esse método configura os IDs de recurso para ações que incluem uma propriedade resourceId

onToolbarActionClicked

Este método é chamado na subclasse para permitir que a subclasse manipule um evento de clique de ação da barra de ferramentas

onToolbarContentClicked

Este método é chamado na subclasse para permitir que a subclasse manipule um evento de clique de conteúdo de barra de ferramentas.

onOverflowMenuActionSelected

Esse método é chamado na subclasse para permitir que a subclasse manipule um evento de clique do menu overflow.

onTableLoadComplete

Esse método permite que o subcomponente finalize depois que os dados da tabela estiverem prontos

A classe BucTableConfiguration contém a configuração da tabela. Ele permite que as subclasses ativem ou desativem dinamicamente cabeçalhos, ações e conteúdo. A classe mantém duas versões dos dados:

A configuração estática que é obtida da mesclagem da configuração da tabela base e dos arquivos JSON de configuração customizada. A configuração estática é influenciada por vários fatores que dependem do tipo da configuração
- Substituições de nível de locatário em colunas da tabela: Um componente pode decidir desativar (remover) determinadas colunas com base em substituições de nível de Locatário.. Por exemplo, UOM ou classe de Produto Essas substituições devem ser feitas pelo componente de aplicativo antes da aplicação das preferências do usuário.
- IDs de recurso para ações da barra de ferramentas: Se um componente suportar várias tabelas com base na mesma configuração (por exemplo, ordens de entrada versus ordens de saída), os IDs de recursos de ação poderão ser diferentes com base no tipo de tabela. Essas substituições podem ser aplicadas chamando o método setActionResourceIds ..
- Ações do menu overflow: o componente pode optar por remover determinadas ações do menu overflow com base em substituições no nível do locatário...
A configuração ativa, que o componente de aplicativo altera dinamicamente se necessário. A configuração ativa é gerenciada por métodos que possuem Active em seu nome Com base no tipo de configuração, a configuração ativa é influenciada por vários fatores:
1. Preferência do usuário: quando applyUserPreference é chamado, o componente base aplica a preferência do usuário armazenada (se houver) aos cabeçalhos e escolhe apenas os cabeçalhos que estão disponíveis no momento.
2. Ações no menu da barra de ferramentas ou no menu overflow: o componente pode precisar controlar dinamicamente essas ações com base na linha selecionada. Nesses casos, o componente pode escolher configurar as ações ativas com base no evento de seleção de linha. O componente também pode substituir o ID do recurso da ação com base na linha selecionada. No entanto, se as ações não forem baseadas na seleção de linhas, as ações ativas serão iguais à configuração estática.

Preferências de classificação da tabela

Por padrão, a classificação de várias colunas está indisponível na tabela e uma única coluna padrão como classificada. Os desenvolvedores podem introduzir novas colunas classificadas atualizando o arquivo buc-table-config.json e configurando o parâmetro de coluna "sorted": true também Nos casos em que várias colunas incluem o parâmetro "sorted": true , a primeira coluna na sequência com o parâmetro é usada como a coluna de classificação