Tree Grid and GroupBy Summaries (#3333)

* feat(GridSummaries): added tree grid and groupby summaries #3076 * refactor(themes): update grid summaries theme after refactor * feat(GridSummaries): trigger CD when change summaryCalc mode runtime #3076 * refactor(GridSummaries): retrigger rootSummariesPipe when enable/disable summary * feat(GridSummaries): escape edit mode when change calculationMode #3076 * feat(summaries): fixing samples build issue #3076 * test(treeGrid): Add summaries tests #3162 * test(grid): add groupBy with summaries test #3162 * test(treeGrid): Update summaries tests #3162 * chore(*): remove trailing whitespace * feat(GridSummaries): add keyboard navigation for grid summaries #3076 * feat(summaries): fix summary cell width for % #3076 * test(grid): Add groupBy and Summary tests #3162 * feat(summaries): fix tree grid root summary indentation #3076 * test(grid): up[date for lint #3162 * refactor(summaryCell): removed gridAPI service from summary cell * test(grid): add missing ds #3162 * refactor(summaryCell): return when we are at last root summary * refactor(IgxGridNavigationService): remove unnecessary code * test(grid): Update failing test #3162 * test(treeGrid): Update failing tests #3162 * test(grid): Exclude failing search tests #3162 * refactor(GridSummary): appy check if grid data is null or undefined
IgniteUI · Dec 7, 2018 · 7699191 · 7699191
1 parent cb75b44
commit 7699191
Show file tree

Hide file tree

Showing 54 changed files with 3,432 additions and 1,335 deletions.
diff --git a/...cts/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss b/...cts/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss
@@ -104,14 +104,9 @@
         display: flex;
         flex-direction: column;
         flex: 1 1 0%;
-        border-left: 1px solid --var($theme, 'border-color');
         padding: map-get($summary-padding, 'comfortable');
         background: --var($theme, 'background-color');
         overflow: hidden;
-
-        &:first-of-type {
-            border-left: 0;
-        }
     }
 
     %igx-grid-summary--cosy {
@@ -135,10 +130,6 @@
         border-right: map-get($cell-pin, 'style') map-get($cell-pin, 'color');
     }
 
-    %igx-grid-summary--empty {
-        border-left: 1px solid --var($theme, 'border-color');
-    }
-
     %igx-grid-summary__item {
         display: flex;
         align-items: center;

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss
@@ -86,6 +86,15 @@
         }
     }
 
+    @include e(summaries, $m: 'body') {
+        @extend %grid-summaries !optional;
+        @extend %grid-summaries--body !optional;
+
+        igx-display-container {
+            @extend %grid-display-container-tr !optional;
+        }
+    }
+
     @include e(summaries-patch) {
         @extend %grid-summaries-patch !optional;
     }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -61,6 +61,11 @@
 /// @param {Color} $filtering-row-background [null] - The background color of the filtering row.
 /// @param {Color} $filtering-row-text-color [null] - The text-color color of the filtering row.
 ///
+/// @param {Color} $body-summaries-background [null] - The background color of the summary groups located the body.
+/// @param {Color} $body-summaries-text-color [null] - The text color of the summary results located the body.
+/// @param {Color} $root-summaries-background [null] - The background color of the summary groups located the footer.
+/// @param {Color} $root-summaries-text-color [null] - The text color of the summary results located the footer.
+///
 /// @requires $default-palette
 /// @requires $light-schema
 /// @requires apply-palette
@@ -139,7 +144,12 @@
     $filtering-header-text-color: null,
     $filtering-row-background: null,
     $filtering-row-text-color: null,
-    $tree-filtered-text-color: null
+    $tree-filtered-text-color: null,
+
+    $body-summaries-background: null,
+    $body-summaries-text-color: null,
+    $root-summaries-background: null,
+    $root-summaries-text-color: null
 ) {
     $name: 'igx-grid';
     $theme: apply-palette(map-get($schema, $name), $palette);
@@ -283,6 +293,14 @@
         $filtering-row-text-color: text-contrast(hexrgba($filtering-row-background));
     }
 
+    @if not($body-summaries-text-color) and $body-summaries-background {
+        $body-summaries-text-color: text-contrast($body-summaries-background);
+    }
+
+    @if not($root-summaries-text-color) and $root-summaries-background {
+        $root-summaries-text-color: text-contrast($root-summaries-background);
+    }
+
     @return extend($theme, (
         name: $name,
         palette: $palette,
@@ -358,7 +376,12 @@
 
         tree-filtered-text-color: $tree-filtered-text-color,
         tree-selected-filtered-row-text-color: $tree-selected-filtered-row-text-color,
-        tree-selected-filtered-cell-text-color: $tree-selected-filtered-cell-text-color
+        tree-selected-filtered-cell-text-color: $tree-selected-filtered-cell-text-color,
+
+        body-summaries-background: $body-summaries-background,
+        body-summaries-text-color: $body-summaries-text-color,
+        root-summaries-background: $root-summaries-background,
+        root-summaries-text-color: $root-summaries-text-color
     ));
 }
 
@@ -614,7 +637,7 @@
     }
 
     %grid-scroll-start {
-        background: igx-color($palette, 'grays', 200);
+        background: --var($theme, 'header-background');
     }
 
     %grid-scroll-main {
@@ -1023,13 +1046,33 @@
 
     %grid-summaries {
         display: flex;
-        background: inherit;
+        background: --var($theme, 'root-summaries-background');
+
+        // %igx-grid-summary__label,
+        %igx-grid-summary__result {
+            color: --var($theme, 'root-summaries-text-color');
+        }
+    }
+
+    %grid-summaries--body {
+        background: --var($theme, 'body-summaries-background');
+        border-bottom: 1px dashed --var($theme, 'row-border-color');
+
+        &:last-of-type {
+            border-bottom: none;
+        }
+
+        // %igx-grid-summary__label,
+        %igx-grid-summary__result {
+            color: --var($theme, 'body-summaries-text-color');
+        }
     }
 
     %grid-summaries-patch {
         background: inherit;
         position: relative;
         z-index: 1;
+        border-right: 1px solid --var($theme, 'header-border-color');
     }
 
     // Column moving

diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss
@@ -22,6 +22,10 @@
 /// @prop {Map} group-row-selected-background [igx-color: ('grays', 200), hexrgba: #222] - The drop area background on drop color.
 /// @prop {Color} filtering-header-background [#222] - The background color of the filtered column header.
 /// @prop {Color} filtering-row-background [#222] - The background color of the filtering row.
+/// @prop {Map} body-summaries-background [igx-color: ('grays', 300), hexrgba: #222] - The background color of the summary groups located the body.
+/// @prop {Map} body-summaries-text-color [igx-color: ('grays', 300), hexrgba: #222, text-contrast: ()] - The text color of the summary groups located the body.
+/// @prop {Map} root-summaries-background [igx-color: ('grays', 100), hexrgba: #222] - The background color of the summary groups located the footer.
+/// @prop {Map} root-summaries-text-color [igx-color: ('grays', 100), hexrgba: #222, text-contrast: ()] - The text color of the summary groups located the footer.
 /// @requires extend
 /// @requires $_light-grid
 /// @see $default-palette
@@ -75,5 +79,27 @@ $_dark-grid: extend($_light-grid, (
 
     filtering-row-background: #222,
 
-    cell-selected-text-color: #fff
+    cell-selected-text-color: #fff,
+
+    body-summaries-background: (
+        igx-color: ('grays', 100),
+        hexrgba: #222
+    ),
+
+    body-summaries-text-color: (
+        igx-color: ('grays', 100),
+        hexrgba: #222,
+        text-contrast: ()
+    ),
+
+    root-summaries-background: (
+        igx-color: ('grays', 300),
+        hexrgba: #222
+    ),
+
+    root-summaries-text-color: (
+        igx-color: ('grays', 300),
+        hexrgba: #222,
+        text-contrast: ()
+    )
 ));
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_grid.scss
@@ -54,6 +54,10 @@
 /// @prop {Map} filtering-header-text-color [igx-color: ('grays', 800)] - The text color color of the filtered column header.
 /// @prop {Color} filtering-row-background [#fff] - The background color of the filtering row.
 /// @prop {Map} filtering-row-text-color [igx-color: ('grays', 800)] - The text-color color of the filtering row.
+/// @prop {Map} body-summaries-background [igx-color: ('grays', 300), hexrgba: #fff] - The background color of the summary groups located the body.
+/// @prop {Map} body-summaries-text-color [igx-color: ('grays', 300), hexrgba: #fff, text-contrast: ()] - The text color of the summary groups located the body.
+/// @prop {Map} root-summaries-background [igx-color: ('grays', 100), hexrgba: #fff] - The background color of the summary groups located the footer.
+/// @prop {Map} root-summaries-text-color [igx--color: ('grays', 100), hexrgba: #fff, text-contrast: ()] - The text color of the summary groups located the footer.
 /// @see $default-palette
 $_light-grid: (
     header-background: (
@@ -239,5 +243,27 @@ $_light-grid: (
 
     tree-filtered-text-color: (
         igx-color: ('grays', 500)
+    ),
+
+    body-summaries-background: (
+        igx-color: ('grays', 100),
+        hexrgba: #fff
+    ),
+
+    body-summaries-text-color: (
+        igx-color: ('grays', 100),
+        hexrgba: #fff,
+        text-contrast: ()
+    ),
+
+    root-summaries-background: (
+        igx-color: ('grays', 300),
+        hexrgba: #fff
+    ),
+
+    root-summaries-text-color: (
+        igx-color: ('grays', 300),
+        hexrgba: #fff,
+        text-contrast: ()
     )
 );
diff --git a/projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts b/projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts
@@ -58,7 +58,7 @@ export class IgxTemplateOutletDirective implements OnChanges {
   private _recreateView() {
      // remove and recreate
      if (this._viewRef) {
-         this._viewContainerRef.remove(this._viewContainerRef.indexOf(this._viewRef));
+         this._viewContainerRef.detach(this._viewContainerRef.indexOf(this._viewRef));
       }
       if (this.igxTemplateOutlet) {
         this._viewRef = this._viewContainerRef.createEmbeddedView(
@@ -70,10 +70,7 @@ export class IgxTemplateOutletDirective implements OnChanges {
                 // Note: Views in detached state do not appear in the DOM, however they remain stored in memory.
                 const res = this._embeddedViewsMap.get(this.igxTemplateOutletContext['templateID']);
                 if (!res) {
-                    let emptyView = this._viewContainerRef.createEmbeddedView(
-                        this.igxTemplateOutlet, {});
-                    emptyView = this._viewContainerRef.detach(this._viewContainerRef.indexOf(emptyView)) as EmbeddedViewRef<any>;
-                    this._embeddedViewsMap.set(this.igxTemplateOutletContext['templateID'], emptyView);
+                    this._embeddedViewsMap.set(this.igxTemplateOutletContext['templateID'], this._viewRef);
                 }
             }
       }