feat(summaries): disable buttons based on checkbox state and style alignment

Author: georgianastasov

src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html

@@ -30,10 +30,16 @@ <h5 class="summaries-title">Disable Summaries for Column:</h5>
                         </div>
 
                         <div class="summaries-dropdown-buttons">
-                            <button igxButton="flat" (click)="checkAllColumns(column)">
+                            <button igxButton="flat"
+                                [disabled]="getCheckedSummariesCount(column.summaries) === column.summaries.length"
+                                (click)="checkAllColumns(column)"
+                            >
                                 Disable All
                             </button>
-                            <button igxButton="flat" (click)="uncheckAllColumns(column)">
+                            <button igxButton="flat"
+                                [disabled]="getCheckedSummariesCount(column.summaries) === 0"
+                                (click)="uncheckAllColumns(column)"
+                            >
                                 Enable All
                             </button>
                         </div>

src/app/grid/grid-disable-summaries/grid-disable-summaries.component.scss

@@ -3,13 +3,14 @@
     padding: 16px;
 
     .summaries {
-        margin-bottom: 3rem;
+        margin-bottom: 1rem;
         display: flex;
         align-items: center;
         flex-wrap: wrap;
 
         &-title {
-            margin: 0 1rem 0 0;
+            margin: 0 0 1rem 0;
+            flex-basis: 100%;
         }
 
         .summary-column-button {

src/app/grid/grid-disable-summaries/grid-disable-summaries.component.ts

@@ -22,7 +22,7 @@ import {
 } from "igniteui-angular";
 import { DATA } from "../../data/nwindData";
 import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive";
-import { NgFor, NgIf } from "@angular/common";
+import { NgFor } from "@angular/common";
 
 class UnitsInStockSummary {
     public operate(
@@ -157,7 +157,6 @@ class DiscontinuedSummary {
     templateUrl: "grid-disable-summaries.component.html",
     imports: [
         NgFor,
-        NgIf,
         IgxGridComponent,
         IgxPreventDocumentScrollDirective,
         IgxColumnComponent,

src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.html

@@ -30,10 +30,16 @@ <h5 class="summaries-title">Disable Summaries for Column:</h5>
                         </div>
 
                         <div class="summaries-dropdown-buttons">
-                            <button igxButton="flat" (click)="checkAllColumns(column)">
+                            <button igxButton="flat"
+                                [disabled]="getCheckedSummariesCount(column.summaries) === column.summaries.length"
+                                (click)="checkAllColumns(column)"
+                            >
                                 Disable All
                             </button>
-                            <button igxButton="flat" (click)="uncheckAllColumns(column)">
+                            <button igxButton="flat"
+                                [disabled]="getCheckedSummariesCount(column.summaries) === 0"
+                                (click)="uncheckAllColumns(column)"
+                            >
                                 Enable All
                             </button>
                         </div>

src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.scss

@@ -3,13 +3,14 @@
     padding: 16px;
 
     .summaries {
-        margin-bottom: 3rem;
+        margin-bottom: 1rem;
         display: flex;
         align-items: center;
         flex-wrap: wrap;
 
         &-title {
-            margin: 0 1rem 0 0;
+            margin: 0 0 1rem 0;
+            flex-basis: 100%;
         }
 
         .summary-column-button {

src/app/hierarchical-grid/hierarchical-grid-disable-summaries/hierarchical-grid-disable-summaries.component.ts

@@ -24,7 +24,7 @@ import {
 } from "igniteui-angular";
 import { SINGERS } from "../../data/singersData";
 import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive";
-import { NgFor, NgIf } from "@angular/common";
+import { NgFor } from "@angular/common";
 
 class GrammySummary {
     public operate(
@@ -81,7 +81,6 @@ class GrammySummary {
     templateUrl: "hierarchical-grid-disable-summaries.component.html",
     imports: [
         NgFor,
-        NgIf,
         IgxHierarchicalGridComponent,
         IgxRowIslandComponent,
         IgxCellTemplateDirective,

src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.html

@@ -30,10 +30,16 @@ <h5 class="summaries-title">Disable Summaries for Column:</h5>
                         </div>
 
                         <div class="summaries-dropdown-buttons">
-                            <button igxButton="flat" (click)="checkAllColumns(column)">
+                            <button igxButton="flat"
+                                [disabled]="getCheckedSummariesCount(column.summaries) === column.summaries.length"
+                                (click)="checkAllColumns(column)"
+                            >
                                 Disable All
                             </button>
-                            <button igxButton="flat" (click)="uncheckAllColumns(column)">
+                            <button igxButton="flat"
+                                [disabled]="getCheckedSummariesCount(column.summaries) === 0"
+                                (click)="uncheckAllColumns(column)"
+                            >
                                 Enable All
                             </button>
                         </div>

src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.scss

@@ -3,13 +3,14 @@
     padding: 16px;
 
     .summaries {
-        margin-bottom: 3rem;
+        margin-bottom: 1rem;
         display: flex;
         align-items: center;
         flex-wrap: wrap;
 
         &-title {
-            margin: 0 1rem 0 0;
+            margin: 0 0 1rem 0;
+            flex-basis: 100%;
         }
 
         .summary-column-button {

src/app/tree-grid/tree-grid-disable-summaries/tree-grid-disable-summaries.component.ts

@@ -21,7 +21,7 @@ import {
 } from "igniteui-angular";
 import { ORDERS_DATA } from "../data/orders";
 import { IgxPreventDocumentScrollDirective } from "../../directives/prevent-scroll.directive";
-import { NgFor, NgIf } from "@angular/common";
+import { NgFor } from "@angular/common";
 
 class UnitsSummary {
     public operate(
@@ -142,7 +142,6 @@ class DeliveredSummary {
     templateUrl: "./tree-grid-disable-summaries.component.html",
     imports: [
         NgFor,
-        NgIf,
         IgxTreeGridComponent,
         IgxPreventDocumentScrollDirective,
         IgxColumnComponent,