angular-slickgrid 9.0.0 → 9.0.2

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

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

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

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

@@ -1,89 +0,0 @@
-/*
- * 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

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

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

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