feat(filtering): add display density and remove selectedGroup #5496

Author: DiyanDimitrov

Diff for: projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html

@@ -49,6 +49,7 @@ <h4 class="igx-typography__h6">
         <ng-template #filterOperandTemplate let-expressionItem>
             <span *ngIf="!expressionItem.inEditMode">
                 <igx-chip [data]="expressionItem"
+                          [displayDensity]="displayDensity"
                           [removable]="true"
                           [selected]="expressionItem.selected"
                           (click)="onChipClick(expressionItem)"
@@ -61,18 +62,21 @@ <h4 class="igx-typography__h6">
                 </igx-chip>
                 <span *ngIf="expressionItem.selected && selectedExpressions.length === 1">
                     <button igxButton="icon"
+                            [displayDensity]="displayDensity"
                             (click)="enterExpressionEdit(expressionItem)">
                         <igx-icon fontSet="material">edit</igx-icon>
                     </button>
                     <button igxButton="icon"
+                            [displayDensity]="displayDensity"
                             (click)="enterExpressionAdd(expressionItem)">
                         <igx-icon fontSet="material">add</igx-icon>
                     </button>
                 </span>
             </span>
             <div *ngIf="expressionItem.inEditMode"
                  style="display: flex; align-items: center;">
-                <igx-select type="box" 
+                <igx-select type="box"
+                            [displayDensity]="displayDensity"
                             [(ngModel)]="selectedColumn">
                     <igx-select-item *ngFor="let column of grid.columns" [value]="column">
                         {{column.header}}
@@ -81,12 +85,14 @@ <h4 class="igx-typography__h6">
 
                 <ng-container *ngIf="!selectedColumn">
                     <igx-select type="box"
+                                [displayDensity]="displayDensity"
                                 [disabled]="true">
                     </igx-select>
                 </ng-container>
 
                 <ng-container *ngIf="selectedColumn">
                     <igx-select type="box" 
+                                [displayDensity]="displayDensity"
                                 [(ngModel)]="selectedCondition"
                                 [disabled]="!selectedColumn">
                             <igx-select-item *ngFor="let condition of selectedColumn.filters.conditionList()" [value]="condition">
@@ -104,11 +110,13 @@ <h4 class="igx-typography__h6">
                 </igx-input-group>
 
                 <button igxButton="icon"
+                        [displayDensity]="displayDensity"
                         [disabled]="!selectedColumn || !selectedCondition || (!searchValue && !selectedColumn.filters.condition(selectedCondition).isUnary)"
                         (click)="commitOperandEdit(expressionItem)">
                     <igx-icon fontSet="material">check</igx-icon>
                 </button>
                 <button igxButton="icon"
+                        [displayDensity]="displayDensity"
                         (click)="cancelOperandEdit()">
                     <igx-icon fontSet="material">close</igx-icon>
                 </button>
@@ -117,6 +125,7 @@ <h4 class="igx-typography__h6">
                  style="display: flex;">
                 <ng-container *ngTemplateOutlet="addExpressionsTemplate; context: context(expressionItem.parent, expressionItem)"></ng-container>
                 <button igxButton="icon"
+                        [displayDensity]="displayDensity"
                         (click)="cancelOperandAdd()">
                     <igx-icon fontSet="material">close</igx-icon>
                 </button>
@@ -154,26 +163,27 @@ <h4 class="igx-typography__h6">
              style="display: flex; flex-flow: column; width: 200px; background-color: black; margin-left: 20px">
             <ng-container *ngIf="selectedGroups.length === 1">
                 <igx-buttongroup #logicOperatorButtonGroup
+                                 [displayDensity]="displayDensity"
                                  [multiSelection]="false">
-                    <span igxButton [displayDensity]="displayDensity"
-                        #andButton
-                        (keydown)="onLogicOperatorKeyDown(0)"
-                        tabindex="0"
-                        [selected]="selectedGroups[0].operator === 0"
-                        type="button"
-                        (click)="onLogicOperatorButtonClicked(0)">
+                    <button igxButton [displayDensity]="displayDensity"
+                            #andButton
+                            (keydown)="onLogicOperatorKeyDown(0)"
+                            tabindex="0"
+                            [selected]="selectedGroups[0].operator === 0"
+                            type="button"
+                            (click)="onLogicOperatorButtonClicked(0)">
                         {{ grid.resourceStrings.igx_grid_filter_operator_and }}
-                    </span>
+                    </button>
 
-                    <span igxButton [displayDensity]="displayDensity"
-                        #orButton
-                        tabindex="0"
-                        (keydown)="onLogicOperatorKeyDown(1)"
-                        [selected]="selectedGroups[0].operator === 1"
-                        type="button"
-                        (click)="onLogicOperatorButtonClicked($event, 1)">
+                    <button igxButton [displayDensity]="displayDensity"
+                            #orButton
+                            tabindex="0"
+                            (keydown)="onLogicOperatorKeyDown(1)"
+                            [selected]="selectedGroups[0].operator === 1"
+                            type="button"
+                            (click)="onLogicOperatorButtonClicked($event, 1)">
                         {{ grid.resourceStrings.igx_grid_filter_operator_or }}
-                    </span>
+                    </button>
                 </igx-buttongroup>
 
                 <button igxButton [displayDensity]="displayDensity" [disabled]="!selectedGroups[0].parent" (click)="ungroup()">

Diff for: projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

@@ -55,9 +55,6 @@ export class IgxAdvancedFilteringDialogComponent {
     @Input()
     public overlayService: IgxOverlayService;
 
-    @Input()
-    public displayDensity: DisplayDensity;
-
     public rootGroup: ExpressionGroupItem;
 
     public selectedExpressions: ExpressionOperandItem[] = [];
@@ -70,8 +67,6 @@ export class IgxAdvancedFilteringDialogComponent {
 
     public addModeExpression: ExpressionOperandItem;
 
-    public selectedGroup: ExpressionGroupItem;
-
     public selectedCondition: string;
     public searchValue: string;
 
@@ -99,6 +94,10 @@ export class IgxAdvancedFilteringDialogComponent {
 
     constructor(public cdr: ChangeDetectorRef) { }
 
+    public get displayDensity() {
+        return this.grid.displayDensity;
+    }
+
     public get selectedColumn(): IgxColumnComponent {
         return this._selectedColumn;
     }
@@ -413,27 +412,31 @@ export class IgxAdvancedFilteringDialogComponent {
     }
 
     public ungroup() {
-        const parent = this.selectedGroup.parent;
+        const selectedGroup = this.selectedGroups[0];
+        const parent = selectedGroup.parent;
         if (parent) {
-            const index = parent.children.indexOf(this.selectedGroup);
-            parent.children.splice(index, 1, ...this.selectedGroup.children);
+            const index = parent.children.indexOf(selectedGroup);
+            parent.children.splice(index, 1, ...selectedGroup.children);
 
-            for (const expr of this.selectedGroup.children) {
+            for (const expr of selectedGroup.children) {
                 expr.parent = parent;
             }
         }
 
-        this.selectedGroup = null;
+        this.selectedGroups = [];
+        this.clearSelection();
         this.toggleContextMenu();
     }
 
     public deleteGroup() {
-        const parent = this.selectedGroup.parent;
+        const selectedGroup = this.selectedGroups[0];
+        const parent = selectedGroup.parent;
         if (parent) {
-            const index = parent.children.indexOf(this.selectedGroup);
+            const index = parent.children.indexOf(selectedGroup);
             parent.children.splice(index, 1);
         }
-        this.selectedGroup = null;
+        this.selectedGroups = [];
+        this.clearSelection();
         this.toggleContextMenu();
     }
 

Diff for: src/app/grid-search/grid-search.sample.css

@@ -1,3 +1,8 @@
+.density-chooser {
+    margin-bottom: 16px;
+    max-width: 900px;
+}
+
 .sample-buttons {
     margin-top: 24px;
 }

Diff for: src/app/grid-search/grid-search.sample.html

@@ -3,11 +3,18 @@
         Allows search in a grid.
     </app-page-header>
 
+    
+
     <div class="sample-content">
         <div class="sample-column">
+            <div class="density-chooser">
+                <igx-buttongroup [values]="displayDensities" (onSelect)="selectDensity($event)"></igx-buttongroup>
+            </div>
+
             <igx-grid
                 #grid1
                 [data]="data"
+                [displayDensity]="density"
                 [allowFiltering]="true"
                 [rowSelectable]="true"
                 [paging]="false"

Diff for: src/app/grid-search/grid-search.sample.ts

@@ -12,10 +12,18 @@ export class GridSearchComponent implements OnInit {
 
     public data: Array<any>;
     public columns: Array<any>;
+    public displayDensities;
+    public density = 'comfortable';
 
     @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;
 
     public ngOnInit(): void {
+        this.displayDensities = [
+            { label: 'comfortable', selected: this.density === 'comfortable', togglable: true },
+            { label: 'cosy', selected: this.density === 'cosy', togglable: true },
+            { label: 'compact', selected: this.density === 'compact', togglable: true }
+        ];
+
         this.columns = [
             { field: 'ID', width: 80, resizable: true, movable: true },
             { field: 'CompanyName', width: 150, resizable: true, movable: true, type: 'string'},
@@ -466,6 +474,10 @@ export class GridSearchComponent implements OnInit {
         ];
     }
 
+    public selectDensity(event) {
+        this.density = this.displayDensities[event.index].label;
+    }
+
     toggleColumn(name: string) {
         const col = this.grid1.getColumnByName(name);
         col.pinned ? col.pinned = false : col.pinned = true;