angular-slickgrid 4.2.0 → 4.2.3

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

@@ -1,229 +0,0 @@
-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

@@ -1,116 +0,0 @@
-<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>