angular-slickgrid 4.1.2 → 4.2.0

package/src/app/examples/grid-menu.component.ts

@@ -0,0 +1,229 @@
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { AngularGridInstance, Column, ExtensionName, FieldType, Filters, Formatters, GridOption, unsubscribeAllObservables } from './../modules/angular-slickgrid';
+import { TranslateService } from '@ngx-translate/core';
+import { Subscription } from 'rxjs';
+
+@Component({
+  templateUrl: './grid-menu.component.html',
+  styleUrls: ['./grid-menu.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+})
+export class GridMenuComponent implements OnInit, OnDestroy {
+  title = 'Example 9: Grid Menu Control';
+  subTitle = `
+    This example demonstrates using the <b>Slick.Controls.GridMenu</b> plugin to easily add a Grid Menu (aka hamburger menu) on the top right corner of the grid.
+    (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Grid-Menu" target="_blank">Wiki docs</a>)
+    <br/>
+    <ul>
+      <li>You can change the Grid Menu icon, for example "fa-ellipsis-v"&nbsp;&nbsp;<span class="fa fa-ellipsis-v"></span>&nbsp;&nbsp;(which is shown in this example)</li>
+      <li>By default the Grid Menu shows all columns which you can show/hide them</li>
+      <li>You can configure multiple custom "commands" to show up in the Grid Menu and use the "onGridMenuCommand()" callback</li>
+      <li>Doing a "right + click" over any column header will also provide a way to show/hide a column (via the Column Picker Plugin)</li>
+      <li>You can change the icons of both picker via SASS variables as shown in this demo (check all SASS variables)</li>
+      <li><i class="fa fa-arrow-down"></i> You can also show the Grid Menu anywhere on your page</li>
+    </ul>
+  `;
+
+  private subscriptions: Subscription[] = [];
+  angularGrid!: AngularGridInstance;
+  columnDefinitions!: Column[];
+  gridOptions!: GridOption;
+  dataset!: any[];
+  selectedLanguage: string;
+
+  constructor(private translate: TranslateService) {
+    // always start with English for Cypress E2E tests to be consistent
+    const defaultLang = 'en';
+    this.translate.use(defaultLang);
+    this.selectedLanguage = defaultLang;
+  }
+
+  ngOnDestroy() {
+    // also unsubscribe all Angular Subscriptions
+    this.subscriptions = unsubscribeAllObservables(this.subscriptions);
+  }
+
+  ngOnInit(): void {
+    this.columnDefinitions = [
+      { id: 'title', name: 'Title', field: 'title', nameKey: 'TITLE', filterable: true, type: FieldType.string },
+      { id: 'duration', name: 'Duration', field: 'duration', nameKey: 'DURATION', sortable: true, filterable: true, type: FieldType.string },
+      {
+        id: 'percentComplete', name: '% Complete', field: 'percentComplete', nameKey: 'PERCENT_COMPLETE', sortable: true, filterable: true,
+        type: FieldType.number,
+        formatter: Formatters.percentCompleteBar,
+        filter: { model: Filters.compoundSlider, params: { hideSliderNumber: false } }
+      },
+      { id: 'start', name: 'Start', field: 'start', nameKey: 'START', filterable: true, type: FieldType.string },
+      { id: 'finish', name: 'Finish', field: 'finish', nameKey: 'FINISH', filterable: true, type: FieldType.string },
+      {
+        id: 'effort-driven', name: 'Completed', field: 'effortDriven', nameKey: 'COMPLETED', maxWidth: 80, formatter: Formatters.checkmark,
+        type: FieldType.boolean,
+        minWidth: 100,
+        sortable: true,
+        filterable: true,
+        filter: {
+          collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }],
+          model: Filters.singleSelect
+        }
+      }
+    ];
+
+    this.gridOptions = {
+      columnPicker: {
+        hideForceFitButton: true,
+        hideSyncResizeButton: true,
+        onColumnsChanged: (e, args) => {
+          console.log('Column selection changed from Column Picker, visible columns: ', args.visibleColumns);
+        }
+      },
+      enableAutoResize: true,
+      enableGridMenu: true,
+      autoResize: {
+        container: '#demo-container',
+        rightPadding: 10
+      },
+      enableFiltering: true,
+      enableCellNavigation: true,
+      gridMenu: {
+        // we could disable the menu entirely by returning false depending on some code logic
+        menuUsabilityOverride: (args) => true,
+
+        // all titles optionally support translation keys, if you wish to use that feature then use the title properties with the 'Key' suffix (e.g: titleKey)
+        // example "commandTitle" for a plain string OR "commandTitleKey" to use a translation key
+        commandTitleKey: 'CUSTOM_COMMANDS',
+        iconCssClass: 'fa fa-ellipsis-v', // defaults to "fa-bars"
+        hideForceFitButton: true,
+        hideSyncResizeButton: true,
+        hideToggleFilterCommand: false, // show/hide internal custom commands
+        menuWidth: 17,
+        resizeOnShowHeaderRow: true,
+        commandItems: [
+          // add Custom Items Commands which will be appended to the existing internal custom items
+          // you cannot override an internal items but you can hide them and create your own
+          // also note that the internal custom commands are in the positionOrder range of 50-60,
+          // if you want yours at the bottom then start with 61, below 50 will make your command(s) show on top
+          {
+            iconCssClass: 'fa fa-question-circle',
+            titleKey: 'HELP',
+            disabled: false,
+            command: 'help',
+            positionOrder: 90,
+            cssClass: 'bold',     // container css class
+            textCssClass: 'blue'  // just the text css class
+          },
+          // you can pass divider as a string or an object with a boolean (if sorting by position, then use the object)
+          // note you should use the "divider" string only when items array is already sorted and positionOrder are not specified
+          { divider: true, command: '', positionOrder: 89 },
+          // 'divider',
+          {
+            title: 'Command 1',
+            command: 'command1',
+            positionOrder: 91,
+            cssClass: 'orange',
+            iconCssClass: 'fa fa-warning',
+            // you can use the "action" callback and/or use "onCallback" callback from the grid options, they both have the same arguments
+            action: (e, args) => alert(args.command),
+            itemUsabilityOverride: (args) => {
+              // for example disable the command if there's any hidden column(s)
+              if (args && Array.isArray(args.columns)) {
+                return args.columns.length === args.visibleColumns.length;
+              }
+              return true;
+            },
+          },
+          {
+            title: 'Command 2',
+            command: 'command2',
+            positionOrder: 92,
+            cssClass: 'red',        // container css class
+            textCssClass: 'italic', // just the text css class
+            action: (e, args) => alert(args.command),
+            itemVisibilityOverride: (args) => {
+              // for example hide this command from the menu if there's any filter entered
+              if (this.angularGrid) {
+                return this.isObjectEmpty(this.angularGrid.filterService.getColumnFilters());
+              }
+              return true;
+            },
+          },
+          {
+            title: 'Disabled command',
+            disabled: true,
+            command: 'disabled-command',
+            positionOrder: 98
+          }
+        ],
+        // you can use the "action" callback and/or use "onCallback" callback from the grid options, they both have the same arguments
+        onCommand: (e, args) => {
+          if (args.command === 'help') {
+            alert('Please help!!!');
+          }
+        },
+        onColumnsChanged: (e, args) => {
+          console.log('Column selection changed from Grid Menu, visible columns: ', args.visibleColumns);
+        }
+      },
+      enableTranslate: true,
+      i18n: this.translate
+    };
+
+    this.getData();
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
+  getData() {
+    // Set up some test columns.
+    const mockDataset = [];
+    for (let i = 0; i < 500; i++) {
+      mockDataset[i] = {
+        id: i,
+        title: 'Task ' + i,
+        phone: this.generatePhoneNumber(),
+        duration: Math.round(Math.random() * 25) + ' days',
+        percentComplete: Math.round(Math.random() * 100),
+        start: '01/01/2009',
+        finish: '01/05/2009',
+        effortDriven: (i % 5 === 0)
+      };
+    }
+    this.dataset = mockDataset;
+  }
+
+  generatePhoneNumber() {
+    let phone = '';
+    for (let i = 0; i < 10; i++) {
+      phone += Math.round(Math.random() * 9) + '';
+    }
+    return phone;
+  }
+
+  switchLanguage() {
+    const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en';
+    this.subscriptions.push(
+      this.translate.use(nextLanguage).subscribe(() => {
+        this.selectedLanguage = nextLanguage;
+      })
+    );
+  }
+
+  toggleGridMenu(e: MouseEvent) {
+    if (this.angularGrid && this.angularGrid.extensionService) {
+      const gridMenuInstance = this.angularGrid.extensionService.getExtensionInstanceByName(ExtensionName.gridMenu);
+      // open the external button Grid Menu, you can also optionally pass Grid Menu options as 2nd argument
+      // for example we want to align our external button on the right without affecting the menu within the grid which will stay aligned on the left
+      gridMenuInstance.showGridMenu(e, { dropSide: 'right' });
+    }
+  }
+
+  private isObjectEmpty(obj: any) {
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key) && obj[key] !== '') {
+        return false;
+      }
+    }
+    return true;
+  }
+}

package/src/app/examples/grid-odata.component.html

@@ -0,0 +1,116 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    {{title}}
+    <span class="float-end">
+      <a style="font-size: 18px"
+         target="_blank"
+         href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-odata.component.ts">
+        <span class="fa fa-link"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="row">
+    <div class="col-sm-9">
+      <div class="subtitle" [innerHTML]="subTitle"></div>
+    </div>
+    <div class="col-sm-3">
+      <div class="alert alert-danger" *ngIf="errorStatus" data-test="error-status">
+        <em><strong>Backend Error:</strong> <span [innerHTML]="errorStatus"></span></em>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-sm-2">
+      <div [class]="status.class" role="alert" data-test="status">
+        <strong>Status: </strong> {{status.text}}
+        <span [hidden]="!processing">
+          <i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
+        </span>
+      </div>
+    </div>
+    <div class="col-sm-10">
+      <div class="alert alert-info" data-test="alert-odata-query">
+        <strong>OData Query:</strong> <span data-test="odata-query-result">{{odataQuery}}</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-sm-4">
+      <button class="btn btn-outline-secondary btn-sm" data-test="set-dynamic-filter"
+              (click)="setFiltersDynamically()">
+        Set Filters Dynamically
+      </button>
+      <button class="btn btn-outline-secondary btn-sm" data-test="set-dynamic-sorting"
+              (click)="setSortingDynamically()">
+        Set Sorting Dynamically
+      </button>
+      <br>
+      <span *ngIf="metrics">
+        <b>Metrics:</b> {{metrics.endTime | date: 'yyyy-MM-dd hh:mm aaaaa\'m\''}} | {{metrics.executionTime}}ms
+        | {{metrics.totalItemCount}} items
+      </span>
+    </div>
+
+    <div class="col-sm-8">
+      <label>OData Version: </label>
+      <span data-test="radioVersion">
+        <label class="radio-inline control-label" for="radio2">
+          <input type="radio" name="inlineRadioOptions" data-test="version2" id="radio2" checked [value]="2"
+                 (change)="setOdataVersion(2)"> 2
+        </label>
+        <label class="radio-inline control-label" for="radio4">
+          <input type="radio" name="inlineRadioOptions" data-test="version4" id="radio4" [value]="4"
+                 (change)="setOdataVersion(4)"> 4
+        </label>
+      </span>
+      <label class="checkbox-inline control-label" for="enableCount" style="margin-left: 20px">
+        <input type="checkbox" id="enableCount" data-test="enable-count" [checked]="isCountEnabled"
+               (click)="changeCountEnableFlag()">
+        <span style="font-weight: bold">Enable Count</span> (add to OData query)
+      </label>
+      <label class="checkbox-inline control-label" for="enableSelect" style="margin-left: 20px">
+        <input type="checkbox" id="enableSelect" data-test="enable-select" [checked]="isSelectEnabled"
+               (click)="changeEnableSelectFlag()">
+        <span style="font-weight: bold">Enable Select</span> (add to OData query)
+      </label>
+      <label class="checkbox-inline control-label" for="enableExpand" style="margin-left: 20px">
+        <input type="checkbox" id="enableExpand" data-test="enable-expand" [checked]="isExpandEnabled"
+               (click)="changeEnableExpandFlag()">
+        <span style="font-weight: bold">Enable Expand</span> (add to OData query)
+      </label>
+    </div>
+  </div>
+  <div class="row mt-2 mb-1">
+    <div class="col-md-12">
+      <button class="btn btn-outline-danger btn-sm" data-test="throw-page-error-btn"
+              (click)="throwPageChangeError()">
+        <span>Throw Error Going to Last Page... </span>
+        <i class="mdi mdi-page-last"></i>
+      </button>
+
+      <span class="ms-2">
+        <label>Programmatically go to first/last page:</label>
+        <button class="btn btn-outline-secondary btn-xs" data-test="goto-first-page" (click)="goToFirstPage()">
+          <i class="fa fa-caret-left fa-lg"></i>
+        </button>
+        <button class="btn btn-outline-secondary btn-xs" data-test="goto-last-page" (click)="goToLastPage()">
+          <i class="fa fa-caret-right fa-lg"></i>
+        </button>
+      </span>
+    </div>
+  </div>
+
+  <angular-slickgrid gridId="grid5"
+                     [columnDefinitions]="columnDefinitions"
+                     [gridOptions]="gridOptions"
+                     [paginationOptions]="paginationOptions"
+                     [dataset]="dataset"
+                     (onAngularGridCreated)="angularGridReady($event.detail)"
+                     (onGridStateChanged)="gridStateChanged($event.detail)"
+                     (onBeforeSort)="handleOnBeforeSort($event)"
+                     (onBeforeSearchChange)="handleOnBeforeSearchChange($event)"
+                     (onBeforePaginationChange)="handleOnBeforePaginationChange($event)">
+  </angular-slickgrid>
+</div>