refactor(toolbar): toolbar samples

.github/workflows/build-app-lob.yml

@@ -0,0 +1,34 @@
+# This is a basic workflow to help you get started with Actions
+
+name: CI
+
+# Controls when the action will run. Triggers the workflow on push or pull request
+# events but only for the master branch
+on:
+  push:
+    branches: [ master, vNext, rkaraivanov/toolbar-samples ]
+  pull_request:
+    branches: [ master, vNext, rkaraivanov/toolbar-samples ]
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v2
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run lint
+        run: npm run lint
+
+      - name: 'Generate live editing and build samples'
+        run: npm run build:app-lob
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"

live-editing/configs/GridConfigGenerator.ts

@@ -402,10 +402,10 @@ export class GridConfigGenerator implements IConfigGenerator {
             component: 'GridToolbarSample2Component',
             additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/grid/services/data.ts"],
             appModuleConfig: new AppModuleConfig({
-                imports: ['GridToolbarSample2Component', 'IgxAvatarModule', 'IgxGridModule',
+                imports: ['GridToolbarSample2Component', 'IgxAvatarModule', 'IgxGridModule', 'IgxSwitchModule',
                     'IgxExcelExporterService', 'IgxCsvExporterService', 'IgxPreventDocumentScrollModule'],
                 ngDeclarations: ['GridToolbarSample2Component'],
-                ngImports: ['IgxPreventDocumentScrollModule', 'IgxAvatarModule', 'IgxGridModule'],
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxAvatarModule', 'IgxGridModule', 'IgxSwitchModule'],
                 ngProviders: ['IgxExcelExporterService', 'IgxCsvExporterService']
             })
         }));

live-editing/configs/HierarchicalGridConfigGenerator.ts

@@ -412,9 +412,9 @@ export class HierarchicalGridConfigGenerator implements IConfigGenerator {
         configs.push(new Config({
             additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/hierarchical-grid/data.ts"],
             appModuleConfig: new AppModuleConfig({
-                imports: ['IgxHierarchicalGridModule', 'HGridToolbarOptionsSampleComponent', 'IgxPreventDocumentScrollModule'],
+                imports: ['IgxHierarchicalGridModule', 'HGridToolbarOptionsSampleComponent', 'IgxPreventDocumentScrollModule', 'IgxSwitchModule'],
                 ngDeclarations: ['HGridToolbarOptionsSampleComponent'],
-                ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule']
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxHierarchicalGridModule', 'IgxSwitchModule']
             }),
             component: 'HGridToolbarOptionsSampleComponent'
         }));

live-editing/configs/TreeGridConfigGenerator.ts

@@ -395,9 +395,9 @@ export class TreeGridConfigGenerator implements IConfigGenerator {
             additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/tree-grid/data/employees-flat-avatars.ts"],
             appModuleConfig: new AppModuleConfig({
                 imports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'TreeGridToolbarSample1Component', 'IgxAvatarModule',
-                    'IgxExcelExporterService', 'IgxCsvExporterService'],
+                    'IgxExcelExporterService', 'IgxCsvExporterService', 'IgxSwitchModule'],
                 ngDeclarations: ['TreeGridToolbarSample1Component'],
-                ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxAvatarModule'],
+                ngImports: ['IgxPreventDocumentScrollModule', 'IgxTreeGridModule', 'IgxAvatarModule', 'IgxSwitchModule'],
                 ngProviders: ['IgxExcelExporterService', 'IgxCsvExporterService']
             }),
             component: 'TreeGridToolbarSample1Component',

projects/app-lob/src/app/grid-crm/grid-crm/grid-crm/grid-crm.component.html

@@ -1,24 +1,30 @@
 <div class="grid__wrapper">
-    <igx-grid #grid1 igxPreventDocumentScroll id="grid1" [data]="localData" [height]="'430px'" [width]="'100%'" [rowSelection]="selectionMode"
-        displayDensity="cosy" rowHeight="50" [allowFiltering]="true" [columnHiding]="true" columnHidingTitle="Column Hiding"
-        [columnPinning]="true" [exportExcel]="true" [exportCsv]="true" exportExcelText="Export to Excel" exportCsvText="Export to CSV">
+    <igx-grid #grid1 igxPreventDocumentScroll id="grid1" [data]="localData" [height]="'430px'" [width]="'100%'"
+        [rowSelection]="selectionMode" displayDensity="cosy" rowHeight="50" [allowFiltering]="true">
         <igx-grid-toolbar>
-
+            <igx-grid-toolbar-actions>
+                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
+                <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
+                <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
+            </igx-grid-toolbar-actions>
             <div class="crm-toolbar-template">
                 <div class="crm-sample-toolbar__title">
                     <span class="logo-propeller">
-                        <img src="assets/images/grid/propeller-logo.svg" class="animated-fan"/>
+                        <img src="assets/images/grid/propeller-logo.svg" class="animated-fan" />
                     </span>
                     <span class="crm-sample-toolbar__ellipsis">Business Propeller</span>
                 </div>
                 <div class="sample-flex-container">
                     <igx-input-group type="search" class="searchInputGroup">
                         <igx-prefix>
                             <igx-icon class="prefixIcon" *ngIf="searchText.length == 0">search</igx-icon>
-                            <igx-icon class="prefixIcon" *ngIf="searchText.length > 0" (click)="clearSearch()">clear</igx-icon>
+                            <igx-icon class="prefixIcon" *ngIf="searchText.length > 0" (click)="clearSearch()">clear
+                            </igx-icon>
                         </igx-prefix>
 
-                        <input #search1 id="search1" class="searchInput" igxInput placeholder="Search" [(ngModel)]="searchText" (ngModelChange)="grid1.findNext(searchText, caseSensitive)" (keydown)="searchKeyDown($event)"/>
+                        <input #search1 id="search1" class="searchInput" igxInput placeholder="Search"
+                            [(ngModel)]="searchText" (ngModelChange)="grid1.findNext(searchText, caseSensitive)"
+                            (keydown)="searchKeyDown($event)" />
 
                         <igx-suffix *ngIf="searchText.length > 0">
                             <div class="resultsText" *ngIf="grid1.lastSearchInfo">
@@ -31,15 +37,18 @@
                                 </span>
                             </div>
                             <div class="caseSensitiveButton">
-                                <button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="updateSearch()" [igxButtonBackground]="caseSensitive? 'rgb(73, 180, 254)' : 'transparent'">
+                                <button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
+                                    [igxButtonBackground]="caseSensitive? 'rgb(73, 180, 254)' : 'transparent'">
                                     <igx-icon class="caseSensitiveIcon" fontSet="material">text_fields</igx-icon>
                                 </button>
                             </div>
                             <div class="searchButtons">
-                                <button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="grid1.findPrev(searchText, caseSensitive)">
+                                <button igxButton="icon" igxRipple [igxRippleCentered]="true"
+                                    (click)="grid1.findPrev(searchText, caseSensitive)">
                                     <igx-icon fontSet="material">navigate_before</igx-icon>
                                 </button>
-                                <button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="grid1.findNext(searchText, caseSensitive)">
+                                <button igxButton="icon" igxRipple [igxRippleCentered]="true"
+                                    (click)="grid1.findNext(searchText, caseSensitive)">
                                     <igx-icon fontSet="material">navigate_next</igx-icon>
                                 </button>
                             </div>
@@ -53,8 +62,8 @@
 
 
 
-        <igx-column field="id" header="Customer Number" width="172" [pinned]="true" [hasSummary]="false" [resizable]="true"
-            [hidden]="true" [movable]="true">
+        <igx-column field="id" header="Customer Number" width="172" [pinned]="true" [hasSummary]="false"
+            [resizable]="true" [hidden]="true" [movable]="true">
         </igx-column>
 
         <igx-column field="avatar" header="Photo" width="88" [pinned]="true" [resizable]="true" [searchable]="false"
@@ -70,36 +79,33 @@
             [hasSummary]="false" [movable]="true">
         </igx-column>
 
-        <igx-column field="deals_total" header="Total Deals" [sortable]="true" width="130" dataType="number" [hasSummary]="false"
-            [summaries]="dealsSummary" [resizable]="true" [movable]="true" [filterable]="false">
+        <igx-column field="deals_total" header="Total Deals" [sortable]="true" width="130" dataType="number"
+            [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [movable]="true" [filterable]="false">
         </igx-column>
 
-        <igx-column field="deals_won" header="Won Deals" [sortable]="true" width="130" dataType="number" [hasSummary]="false"
-            [summaries]="dealsSummary" [resizable]="true" [movable]="true" [filterable]="false">
+        <igx-column field="deals_won" header="Won Deals" [sortable]="true" width="130" dataType="number"
+            [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [movable]="true" [filterable]="false">
         </igx-column>
 
         <igx-column field="ratio" header="Ratio" width="150" [resizable]="true" [movable]="true" [filterable]="false">
             <ng-template igxCell let-val>
                 <div style="width: 100%">
-                    <igx-linear-bar [textVisibility]="false" class="cell__inner_2" [value]="val" [animate]="false"></igx-linear-bar>
+                    <igx-linear-bar [textVisibility]="false" class="cell__inner_2" [value]="val" [animate]="false">
+                    </igx-linear-bar>
                 </div>
             </ng-template>
         </igx-column>
 
         <igx-column field="Deals" header="Ratio per month" [width]="'160px'" [filterable]="false">
             <ng-template igxCell let-val>
-                <igx-sparkline height="40px" width="160px"
-                    [dataSource]="val"
-                    valueMemberPath="Deals"
-                    displayType="Column"
-                    brush="rgb(21, 190, 6)"
-                    negativeBrush="rgb(211, 17, 3)" >
+                <igx-sparkline height="40px" width="160px" [dataSource]="val" valueMemberPath="Deals"
+                    displayType="Column" brush="rgb(21, 190, 6)" negativeBrush="rgb(211, 17, 3)">
                 </igx-sparkline>
             </ng-template>
         </igx-column>
 
-        <igx-column field="deals_lost" header="Lost Deals" [sortable]="true" width="130" dataType="number" [hasSummary]="false"
-            [summaries]="dealsSummary" [resizable]="true" [movable]="true" [filterable]="false">
+        <igx-column field="deals_lost" header="Lost Deals" [sortable]="true" width="130" dataType="number"
+            [hasSummary]="false" [summaries]="dealsSummary" [resizable]="true" [movable]="true" [filterable]="false">
         </igx-column>
 
         <igx-column field="deals_pending" header="Pending Deals" [sortable]="true" width="130" dataType="number"
@@ -109,17 +115,19 @@
         <igx-column field="position" header="Position" width="200" [resizable]="true" [movable]="true">
         </igx-column>
 
-        <igx-column field="company" header="Company" [sortable]="true" width="130" [hasSummary]="false" [resizable]="true"
-            [movable]="true">
+        <igx-column field="company" header="Company" [sortable]="true" width="130" [hasSummary]="false"
+            [resizable]="true" [movable]="true">
         </igx-column>
 
         <igx-column field="email" header="Email" width="240" [resizable]="true" [movable]="true" [filterable]="false">
         </igx-column>
 
-        <igx-column field="work_phone" header="Work Phone" width="160" [resizable]="true" [movable]="true" [filterable]="false">
+        <igx-column field="work_phone" header="Work Phone" width="160" [resizable]="true" [movable]="true"
+            [filterable]="false">
         </igx-column>
 
-        <igx-column field="mobile_phone" header="Mobile Phone" width="160" [resizable]="true" [movable]="true" [filterable]="false">
+        <igx-column field="mobile_phone" header="Mobile Phone" width="160" [resizable]="true" [movable]="true"
+            [filterable]="false">
         </igx-column>
 
         <igx-column field="fax" header="Fax" width="160" [resizable]="true" [movable]="true" [filterable]="false">
@@ -134,7 +142,8 @@
         <igx-column field="city" header="City" width="160" [resizable]="true" [movable]="true">
         </igx-column>
 
-        <igx-column field="post_code" header="Post Code" width="100" [resizable]="true" [movable]="true" [filterable]="false">
+        <igx-column field="post_code" header="Post Code" width="100" [resizable]="true" [movable]="true"
+            [filterable]="false">
         </igx-column>
 
         <igx-column field="state" header="State" width="105" [resizable]="true" [movable]="true">
@@ -150,8 +159,8 @@
         <igx-column field="referred_by" header="Referred By" width="160" [resizable]="true" [movable]="true">
         </igx-column>
 
-        <igx-column field="birthday" header="Birthday" width="160" dataType="date" [formatter]="formatDate" [hasSummary]="false"
-            [summaries]="soonSummary" [resizable]="true" [movable]="true" [filterable]="false">
+        <igx-column field="birthday" header="Birthday" width="160" dataType="date" [formatter]="formatDate"
+            [hasSummary]="false" [summaries]="soonSummary" [resizable]="true" [movable]="true" [filterable]="false">
         </igx-column>
 
         <igx-column field="last_activity" header="Last Activity" width="160" dataType="date" [formatter]="formatDate"

projects/app-lob/src/app/grid-crm/grid-crm/grid-crm/grid-crm.component.ts

@@ -12,6 +12,7 @@ import {
     HorizontalAlignment,
     IColumnExportingEventArgs,
     IgxColumnComponent,
+    IgxCsvExporterService,
     IgxDateSummaryOperand,
     IgxExcelExporterService,
     IgxGridComponent,
@@ -123,7 +124,17 @@ export class GridCRMComponent implements OnInit, AfterViewInit {
         scrollStrategy: new CloseScrollStrategy()
     };
 
-    constructor(private excelExporterService: IgxExcelExporterService) { }
+    constructor(
+        private csvExporter: IgxCsvExporterService,
+        private excelExporter: IgxExcelExporterService) {
+
+        const exporterCb = (args: IColumnExportingEventArgs) => {
+            if (args.field === 'Deals') { args.cancel = true; }
+        };
+
+        this.excelExporter.onColumnExport.subscribe(exporterCb);
+        this.csvExporter.onColumnExport.subscribe(exporterCb);
+    }
 
     public ngOnInit() {
         const employees = data;
@@ -147,19 +158,6 @@ export class GridCRMComponent implements OnInit, AfterViewInit {
         this.cols = this.grid1.columnList;
         this.hiddenColsLength = this.cols.filter((col) => col.hidden).length;
         this.pinnedColsLength = this.cols.filter((col) => col.pinned).length;
-        this.grid1.toolbar.columnPinningDropdown.width = "250px";
-
-        this.grid1.toolbar.excelExporter.onColumnExport.subscribe((args: IColumnExportingEventArgs) => {
-            if (args.field === "Deals") {
-                args.cancel = true;
-            }
-        });
-
-        this.grid1.toolbar.csvExporter.onColumnExport.subscribe((args: IColumnExportingEventArgs) => {
-            if (args.field === "Deals") {
-                args.cancel = true;
-            }
-        });
     }
 
     public toggleVisibility(col: IgxColumnComponent) {