Skip to content

Commit dcd404e

Browse files
DiyanDimitrovDiyanDimitrov
committed
feat(filtering): add edit expression UI #5496 
1 parent a466738 commit dcd404e

File tree

3 files changed

+60
-34
lines changed

3 files changed

+60
-34
lines changed

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

+43-33
Original file line numberDiff line numberDiff line change
@@ -47,19 +47,18 @@ <h4 class="igx-typography__h6">
4747
</ng-template>
4848

4949
<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">
50+
<span *ngIf="!expressionItem.inEditMode">
51+
<igx-chip [removable]="true"
52+
[selected]="expressionItem.selected"
53+
(click)="onChipClick(expressionItem)"
54+
(dblclick)="onChipDblClick(expressionItem)"
55+
(onRemove)="onChipRemove(expressionItem)"
56+
style="margin-bottom: 10px">
5857
{{ expressionItem.expression.fieldName }}
5958
{{ expressionItem.expression.condition ? expressionItem.expression.condition.name : '' }}
6059
{{ expressionItem.expression.searchVal }}
6160
</igx-chip>
62-
<span *ngIf="!expressionItem.inEditMode && expressionItem.selected && selectedExpressions.length === 1">
61+
<span *ngIf="expressionItem.selected && selectedExpressions.length === 1">
6362
<button igxButton="icon"
6463
(click)="enterExpressionEdit(expressionItem)">
6564
<igx-icon fontSet="material">edit</igx-icon>
@@ -70,17 +69,49 @@ <h4 class="igx-typography__h6">
7069
</button>
7170
</span>
7271
</span>
73-
<span *ngIf="expressionItem.inEditMode">
74-
Editing...
72+
<div *ngIf="expressionItem.inEditMode"
73+
style="display: flex; align-items: center;">
74+
<igx-select type="box"
75+
[(ngModel)]="selectedColumn">
76+
<igx-select-item *ngFor="let column of grid.columns" [value]="column">
77+
{{column.header}}
78+
</igx-select-item>
79+
</igx-select>
80+
81+
<ng-container *ngIf="!selectedColumn">
82+
<igx-select type="box"
83+
[disabled]="true">
84+
</igx-select>
85+
</ng-container>
86+
87+
<ng-container *ngIf="selectedColumn">
88+
<igx-select type="box"
89+
[(ngModel)]="selectedCondition"
90+
[disabled]="!selectedColumn">
91+
<igx-select-item *ngFor="let condition of selectedColumn.filters.conditionList()" [value]="condition">
92+
{{condition}}
93+
</igx-select-item>
94+
</igx-select>
95+
</ng-container>
96+
97+
<igx-input-group type="box"
98+
[disabled]="!selectedColumn || !selectedCondition || (selectedColumn && selectedColumn.filters.condition(selectedCondition).isUnary)"
99+
[displayDensity]="displayDensity">
100+
<input #input
101+
igxInput
102+
[(ngModel)]="searchValue"/>
103+
</igx-input-group>
104+
75105
<button igxButton="icon"
106+
[disabled]="!selectedColumn || !selectedCondition || (!searchValue && !selectedColumn.filters.condition(selectedCondition).isUnary)"
76107
(click)="commitOperandEdit(expressionItem)">
77108
<igx-icon fontSet="material">check</igx-icon>
78109
</button>
79110
<button igxButton="icon"
80111
(click)="cancelOperandEdit()">
81112
<igx-icon fontSet="material">close</igx-icon>
82113
</button>
83-
</span>
114+
</div>
84115
<div *ngIf="expressionItem.inAddMode"
85116
style="display: flex;">
86117
<ng-container *ngTemplateOutlet="addExpressionsTemplate; context: context(expressionItem.parent, expressionItem)"></ng-container>
@@ -100,27 +131,6 @@ <h4 class="igx-typography__h6">
100131
<ng-container *ngTemplateOutlet="isExpressionGroup(expr) ? expressionTreeTemplate : filterOperandTemplate; context: context(expr)"></ng-container>
101132
</ng-container>
102133
<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> -->
124134
<ng-container *ngTemplateOutlet="addExpressionsTemplate; context: context(expressionItem)"></ng-container>
125135
<button igxButton
126136
*ngIf="expressionItem !== rootGroup"

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

+15-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { IgxFilteringService } from '../grid-filtering.service';
66
import { IgxOverlayService } from '../../../services/overlay/overlay';
77
import { DisplayDensity } from '../../../core/displayDensity';
88
import { IgxToggleDirective } from 'igniteui-angular';
9-
import { IgxGridBaseComponent } from '../../grid';
9+
import { IgxGridBaseComponent, IgxColumnComponent } from '../../grid';
1010
import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../../data-operations/filtering-expressions-tree';
1111
import { FilteringLogic, IFilteringExpression } from '../../../data-operations/filtering-expression.interface';
1212
import { IgxStringFilteringOperand } from '../../../data-operations/filtering-condition';
@@ -68,6 +68,10 @@ export class IgxAdvancedFilteringDialogComponent {
6868

6969
public addModeExpression: ExpressionOperandItem;
7070

71+
public selectedColumn: IgxColumnComponent;
72+
public selectedCondition: string;
73+
public searchValue: string;
74+
7175
private _clickTimer;
7276
private _dblClickDelay = 200;
7377
private _preventChipClick = false;
@@ -111,6 +115,10 @@ export class IgxAdvancedFilteringDialogComponent {
111115
}
112116

113117
public commitOperandEdit(item: ExpressionOperandItem) {
118+
item.expression.fieldName = this.selectedColumn.field;
119+
item.expression.condition = this.selectedColumn.filters.condition(this.selectedCondition);
120+
item.expression.searchVal = this.searchValue;
121+
114122
item.inEditMode = false;
115123
this.editedExpression = null;
116124
}
@@ -215,6 +223,12 @@ export class IgxAdvancedFilteringDialogComponent {
215223
this.editedExpression.inEditMode = false;
216224
}
217225

226+
this.selectedColumn = expressionItem.expression.fieldName ?
227+
this.grid.getColumnByName(expressionItem.expression.fieldName) : null;
228+
this.selectedCondition = expressionItem.expression.condition ?
229+
expressionItem.expression.condition.name : null;
230+
this.searchValue = expressionItem.expression.searchVal;
231+
218232
expressionItem.inEditMode = true;
219233
this.editedExpression = expressionItem;
220234
}

‎projects/igniteui-angular/src/lib/grids/grid-common.module.ts

+2
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ import { IgxGridDragSelectDirective } from './drag-select.directive';
6868
import { IgxGridColumnResizerComponent } from './grid-column-resizer.component';
6969
import { IgxRowDragModule } from './row-drag.directive';
7070
import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component';
71+
import { IgxSelectModule } from '../select';
7172
/**
7273
* @hidden
7374
*/
@@ -197,6 +198,7 @@ import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filter
197198
IgxGridPipesModule,
198199
IgxGridExcelStyleFilteringModule,
199200
IgxRowDragModule,
201+
IgxSelectModule,
200202
IgxPaginatorModule
201203
],
202204
providers: [

0 commit comments

Comments
 (0)