1- import { Component , Input , QueryList , ViewChild , ViewChildren , ChangeDetectionStrategy , OnInit , OnChanges } from '@angular/core' ;
2- import { PopComponent } from '../../pop/pop.component ' ;
1+ import { ChangeDetectionStrategy , ChangeDetectorRef , Component , Input , OnChanges , ViewChild } from '@angular/core' ;
2+ import { Field , List , ListConfig , Selection } from '@ec.components/core ' ;
33import { FormComponent } from '../../form/form.component' ;
4- import { List , ListConfig } from '@ec.components/core' ;
5- import { Selection } from '@ec.components/core' ;
6- import { Field } from '@ec.components/core' ;
4+ import { PopComponent } from '../../pop/pop.component' ;
75import { ListConfigService } from '../list-config.service' ;
6+ import { InputComponent } from '../../io/input/input.component' ;
87
98/** This component renders, as the name states, the header of a list.*/
109@Component ( {
@@ -18,24 +17,31 @@ export class ListHeaderComponent implements OnChanges {
1817 /** The selection instance. This is optional. If It is not provided, no checkbox will be visible.*/
1918 @Input ( ) selection : Selection < any > ;
2019 /** The pop dropdowns that contain the filtering */
21- @ViewChildren ( 'filterPop' ) pops : QueryList < PopComponent > ;
20+ @ViewChild ( 'filterPop' ) filterPop : PopComponent ;
2221 /** The config for the filter form */
2322 filterFormConfig : ListConfig < any > ;
2423 filteredField : any ;
2524 filterForm : FormComponent < any > ;
25+ filterInput : InputComponent ;
2626
27- constructor ( public listConfig : ListConfigService ) {
27+ constructor ( public listConfig : ListConfigService , public cdr : ChangeDetectorRef ) {
2828 }
2929
3030 setFilter ( field , value ) {
3131 this . list . setFilter ( { [ field . property ] : value } ) ;
3232 }
3333
34+ inputReady ( input ) {
35+ this . filterInput = input ;
36+ input . focus ( true ) ;
37+ }
38+
3439 initFilterForm ( filterForm ) {
3540 // is called when form is ready
3641 this . filterForm = filterForm ;
3742 if ( this . list . config . defaultFilter ) {
3843 this . filterField ( this . list . config . defaultFilter ) ;
44+ }
3945 }
4046
4147 ngOnChanges ( changes ?) {
@@ -45,6 +51,11 @@ export class ListHeaderComponent implements OnChanges {
4551 if ( ! this . list || ! this . list . config || ! this . list . config . fields ) {
4652 return ;
4753 }
54+ /* this.list.change$.subscribe(() => {
55+ if (this.filterInput) {
56+ // this.filterInput.focus(true);
57+ }
58+ }); */
4859 this . filterFormConfig = {
4960 ...this . list . config ,
5061 fields : this . list . filterableFields ( ) . reduce ( ( fields , field ) => {
@@ -66,34 +77,52 @@ export class ListHeaderComponent implements OnChanges {
6677 }
6778
6879 /** opens the given filter pop and closes all others */
69- public editFilter ( pop , property ) {
80+ public filterField ( property ) {
7081 if ( this . filteredField ) {
7182 if ( this . filteredField . property === property ) {
72- pop . hide ( ) ;
83+ /* this.filterPop.hide(); */
84+ if ( this . filterInput ) {
85+ this . filterInput . focus ( true ) ;
86+ }
7387 return ;
7488 }
7589 this . clearFilter ( ) ;
7690 }
7791 // patch current filter value to control
92+ const control = this . filterForm . group . get ( property ) ;
93+ if ( ! control ) {
94+ console . warn ( 'no control found for ' + property + '. Is it filterable?' , this . list . config ) ;
95+ return ;
96+ }
7897 this . filterForm . group . get ( property ) . patchValue ( this . list . getFilterValue ( property ) ) ;
7998 this . filteredField = this . filterForm . form . getField ( property ) ;
80- pop . show ( ) ;
99+ setTimeout ( ( ) => this . filterPop . show ( ) ) ;
100+ }
101+
102+ resetFilter ( ) {
103+ if ( ! this . filteredField || ! this . list || ! this . list . isFiltered ( this . filteredField . property ) ) {
104+ return ;
105+ }
106+ this . filterForm . group . get ( this . filteredField . property ) . reset ( ) ;
107+ this . list . clearFilter ( ) ;
81108 }
82109
83110 clearFilter ( ) {
84111 if ( ! this . filteredField || ! this . list . isFiltered ( this . filteredField . property ) ) {
85112 delete this . filteredField ;
86113 return ;
87114 }
88- this . filterForm . group . get ( this . filteredField . property ) . reset ( ) ;
89- this . list . clearFilter ( ) ;
115+ this . resetFilter ( ) ;
90116 delete this . filteredField ;
91117 }
92118
93119 toggledFilterPop ( active ) {
94120 if ( ! active ) {
95121 this . clearFilter ( ) ;
96122 }
123+ if ( this . filterInput ) {
124+ this . filterInput . focus ( true ) ;
125+ }
97126 }
98127
99128 /** Returns the fields label */
0 commit comments