Herramientas de usuario
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:base-component
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
ada:howto:sicoferp:factory:new-migracion-sicoferp:front:base-component [2025/06/25 18:56] 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> ====== | ====== 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 ==== | ==== Objetivo ==== | ||
| Línea 20: | Línea 22: | ||
| * **FormBuilder** (`@angular/forms`): crea formularios reactivos fácilmente. | * **FormBuilder** (`@angular/forms`): crea formularios reactivos fácilmente. | ||
| * **BreadcrumbService**: establece el breadcrumb de navegación (migas de pan). | * **BreadcrumbService**: establece el breadcrumb de navegación (migas de pan). | ||
| - | |||
| - | Estas dependencias se inyectan usando la función `inject()`. | ||
| ==== Propiedades ==== | ==== 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. | * **form**: Instancia del formulario reactivo principal del componente. | ||
| * **tableConfig**: Configuración de comportamiento y estilo de la tabla. | * **tableConfig**: Configuración de comportamiento y estilo de la tabla. | ||
| Línea 49: | Línea 49: | ||
| }); | }); | ||
| </code> | </code> | ||
| - | |||
| - | Es útil para componentes que tengan filtros simples. | ||
| === setBreadcrumb(items: BreadcrumbItem[]) === | === setBreadcrumb(items: BreadcrumbItem[]) === | ||
| Línea 73: | Línea 71: | ||
| } | } | ||
| </code> | </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// | ||
ada/howto/sicoferp/factory/new-migracion-sicoferp/front/base-component.1750877792.txt.gz · Última modificación: 2025/06/25 18:56 por 192.168.175.164
Herramientas de la página
