Diferencias

Muestra las diferencias entre dos versiones de la página.

--- ada:howto:sicoferp:factory:new-migracion-sicoferp:front:base-component [2025/06/25 18:55]
192.168.175.164
+++ ada:howto:sicoferp:factory:new-migracion-sicoferp:front:base-component [2025/06/25 19:21] (actual)
192.168.175.164
@@ Línea 1: / Línea 1: @@
 ====== BaseComponent<T> ======
-Clase abstracta reutilizable en Angular para facilitar la creación de componentes que usen formularios, tablas, modales y alertas. Provee métodos y propiedades comunes que se pueden extender y personalizar según las necesidades del componente específico.
+[[ada:howto:sicoferp:factory:new-migracion-sicoferp:front|←Regresar]]
+Clase abstracta reutilizable para facilitar la creación de componentes que usen formularios, tablas, modales y alertas. Provee métodos y propiedades comunes que se pueden extender y personalizar según las necesidades del componente específico.
 ==== Objetivo ====
@@ Línea 20: / Línea 22: @@
   * **FormBuilder** (`@angular/forms`): crea formularios reactivos fácilmente.
   * **BreadcrumbService**: establece el breadcrumb de navegación (migas de pan).
-Estas dependencias se inyectan usando la función `inject()`.
 ==== Propiedades ====
-  * **title / subTitle**: Títulos que pueden usarse para encabezados del componente.
+  * **title / subTitle**: Título para encabezados del componente.
   * **form**: Instancia del formulario reactivo principal del componente.
   * **tableConfig**: Configuración de comportamiento y estilo de la tabla.
@@ Línea 49: / Línea 49: @@
 });
 </code>
-Es útil para componentes que tengan filtros simples.
 === setBreadcrumb(items: BreadcrumbItem[]) ===
@@ Línea 63: / Línea 61: @@
 Inicializa la tabla cargando columnas, configuración y datos. Solo funciona si los métodos getTableColumns(), getTableConfig() y loadDataTable() están implementados en la subclase.
+=== getTableColumns(), getTableConfig(), loadDataTable() ===
+Son métodos opcionales que deben ser sobreescritos por los componentes que extiendan BaseComponent.
+<code>
+protected getTableColumns(): TableListColumns[] {
+  return [...]; // retorna las columnas
+}
+</code>
+=== navigateTo(route: routeParams[]) ===
+Permite redirigir a otra ruta usando el Router de Angular.
+<code>
+this.navigateTo(['/ruta', id]);
+</code>
+=== actionsTable(event: ITableEmitterAction<T>) ===
+Ejecuta una función asociada a una acción en la tabla. Se debe haber registrado antes usando registerAction().
+<code>
+this.registerAction('editar', (item) => this.editarItem(item));
+</code>
+=== handlePaginator(event: IPagination) ===
+Actualiza page y size con los valores del evento y recarga los datos.
+=== onSelectRow(event: SelectedItemTable<T>) ===
+Controla la selección de filas en la tabla. Si una fila es seleccionada, se agrega a selectedItems, de lo contrario, se elimina.
+=== registerAction(action: string, handler: (item: T) => void) ===
+Asocia una acción de la tabla con una función manejadora. Esto permite ejecutar lógica personalizada cuando se dispara una acción desde la tabla.
+=== onAlertClosed(result: SweetAlertResult) ===
+Maneja el cierre de una alerta. Si el usuario confirma, se oculta el mensaje.
+=== initSweeetAlert(title, text, icon, confirmButtonText) ===
+Configura los parámetros para mostrar una alerta con SweetAlert. Es reutilizable y puede personalizarse fácilmente.
+<code>
+this.initSweeetAlert('Guardado', 'Los datos han sido guardados', 'success');
+</code>
+=== initModal(title, width, visible, closedButton) ===
+Inicializa la configuración de un modal que puede abrirse en el componente.
+<code>
+this.initModal('Editar usuario', '30rem', true, true);
+</code>
+==== Ejemplo de Uso ====
+<code>
+export class MiComponente extends BaseComponent<Usuario> {
+  protected override getTableColumns(): TableListColumns[] {
+    return [
+      { field: 'nombre', header: 'Nombre' },
+      { field: 'email', header: 'Correo' }
+    ];
+  }
+  protected override getTableConfig(): ConfigTable {
+    return {
+      actions: true,
+      selectable: true
+    };
+  }
+  protected override loadDataTable(): void {
+    // Aquí haces una llamada a un servicio para llenar dataSource
+  }
+  ngOnInit() {
+    this.setBreadcrumb([{ label: 'Usuarios' }]);
+    this.initTable();
+  }
+}
+</code>
+==== Beneficios de esta clase ====
+  * Evita repetir lógica en múltiples componentes.
+  * Mejora la mantenibilidad del código.
+  * Estandariza el uso de formularios, tablas y modales.
+  * Facilita pruebas y futuras refactorizaciones.
+[[ada:howto:sicoferp:factory:new-migracion-sicoferp:front|←Regresar]]
+----
+//Documento actualizado: 25/06/2025//\\
+//Elaborado por: Maicol Arroyave - Desarrollador//

Wiki

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página