@@ -17,122 +17,33 @@ <h1 mat-dialog-title class="filters-header">
1717 [formControl] ="fieldSearchControl ">
1818 < mat-autocomplete autoActiveFirstOption #auto ="matAutocomplete " (optionSelected) ="addFilter($event) ">
1919 < mat-option *ngFor ="let field of foundFields | async "
20- [ngClass ] ="{'disabled': field === 'No matches'} "
21- [value ] ="field ">
22- {{field}}
20+ [value ] ="field.key "
21+ [disabled ] ="isFieldAlreadyFiltered( field.key) ">
22+ {{ field.label }}
2323 </ mat-option >
2424 </ mat-autocomplete >
2525 </ mat-form-field >
2626
27- < ng-container *ngFor ="let value of tableRowFieldsShown | keyvalue; trackBy:trackByFn ">
28- < div *ngIf ="getComparatorType(getInputType(value.key)) === 'nonComparable'; else comparableFilter " class ="filter-line ">
29-
30- < div *ngIf ="isWidget(value.key); else defaultTableField ">
31- < ndc-dynamic [ndcDynamicComponent] ="tableWidgets[value.key].widget_type ? UIwidgets[tableWidgets[value.key].widget_type] : inputs[tableTypes[value.key]] "
32- [ndcDynamicInputs] ="{
33- key: value.key,
34- label: tableWidgets[value.key].name || value.key,
35- value: tableRowFieldsShown[value.key],
36- widgetStructure: tableWidgets[value.key],
37- relations: tableTypes[value.key] === 'foreign key' ? tableForeignKeys[value.key] : undefined,
38- autofocus: autofocusField === value.key
39- } "
27+ @for (value of tableRowFieldsShown | keyvalue; track value.key) {
28+ < div class ="filter-line ">
29+ < span class ='mat-body-1 column-name '> {{ getFieldLabel(value.key) }}</ span >
30+ < div class ="filter-line__field ">
31+ < ndc-dynamic
32+ [ndcDynamicComponent] ="getFilterComponent(value.key) "
33+ [ndcDynamicInputs] ="getFilterInputs(value.key) "
4034 [ndcDynamicOutputs] ="{
41- onFieldChange: { handler: updateField, args: ['$event', value.key] }
35+ onFieldChange: { handler: updateField, args: ['$event', value.key] },
36+ onComparatorChange: { handler: updateComparatorFromComponent, args: ['$event', value.key] }
4237 } "
4338 > </ ndc-dynamic >
4439 </ div >
45-
46- < ng-template #defaultTableField >
47- < ndc-dynamic [ndcDynamicComponent] ="inputs[tableTypes[value.key]] "
48- [ndcDynamicInputs] ="{
49- key: value.key,
50- label: value.key,
51- value: tableRowFieldsShown[value.key],
52- structure: tableRowStructure[value.key],
53- relations: tableTypes[value.key] === 'foreign key' ? tableForeignKeys[value.key] : undefined,
54- autofocus: autofocusField === value.key
55- } "
56- [ndcDynamicOutputs] ="{
57- onFieldChange: { handler: updateField, args: ['$event', value.key] }
58- } "
59- > </ ndc-dynamic >
60- </ ng-template >
40+ < button mat-icon-button type ="button " class ="filter-delete-button "
41+ matTooltip ="Remove "
42+ (click) ="removeFilter(value.key) ">
43+ < mat-icon > close</ mat-icon >
44+ </ button >
6145 </ div >
62-
63- < ng-template #comparableFilter >
64- < span class ='mat-body-1 column-name '> {{value.key}}</ span >
65-
66- < mat-form-field *ngIf ="getComparatorType(getInputType(value.key)) === 'text' "
67- appearance ="outline ">
68- < mat-select name ="textComparator-{{value.key}} "
69- [(ngModel)] ="tableRowFieldsComparator[value.key] "
70- (ngModelChange) ="updateComparator($event, value.key) ">
71- < mat-option value ="startswith ">
72- starts with
73- </ mat-option >
74- < mat-option value ="endswith ">
75- ends with
76- </ mat-option >
77- < mat-option value ="eq ">
78- equal
79- </ mat-option >
80- < mat-option value ="contains ">
81- contains
82- </ mat-option >
83- < mat-option value ="icontains ">
84- not contains
85- </ mat-option >
86- < mat-option value ="empty ">
87- is empty
88- </ mat-option >
89- </ mat-select >
90- </ mat-form-field >
91-
92- < mat-form-field *ngIf ="getComparatorType(getInputType(value.key)) === 'number' "
93- appearance ="outline ">
94- < mat-select name ="numberComparator-{{value.key}} "
95- [(ngModel)] ="tableRowFieldsComparator[value.key] "
96- (ngModelChange) ="updateComparator($event, value.key) ">
97- < mat-option value ="eq ">
98- equal
99- </ mat-option >
100- < mat-option value ="gt ">
101- greater than
102- </ mat-option >
103- < mat-option value ="lt ">
104- less than
105- </ mat-option >
106- < mat-option value ="gte ">
107- greater than or equal
108- </ mat-option >
109- < mat-option value ="lte ">
110- less than or equal
111- </ mat-option >
112- </ mat-select >
113- </ mat-form-field >
114-
115- < ndc-dynamic [ndcDynamicComponent] ="inputs[tableTypes[value.key]] "
116- [ndcDynamicInputs] ="{
117- key: value.key,
118- label: value.key,
119- value: tableRowFieldsShown[value.key],
120- readonly: tableRowFieldsComparator[value.key] === 'empty',
121- structure: tableRowStructure[value.key],
122- relations: tableTypes[value.key] === 'foreign key' ? tableForeignKeys[value.key] : undefined,
123- autofocus: autofocusField === value.key
124- } "
125- [ndcDynamicOutputs] ="{
126- onFieldChange: { handler: updateField, args: ['$event', value.key] }
127- } "
128- > </ ndc-dynamic >
129- </ ng-template >
130- < button mat-icon-button type ="button " class ="filter-delete-button "
131- matTooltip ="Remove "
132- (click) ="removeFilter(value.key) ">
133- < mat-icon > close</ mat-icon >
134- </ button >
135- </ ng-container >
46+ }
13647 </ mat-dialog-content >
13748 </ ng-template >
13849
@@ -146,6 +57,7 @@ <h1 mat-dialog-title class="filters-header">
14657 Reset
14758 </ button >
14859 < button mat-flat-button mat-dialog-close
60+ type ="button "
14961 angulartics2On ="click "
15062 angularticsAction ="Filters: cancel is clicked "
15163 (click) ="posthog.capture('Filters: cancel is clicked') ">
0 commit comments