angular-slickgrid 4.2.0 → 4.2.1

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

@@ -1,291 +0,0 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { CustomInputFilter } from './custom-inputFilter';
-import {
-  AngularGridInstance,
-  Column,
-  FieldType,
-  Filters,
-  Formatter,
-  Formatters,
-  GridOption,
-  GridStateChange,
-  JQueryUiSliderOption,
-  Metrics,
-  MultipleSelectOption,
-  OperatorType,
-  unsubscribeAllObservables,
-} from '../modules/angular-slickgrid';
-import * as moment from 'moment-mini';
-import { Subscription } from 'rxjs';
-
-const NB_ITEMS = 1500;
-
-function randomBetween(min: number, max: number): number {
-  return Math.floor(Math.random() * (max - min + 1) + min);
-}
-
-// create a custom translate Formatter (typically you would move that a separate file, for separation of concerns)
-const taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataContext, grid) => {
-  const gridOptions = grid?.getOptions?.() as GridOption;
-  const translate = gridOptions.i18n as TranslateService;
-
-  return translate.instant('TASK_X', { x: value });
-};
-
-@Component({
-  templateUrl: './grid-range.component.html'
-})
-export class GridRangeComponent implements OnInit, OnDestroy {
-  title = 'Example 25: Filtering from Range of Search Values';
-  subTitle = `
-  This demo shows how to use Filters with Range of Search Values (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Range-Filters" target="_blank">Wiki docs</a>)
-  <br/>
-    <ul class="small">
-      <li>All input filters support the following operators: (>, >=, <, <=, <>, !=, =, ==, *) and now also the (..) for an input range</li>
-      <li>All filters (which support ranges) can be defined via the 2 dots (..) which represents a range, this also works for dates and slider in the "presets"</li>
-      <ul>
-        <li>For a numeric range defined in an input filter (must be of type text), you can use 2 dots (..) to represent a range</li>
-        <li>example: typing "10..90" will filter values between 10 and 90 (but excluding the number 10 and 90)</li>
-      </ul>
-      <ul>
-        <li>note that the examples shown below for the operator, are case sensitive</li>
-        <li>by default the range is inclusive which would be the same as defining the filter options to "operator: 'RangeInclusive'" or "operator: OperatoryType.rangeInclusive"</li>
-        <li>you can also set the inverse (exclusive) by defining the filter options to "operator: 'RangeExclusive'" or "operator: OperatoryType.rangeExclusive"</li>
-      </ul>
-      <li>Date Range with Flatpickr Date Picker, they will also use the locale, choose a start date then drag or click on the end date</li>
-    </ul>
-  `;
-  private subscriptions: Subscription[] = [];
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset!: any[];
-  selectedLanguage: string;
-  metrics!: Metrics;
-  filterList = [
-    { value: '', label: '' },
-    { value: 'currentYearTasks', label: 'Current Year Completed Tasks' },
-    { value: 'nextYearTasks', label: 'Next Year Active Tasks' }
-  ];
-  selectedPredefinedFilter!: { value: string; label: 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: 'id', nameKey: 'TITLE', minWidth: 100,
-        formatter: taskTranslateFormatter,
-        sortable: true,
-        filterable: true,
-        params: { useFormatterOuputToFilter: true }
-      },
-      {
-        id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80,
-        type: FieldType.string,
-        filter: {
-          model: new CustomInputFilter(), // create a new instance to make each Filter independent from each other
-          enableTrimWhiteSpace: true // or use global "enableFilterTrimWhiteSpace" to trim on all Filters
-        }
-      },
-      {
-        id: 'percentComplete', name: '% Complete', field: 'percentComplete', nameKey: 'PERCENT_COMPLETE', minWidth: 120,
-        sortable: true,
-        formatter: Formatters.progressBar,
-        type: FieldType.number,
-        filterable: true,
-        filter: {
-          model: Filters.sliderRange,
-          maxValue: 100, // or you can use the filterOptions as well
-          operator: OperatorType.rangeInclusive, // defaults to inclusive
-          params: { hideSliderNumbers: false }, // you can hide/show the slider numbers on both side
-          filterOptions: { min: 0, step: 5 } as JQueryUiSliderOption // you can also optionally pass any option of the jQuery UI Slider
-        }
-      },
-      {
-        id: 'start', name: 'Start', field: 'start', nameKey: 'START', formatter: Formatters.dateIso, sortable: true, minWidth: 75, width: 100, exportWithFormatter: true,
-        type: FieldType.date, filterable: true, filter: { model: Filters.compoundDate }
-      },
-      {
-        id: 'finish', name: 'Finish', field: 'finish', nameKey: 'FINISH', formatter: Formatters.dateIso, sortable: true, minWidth: 75, width: 120, exportWithFormatter: true,
-        type: FieldType.date,
-        filterable: true,
-        filter: {
-          model: Filters.dateRange,
-        }
-      },
-      {
-        id: 'duration', field: 'duration', nameKey: 'DURATION', maxWidth: 90,
-        type: FieldType.number,
-        sortable: true,
-        filterable: true, filter: {
-          model: Filters.input,
-          operator: OperatorType.rangeExclusive // defaults to inclusive
-        }
-      },
-      {
-        id: 'completed', name: 'Completed', field: 'completed', nameKey: 'COMPLETED', minWidth: 85, maxWidth: 90,
-        formatter: Formatters.checkmark,
-        exportWithFormatter: true, // you can set this property in the column definition OR in the grid options, column def has priority over grid options
-        filterable: true,
-        filter: {
-          collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
-          model: Filters.singleSelect,
-          filterOptions: { autoDropWidth: true } as MultipleSelectOption
-        }
-      }
-    ];
-
-    const presetLowestDay = moment().add(-2, 'days').format('YYYY-MM-DD');
-    const presetHighestDay = moment().add(20, 'days').format('YYYY-MM-DD');
-
-    this.gridOptions = {
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10
-      },
-      enableExcelCopyBuffer: true,
-      enableFiltering: true,
-      // enableFilterTrimWhiteSpace: true,
-      enableTranslate: true,
-      i18n: this.translate,
-
-      // use columnDef searchTerms OR use presets as shown below
-      presets: {
-        filters: [
-          //  you can use the 2 dots separator on all Filters which support ranges
-          { columnId: 'duration', searchTerms: ['4..88'] },
-          // { columnId: 'percentComplete', searchTerms: ['5..80'] }, // without operator will default to 'RangeExclusive'
-          // { columnId: 'finish', operator: 'RangeInclusive', searchTerms: [`${presetLowestDay}..${presetHighestDay}`] },
-
-          // or you could also use 2 searchTerms values, instead of using the 2 dots (only works with SliderRange & DateRange Filters)
-          // BUT make sure to provide the operator, else the filter service won't know that this is really a range
-          { columnId: 'percentComplete', operator: 'RangeInclusive', searchTerms: [5, 80] }, // same result with searchTerms: ['5..80']
-          { columnId: 'finish', operator: 'RangeInclusive', searchTerms: [presetLowestDay, presetHighestDay] },
-        ],
-        sorters: [
-          { columnId: 'percentComplete', direction: 'DESC' },
-          { columnId: 'duration', direction: 'ASC' },
-        ],
-      }
-    };
-
-    // mock a dataset
-    this.dataset = this.mockData(NB_ITEMS);
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  mockData(itemCount: number, startingIndex = 0): any[] {
-    // mock a dataset
-    const tempDataset = [];
-    for (let i = startingIndex; i < (startingIndex + itemCount); i++) {
-      const randomDuration = randomBetween(0, 365);
-      const randomYear = randomBetween(moment().year(), moment().year() + 1);
-      const randomMonth = randomBetween(0, 12);
-      const randomDay = randomBetween(10, 28);
-      const randomPercent = randomBetween(0, 100);
-
-      tempDataset.push({
-        id: i,
-        title: 'Task ' + i,
-        description: (i % 5) ? 'desc ' + i : null, // also add some random to test NULL field
-        duration: randomDuration,
-        percentComplete: randomPercent,
-        percentCompleteNumber: randomPercent,
-        start: (i % 4) ? null : new Date(randomYear, randomMonth, randomDay),          // provide a Date format
-        finish: new Date(randomYear, randomMonth, randomDay),
-        completed: (randomPercent === 100) ? true : false,
-      });
-    }
-
-    return tempDataset;
-  }
-
-  clearFilters() {
-    this.selectedPredefinedFilter = { value: '', label: '' };
-    this.angularGrid.filterService.clearFilters();
-  }
-
-  /** Dispatched event of a Grid State Changed event */
-  gridStateChanged(gridState: GridStateChange) {
-    console.log('Client sample, Grid State changed:: ', gridState);
-  }
-
-  /** Save current Filters, Sorters in LocaleStorage or DB */
-  saveCurrentGridState() {
-    console.log('Client sample, last Grid State:: ', this.angularGrid.gridStateService.getCurrentGridState());
-  }
-
-  refreshMetrics(e: Event, args: any) {
-    if (args && args.current >= 0) {
-      setTimeout(() => {
-        this.metrics = {
-          startTime: new Date(),
-          itemCount: args && args.current || 0,
-          totalItemCount: this.dataset.length || 0
-        };
-      });
-    }
-  }
-
-  setFiltersDynamically() {
-    const presetLowestDay = moment().add(-5, 'days').format('YYYY-MM-DD');
-    const presetHighestDay = moment().add(25, 'days').format('YYYY-MM-DD');
-
-    // we can Set Filters Dynamically (or different filters) afterward through the FilterService
-    this.angularGrid.filterService.updateFilters([
-      { columnId: 'duration', searchTerms: ['14..78'], operator: 'RangeInclusive' },
-      { columnId: 'percentComplete', operator: 'RangeExclusive', searchTerms: [15, 85] },
-      { columnId: 'finish', operator: 'RangeInclusive', searchTerms: [presetLowestDay, presetHighestDay] },
-    ]);
-  }
-
-  setSortingDynamically() {
-    this.angularGrid.sortService.updateSorting([
-      // orders matter, whichever is first in array will be the first sorted column
-      { columnId: 'finish', direction: 'DESC' },
-      { columnId: 'percentComplete', direction: 'ASC' },
-    ]);
-  }
-
-  usePredefinedFilter(filterValue: string) {
-    let filters: any[] = [];
-    const currentYear = moment().year();
-
-    switch (filterValue) {
-      case 'currentYearTasks':
-        filters = [
-          { columnId: 'finish', operator: OperatorType.rangeInclusive, searchTerms: [`${currentYear}-01-01`, `${currentYear}-12-31`] },
-          { columnId: 'completed', operator: OperatorType.equal, searchTerms: [true] },
-        ];
-        break;
-      case 'nextYearTasks':
-        filters = [{ columnId: 'start', operator: '>=', searchTerms: [`${currentYear + 1}-01-01`] }];
-        break;
-    }
-    this.angularGrid.filterService.updateFilters(filters);
-  }
-
-  switchLanguage() {
-    const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en';
-    this.subscriptions.push(
-      this.translate.use(nextLanguage).subscribe(() => {
-        this.selectedLanguage = nextLanguage;
-      })
-    );
-  }
-}

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

@@ -1,37 +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-remote.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <div class="col-md-6" style="margin-bottom: 15px">
-    <label>Octopart Catalog Search <small>(type a word then press ENTER)</small></label>
-    <input type="text" class="form-control" [value]="search" (change)="searchChanged($event.target.value)">
-  </div>
-
-  <div class="alert alert-danger col-md-7" role="alert">
-    <strong>Note:</strong>
-    this demo no longer displays any results because the WebAPI Key to connect and query the <b>Octopart Component
-      Search</b> is no longer valid. However the concept remains valid, which is to use your own Custom DataView
-    instead of the default SlickGrid DataView used by this library.
-  </div>
-
-  <div class="alert alert-warning col-md-6" role="alert" *ngIf="loading">
-    <i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
-    <span>Loading...</span>
-  </div>
-
-  <angular-slickgrid gridId="grid18" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
-                     [dataset]="dataset" [customDataView]="customDataView"
-                     (onAngularGridCreated)="angularGridReady($event.detail)"
-                     (onViewportChanged)="onViewportChanged($event.detail.eventData, $event.detail.args)"
-                     (onSort)="onSort($event.detail.eventData, $event.detail.args)">
-  </angular-slickgrid>
-</div>

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

@@ -1,153 +0,0 @@
-import 'slickgrid/lib/jquery.jsonp-2.4.min';
-import 'slickgrid/slick.remotemodel'; // SlickGrid Remote Plugin
-
-import { Component, OnInit, OnDestroy } from '@angular/core';
-import { AngularGridInstance, Column, Formatter, GridOption } from './../modules/angular-slickgrid';
-
-declare const Slick: any;
-
-const brandFormatter: Formatter = (_row, _cell, _value, _columnDef, dataContext) => {
-  return dataContext && dataContext.brand && dataContext.brand.name || '';
-};
-
-const mpnFormatter: Formatter = (_row, _cell, _value, _columnDef, dataContext) => {
-  let link = '';
-  if (dataContext && dataContext.octopart_url && dataContext.mpn) {
-    link = `<a href="${dataContext.octopart_url}" target="_blank">${dataContext.mpn}</a>`;
-  }
-  return link;
-};
-
-@Component({
-  templateUrl: './grid-remote.component.html'
-})
-export class GridRemoteComponent implements OnDestroy, OnInit {
-  private _eventHandler: any = new Slick.EventHandler();
-
-  title = 'Example 18: Octopart Catalog Search - Remote Model Plugin';
-  subTitle = `
-    This example demonstrates how to use "slick.remotemodel.js" or any Remote implementation through an external Remote Service
-    <ul>
-      <li>
-        Your browser (Chrome) might block access to the Octopart query, if you get "block content" then just unblock it
-        or try with different browser like Firefox or Edge
-      </li>
-      <li>If the demo throws some errors, try again later (there's a limit per day).</li>
-      <li>
-        Uses <a href="https://github.com/6pac/SlickGrid/blob/master/slick.remotemodel.js" target="_blank">slick.remotemodel.js</a>
-        which is hooked up to load search results from Octopart, but can easily be extended
-        to support any JSONP-compatible backend that accepts paging parameters.
-      </li>
-      <li>
-        This demo implements a custom DataView, however please note that you are on your own to implement all necessary DataView methods
-        for Sorting, Filtering, etc...
-      </li>
-      <li>
-        Soure code for this example is available <a href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-remote.component.ts" target="_blank">here</a>
-      </li>
-    </ul>
-  `;
-
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  customDataView: any;
-  gridObj: any;
-  gridOptions!: GridOption;
-  dataset = [];
-  loaderDataView: any;
-  loading = false; // spinner when loading data
-  search = '';
-
-  constructor() {
-    this.loaderDataView = new Slick.Data.RemoteModel();
-    this.customDataView = this.loaderDataView && this.loaderDataView.data;
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-    this.gridObj = angularGrid.slickGrid; // grid object
-    this.loaderDataView.setSort('score', -1);
-    this.gridObj.setSortColumn('score', false);
-
-    // notify of a change to preload the first page
-    this.gridObj.onViewportChanged.notify();
-  }
-
-  ngOnDestroy() {
-    // unsubscribe all SlickGrid events
-    this._eventHandler.unsubscribeAll();
-  }
-
-  ngOnInit(): void {
-    this.defineGrid();
-    this.hookAllLoaderEvents();
-
-    // set default search
-    // this.search = 'switch';
-    // this.loaderDataView.setSearch(this.search);
-  }
-
-  defineGrid() {
-    this.columnDefinitions = [
-      { id: 'mpn', name: 'MPN', field: 'mpn', formatter: mpnFormatter, width: 100, sortable: true },
-      { id: 'brand', name: 'Brand', field: 'brand.name', formatter: brandFormatter, width: 100, sortable: true },
-      { id: 'short_description', name: 'Description', field: 'short_description', width: 520 },
-    ];
-
-    this.gridOptions = {
-      enableAutoResize: true,
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10
-      },
-      enableCellNavigation: true,
-      enableColumnReorder: false,
-      enableGridMenu: false,
-      multiColumnSort: false
-    };
-  }
-
-  hookAllLoaderEvents() {
-    if (this._eventHandler && this._eventHandler.subscribe && this.loaderDataView && this.loaderDataView.onDataLoading && this.loaderDataView.onDataLoaded) {
-      this._eventHandler.subscribe(this.loaderDataView.onDataLoading, (e: Event, args: any) => {
-        this.loading = true;
-      });
-
-      this._eventHandler.subscribe(this.loaderDataView.onDataLoaded, (e: Event, args: any) => {
-        if (args && this.gridObj && this.gridObj.invalidateRow && this.gridObj.updateRowCount && this.gridObj.render) {
-          for (let i = args.from; i <= args.to; i++) {
-            this.gridObj.invalidateRow(i);
-          }
-          this.gridObj.updateRowCount();
-          this.gridObj.render();
-          this.loading = false;
-        }
-      });
-    }
-  }
-
-  onSort(e: Event, args: any) {
-    if (this.gridObj && this.gridObj.getViewport && this.loaderDataView && this.loaderDataView.ensureData && this.loaderDataView.setSort) {
-      const vp = this.gridObj.getViewport();
-      if (args && args.sortCol && args.sortCol.field) {
-        this.loaderDataView.setSort(args.sortCol.field, args.sortAsc ? 1 : -1);
-      }
-      this.loaderDataView.ensureData(vp.top, vp.bottom);
-    }
-  }
-
-  onViewportChanged(e: Event, args: any) {
-    if (this.gridObj && this.gridObj.getViewport && this.loaderDataView && this.loaderDataView.ensureData) {
-      const vp = this.gridObj.getViewport();
-      this.loaderDataView.ensureData(vp.top, vp.bottom);
-    }
-  }
-
-  searchChanged(newValue: string) {
-    if (newValue && this.gridObj && this.gridObj.getViewport && this.loaderDataView && this.loaderDataView.ensureData && this.loaderDataView.setSearch) {
-      const vp = this.gridObj.getViewport();
-      this.loaderDataView.setSearch(newValue);
-      this.loaderDataView.ensureData(vp.top, vp.bottom);
-    }
-  }
-}

package/src/app/examples/grid-resize-by-content.component.html

@@ -1,62 +0,0 @@
-<div 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-resize-by-content.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <h4 class="ml-3">Container Width (950px)</h4>
-
-  <div class="row">
-    <div class="ml-2 mb-2 mr-2">
-      <div class="btn-group" data-bs-toggle="buttons">
-        <label class="btn btn-sm btn-outline-secondary {{isUsingDefaultResize ? 'active' : ''}}"
-               data-test="autosize-columns-btn">
-          <input type="radio" class="btn-check" name="options"
-                 [checked]="isUsingDefaultResize"
-                 (click)="handleDefaultResizeColumns()">
-          <i class="fa fa-expand"></i> (default resize) by "autosizeColumns"
-        </label>
-        <label class="btn btn-sm btn-outline-secondary {{isUsingDefaultResize ? '' : 'active'}}"
-               data-test="resize-by-content-btn">
-          <input type="radio" class="btn-check" name="options"
-                 [checked]="!isUsingDefaultResize"
-                 (click)="handleNewResizeColumns()">
-          <i class="fa fa-expand"></i> Resize by Cell Content
-        </label>
-      </div>
-    </div>
-
-    <div class="mb-2">
-      <div class="btn-group btn-group-sm" role="group" aria-label="Basic Editing Commands">
-        <button type="button" class="btn btn-outline-secondary" data-test="toggle-readonly-btn"
-                (click)="toggleGridEditReadonly()">
-          <i class="fa fa-table"></i> Toggle Edit/Readonly Grid
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-test="undo-last-edit-btn"
-                (click)="undoLastEdit()">
-          <i class="fa fa-undo"></i> Undo Last Edit
-        </button>
-        <button type="button" class="btn btn-outline-secondary" data-test="save-all-btn"
-                (click)="saveAll()">
-          <i class="fa fa-save"></i> Save All
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div id="smaller-container" style="width: 950px">
-    <angular-slickgrid gridId="grid31"
-                       [columnDefinitions]="columnDefinitions"
-                       [gridOptions]="gridOptions"
-                       [dataset]="dataset"
-                       (onAngularGridCreated)="angularGridReady($event.detail)">
-    </angular-slickgrid>
-  </div>
-</div>

package/src/app/examples/grid-resize-by-content.component.scss

@@ -1,19 +0,0 @@
-$slick-button-border-color: #ababab !default;
-
-.editable-field {
-  background-color: rgba(227, 240, 251, 0.569) !important;
-}
-.unsaved-editable-field {
-  background-color: #fbfdd1 !important;
-}
-.button-style {
-  cursor: pointer;
-  background-color: white;
-  border: 1px solid #{$slick-button-border-color};
-  border-radius: 2px;
-  justify-content: center;
-  text-align: center;
-  &:hover {
-    border-color: darken($slick-button-border-color, 10%);
-  }
-}