feat(summaries): new design for disabled summaries samples with full refactor

Author: georgianastasov

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

@@ -1,31 +1,60 @@
-<div class="grid__wrapper">
-    <div class="summary-chooser">
-        <igx-buttongroup
-            [selectionMode]="'multi'"
-            [values]="defaultSummaries"
-            (selected)="disableDefaultSummary($event)"
-            (deselected)="enableDefaultSummary($event)"
-        ></igx-buttongroup>
-    </div>
+<div class="grid-wrapper">
+    <div class="summaries">
+        <h5 class="summaries-title">Disable Summaries for Column:</h5>
+        <ng-container *ngFor="let column of columns; let i = index">
+            <div class="summary-column-button">
+                <button
+                    #toggleButton
+                    igxButton="outlined"
+                    (click)="toggle(i)"
+                >
+                    {{ column.label }} ({{ getCheckedSummariesCount(column.summaries) }})
+                </button>
+                <div igxToggle>
+                    <div class="summaries-dropdown">
+                        <div>
+                            <p class="summaries-dropdown-title">
+                                Disabled Summaries
+                            </p>
+                        </div>
 
-    <div class="summary-chooser">
-        <igx-buttongroup
-            [selectionMode]="'multi'"
-            [values]="customSummaries"
-            (selected)="disableCustomSummary($event)"
-            (deselected)="enableCustomSummary($event)"
-        ></igx-buttongroup>
-    </div>
+                        <div class="summaries-dropdown-items">
+                            <igx-checkbox
+                                *ngFor="let summary of column.summaries; let i = index"
+                                class="summaries-dropdown-item"
+                                [checked]="summary.checked"
+                                (change)="toggleCheckbox($event, i, column)"
+                            >
+                                {{ summary.summaryLabel }}
+                            </igx-checkbox>
+                        </div>
 
+                        <div class="summaries-dropdown-buttons">
+                            <button igxButton="flat" (click)="checkAllColumns(column)">
+                                Disable All
+                            </button>
+                            <button igxButton="flat" (click)="uncheckAllColumns(column)">
+                                Enable All
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </ng-container>
+    </div>
     <igx-grid
         [igxPreventDocumentScroll]="true"
         #grid1
         [data]="data"
         [autoGenerate]="false"
-        height="600px"
+        height="700px"
         width="100%"
     >
-        <igx-column field="ProductID" header="Product ID"> </igx-column>
+        <igx-column
+            field="ProductID"
+            header="Product ID"
+            [hasSummary]="true"
+        ></igx-column>
         <igx-column
             field="ProductName"
             header="Product Name"
@@ -37,23 +66,22 @@
             header="Unit Price"
             dataType="number"
             [hasSummary]="true"
-            [disabledSummaries]="['count', 'sum', 'average']"
         >
         </igx-column>
         <igx-column
             field="UnitsInStock"
             header="Units In Stock"
             dataType="number"
             [hasSummary]="true"
-            [summaries]="discontinuedSummary"
-            [disabledSummaries]="['total', 'totalDiscontinued']"
+            [summaries]="unitsInStockSummary"
         >
         </igx-column>
         <igx-column
             field="Discontinued"
             header="Discontinued"
             [dataType]="'boolean'"
             [hasSummary]="true"
+            [summaries]="discontinuedSummary"
         >
         </igx-column>
         <igx-column

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

@@ -1,12 +1,48 @@
-.grid__wrapper {
+.grid-wrapper {
     margin: 0 auto;
     padding: 16px;
-}
 
-.summary-chooser {
-    margin-bottom: 16px;
+    .summaries {
+        margin-bottom: 3rem;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+
+        &-title {
+            margin: 0 1rem 0 0;
+        }
+
+        .summary-column-button {
+            margin-right: 1rem;
+            margin-bottom: 0.5rem;
+        }
+    }
 }
 
-igx-buttongroup{
-    display: block;
+.summaries-dropdown {
+    background-color: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+
+    &-title {
+        color: #40B3FF;
+        margin: 0.5rem 1.1rem;
+    }
+
+    &-items {
+        display: flex;
+        flex-direction: column;
+
+        .summaries-dropdown-item {
+            display: flex;
+            align-items: center;
+            padding: 0 1rem;
+        }
+    }
+
+    &-buttons {
+        display: flex;
+        justify-content: space-between;
+        padding: 0.2rem;
+    }
 }