Descripción del ciclo de vida de un componente de tabla

El kit de herramientas de desarrollador proporciona esquemas angulares que pueden crear componentes de tabla para que los utilice en la aplicación. Conozca la infraestructura de componentes para comprender cómo se implementan y configuran las tablas.

Visión general de componentes de tabla

Una definición de tabla típica implica las características siguientes:

Cabecera de tabla: La cabecera de tabla es un literal de serie (traducido) o una referencia de plantilla (en los casos en los que la cabecera implica un estilo personalizado).
Cabeceras de columna de tabla: Las series de cabecera de columna de tabla junto con otras propiedades como, por ejemplo, sortable o sorted.
Acciones de barra de herramientas de tabla: Las acciones a mostrar en la barra de herramientas de la tabla. Cada acción se asocia normalmente con una devolución de llamada para invocar cuando se selecciona.
Contenido de barra de herramientas de tabla: El contenido que se mostrará en la barra de herramientas de la tabla. Cada contenido se asocia normalmente con una referencia de plantilla (icono) y una devolución de llamada para invocar cuando se selecciona.
Acciones del menú de desbordamiento: El menú de desbordamiento se muestra en la última columna de cada fila.

Un componente de aplicación típico que define una tabla realiza las acciones siguientes:

Define el componente de tabla en un archivo de configuración (buc-table-config.json).
Convierte cabeceras y literales de acción.
Opcionalmente, habilita o inhabilita columnas basadas en configuraciones de administrador de arrendatario.
Opcionalmente, habilita o inhabilita acciones de barra de herramientas, contenido o acciones de menú de desbordamiento en función de las filas seleccionadas.
Permite a los usuarios configurar las columnas de tabla.
Llama a una o más API para llenar la tabla. Los datos devueltos por la API se comparan utilizando el nombre de columna.

La infraestructura gestiona el ciclo de vida de la tabla y simplifica la implementación del componente de aplicación. La infraestructura separa la definición de tabla de la implementación de tabla. La definición de tabla se gestiona como una configuración y se carga desde un JSON (buc-table-config.json). La infraestructura carga la configuración de tabla e inicializa la tabla. El componente de aplicación implementa la lógica empresarial como, por ejemplo, la captación de los datos de tabla y la implementación de acciones.

La infraestructura carga la configuración de tabla desde tres archivos:

El archivo JSON personalizado para una ruta específica: <module>/packages/<route>/src-custom/assets/custom/buc-table-config.json
Las configuraciones de tabla específicas de aplicación predeterminadas de <module>/packages/<module-short-name>-shared/assets/<module>/buc-table-config.json
Configuración de tabla específica de componentes comunes de <module>/node_modules/@buc/common-components/assets/common-components/buc-table-config.json

Durante la compilación, los tres archivos se fusionan; dando prioridad al archivo JSON personalizado. Para obtener más información sobre el archivo de configuración JSON, consulte Sintaxis JSON.

Implementación de tabla

La infraestructura proporciona una clase base BaseTableComponent para todos los componentes que contienen una tabla. Esta clase inicializa la configuración de la tabla BucTableConfiguration basándose en el nombre de tabla especificado por el componente.

La clase BaseTableComponent incluye los siguientes métodos clave:

initializeTable(tableName, templateMapping)

Inicializa la configuración de tabla basándose en los archivos buc-table-config.json definidos. Después de la inicialización, la subclase (componente) puede eliminar cualquier cabecera de columna basada en alteraciones temporales de nivel de arrendatario. Las alteraciones temporales de nivel de arrendatario hacen referencia a los Valores > Visualizar valores > Campos de datos que los administradores pueden modificar.

disableTableFieldConfiguration

De forma predeterminada, BaseTableComponent habilita la configuración de tabla. Puede inhabilitar la configuración de tabla llamando a este método para que los usuarios no puedan cambiar las columnas desde la interfaz de usuario.

applyUserPreference

Una vez inicializada la tabla, el subcomponente llama a este método para cargar las preferencias de columna del usuario. De forma predeterminada, este método desencadena la carga de la tabla. Si desea retrasar la carga de tabla, pase false como parámetro a este método.

loadTable

Carga la tabla con datos. Este método delega en el método fetchTableData para permitir que las subclases implementen la lógica empresarial para captar los datos. A continuación, este método llama al método getDataForColumn para permitir que las subclases preparen los datos para cada columna de la cabecera de tabla.

fetchTableData

Este método abstracto debe ser implementado por subclases para captar una matriz de datos para llenar la tabla.

getDataForColumn

En función del escenario, tendrá que utilizar getDataForColumn o getDataForCustomColumn.

Este método abstracto debe ser implementado por subclases para crear los datos para la columna.

Si está añadiendo una tabla nueva o añadiendo columnas a una tabla en el archivo buc-table-config.json predeterminado: si una columna no incluye la propiedad dataBinding , se llama a getDataForColumn .

getDataForCustomColumn

En función del escenario, tendrá que utilizar getDataForCustomColumn o getDataForColumn.

Este método abstracto debe ser implementado por subclases para crear los datos para la columna.

Si está añadiendo una tabla nueva o añadiendo columnas a una tabla existente utilizando el archivo buc-table-config.json personalizado: si una columna no incluye la propiedad dataBinding , se llama a getDataForCustomColumn .

updateSortCriteria

Se llama a este método en la subclase para manejar los criterios de clasificación para la tabla. Todas las cabeceras que incluyen la propiedad ordenada se proporcionan a la subclase para decidir la preferencia de clasificación final. De forma predeterminada, la ordenación de varias columnas no está disponible. La primera columna que tiene sorted establecido en true se utiliza para la ordenación.

setActionResourceIds

Este método establece los ID de recurso para acciones que incluyen una propiedad resourceId .

onToolbarActionClicked

Este método se llama en la subclase para permitir que la subclase maneje un suceso de pulsación de acción de barra de herramientas.

onToolbarContentClicked

Este método se invoca en la subclase para permitir que la subclase maneje un suceso de pulsación de contenido de barra de herramientas.

onOverflowMenuActionSelected

Se llama a este método en la subclase para permitir que la subclase maneje un suceso de pulsación de acción de menú de desbordamiento.

onTableLoadComplete

Este método permite que el subcomponente finalice después de que los datos de la tabla estén listos.

La clase BucTableConfiguration encapsula la configuración de la tabla. Permite a las subclases habilitar o inhabilitar dinámicamente cabeceras, acciones y contenido. La clase mantiene dos versiones de los datos:

La configuración estática que se obtiene de la fusión de la configuración de tabla base y los archivos JSON de configuración personalizada. La configuración estática está influenciada por diversos factores que dependen del tipo de configuración.
- Alteraciones temporales de nivel de arrendatario en columnas de tabla: un componente puede decidir inhabilitar (eliminar) determinadas columnas basándose en alteraciones temporales de nivel de arrendatario. Por ejemplo, UdM o clase de producto. Estas alteraciones temporales las debe realizar el componente de aplicación antes de que se apliquen las preferencias de usuario.
- ID de recurso para acciones de barra de herramientas: si un componente soporta varias tablas basadas en la misma configuración (por ejemplo, pedidos de entrada frente a pedidos de salida), los ID de recurso de acción pueden diferir en función del tipo de tabla. Estas alteraciones temporales se pueden aplicar llamando al método setActionResourceIds .
- Acciones de menú de desbordamiento: el componente puede elegir eliminar determinadas acciones de menú de desbordamiento basadas en alteraciones temporales de nivel de arrendatario.
La configuración activa, que el componente de aplicación cambia dinámicamente si es necesario. La configuración activa se gestiona mediante métodos que tienen Active en su nombre. En función del tipo de configuración, la configuración activa está influenciada por diversos factores:
1. Preferencia del usuario: Cuándo applyUserPreference Se llama, el componente base aplica la preferencia del usuario almacenada (si la hay) a los encabezados y solo elige los encabezados que están disponibles actualmente.
2. Acciones del menú de la barra de herramientas o del menú de desbordamiento: es posible que el componente tenga que controlar dinámicamente estas acciones basándose en la fila seleccionada. En estos casos, el componente puede elegir establecer las acciones activas basándose en el suceso de selección de fila. El componente también puede alterar temporalmente el ID de recurso de la acción basándose en la fila seleccionada. Sin embargo, si las acciones no se basan en la selección de filas, las acciones activas son iguales a la configuración estática.

Preferencias de ordenación de tabla

De forma predeterminada, la ordenación de varias columnas no está disponible para la tabla y una única columna predeterminada está ordenada. Los desarrolladores pueden introducir nuevas columnas ordenadas actualizando el archivo buc-table-config.json y estableciendo también el parámetro de columna "sorted": true . En los casos en los que varias columnas incluyen el parámetro "sorted": true , la primera columna de la secuencia con el parámetro se utiliza como columna de ordenación.