Filtrar una tabla mediante el componente filtro
Última modificación por Pablo Martínez Kirsten el 2022/03/07 13:03
Introducción
En este tutorial se mostrará como filtrar una tabla utilizando un componente de filtro externo, para realizar filtros complejos de manera simultánea. Para este ejemplo, permitiremos filtrar por las fechas de inicio y de fin de las cuentas, usando el componente Filter Builder
Modificar el listado de cuentas
Modificaremos el formulario de tal manera que sea similar al siguiente mockup
| El primer paso es crear diferentes campos según el tipo de dato que queramos filtrar y dos botones, uno para realizar la búsqueda y otro para limpiar los campos asociados al filtro. Para nuestro ejemplo, se necesitarán dos campos para establecer un rango de fechas para filtrar el campo STARTDATE de las cuentas y otros dos campos para establecer el rango de fechas para filtrar el campo ENDDATE de las cuentas. A continuación crearemos el <o-filter-builder. En este componente, indicaremos que columnas de la tabla hacen referencia a los campos del formulario que componen el filtro, la tabla a la que el filtro afectará y la expresión que se creará. accounts-home.component.html <o-form show-header="no"> <o-column-collapsible title="{{ 'FILTERS_ACCOUNTS' | oTranslate }}" appearance="outline"> <o-row layout-gap="18px"> <o-column fxFlex="50" title="{{ 'STARTDATE' | oTranslate }}"> <o-date-input attr="startInit" label="INIT" read-only="no" required="no"></o-date-input> <o-date-input attr="endInit" label="END" read-only="no" required="no"></o-date-input> </o-column> <o-column fxFlex="50" title="{{ 'ENDDATE' | oTranslate }}"> <o-date-input attr="startEnd" label="INIT" read-only="no" required="no"></o-date-input> <o-date-input attr="endEnd" label="END" read-only="no" required="no"></o-date-input> </o-column> </o-row> <o-row layout-align="end" layout-gap="18px"> <o-button attr="filter" [oFilterBuilderQuery]="filterBuilder" type="RAISED" label="FILTER" class="filter-button"> </o-button> <o-button attr="clear" [oFilterBuilderClear]="filterBuilder" type="RAISED" label="CLEAR" class="filter-button"> </o-button> </o-row> </o-column-collapsible> <o-filter-builder #filterBuilder attr="thefilter" filters="STARTDATE_I:startInit;STARTDATE_E:endInit;ENDDATE_I:startEnd;ENDDATE_E:endEnd" [target]="accountTable" query-on-change="no" query-on-change-delay="500" [expression-builder]="createFilter"></o-filter-builder> <div fxFill> <o-table #accountTable fxFlex attr="accountsTable" service="branches" entity="account" keys="ACCOUNTID" columns="ACCOUNTID;ENTITYID;OFFICEID;CDID;ANID;STARTDATE;ENDDATE;INTERESRATE;ACCOUNTTYP" visible-columns="ACCOUNTNUMBER;STARTDATE;ENDDATE;INTERESRATE;INTERESRATE_MONTHLY;ACCOUNTTYP" query-rows="13"> <o-table-column attr="STARTDATE" title="STARTDATE" type="date" format="LL"></o-table-column> <o-table-column attr="ENDDATE" title="ENDDATE" type="date" format="LL"></o-table-column> <o-table-column attr="INTERESRATE" title="INTERESRATE" type="percentage" width="150px" decimal-separator=","> </o-table-column> <o-table-column attr="ACCOUNTNUMBER" title="ACCOUNTNUMBER" class="o-table-column-centered"> <app-account-number-render></app-account-number-render> </o-table-column> <o-table-column-calculated attr="INTERESRATE_MONTHLY" title="INTERESRATE_MONTHLY" [operation-function]="intRateMonthly" type="percentage" decimal-separator="," class="o-table-column-centered"> </o-table-column-calculated> </o-table> </div> </o-form>
Para crear la expresión llamamos al método createFilter de accounts-home.component.ts accounts-home.component.ts import { Component, OnInit } from '@angular/core'; import { intRateMonthlyFunction } from '../../../shared/shared.module'; import { FilterExpressionUtils, Expression } from 'ontimize-web-ngx'; @Component({ selector: 'app-accounts-home', templateUrl: './accounts-home.component.html', styleUrls: ['./accounts-home.component.css'] }) export class AccountsHomeComponent implements OnInit { public intRateMonthly = intRateMonthlyFunction; constructor() { } ngOnInit() { } createFilter(values: Array<{ attr, value }>): Expression { let filters: Array<Expression> = []; values.forEach(fil => { if (fil.value) { if (fil.attr === 'STARTDATE_I') { filters.push(FilterExpressionUtils.buildExpressionMoreEqual('STARTDATE', fil.value)); } if (fil.attr === 'STARTDATE_E') { filters.push(FilterExpressionUtils.buildExpressionLessEqual('STARTDATE', fil.value)); } if (fil.attr === 'ENDDATE_I') { filters.push(FilterExpressionUtils.buildExpressionMoreEqual('ENDDATE', fil.value)); } if (fil.attr === 'ENDDATE_E') { filters.push(FilterExpressionUtils.buildExpressionLessEqual('ENDDATE', fil.value)); } } }); if (filters.length > 0) { return filters.reduce((exp1, exp2) => FilterExpressionUtils.buildComplexExpression(exp1, exp2, FilterExpressionUtils.OP_AND)); } else { return null; } } } El método createFilter recibe por parámetro un array de pares clave-valor al que según la clave, construye una BasicExpression cuya clave es la columna de la tabla y el valor que tenga el campo del filtro. En nuestro caso, debido a que queríamos aplicar varios valores para la misma columna, utilizamos nombre ficticios como STARTDATE_I o ENDDATE_E como nombre de la columna, pero al crear el filtro, utilizamos los nombres correctos de la tabla. Juntamos las BasicExpression entre sí para crear una BasicExpression compleja la retornamos. Únicamente resta añadir los valores de traducción en.json { ... "FILTERS_ACCOUNTS": "Account filters", "INIT": "Init", "END": "End", "FILTER": "Filter", "CLEAR": "Clear" } es.json { ... "FILTERS_ACCOUNTS": "Filtros cuenta", "INIT": "Inicio", "END": "Fin", "FILTER": "Filtrar", "CLEAR": "Limpiar" } | ||||||||||||||||||||||||
| << Tutorial previo | Índice | Próximo tutorial >> |