Merge pull request #5031 from IgniteUI/SKrastev/fix-4896-master

rkaraivanov · web-flow · commit 04cbe4ca4359 · 2019-06-18T11:56:29.000+03:00
Update summaries to be indented based on the featureColumnsWidth in all cases and update Hierarchical Grid.
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -3037,7 +3037,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * @hidden
      */
     get summariesMargin() {
-        return this.rowSelectable || this.rowDraggable ? this.featureColumnsWidth : 0;
+        return this.featureColumnsWidth;
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts
@@ -1691,6 +1691,8 @@ describe('IgxGrid - Summaries', () => {
             fix.detectChanges();
             verifyBaseSummaries(fix);
             verifySummariesForParentID19(fix, 3);
+            verifySummaryRowIndentationByDataRowIndex(fix, 0);
+            verifySummaryRowIndentationByDataRowIndex(fix, 3);
         });
 
         it('should render correct summaries when change grouping', () => {
@@ -1703,6 +1705,9 @@ describe('IgxGrid - Summaries', () => {
             verifyBaseSummaries(fix);
             verifySummariesForParentID17(fix, 4);
             verifySummariesForParentID17(fix, 5);
+            verifySummaryRowIndentationByDataRowIndex(fix, 0);
+            verifySummaryRowIndentationByDataRowIndex(fix, 4);
+            verifySummaryRowIndentationByDataRowIndex(fix, 5);
 
             // change order
             grid.groupingExpressions = [
@@ -1713,6 +1718,9 @@ describe('IgxGrid - Summaries', () => {
 
             verifyBaseSummaries(fix);
             verifySummariesForParentID17(fix, 4);
+            verifySummaryRowIndentationByDataRowIndex(fix, 0);
+            verifySummaryRowIndentationByDataRowIndex(fix, 4);
+
             const summaryRow = HelperUtils.getSummaryRowByDataRowIndex(fix, 8);
             HelperUtils.verifyColumnSummaries(summaryRow, 2, ['Count'], ['2']);
             HelperUtils.verifyColumnSummaries(summaryRow, 3, ['Count', 'Earliest', 'Latest'], ['2', 'Jul 3, 2011', 'Sep 18, 2014']);
@@ -1722,6 +1730,9 @@ describe('IgxGrid - Summaries', () => {
             verifyBaseSummaries(fix);
             verifySummariesForParentID17(fix, 3);
             verifySummariesForParentID19(fix, 6);
+            verifySummaryRowIndentationByDataRowIndex(fix, 0);
+            verifySummaryRowIndentationByDataRowIndex(fix, 3);
+            verifySummaryRowIndentationByDataRowIndex(fix, 6);
         });
 
         it('should be able to enable/disable summaries at runtime', () => {
@@ -2166,6 +2177,13 @@ describe('IgxGrid - Summaries', () => {
         });
     });
 
+    function verifySummaryRowIndentationByDataRowIndex(fixture, visibleIndex) {
+        const summaryRow = HelperUtils.getSummaryRowByDataRowIndex(fixture, visibleIndex);
+        const summaryRowIndentation = summaryRow.query(By.css('.igx-grid__summaries-patch'));
+        const expander = fixture.componentInstance.grid.headerGroupContainer;
+        expect(summaryRowIndentation.nativeElement.offsetWidth).toEqual(expander.nativeElement.offsetWidth);
+    }
+
     function verifyBaseSummaries(fixture) {
         const summaryRow = HelperUtils.getSummaryRowByDataRowIndex(fixture, 0);
         HelperUtils.verifyColumnSummaries(summaryRow, 0, [], []);
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -110,7 +110,7 @@
                 </igx-grid-groupby-row>
             </ng-template>
             <ng-template #summary_template>
-                <igx-grid-summary-row [gridID]="id" [summaries]="rowData.summaries" [indentation]="groupingExpressions.length" [index]="rowIndex" class="igx-grid__summaries--body" #summaryRow>
+                <igx-grid-summary-row [gridID]="id" [summaries]="rowData.summaries" [index]="rowIndex" class="igx-grid__summaries--body" #summaryRow>
                 </igx-grid-summary-row>
             </ng-template>
             <ng-template [igxTemplateOutlet]='isGroupByRecord(rowData) ? group_template : isSummaryRow(rowData) ? summary_template : record_template'
@@ -129,7 +129,7 @@
 
 
 <div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' #tfoot>
-    <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight' *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [indentation]="groupingExpressions.length" [index]="0" class="igx-grid__summaries"  #summaryRow>
+    <igx-grid-summary-row [style.width.px]='calcWidth' [style.height.px]='summariesHeight' *ngIf="hasSummarizedColumns && rootSummariesEnabled" [gridID]="id" [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe" [index]="0" class="igx-grid__summaries"  #summaryRow>
     </igx-grid-summary-row>
     <div class="igx-grid__tfoot-thumb" [hidden]='!hasVerticalSroll()' [style.height.px]='summariesHeight' [style.width.px]="scrollWidth"></div>
 </div>
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html
@@ -117,7 +117,6 @@
         *ngIf="hasSummarizedColumns && rootSummariesEnabled"
         [gridID]="id"
         [summaries]="id | igxGridSummaryDataPipe:summaryService.retriggerRootPipe"
-        [indentation]="hasExpandableChildren ? 1 : 0"
         [index]="0"
         class="igx-grid__summaries"
         #summaryRow>
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts
@@ -468,7 +468,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone
         let width = super.getFeatureColumnsWidth();
 
         if (this.hasExpandableChildren) {
-            width += this.headerHierarchyExpander.nativeElement.clientWidth || this.getDefaultExpanderWidth();
+            width += this.headerHierarchyExpander.nativeElement.offsetWidth || this.getDefaultExpanderWidth();
         }
 
         return width;
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts
@@ -410,7 +410,7 @@ describe('IgxHierarchicalGrid Integration', () => {
     });
 
     describe('Summaries', () => {
-        const INDENT_LEVEL_CLASS = 'igx-grid__row-indentation--level-1';
+        const SUMMARIES_MARGIN_CLASS = '.igx-grid__summaries-patch';
         it('should allow defining summaries for child grid and child should be sized correctly.', fakeAsync(/** row toggle rAF */() => {
             hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
             fixture.detectChanges();
@@ -421,13 +421,9 @@ describe('IgxHierarchicalGrid Integration', () => {
 
             // Expect expansion cell to be rendered and sized the same as the expansion cell inside the grid
             const summaryRow = childGrid.summariesRowList.first.nativeElement;
+            const summaryRowIndentation = summaryRow.querySelector(SUMMARIES_MARGIN_CLASS);
             expect(summaryRow.children.length).toEqual(2);
-            expect(summaryRow.children[0].tagName.toLowerCase()).toEqual('div');
-            expect(summaryRow.children[0].offsetWidth).toEqual(expander.nativeElement.offsetWidth);
-            expect(summaryRow.children[1].tagName.toLowerCase()).toEqual('igx-display-container');
-
-            // there should be indentation of the summaries
-            expect(summaryRow.children[0].className.indexOf(INDENT_LEVEL_CLASS) !== -1).toBe(true);
+            expect(summaryRowIndentation.offsetWidth).toEqual(expander.nativeElement.offsetWidth);
 
             const gridHeight = childGrid.nativeElement.offsetHeight;
             const childElems: HTMLElement[] = Array.from(childGrid.nativeElement.children);
@@ -444,10 +440,36 @@ describe('IgxHierarchicalGrid Integration', () => {
             const childGridDebugElement = childGrids[0].query(By.css('igx-hierarchical-grid'));
             const grandChild = childGridDebugElement.query(By.css('igx-hierarchical-grid')).componentInstance;
             const grandChildSummaryRow = grandChild.summariesRowList.first.nativeElement;
+            const childSummaryRowIndentation = grandChildSummaryRow.querySelector(SUMMARIES_MARGIN_CLASS);
 
             expect(grandChildSummaryRow.children.length).toEqual(1);
-            // there should be no indentation of the summaries of the leaf grid
-            expect(grandChildSummaryRow.children[0].className.indexOf(INDENT_LEVEL_CLASS) === -1).toBe(true);
+            expect(childSummaryRowIndentation).toBeNull();
+        }));
+
+        it('should size summaries with row selectors for parent and children grids correctly.', fakeAsync(/** row toggle rAF */() => {
+            hierarchicalGrid.rowSelectable = true;
+            hierarchicalGrid.dataRowList.toArray()[0].nativeElement.children[0].click();
+            fixture.detectChanges();
+
+            const rootExpander =  hierarchicalGrid.dataRowList.toArray()[0].expander;
+            const rootCheckbox =  hierarchicalGrid.headerCheckboxContainer;
+            const rootSummaryRow = hierarchicalGrid.summariesRowList.first.nativeElement;
+            const rootSummaryIndentation = rootSummaryRow.querySelector(SUMMARIES_MARGIN_CLASS);
+
+            expect(rootSummaryRow.children.length).toEqual(2);
+            expect(rootSummaryIndentation.offsetWidth)
+                .toEqual(rootExpander.nativeElement.offsetWidth + rootCheckbox.nativeElement.offsetWidth);
+
+            const childGrids =  fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
+            const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
+            const expander =  childGrid.dataRowList.toArray()[0].expander;
+
+            // Expect expansion cell to be rendered and sized the same as the expansion cell inside the grid
+            const summaryRow = childGrid.summariesRowList.first.nativeElement;
+            const childSummaryIndentation = summaryRow.querySelector(SUMMARIES_MARGIN_CLASS);
+
+            expect(summaryRow.children.length).toEqual(2);
+            expect(childSummaryIndentation.offsetWidth).toEqual(expander.nativeElement.offsetWidth);
         }));
 
         it('should render summaries for column inside a column group.', fakeAsync(/** row toggle rAF */() => {
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html
@@ -1,7 +1,4 @@
 <ng-container *ngIf="summaries.size">
-    <ng-container *ngIf="indentation">
-        <div class="igx-grid__row-indentation igx-grid__row-indentation--level-{{indentation}}"></div>
-    </ng-container>
     <ng-container *ngIf="grid.summariesMargin">
         <div
         class="igx-grid__summaries-patch"
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts
@@ -37,9 +37,6 @@ export class IgxSummaryRowComponent implements DoCheck  {
     @Input()
     public index: number;
 
-    @Input()
-    public indentation = 0;
-
     @Input()
     public firstCellIndentation = -1;
 

Original file line number	Diff line number	Diff line change
`@@ -3037,7 +3037,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements`
`3037`	`3037`	`* @hidden`
`3038`	`3038`	`*/`
`3039`	`3039`	`get summariesMargin() {`
`3040`		`- return this.rowSelectable \|\| this.rowDraggable ? this.featureColumnsWidth : 0;`
	`3040`	`+ return this.featureColumnsWidth;`
`3041`	`3041`	`}`
`3042`	`3042`
`3043`	`3043`	`/**`
Original file line number	Diff line number	Diff line change
`@@ -468,7 +468,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseCompone`
`468`	`468`	`let width = super.getFeatureColumnsWidth();`
`469`	`469`
`470`	`470`	`if (this.hasExpandableChildren) {`
`471`		`- width += this.headerHierarchyExpander.nativeElement.clientWidth \|\| this.getDefaultExpanderWidth();`
	`471`	`+ width += this.headerHierarchyExpander.nativeElement.offsetWidth \|\| this.getDefaultExpanderWidth();`
`472`	`472`	`}`
`473`	`473`
`474`	`474`	`return width;`