Skip to content

Commit 94647fc

Browse files
DiyanDimitrovDiyanDimitrov
committed
feat(filtering): add advanced filtering content #5496 
1 parent e30c02f commit 94647fc

File tree

4 files changed

+450
-79
lines changed

4 files changed

+450
-79
lines changed

‎projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html

Lines changed: 133 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,145 @@
1-
<article #toggle
2-
class="igx-excel-filter__secondary"
3-
[ngClass]="{
4-
'igx-excel-filter__secondary--cosy': grid.displayDensity === 'cosy',
5-
'igx-excel-filter__secondary--compact': grid.displayDensity === 'compact'
6-
}"
7-
(keydown)="onKeyDown($event)"
8-
(onOpening)="onCustomDialogOpening()"
9-
(onOpened)="onCustomDialogOpened()">
10-
<header class="igx-advanced-filter__secondary-header">
1+
<article class="igx-excel-filter__secondary"
2+
(keydown)="onKeyDown($event)"
3+
[ngClass]="{
4+
'igx-excel-filter__secondary--cosy': grid.displayDensity === 'cosy',
5+
'igx-excel-filter__secondary--compact': grid.displayDensity === 'compact'
6+
}">
7+
<header class="igx-excel-filter__secondary-header">
118
<h4 class="igx-typography__h6">
129
Adv. Filtering
1310
</h4>
1411
</header>
1512

16-
<article #expressionsContainer class="igx-advanced-filter__secondary-main">
17-
<!-- <ng-container *ngIf="column.dataType === 'date'">
18-
<igx-excel-style-date-expression *ngFor="let expression of expressionsList;"
19-
class="igx-excel-filter__condition"
20-
[expressionUI]="expression"
21-
[column]="column"
22-
[grid]="grid"
23-
[displayDensity]="displayDensity"
24-
[expressionsList]="expressionsList"
25-
(onExpressionRemoved)="onExpressionRemoved($event)"
26-
(onLogicOperatorChanged)="onLogicOperatorChanged($event)">
27-
</igx-excel-style-date-expression>
28-
</ng-container> -->
13+
<article #expressionsContainer class="igx-excel-filter__secondary-main" style="padding: 10px;">
14+
<ng-container *ngIf="!rootGroup">
15+
<button igxButton [displayDensity]="displayDensity" (click)="addAndGroup()">
16+
<igx-icon fontSet="material">add</igx-icon>
17+
<span>"And" Group</span>
18+
</button>
19+
<button igxButton [displayDensity]="displayDensity" (click)="addOrGroup()">
20+
<igx-icon fontSet="material">add</igx-icon>
21+
<span>"Or" Group</span>
22+
</button>
23+
</ng-container>
24+
25+
<ng-template #addExpressionsTemplate let-expressionItem let-afterExpression="afterExpression">
26+
<button igxButton
27+
[displayDensity]="displayDensity"
28+
[disabled]="editedExpression"
29+
(click)="addCondition(expressionItem, afterExpression)">
30+
<igx-icon fontSet="material">add</igx-icon>
31+
<span>Condition</span>
32+
</button>
33+
<button igxButton
34+
[displayDensity]="displayDensity"
35+
[disabled]="editedExpression"
36+
(click)="addAndGroup(expressionItem, afterExpression)">
37+
<igx-icon fontSet="material">add</igx-icon>
38+
<span>"And" Group</span>
39+
</button>
40+
<button igxButton
41+
[displayDensity]="displayDensity"
42+
[disabled]="editedExpression"
43+
(click)="addOrGroup(expressionItem, afterExpression)">
44+
<igx-icon fontSet="material">add</igx-icon>
45+
<span>"Or" Group</span>
46+
</button>
47+
</ng-template>
48+
49+
<ng-template #filterOperandTemplate let-expressionItem>
50+
<span>
51+
<igx-chip *ngIf="!expressionItem.inEditMode"
52+
[removable]="true"
53+
[selected]="expressionItem.selected"
54+
(click)="onChipClick(expressionItem)"
55+
(dblclick)="onChipDblClick(expressionItem)"
56+
(onRemove)="onChipRemove(expressionItem)"
57+
style="margin-bottom: 10px">
58+
{{ expressionItem.expression.fieldName }}
59+
{{ expressionItem.expression.condition ? expressionItem.expression.condition.name : '' }}
60+
{{ expressionItem.expression.searchVal }}
61+
</igx-chip>
62+
<span *ngIf="!expressionItem.inEditMode && expressionItem.selected && selectedExpressions.length === 1">
63+
<button igxButton="icon"
64+
(click)="enterExpressionEdit(expressionItem)">
65+
<igx-icon fontSet="material">edit</igx-icon>
66+
</button>
67+
<button igxButton="icon"
68+
(click)="enterExpressionAdd(expressionItem)">
69+
<igx-icon fontSet="material">add</igx-icon>
70+
</button>
71+
</span>
72+
</span>
73+
<span *ngIf="expressionItem.inEditMode">
74+
Editing...
75+
<button igxButton="icon"
76+
(click)="commitOperandEdit(expressionItem)">
77+
<igx-icon fontSet="material">check</igx-icon>
78+
</button>
79+
<button igxButton="icon"
80+
(click)="cancelOperandEdit()">
81+
<igx-icon fontSet="material">close</igx-icon>
82+
</button>
83+
</span>
84+
<div *ngIf="expressionItem.inAddMode"
85+
style="display: flex;">
86+
<ng-container *ngTemplateOutlet="addExpressionsTemplate; context: context(expressionItem.parent, expressionItem)"></ng-container>
87+
<button igxButton="icon"
88+
(click)="cancelOperandAdd()">
89+
<igx-icon fontSet="material">close</igx-icon>
90+
</button>
91+
</div>
92+
</ng-template>
2993

30-
<!-- <ng-container *ngIf="column.dataType !== 'date'">
31-
<igx-excel-style-default-expression *ngFor="let expression of expressionsList;"
32-
class="igx-excel-filter__condition"
33-
[expressionUI]="expression"
34-
[column]="column"
35-
[grid]="grid"
36-
[displayDensity]="displayDensity"
37-
[expressionsList]="expressionsList"
38-
(onExpressionRemoved)="onExpressionRemoved($event)"
39-
(onLogicOperatorChanged)="onLogicOperatorChanged($event)">
40-
</igx-excel-style-default-expression>
41-
</ng-container> -->
94+
<ng-template #expressionTreeTemplate let-expressionItem>
95+
<div style="display: flex;">
96+
<div tabindex="0" style="width: 10px; margin-right: 10px;"
97+
[style.background-color]="expressionItem.operator === 0 ? 'lightblue' : 'lightcoral'"></div>
98+
<div style="display: flex; flex-direction: column; align-items: flex-start;">
99+
<ng-container *ngFor="let expr of expressionItem.children">
100+
<ng-container *ngTemplateOutlet="isExpressionGroup(expr) ? expressionTreeTemplate : filterOperandTemplate; context: context(expr)"></ng-container>
101+
</ng-container>
102+
<div *ngIf="currentGroup === expressionItem">
103+
<!-- <button igxButton
104+
[displayDensity]="displayDensity"
105+
[disabled]="editedExpression"
106+
(click)="addCondition(expressionItem)">
107+
<igx-icon fontSet="material">add</igx-icon>
108+
<span>Condition</span>
109+
</button>
110+
<button igxButton
111+
[displayDensity]="displayDensity"
112+
[disabled]="editedExpression"
113+
(click)="addAndGroup(expressionItem)">
114+
<igx-icon fontSet="material">add</igx-icon>
115+
<span>"And" Group</span>
116+
</button>
117+
<button igxButton
118+
[displayDensity]="displayDensity"
119+
[disabled]="editedExpression"
120+
(click)="addOrGroup(expressionItem)">
121+
<igx-icon fontSet="material">add</igx-icon>
122+
<span>"Or" Group</span>
123+
</button> -->
124+
<ng-container *ngTemplateOutlet="addExpressionsTemplate; context: context(expressionItem)"></ng-container>
125+
<button igxButton
126+
*ngIf="expressionItem !== rootGroup"
127+
[displayDensity]="displayDensity"
128+
[disabled]="editedExpression"
129+
(click)="endGroup(expressionItem)">
130+
<span>End Group</span>
131+
</button>
132+
</div>
133+
</div>
134+
</div>
135+
</ng-template>
42136

43-
<!-- <button igxButton [displayDensity]="displayDensity"
44-
class="igx-advanced-filter__add-filter"
45-
(click)="onAddButtonClick()">
46-
<igx-icon>add</igx-icon>
47-
<span>{{ grid.resourceStrings.igx_grid_excel_custom_dialog_add }}</span>
48-
</button> -->
137+
<ng-container *ngIf="rootGroup">
138+
<ng-container *ngTemplateOutlet="expressionTreeTemplate; context: context(rootGroup)"></ng-container>
139+
</ng-container>
49140
</article>
50141

51-
<footer class="igx-advanced-filter__secondary-footer">
142+
<footer class="igx-excel-filter__secondary-footer">
52143
<button igxButton [displayDensity]="displayDensity" (click)="onClearButtonClick()">{{ grid.resourceStrings.igx_grid_excel_custom_dialog_clear }}</button>
53144

54145
<div>

0 commit comments

Comments
 (0)