angular-slickgrid 8.14.1 → 9.0.0

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

@@ -0,0 +1,164 @@
+// import 'slickgrid/slick.remotemodel'; // SlickGrid Remote Plugin
+
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { AngularGridInstance, Column, Formatter, GridOption, SlickEventHandler } from '../../library';
+
+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',
+  standalone: false,
+})
+export class GridRemoteComponent implements OnDestroy, OnInit {
+  private _eventHandler: any = new SlickEventHandler();
+
+  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/src/slick.remotemodel.ts" 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/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/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() {
+    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/demos/examples/home.component.html

@@ -0,0 +1,39 @@
+<div class="container">
+  <h2>{{ title }}</h2>
+  <div class="subtitle" [innerHTML]="subTitle"></div>
+
+  <hr />
+
+  <h4>Quick intro</h4>
+  <p>
+    One of the best javascript datagrid
+    <a href="https://github.com/mleibman/SlickGrid" target="_blank">SlickGrid</a> which was originally developed by &#64;mleibman is now
+    available to Angular. I have tried, and used, a few datagrids and SlickGrid beats most of them in terms of functionalities and
+    performance (it can easily even handle a million row).
+  </p>
+  <h4>Documentation</h4>
+  <p>
+    The documentation is powered by GitBook and can be found at this link
+    <a href="https://ghiscoding.gitbook.io/angular-slickgrid" target="_blank">Angular-Slickgrid - Documentation</a>, so be sure to consult
+    it before opening any new issue.
+    <br />
+    The
+    <a href="https://ghiscoding.gitbook.io/angular-slickgrid/getting-started/quick-start" target="_blank">HOWTO - Quick Start</a>
+    is the best starting point to get going with this library.
+  </p>
+
+  <hr />
+  Like my work? You can support me with caffeine :)
+
+  <br /><br />
+
+  <a href="https://ko-fi.com/ghiscoding" target="_blank">
+    <img
+      height="36"
+      style="border: 0px; height: 36px"
+      src="https://az743702.vo.msecnd.net/cdn/kofi2.png?v=0"
+      border="0"
+      alt="Buy Me a Coffee at ko-fi.com"
+    />
+  </a>
+</div>

package/src/demos/examples/home.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: './home.component.html',
+  standalone: false,
+})
+export class HomeComponent {
+  title = 'Angular-Slickgrid - Demo Site';
+  subTitle = 'This site is to demo multiple usage of Angular-Slickgrid, choose an example from the left side menu';
+}

package/src/demos/examples/jsonp.ts

@@ -0,0 +1,89 @@
+/*
+ * copied and rewritten as ESM (just a simple rewrite as ESM to avoid loading a CJS package)
+ * https://github.com/camsong/fetch-jsonp/blob/master/src/fetch-jsonp.js
+ */
+
+interface JsonpOptions {
+  timeout: number;
+  jsonpCallback: string;
+  jsonpCallbackFunction: string;
+  charset: string;
+  nonce: string;
+  referrerPolicy: string;
+  crossorigin: boolean;
+}
+
+const defaultOptions = {
+  timeout: 5000,
+  jsonpCallback: 'callback',
+  jsonpCallbackFunction: null,
+};
+const generateCallbackFunction = () => `jsonp_${Date.now()}_${Math.ceil(Math.random() * 100000)}`;
+const clearFunction = (functionName: string) => delete (window as any)[functionName];
+const removeScript = (scriptId: string) => {
+  const script = document.getElementById(scriptId);
+  if (script) {
+    document.getElementsByTagName('head')[0].removeChild(script);
+  }
+};
+
+function fetchJsonp<T = any>(_url: string, options: Partial<JsonpOptions> = {}): Promise<{ ok: boolean; json: () => Promise<T> }> {
+  // to avoid param reassign
+  let url = _url;
+  const timeout = options.timeout || defaultOptions.timeout;
+  const jsonpCallback = options.jsonpCallback || defaultOptions.jsonpCallback;
+  let timeoutId: any;
+
+  return new Promise((resolve, reject) => {
+    const callbackFunction = options.jsonpCallbackFunction || generateCallbackFunction();
+    const scriptId = `${jsonpCallback}_${callbackFunction}`;
+
+    (window as any)[callbackFunction] = (response: T) => {
+      // keep consistent with fetch API
+      resolve({ ok: true, json: () => Promise.resolve(response) });
+      if (timeoutId) clearTimeout(timeoutId);
+      removeScript(scriptId);
+      clearFunction(callbackFunction);
+    };
+
+    // Check if the user set their own params, and if not add a ? to start a list of params
+    url += url.indexOf('?') === -1 ? '?' : '&';
+
+    const jsonpScript = document.createElement('script');
+    jsonpScript.setAttribute('src', `${url}${jsonpCallback}=${callbackFunction}`);
+    if (options.charset) {
+      jsonpScript.setAttribute('charset', options.charset);
+    }
+    if (options.nonce) {
+      jsonpScript.setAttribute('nonce', options.nonce);
+    }
+    if (options.referrerPolicy) {
+      jsonpScript.setAttribute('referrerPolicy', options.referrerPolicy);
+    }
+    if (options.crossorigin) {
+      jsonpScript.setAttribute('crossorigin', 'true');
+    }
+    jsonpScript.id = scriptId;
+    document.getElementsByTagName('head')[0].appendChild(jsonpScript);
+
+    timeoutId = setTimeout(() => {
+      reject(new Error(`JSONP request to ${_url} timed out`));
+
+      clearFunction(callbackFunction);
+      removeScript(scriptId);
+      (window as any)[callbackFunction] = () => {
+        clearFunction(callbackFunction);
+      };
+    }, timeout);
+
+    // Caught if got 404/500
+    jsonpScript.onerror = () => {
+      reject(new Error(`JSONP request to ${_url} failed`));
+      clearFunction(callbackFunction);
+      removeScript(scriptId);
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  });
+}
+
+export default fetchJsonp;

package/src/demos/examples/rowdetail-preload.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  template: `<h4>
+    <i class="mdi mdi-sync mdi-spin-1s mdi-50px"></i>
+    Loading...
+  </h4>`,
+  standalone: false,
+})
+export class RowDetailPreloadComponent {}

package/src/demos/examples/swt-common-grid-pagination.component.ts

@@ -0,0 +1,160 @@
+import { Component, OnInit, Input } from '@angular/core';
+import { SwtCommonGridComponent } from './swt-common-grid.component';
+import { Logger } from './swt-logger.service';
+import { HttpClient } from '@angular/common/http';
+import { GridOption } from '../../library';
+/**
+ * Custom pagination component: It allows editing the page number manually
+ *  << < Page [1] of 5 > >>
+ *
+ * @author Saber Chebka, saber.chebka@gmail.com
+ */
+@Component({
+  selector: 'swt-common-grid-pagination',
+  template: `
+    <div class="slick-pagination">
+      <div class="slick-pagination-nav">
+        <nav aria-label="Page navigation">
+          <ul class="pagination">
+            <li class="page-item" [ngClass]="pageNumber === 1 ? 'disabled' : ''">
+              <a class="page-link icon-seek-first mdi mdi-page-first" aria-label="First" (click)="changeToFirstPage($event)"> </a>
+            </li>
+            <li class="page-item" [ngClass]="pageNumber === 1 ? 'disabled' : ''">
+              <a
+                class="page-link icon-seek-prev mdi mdi-chevron-down mdi-rotate-240"
+                aria-label="Previous"
+                (click)="changeToPreviousPage($event)"
+              >
+              </a>
+            </li>
+          </ul>
+        </nav>
+
+        <div class="slick-page-number">
+          <span [translate]="'PAGE'"></span>
+          <input type="text" value="{{ pageNumber }}" size="1" (change)="changeToCurrentPage($event)" />
+          <span [translate]="'OF'"></span><span> {{ pageCount }}</span>
+        </div>
+
+        <nav aria-label="Page navigation">
+          <ul class="pagination">
+            <li class="page-item" [ngClass]="pageNumber === pageCount ? 'disabled' : ''">
+              <a
+                class="page-link icon-seek-next text-center mdi-chevron-down mdi-rotate-90"
+                aria-label="Next"
+                (click)="changeToNextPage($event)"
+              >
+              </a>
+            </li>
+            <li class="page-item" [ngClass]="pageNumber === pageCount ? 'disabled' : ''">
+              <a class="page-link icon-seek-end mdi mdi-page-last" aria-label="Last" (click)="changeToLastPage($event)"> </a>
+            </li>
+          </ul>
+        </nav>
+        <nav>
+          <ul class="pagination">
+            <li class="">
+              <span [hidden]="!processing" class="page-spin">
+                <i class="mdi mdi-sync mdi-spin-1s"></i>
+              </span>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  `,
+  styles: [
+    `
+      .page-spin {
+        border: none;
+        height: 32px;
+        background-color: transparent;
+        cursor: default;
+        animation: mdi-sync mdi-spin infinite linear !important;
+      }
+      .page-spin:hover {
+        background-color: transparent;
+      }
+    `,
+  ],
+  standalone: false,
+})
+export class SwtCommonGridPaginationComponent implements OnInit {
+  private logger: Logger;
+
+  @Input() pageCount = 1;
+  @Input() pageNumber = 1;
+
+  totalItems = 0;
+  processing = false;
+
+  // Reference to the real pagination component
+  realPagination = true;
+  _gridPaginationOptions!: GridOption;
+  commonGrid!: SwtCommonGridComponent;
+
+  @Input()
+  set gridPaginationOptions(gridPaginationOptions: GridOption) {
+    this._gridPaginationOptions = gridPaginationOptions;
+
+    // The backendServiceApi is itself the SwtCommonGridComponent (This is a hack)
+    this.commonGrid = this.gridPaginationOptions!.backendServiceApi!.service as SwtCommonGridComponent;
+  }
+  get gridPaginationOptions(): GridOption {
+    return this._gridPaginationOptions;
+  }
+
+  constructor(private httpClient: HttpClient) {
+    this.logger = new Logger('grid-pagination', httpClient);
+    this.logger.info('method [constructor] - START/END');
+  }
+
+  ngOnInit() {
+    this.logger.info('init: ');
+  }
+
+  changeToFirstPage(event: any) {
+    this.logger.info('method [changeToFirstPage] - START/END');
+    this.pageNumber = 1;
+    this.onPageChanged(event, this.pageNumber);
+  }
+
+  changeToLastPage(event: any) {
+    this.logger.info('method [changeToLastPage] - START/END');
+    this.pageNumber = this.pageCount;
+    this.onPageChanged(event, this.pageNumber);
+  }
+
+  changeToNextPage(event: any) {
+    this.logger.info('method [changeToNextPage] - START/END');
+    if (this.pageNumber < this.pageCount) {
+      this.pageNumber++;
+      this.onPageChanged(event, this.pageNumber);
+    }
+  }
+
+  changeToPreviousPage(event: any) {
+    this.logger.info('method [changeToNextPage] - START/END');
+    if (this.pageNumber > 1) {
+      this.pageNumber--;
+      this.onPageChanged(event, this.pageNumber);
+    }
+  }
+
+  changeToCurrentPage(event: any) {
+    this.logger.info('method [changeToCurrentPage] - START/END');
+    this.pageNumber = event.currentTarget.value;
+    if (this.pageNumber < 1) {
+      this.pageNumber = 1;
+    } else if (this.pageNumber > this.pageCount) {
+      this.pageNumber = this.pageCount;
+    }
+
+    this.onPageChanged(event, this.pageNumber);
+  }
+
+  onPageChanged(event?: Event, pageNumber?: number) {
+    this.logger.info('method [onPageChanged] - START/END', this.commonGrid);
+    this.commonGrid.processOnPaginationChanged(event, { newPage: pageNumber as number, pageSize: -1 });
+  }
+}

package/src/demos/examples/swt-common-grid-test.component.html

@@ -0,0 +1,37 @@
+<div class="container-fluid" style="margin-top: 10px">
+  <h2>
+    Example 31: Custom Backend Server Pagination
+    <span class="float-end">
+      <a
+        style="font-size: 18px"
+        target="_blank"
+        href="https://github.com/ghiscoding/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/swt-common-grid-test.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle">
+    A simple component to show that it is possible to create a custom Backend Service for any other backend querying, the example below is
+    for Oracle.
+  </div>
+
+  <div class="row">
+    <div class="col-sm-8">
+      <div class="alert alert-info">
+        <strong>Custom Pagination URL:</strong>
+        <div [innerHTML]="currentUrl" data-test="query-string"></div>
+      </div>
+    </div>
+    <div class="col-sm-4">
+      <swt-common-grid-pagination #commonGridPag1></swt-common-grid-pagination>
+    </div>
+  </div>
+  <swt-common-grid
+    #commonGrid1
+    (onFilterChanged)="filterChanged($event.detail)"
+    (onPaginationChanged)="paginationChanged($event.detail)"
+    (onSortChanged)="sortChanged($event.detail)"
+  >
+  </swt-common-grid>
+</div>