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:52] 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 21: | 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 45: | Línea 44: | ||
| Inicializa el formulario base con un campo `filter`. | Inicializa el formulario base con un campo `filter`. | ||
| - | ```typescript | + | <code> |
| this.form = this._fb.group({ | this.form = this._fb.group({ | ||
| filter: [''] | filter: [''] | ||
| }); | }); | ||
| - | ```` | + | </code> |
| - | Es útil para componentes que tengan filtros simples. | + | |
| - | \=== setBreadcrumb(items: BreadcrumbItem\[]) === | + | === setBreadcrumb(items: BreadcrumbItem[]) === |
| Configura el breadcrumb que se mostrará en la parte superior del componente, útil para indicar la ruta actual. | Configura el breadcrumb que se mostrará en la parte superior del componente, útil para indicar la ruta actual. | ||
| - | ```typescript | + | <code> |
| this._breadcrumbService.setItems(items); | this._breadcrumbService.setItems(items); | ||
| - | ``` | + | </code> |
| - | --- | + | === initTable() === |
| - | \=== initTable() === | + | 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. |
| - | 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. |
| - | \=== getTableColumns(), getTableConfig(), loadDataTable() === | + | <code> |
| - | + | ||
| - | Son métodos opcionales que deben ser sobreescritos por los componentes que extiendan `BaseComponent`. | + | |
| - | + | ||
| - | ```typescript | + | |
| protected getTableColumns(): TableListColumns[] { | protected getTableColumns(): TableListColumns[] { | ||
| return [...]; // retorna las columnas | return [...]; // retorna las columnas | ||
| } | } | ||
| - | ``` | + | </code> |
| - | --- | + | === navigateTo(route: routeParams[]) === |
| - | \=== navigateTo(route: routeParams\[]) === | + | Permite redirigir a otra ruta usando el Router de Angular. |
| - | Permite redirigir a otra ruta usando el `Router` de Angular. | + | <code> |
| - | + | ||
| - | ```typescript | + | |
| this.navigateTo(['/ruta', id]); | this.navigateTo(['/ruta', id]); | ||
| - | ``` | + | </code> |
| - | + | ||
| - | --- | + | |
| - | \=== actionsTable(event: ITableEmitterAction<T>) === | + | === actionsTable(event: ITableEmitterAction<T>) === |
| - | Ejecuta una función asociada a una acción en la tabla. Se debe haber registrado antes usando `registerAction()`. | + | Ejecuta una función asociada a una acción en la tabla. Se debe haber registrado antes usando registerAction(). |
| - | ```typescript | + | <code> |
| this.registerAction('editar', (item) => this.editarItem(item)); | this.registerAction('editar', (item) => this.editarItem(item)); | ||
| - | ``` | + | </code> |
| - | --- | + | === handlePaginator(event: IPagination) === |
| - | \=== handlePaginator(event: IPagination) === | + | Actualiza page y size con los valores del evento y recarga los datos. |
| - | 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. |
| - | \=== onSelectRow(event: SelectedItemTable<T>) === | + | === registerAction(action: string, handler: (item: T) => void) === |
| - | + | ||
| - | 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. | 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) === |
| - | + | ||
| - | \=== onAlertClosed(result: SweetAlertResult) === | + | |
| Maneja el cierre de una alerta. Si el usuario confirma, se oculta el mensaje. | Maneja el cierre de una alerta. Si el usuario confirma, se oculta el mensaje. | ||
| - | --- | + | === initSweeetAlert(title, text, icon, confirmButtonText) === |
| - | + | ||
| - | \=== initSweeetAlert(title, text, icon, confirmButtonText) === | + | |
| Configura los parámetros para mostrar una alerta con SweetAlert. Es reutilizable y puede personalizarse fácilmente. | Configura los parámetros para mostrar una alerta con SweetAlert. Es reutilizable y puede personalizarse fácilmente. | ||
| - | ```typescript | + | <code> |
| this.initSweeetAlert('Guardado', 'Los datos han sido guardados', 'success'); | this.initSweeetAlert('Guardado', 'Los datos han sido guardados', 'success'); | ||
| - | ``` | + | </code> |
| - | + | ||
| - | --- | + | |
| - | \=== initModal(title, width, visible, closedButton) === | + | === initModal(title, width, visible, closedButton) === |
| Inicializa la configuración de un modal que puede abrirse en el componente. | Inicializa la configuración de un modal que puede abrirse en el componente. | ||
| - | ```typescript | + | <code> |
| this.initModal('Editar usuario', '30rem', true, true); | this.initModal('Editar usuario', '30rem', true, true); | ||
| - | ``` | + | </code> |
| - | \==== Ejemplo de Uso ==== | + | ==== Ejemplo de Uso ==== |
| - | ```typescript | + | <code> |
| export class MiComponente extends BaseComponent<Usuario> { | export class MiComponente extends BaseComponent<Usuario> { | ||
| Línea 170: | Línea 148: | ||
| } | } | ||
| } | } | ||
| - | ``` | + | </code> |
| - | + | ||
| - | \==== Beneficios de esta clase base ==== | + | |
| - | + | ||
| - | * 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. | + | |
| - | + | ||
| - | \==== Categoría ==== | + | |
| - | * \[\[ada\:howto\:sicoferp\:factory\:new-migracion-sicoferp\:front\:primeros|Primeros pasos]] | + | ==== 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.1750877566.txt.gz · Última modificación: 2025/06/25 18:52 por 192.168.175.164
Herramientas de la página
