angular-slickgrid 4.1.2 → 4.2.0

package/src/app/examples/custom-angularComponentFilter.ts

@@ -0,0 +1,126 @@
+import { ComponentRef } from '@angular/core';
+import { Subscription } from 'rxjs';
+import {
+  AngularUtilService,
+  Column,
+  ColumnFilter,
+  Filter,
+  FilterArguments,
+  FilterCallback,
+  GridOption,
+  OperatorType,
+  OperatorString,
+  SearchTerm,
+  SlickGrid,
+  unsubscribeAllObservables,
+} from './../modules/angular-slickgrid';
+
+// using external non-typed js libraries
+declare const $: any;
+
+export class CustomAngularComponentFilter implements Filter {
+  private _shouldTriggerQuery = true;
+  private _subscriptions: Subscription[] = [];
+
+  /** Angular Component Reference */
+  componentRef!: ComponentRef<any>;
+
+  grid!: SlickGrid;
+  searchTerms: SearchTerm[] = [];
+  columnDef!: Column;
+  callback!: FilterCallback;
+  operator: OperatorType | OperatorString = OperatorType.equal;
+
+  constructor() { }
+
+  /** Angular Util Service (could be inside the Grid Options Params or the Filter Params ) */
+  get angularUtilService(): AngularUtilService {
+    let angularUtilService = this.gridOptions && this.gridOptions.params && this.gridOptions.params.angularUtilService;
+    if (!angularUtilService || !(angularUtilService instanceof AngularUtilService)) {
+      angularUtilService = this.columnFilter && this.columnFilter.params && this.columnFilter.params.angularUtilService;
+    }
+    return angularUtilService;
+  }
+
+  /** Get the Collection */
+  get collection(): any[] {
+    return this.columnFilter && this.columnFilter.collection || [];
+  }
+
+  /** Getter for the Column Filter */
+  get columnFilter(): ColumnFilter {
+    return this.columnDef && this.columnDef.filter || {};
+  }
+
+  /** Getter for the Grid Options pulled through the Grid Object */
+  get gridOptions(): GridOption {
+    return this.grid?.getOptions?.() as GridOption;
+  }
+
+  /**
+   * Initialize the Filter
+   */
+  init(args: FilterArguments) {
+    this.grid = args.grid as SlickGrid;
+    this.callback = args.callback;
+    this.columnDef = args.columnDef;
+    this.searchTerms = (args.hasOwnProperty('searchTerms') ? args.searchTerms : []) || [];
+
+    if (!this.columnFilter || !this.columnFilter.params.component || !(this.angularUtilService instanceof AngularUtilService)) {
+      throw new Error(`[Angular-Slickgrid] For Filter with Angular Component to work properly, you need to provide your component to the "component" property and make sure to add it to your "entryComponents" array.
+      You also need to provide the "AngularUtilService" via the Filter Params OR the Grid Options Params
+      Example: this.columnDefs = [{ id: 'title', field: 'title', filter: { model: CustomAngularComponentFilter, collection: [...], params: { component: MyComponent, angularUtilService: this.angularUtilService }}];
+      OR this.columnDefs = [{ id: 'title', field: 'title', filter: { model: CustomAngularComponentFilter, collection: [...] }]; this.gridOptions = { params: { angularUtilService: this.angularUtilService }}`);
+    }
+
+    if (this.columnFilter && this.columnFilter.params.component) {
+      // use a delay to make sure Angular ran at least a full cycle and it finished rendering the Component before hooking onto it
+      // else we get the infamous error "ExpressionChangedAfterItHasBeenCheckedError"
+      setTimeout(() => {
+        const $headerElm = this.grid.getHeaderRowColumn(this.columnDef.id);
+        $($headerElm).empty();
+        const componentOuput = this.angularUtilService.createAngularComponentAppendToDom(this.columnFilter.params.component, $headerElm);
+        this.componentRef = componentOuput.componentRef;
+
+        // here we override the collection object of the Angular Component
+        // but technically you can pass any values you wish to your Component
+        Object.assign(componentOuput.componentRef.instance, { collection: this.collection });
+
+        this._subscriptions.push(
+          componentOuput.componentRef.instance.onItemChanged.subscribe((item: any) => {
+            this.callback(undefined, { columnDef: this.columnDef, operator: this.operator, searchTerms: [item.id], shouldTriggerQuery: this._shouldTriggerQuery });
+            // reset flag for next use
+            this._shouldTriggerQuery = true;
+          })
+        );
+      });
+    }
+  }
+
+  /**
+   * Clear the filter value
+   */
+  clear(shouldTriggerQuery = true) {
+    this._shouldTriggerQuery = shouldTriggerQuery;
+    if (this.componentRef && this.componentRef.instance && this.componentRef.instance.hasOwnProperty('selectedId')) {
+      this.componentRef.instance.selectedId = 0;
+    }
+  }
+
+  /** destroy the Angular Component & Subscription */
+  destroy() {
+    if (this.componentRef && this.componentRef.destroy) {
+      this.componentRef.destroy();
+    }
+
+    // also unsubscribe all Angular Subscriptions
+    this._subscriptions = unsubscribeAllObservables(this._subscriptions);
+  }
+
+  /** Set value(s) on the DOM element */
+  setValues(values: SearchTerm[] | SearchTerm) {
+    if (this.componentRef && this.componentRef.instance && this.componentRef.instance.hasOwnProperty('selectedId')) {
+      this.componentRef.instance.selectedId = values;
+    }
+  }
+}

package/src/app/examples/custom-inputEditor.ts

@@ -0,0 +1,124 @@
+import { Column, ColumnEditor, Editor, EditorValidator, EditorValidationResult, KeyCode } from './../modules/angular-slickgrid';
+
+// using external non-typed js libraries
+declare const $: any;
+
+/*
+ * An example of a 'detached' editor.
+ * KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter.
+ */
+export class CustomInputEditor implements Editor {
+  private _lastInputEvent?: JQuery.Event;
+  $input: any;
+  defaultValue: any;
+
+  constructor(private args: any) {
+    this.init();
+  }
+
+  /** Get Column Definition object */
+  get columnDef(): Column {
+    return this.args && this.args.column || {};
+  }
+
+  /** Get Column Editor object */
+  get columnEditor(): ColumnEditor {
+    return this.columnDef && this.columnDef.internalColumnEditor || {};
+  }
+
+  get hasAutoCommitEdit(): boolean {
+    return this.args.grid.getOptions().autoCommitEdit ?? false;
+  }
+
+  /** Get the Validator function, can be passed in Editor property or Column Definition */
+  get validator(): EditorValidator | undefined {
+    return this.columnEditor.validator || this.columnDef.validator;
+  }
+
+  init(): void {
+    const placeholder = this.columnEditor && this.columnEditor.placeholder || '';
+    const title = this.columnEditor && this.columnEditor.title || '';
+
+    this.$input = $(`<input type="text" class="editor-text" placeholder="${placeholder}" title="${title}" />`)
+      .appendTo(this.args.container)
+      .on('keydown.nav', (event: JQuery.Event) => {
+        this._lastInputEvent = event;
+        if (event.keyCode === KeyCode.LEFT || event.keyCode === KeyCode.RIGHT) {
+          event.stopImmediatePropagation();
+        }
+      });
+
+    // the lib does not get the focus out event for some reason
+    // so register it here
+    if (this.hasAutoCommitEdit) {
+      this.$input.on('focusout', () => this.save());
+    }
+
+    setTimeout(() => {
+      this.$input.focus().select();
+    }, 50);
+  }
+
+  destroy() {
+    this.$input.off('keydown.nav').remove();
+  }
+
+  focus() {
+    this.$input.focus();
+  }
+
+  getValue() {
+    return this.$input.val();
+  }
+
+  setValue(val: string) {
+    this.$input.val(val);
+  }
+
+  loadValue(item: any) {
+    this.defaultValue = item[this.args.column.field] || '';
+    this.$input.val(this.defaultValue);
+    this.$input[0].defaultValue = this.defaultValue;
+    this.$input.select();
+  }
+
+  serializeValue() {
+    return this.$input.val();
+  }
+
+  applyValue(item: any, state: any) {
+    const validation = this.validate(state);
+    item[this.args.column.field] = (validation && validation.valid) ? state : '';
+  }
+
+  isValueChanged() {
+    const lastEvent = this._lastInputEvent && this._lastInputEvent.keyCode;
+    if (this.columnEditor && this.columnEditor.alwaysSaveOnEnterKey && lastEvent === KeyCode.ENTER) {
+      return true;
+    }
+    return (!(this.$input.val() === '' && this.defaultValue === null)) && (this.$input.val() !== this.defaultValue);
+  }
+
+  save() {
+    const validation = this.validate();
+    if (validation && validation.valid) {
+      if (this.hasAutoCommitEdit) {
+        this.args.grid.getEditorLock().commitCurrentEdit();
+      } else {
+        this.args.commitChanges();
+      }
+    }
+  }
+
+  validate(inputValue?: any): EditorValidationResult {
+    if (this.validator) {
+      const value = (inputValue !== undefined) ? inputValue : this.$input && this.$input.val && this.$input.val();
+      return this.validator(value, this.args);
+    }
+
+    return {
+      valid: true,
+      msg: null
+    };
+  }
+}

package/src/app/examples/custom-inputFilter.ts

@@ -0,0 +1,142 @@
+import {
+  Column,
+  ColumnFilter,
+  Filter,
+  FilterArguments,
+  FilterCallback,
+  GridOption,
+  OperatorType,
+  OperatorString,
+  SearchTerm,
+  SlickGrid,
+} from './../modules/angular-slickgrid';
+
+// using external non-typed js libraries
+declare const $: any;
+
+export class CustomInputFilter implements Filter {
+  private _clearFilterTriggered = false;
+  private _shouldTriggerQuery = true;
+  private $filterElm: any;
+  grid!: SlickGrid;
+  searchTerms: SearchTerm[] = [];
+  columnDef!: Column;
+  callback!: FilterCallback;
+  operator: OperatorType | OperatorString = OperatorType.equal;
+
+  constructor() { }
+
+  /** Getter for the Column Filter */
+  get columnFilter(): ColumnFilter {
+    return this.columnDef && this.columnDef.filter || {};
+  }
+
+  /** Getter for the Grid Options pulled through the Grid Object */
+  get gridOptions(): GridOption {
+    return this.grid?.getOptions?.() as GridOption;
+  }
+
+  /**
+   * Initialize the Filter
+   */
+  init(args: FilterArguments) {
+    this.grid = args.grid as SlickGrid;
+    this.callback = args.callback;
+    this.columnDef = args.columnDef;
+    this.searchTerms = (args.hasOwnProperty('searchTerms') ? args.searchTerms : []) || [];
+
+    // filter input can only have 1 search term, so we will use the 1st array index if it exist
+    const searchTerm = (Array.isArray(this.searchTerms) && this.searchTerms.length >= 0) ? this.searchTerms[0] : '';
+
+    // step 1, create HTML string template
+    const filterTemplate = this.buildTemplateHtmlString();
+
+    // step 2, create the DOM Element of the filter & initialize it if searchTerm is filled
+    this.$filterElm = this.createDomElement(filterTemplate, searchTerm);
+
+    // step 3, subscribe to the keyup event and run the callback when that happens
+    this.$filterElm.keyup((e: any) => {
+      let value = e && e.target && e.target.value || '';
+      const enableWhiteSpaceTrim = this.gridOptions.enableFilterTrimWhiteSpace || this.columnFilter.enableTrimWhiteSpace;
+      if (typeof value === 'string' && enableWhiteSpaceTrim) {
+        value = value.trim();
+      }
+
+      if (this._clearFilterTriggered) {
+        this.callback(e, { columnDef: this.columnDef, clearFilterTriggered: this._clearFilterTriggered, shouldTriggerQuery: this._shouldTriggerQuery });
+        this.$filterElm.removeClass('filled');
+      } else {
+        value === '' ? this.$filterElm.removeClass('filled') : this.$filterElm.addClass('filled');
+        this.callback(e, { columnDef: this.columnDef, searchTerms: [value], shouldTriggerQuery: this._shouldTriggerQuery });
+      }
+      // reset both flags for next use
+      this._clearFilterTriggered = false;
+      this._shouldTriggerQuery = true;
+    });
+  }
+
+  /**
+   * Clear the filter value
+   */
+  clear(shouldTriggerQuery = true) {
+    if (this.$filterElm) {
+      this._clearFilterTriggered = true;
+      this._shouldTriggerQuery = shouldTriggerQuery;
+      this.$filterElm.val('');
+      this.$filterElm.trigger('keyup');
+    }
+  }
+
+  /**
+   * destroy the filter
+   */
+  destroy() {
+    if (this.$filterElm) {
+      this.$filterElm.off('keyup').remove();
+    }
+  }
+
+  /** Set value(s) on the DOM element */
+  setValues(values: SearchTerm | SearchTerm[]) {
+    if (values) {
+      this.$filterElm.val(values);
+    }
+  }
+
+  //
+  // private functions
+  // ------------------
+
+  /**
+   * Create the HTML template as a string
+   */
+  private buildTemplateHtmlString() {
+    let placeholder = (this.gridOptions) ? (this.gridOptions.defaultFilterPlaceholder || '') : '';
+    if (this.columnFilter && this.columnFilter.placeholder) {
+      placeholder = this.columnFilter.placeholder;
+    }
+    return `<input type="text" class="form-control search-filter" placeholder="${placeholder}">`;
+  }
+
+  /**
+   * From the html template string, create a DOM element
+   * @param filterTemplate
+   */
+  private createDomElement(filterTemplate: string, searchTerm?: SearchTerm) {
+    const $headerElm = this.grid.getHeaderRowColumn(this.columnDef.id);
+    $($headerElm).empty();
+
+    // create the DOM element & add an ID and filter class
+    const $filterElm = $(filterTemplate);
+
+    $filterElm.val(searchTerm);
+    $filterElm.data('columnId', this.columnDef.id);
+
+    // append the new DOM element to the header row
+    if ($filterElm && typeof $filterElm.appendTo === 'function') {
+      $filterElm.appendTo($headerElm);
+    }
+
+    return $filterElm;
+  }
+}

package/src/app/examples/custom-titleFormatter.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: `<b>{{item?.assignee?.name}}</b>`
+})
+export class CustomTitleFormatterComponent {
+  item: any;
+}

package/src/app/examples/editor-ng-select.component.ts

@@ -0,0 +1,37 @@
+import { Component } from '@angular/core';
+import { Subject } from 'rxjs';
+
+// the appendTo="body" (necessary for SlickGrid filter) requires the body to be position relative like so
+// <body style="position: relative">
+@Component({
+  template: `
+  <ng-select class="no-style-select"
+      [items]="collection"
+      autofocus
+      bindValue="id"
+      bindLabel="name"
+      appendTo="body"
+      [clearable]="false"
+      (change)="onChange($event)"
+      [(ngModel)]="selectedId"
+		>
+			<ng-template ng-label-tmp ng-option-tmp let-item="item">
+				{{ item?.name }}
+			</ng-template>
+		</ng-select>`
+})
+export class EditorNgSelectComponent {
+  selectedId = '';
+  selectedItem: any;
+  collection?: any[]; // this will be filled by the collection of your column definition
+  onItemChanged = new Subject<any>();    // object
+
+  onChange(item: any) {
+    this.selectedItem = item;
+    this.onItemChanged.next(item);
+  }
+
+  focus() {
+    // do a focus
+  }
+}

package/src/app/examples/filter-ng-select.component.ts

@@ -0,0 +1,32 @@
+import { Component } from '@angular/core';
+import { Subject } from 'rxjs';
+
+// the appendTo="body" (necessary for SlickGrid filter) requires the body to be position relative like so
+// <body style="position: relative">
+@Component({
+  template: `
+  <ng-select class="custom no-style-select"
+      [items]="collection"
+      bindValue="id"
+      bindLabel="name"
+      appendTo="body"
+      [clearable]="false"
+      (change)="onChange($event)"
+      [(ngModel)]="selectedId"
+		>
+			<ng-template ng-label-tmp ng-option-tmp let-item="item">
+				{{ item?.name }}
+			</ng-template>
+		</ng-select>`
+})
+export class FilterNgSelectComponent {
+  selectedId = '';
+  selectedItem: any;
+  collection?: any[]; // this will be filled by the collection of your column definition
+  onItemChanged = new Subject<any>();    // object
+
+  onChange(item: any) {
+    this.selectedItem = item;
+    this.onItemChanged.next(item);
+  }
+}

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

@@ -0,0 +1,48 @@
+<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-additem.component.ts">
+        <span class="fa fa-link"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle"
+       [innerHTML]="subTitle"></div>
+
+  <div class="col-sm-12">
+    <span>
+      <label>Scroll: </label>
+      <div class="btn-group" role="group">
+        <button class="btn btn-sm btn-outline-secondary" data-test="scroll-top-btn" (click)="scrollGridTop()">
+          <i class="fa fa-arrow-up"></i>
+        </button>
+        <button class="btn btn-sm btn-outline-secondary" data-test="scroll-bottom-btn" (click)="scrollGridBottom()">
+          <i class="fa fa-arrow-down"></i>
+        </button>
+      </div>
+      <button class="btn btn-sm btn-outline-secondary" data-test="add-new-item-top-btn"
+              (click)="addNewItem()">Add New Mocked Item</button>
+      <button class="btn btn-sm btn-outline-secondary" data-test="add-new-item-bottom-btn"
+              (click)="addNewItem('bottom')">Add New Mocked Item (bottom)</button>
+      <button class="btn btn-sm btn-outline-secondary" data-test="update-second-item-btn"
+              (click)="updateSecondItem()">Update 2nd Row Item with Random Duration</button>
+      <button class="btn btn-sm btn-outline-secondary" data-test="highlight-row5-btn"
+              (click)="highlighFifthRow()">Highlight 5th Row</button>
+      <button class="btn btn-sm btn-outline-secondary" data-test="highlight-duration40-btn"
+              (click)="changeDurationBackgroundColor()">Highlight Rows with Duration over 40</button>
+    </span>
+    <hr />
+  </div>
+
+  <div class="col-sm-12">
+    <angular-slickgrid gridId="grid11"
+                       [columnDefinitions]="columnDefinitions"
+                       [gridOptions]="gridOptions"
+                       [dataset]="dataset"
+                       (onAngularGridCreated)="angularGridReady($event.detail)">
+    </angular-slickgrid>
+  </div>
+</div>