angular-slickgrid 8.14.1 → 9.0.0

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

@@ -0,0 +1,243 @@
+import { faker } from '@faker-js/faker';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { AngularGridInstance, Column, GridOption, SlickRowDetailView } from '../../library';
+
+import { type Distributor, Example45DetailComponent, type OrderData } from './example45-detail.component';
+import { RowDetailPreloadComponent } from './rowdetail-preload.component';
+
+const FAKE_SERVER_DELAY = 250;
+const NB_ITEMS = 995;
+
+@Component({
+  styleUrls: ['example45.component.scss'],
+  templateUrl: './example45.component.html',
+  encapsulation: ViewEncapsulation.None,
+  standalone: false,
+})
+export class Example45Component implements OnDestroy, OnInit {
+  private _darkMode = false;
+  columnDefinitions: Column[] = [];
+  gridOptions!: GridOption;
+  angularGrid!: AngularGridInstance;
+  dataset: Distributor[] = [];
+  detailViewRowCount = 9;
+  hideSubTitle = false;
+  isUsingInnerGridStatePresets = false;
+  isUsingAutoHeight = false;
+  serverWaitDelay = FAKE_SERVER_DELAY;
+
+  get rowDetailInstance(): SlickRowDetailView {
+    return this.angularGrid.extensions.rowDetailView?.instance || {};
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
+  ngOnDestroy(): void {
+    console.log('destroying row detail component');
+    document.querySelector('.panel-wm-content')!.classList.remove('dark-mode');
+    document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'light';
+  }
+
+  ngOnInit(): void {
+    // define the grid options & columns and then create the grid itself
+    this.defineGrid();
+
+    // mock a dataset
+    this.dataset = this.getData(NB_ITEMS);
+  }
+
+  defineGrid() {
+    this.columnDefinitions = [
+      {
+        id: 'companyId',
+        name: 'ID',
+        field: 'companyId',
+        cssClass: 'text-end',
+        minWidth: 50,
+        maxWidth: 50,
+        filterable: true,
+        sortable: true,
+        type: 'number',
+      },
+      {
+        id: 'companyName',
+        name: 'Company Name',
+        field: 'companyName',
+        width: 90,
+        filterable: true,
+        sortable: true,
+      },
+      {
+        id: 'streetAddress',
+        name: 'Street Address',
+        field: 'streetAddress',
+        minWidth: 120,
+        filterable: true,
+      },
+      {
+        id: 'city',
+        name: 'City',
+        field: 'city',
+        minWidth: 120,
+        filterable: true,
+      },
+      {
+        id: 'zipCode',
+        name: 'Zip Code',
+        field: 'zipCode',
+        minWidth: 120,
+        filterable: true,
+      },
+      {
+        id: 'country',
+        name: 'Country',
+        field: 'country',
+        minWidth: 120,
+        filterable: true,
+      },
+    ];
+
+    this.gridOptions = {
+      autoResize: {
+        container: '#demo-container',
+        autoHeight: this.isUsingAutoHeight, // works with/without autoHeight
+        bottomPadding: 20,
+      },
+      autoHeight: false,
+      enableFiltering: true,
+      enableRowDetailView: true,
+      rowTopOffsetRenderType: 'top', // RowDetail and/or RowSpan don't render well with "transform", you should use "top"
+      darkMode: this._darkMode,
+      rowHeight: 33,
+      rowDetailView: {
+        process: (item: any) => this.simulateServerAsyncCall(item),
+        loadOnce: false, // you can't use loadOnce with inner grid because only HTML template are re-rendered, not JS events
+        useRowClick: false,
+        // how many grid rows do we want to use for the row detail panel
+        panelRows: this.detailViewRowCount,
+        // optionally expose the functions that you want to use from within the row detail Child Component
+        parentRef: this,
+        // Preload View Template
+        preloadComponent: RowDetailPreloadComponent,
+        // ViewModel Template to load when row detail data is ready
+        viewComponent: Example45DetailComponent,
+      },
+    };
+  }
+
+  getData(count: number) {
+    // mock a dataset
+    const mockDataset: Distributor[] = [];
+    for (let i = 0; i < count; i++) {
+      mockDataset[i] = {
+        id: i,
+        companyId: i,
+        companyName: faker.company.name(),
+        city: faker.location.city(),
+        streetAddress: faker.location.streetAddress(),
+        zipCode: faker.location.zipCode('######'),
+        country: faker.location.country(),
+        orderData: [],
+        isUsingInnerGridStatePresets: false,
+      };
+    }
+
+    return mockDataset;
+  }
+
+  changeDetailViewRowCount() {
+    if (this.angularGrid?.extensionService) {
+      const options = this.rowDetailInstance.getOptions();
+      if (options?.panelRows) {
+        options.panelRows = this.detailViewRowCount; // change number of rows dynamically
+        this.rowDetailInstance.setOptions(options);
+      }
+    }
+  }
+
+  changeUsingInnerGridStatePresets() {
+    this.isUsingInnerGridStatePresets = !this.isUsingInnerGridStatePresets;
+    this.closeAllRowDetail();
+    return true;
+  }
+
+  changeUsingResizerAutoHeight() {
+    this.isUsingAutoHeight = !this.isUsingAutoHeight;
+    this.angularGrid.slickGrid?.setOptions({
+      autoResize: { ...this.gridOptions.autoResize, autoHeight: this.isUsingAutoHeight },
+    });
+    this.angularGrid.resizerService.resizeGrid();
+    return true;
+  }
+
+  closeAllRowDetail() {
+    this.rowDetailInstance?.collapseAll();
+  }
+
+  redrawAllRowDetail() {
+    this.rowDetailInstance?.redrawAllViewComponents(true);
+  }
+
+  /** Just for demo purposes, we will simulate an async server call and return more details on the selected row item */
+  simulateServerAsyncCall(item: Distributor) {
+    let orderData: OrderData[] = [];
+    // let's mock some data but make it predictable for easier Cypress E2E testing
+    if (item.id % 3) {
+      orderData = [
+        { orderId: '10261', shipCity: 'Rio de Janeiro', freight: 3.05, shipName: 'Que Delícia' },
+        { orderId: '10267', shipCity: 'München', freight: 208.58, shipName: 'Frankenversand' },
+        { orderId: '10281', shipCity: 'Madrid', freight: 2.94, shipName: 'Romero y tomillo' },
+      ];
+    } else if (item.id % 4) {
+      orderData = [
+        { orderId: '10251', shipCity: 'Lyon', freight: 41.34, shipName: 'Victuailles en stock' },
+        { orderId: '10253', shipCity: 'Rio de Janeiro', freight: 58.17, shipName: 'Hanari Carnes' },
+        { orderId: '10256', shipCity: 'Resende', freight: 13.97, shipName: 'Wellington Importadora' },
+      ];
+    } else if (item.id % 5) {
+      orderData = [
+        { orderId: '10265', shipCity: 'Strasbourg', freight: 55.28, shipName: 'Blondel père et fils' },
+        { orderId: '10277', shipCity: 'Leipzig', freight: 125.77, shipName: 'Morgenstern Gesundkost' },
+        { orderId: '10280', shipCity: 'Luleå', freight: 8.98, shipName: 'Berglunds snabbköp' },
+        { orderId: '10295', shipCity: 'Reims', freight: 1.15, shipName: 'Vins et alcools Chevalier' },
+      ];
+    } else if (item.id % 2) {
+      orderData = [
+        { orderId: '10258', shipCity: 'Graz', freight: 140.51, shipName: 'Ernst Handel' },
+        { orderId: '10270', shipCity: 'Oulu', freight: 136.54, shipName: 'Wartian Herkku' },
+      ];
+    } else {
+      orderData = [{ orderId: '10255', shipCity: 'Genève', freight: 148.33, shipName: 'Richter Supermarkt' }];
+    }
+
+    // fill the template on async delay
+    return new Promise((resolve) => {
+      window.setTimeout(() => {
+        const itemDetail = item;
+        itemDetail.orderData = orderData;
+        itemDetail.isUsingInnerGridStatePresets = this.isUsingInnerGridStatePresets;
+        // resolve the data after delay specified
+        resolve(itemDetail);
+      }, this.serverWaitDelay);
+    });
+  }
+
+  toggleDarkMode() {
+    this._darkMode = !this._darkMode;
+    this.toggleBodyBackground();
+    this.angularGrid.slickGrid?.setOptions({ darkMode: this._darkMode });
+    this.closeAllRowDetail();
+  }
+
+  toggleBodyBackground() {
+    if (this._darkMode) {
+      document.querySelector<HTMLDivElement>('.panel-wm-content')!.classList.add('dark-mode');
+      document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'dark';
+    } else {
+      document.querySelector('.panel-wm-content')!.classList.remove('dark-mode');
+      document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'light';
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+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>`,
+  standalone: false,
+})
+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/demos/examples/grid-custom-pager.component.html

@@ -0,0 +1,60 @@
+<div class="custom-pagination">
+  <span class="custom-pagination-settings">
+    <span class="custom-pagination-count">
+      <span class="page-info-from-to">
+        <span class="item-from" aria-label="Page Item From" data-test="item-from"> {{ currentPagination?.dataFrom }} </span>-
+        <span class="item-to" aria-label="Page Item To" data-test="item-to">
+          {{ currentPagination?.dataTo }}
+        </span>
+        of
+      </span>
+      <span class="page-info-total-items">
+        <span class="total-items" aria-label="Total Items" data-test="total-items">{{ currentPagination?.totalItems }}</span>
+        <span class="text-items"> items</span>
+      </span>
+    </span>
+  </span>
+  <div class="custom-pagination-nav">
+    <nav aria-label="Page navigation">
+      <ul class="custom-pagination-ul">
+        <li class="li page-item seek-first" [class]="{ disabled: isLeftPaginationDisabled() }">
+          <a
+            class="pagination-link mdi mdi-page-first icon-seek-first mdi-22px"
+            aria-label="First Page"
+            role="button"
+            (click)="onFirstPageClicked($event)"
+          ></a>
+        </li>
+        <li class="li page-item seek-prev" [class]="{ disabled: isLeftPaginationDisabled() }">
+          <a
+            class="pagination-link icon-seek-prev mdi mdi-chevron-down mdi-22px mdi-rotate-90"
+            aria-label="Previous Page"
+            role="button"
+            (click)="onPreviousPageClicked($event)"
+          ></a>
+        </li>
+      </ul>
+    </nav>
+    <div class="page-number">
+      <span class="text-page">Page</span>
+      <span class="page-number" aria-label="Page Number" data-test="page-number-label">{{ currentPagination?.pageNumber }}</span>
+      of
+      <span class="page-count" data-test="page-count">{{ currentPagination?.pageCount }}</span>
+    </div>
+    <nav aria-label="Page navigation">
+      <ul class="custom-pagination-ul">
+        <li class="li page-item seek-next" [class]="{ disabled: isRightPaginationDisabled() }" (click)="onNextPageClicked($event)">
+          <a class="pagination-link icon-seek-next mdi mdi-chevron-down mdi-22px mdi-rotate-270" aria-label="Next Page" role="button"></a>
+        </li>
+        <li class="li page-item seek-end" [class]="{ disabled: isRightPaginationDisabled() }">
+          <a
+            class="pagination-link icon-seek-end mdi mdi-page-last mdi-22px"
+            aria-label="Last Page"
+            role="button"
+            (click)="onLastPageClicked($event)"
+          ></a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</div>

package/src/demos/examples/grid-custom-pager.component.scss

@@ -0,0 +1,57 @@
+@use 'sass:color';
+
+.custom-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin: 10px;
+  font-size: 13px;
+
+  .custom-pagination-settings {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 30px;
+  }
+
+  .custom-pagination-nav {
+    display: flex;
+    align-items: center;
+    list-style-type: none;
+
+    .page-item {
+      display: flex;
+      width: 26px;
+      justify-content: center;
+      margin: 0;
+      &.disabled .pagination-link {
+        color: rgb(180, 179, 179);
+        background-color: rgb(180, 179, 179);
+      }
+    }
+
+    .page-number {
+      padding: 0 5px;
+      .page-number {
+        display: inline-flex;
+        justify-content: center;
+        width: 20px;
+      }
+    }
+
+    nav {
+      ul.custom-pagination-ul  {
+        display: flex;
+        list-style-type: none;
+        margin: 0;
+        padding: 0 5px;
+        color: #0d6efd;
+
+        .pagination-link {
+          color: #0d6efd;
+          &:hover {
+            color: color.adjust(#0d6efd, $lightness: 10%);
+          }
+        }
+      }
+    }
+  }
+}

package/src/demos/examples/grid-custom-pager.component.ts

@@ -0,0 +1,107 @@
+import { Component, ElementRef } from '@angular/core';
+import type {
+  BasePaginationComponent,
+  PaginationMetadata,
+  PaginationService,
+  PubSubService,
+  SlickGrid,
+  Subscription,
+} from '@slickgrid-universal/common';
+
+/** Custom Pagination Componnet, please note that you MUST `implements BasePaginationComponent` with required functions */
+@Component({
+  templateUrl: './grid-custom-pager.component.html',
+  styleUrls: ['./grid-custom-pager.component.scss'],
+  standalone: false,
+})
+export class CustomPagerComponent implements BasePaginationComponent {
+  protected _paginationElement!: HTMLDivElement;
+  protected _subscriptions: Subscription[] = [];
+  protected _gridContainerElm?: HTMLElement;
+  protected _grid!: SlickGrid;
+  protected _paginationService!: PaginationService;
+  protected _pubSubService!: PubSubService;
+  currentPagination = {} as PaginationMetadata;
+
+  constructor(protected readonly elm: ElementRef) {}
+
+  init(grid: SlickGrid, paginationService: PaginationService, pubSubService: PubSubService) {
+    this._grid = grid;
+    this._paginationService = paginationService;
+    this._pubSubService = pubSubService;
+    this.currentPagination = this._paginationService.getFullPagination();
+
+    // Anytime the pagination is initialized or has changes,
+    // we'll copy the data into a local object so that we can add binding to this local object
+    this._subscriptions.push(
+      this._pubSubService.subscribe<PaginationMetadata>('onPaginationRefreshed', (paginationChanges) => {
+        this.currentPagination.dataFrom = paginationChanges.dataFrom;
+        this.currentPagination.dataTo = paginationChanges.dataTo;
+        this.currentPagination.pageCount = paginationChanges.pageCount;
+        this.currentPagination.pageNumber = paginationChanges.pageNumber;
+        this.currentPagination.pageSize = paginationChanges.pageSize;
+        this.currentPagination.pageSizes = paginationChanges.pageSizes;
+        this.currentPagination.totalItems = paginationChanges.totalItems;
+      })
+    );
+  }
+
+  dispose() {
+    this._pubSubService.unsubscribeAll(this._subscriptions);
+    this.disposeElement();
+  }
+
+  disposeElement() {
+    this._paginationElement.remove();
+  }
+
+  renderPagination(containerElm: HTMLElement, position: 'top' | 'bottom' = 'top') {
+    this._gridContainerElm = containerElm;
+    this._paginationElement = this.elm.nativeElement;
+    this._paginationElement.id = 'pager';
+    this._paginationElement.className = `pagination-container pager ${this._grid.getUID()}`;
+    this._paginationElement.style.width = '100%';
+
+    if (position === 'top') {
+      // we can prepend the grid if we wish
+      this._paginationElement.classList.add('top');
+      containerElm.prepend(this._paginationElement);
+    } else {
+      // or append it at the bottom
+      this._paginationElement.classList.add('bottom');
+      containerElm.appendChild(this._paginationElement);
+    }
+  }
+
+  onFirstPageClicked(event: MouseEvent): void {
+    if (!this.isLeftPaginationDisabled()) {
+      this._paginationService.goToFirstPage(event);
+    }
+  }
+
+  onLastPageClicked(event: MouseEvent): void {
+    if (!this.isRightPaginationDisabled()) {
+      this._paginationService.goToLastPage(event);
+    }
+  }
+
+  onNextPageClicked(event: MouseEvent): void {
+    if (!this.isRightPaginationDisabled()) {
+      this._paginationService.goToNextPage(event);
+    }
+  }
+
+  onPreviousPageClicked(event: MouseEvent): void {
+    if (!this.isLeftPaginationDisabled()) {
+      this._paginationService.goToPreviousPage(event);
+    }
+  }
+
+  isLeftPaginationDisabled(): boolean {
+    return this.currentPagination.pageNumber === 1 || this.currentPagination.totalItems === 0;
+  }
+
+  isRightPaginationDisabled(): boolean {
+    return this.currentPagination.pageNumber === this.currentPagination.pageCount || this.currentPagination.totalItems === 0;
+  }
+}

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

@@ -0,0 +1,44 @@
+<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/slickgrid-universal/blob/master/frameworks/angular-slickgrid/src/demos/examples/grid-remote.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></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="mdi mdi-sync mdi-spin-1s"></i>
+    <span>Loading...</span>
+  </div>
+
+  <angular-slickgrid
+    gridId="grid18"
+    [columns]="columnDefinitions"
+    [options]="gridOptions"
+    [dataset]="dataset"
+    [customDataView]="customDataView"
+    (onAngularGridCreated)="angularGridReady($event.detail)"
+    (onViewportChanged)="onViewportChanged()"
+    (onSort)="onSort($event.detail.eventData, $event.detail.args)"
+  >
+  </angular-slickgrid>
+</div>