angular-slickgrid 8.14.1 → 9.0.0

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

@@ -0,0 +1,371 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { TranslateService } from '@ngx-translate/core';
+import { GraphqlService, type GraphqlPaginatedResult, type GraphqlServiceApi } from '@slickgrid-universal/graphql';
+import { Subscription } from 'rxjs';
+
+import {
+  AngularGridInstance,
+  Column,
+  Filters,
+  GridOption,
+  Metrics,
+  MultipleSelectOption,
+  OnRowCountChangedEventArgs,
+  unsubscribeAllObservables,
+} from '../../library';
+const sampleDataRoot = 'assets/data';
+
+const GRAPHQL_QUERY_DATASET_NAME = 'users';
+const FAKE_SERVER_DELAY = 250;
+
+function unescapeAndLowerCase(val: string) {
+  return val.replace(/^"/, '').replace(/"$/, '').toLowerCase();
+}
+
+@Component({
+  styleUrls: ['./example39.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  templateUrl: './example39.component.html',
+  standalone: false,
+})
+export class Example39Component implements OnInit, OnDestroy {
+  private subscriptions: Subscription[] = [];
+  angularGrid!: AngularGridInstance;
+  backendService!: GraphqlService;
+  columnDefinitions!: Column[];
+  gridOptions!: GridOption;
+  dataset: any[] = [];
+  metrics!: Partial<Metrics>;
+  tagDataClass = '';
+  graphqlQuery = '...';
+  processing = false;
+  selectedLanguage: string;
+  status = { text: 'processing...', class: 'alert alert-danger' };
+  serverWaitDelay = FAKE_SERVER_DELAY; // server simulation with default of 250ms but 50ms for Cypress tests
+
+  constructor(
+    private readonly cd: ChangeDetectorRef,
+    private http: HttpClient,
+    private translate: TranslateService
+  ) {
+    this.backendService = new GraphqlService();
+    // 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
+    unsubscribeAllObservables(this.subscriptions);
+  }
+
+  ngOnInit(): void {
+    this.initializeGrid();
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
+  initializeGrid() {
+    this.columnDefinitions = [
+      {
+        id: 'name',
+        field: 'name',
+        nameKey: 'NAME',
+        width: 60,
+        sortable: true,
+        filterable: true,
+        filter: {
+          model: Filters.compoundInput,
+        },
+      },
+      {
+        id: 'gender',
+        field: 'gender',
+        nameKey: 'GENDER',
+        filterable: true,
+        sortable: true,
+        width: 60,
+        filter: {
+          model: Filters.singleSelect,
+          collection: [
+            { value: '', label: '' },
+            { value: 'male', labelKey: 'MALE' },
+            { value: 'female', labelKey: 'FEMALE' },
+          ],
+        },
+      },
+      {
+        id: 'company',
+        field: 'company',
+        nameKey: 'COMPANY',
+        width: 60,
+        sortable: true,
+        filterable: true,
+        filter: {
+          model: Filters.multipleSelect,
+          customStructure: {
+            label: 'company',
+            value: 'company',
+          },
+          collectionSortBy: {
+            property: 'company',
+            sortDesc: false,
+          },
+          collectionAsync: this.http.get(`${sampleDataRoot}/customers_100.json`),
+          options: {
+            filter: true, // adds a filter on top of the multi-select dropdown
+          } as MultipleSelectOption,
+        },
+      },
+    ];
+
+    this.gridOptions = {
+      enableAutoResize: true,
+      autoResize: {
+        container: '#demo-container',
+        rightPadding: 10,
+      },
+      enableAutoTooltip: true,
+      autoTooltipOptions: {
+        enableForHeaderCells: true,
+      },
+      enableTranslate: true,
+      i18n: this.translate,
+      enableFiltering: true,
+      enableCellNavigation: true,
+      multiColumnSort: false,
+      gridMenu: {
+        resizeOnShowHeaderRow: true,
+      },
+      backendServiceApi: {
+        // we need to disable default internalPostProcess so that we deal with either replacing full dataset or appending to it
+        disableInternalPostProcess: true,
+        service: this.backendService,
+        options: {
+          datasetName: GRAPHQL_QUERY_DATASET_NAME, // the only REQUIRED property
+          addLocaleIntoQuery: true, // optionally add current locale into the query
+          extraQueryArguments: [
+            {
+              // optionally add some extra query arguments as input query arguments
+              field: 'userId',
+              value: 123,
+            },
+          ],
+          // enable infinite via Boolean OR via { fetchSize: number }
+          infiniteScroll: { fetchSize: 30 }, // or use true, in that case it would use default size of 25
+        },
+        // you can define the onInit callback OR enable the "executeProcessCommandOnInit" flag in the service init
+        // onInit: (query) => this.getCustomerApiCall(query),
+        preProcess: () => this.displaySpinner(true),
+        process: (query) => this.getCustomerApiCall(query),
+        postProcess: (result: GraphqlPaginatedResult) => {
+          this.metrics = {
+            endTime: new Date(),
+            totalItemCount: result.data[GRAPHQL_QUERY_DATASET_NAME].totalCount || 0,
+          };
+          this.displaySpinner(false);
+          this.getCustomerCallback(result);
+          this.cd.detectChanges();
+        },
+      } as GraphqlServiceApi,
+    };
+  }
+
+  clearAllFiltersAndSorts() {
+    if (this.angularGrid?.gridService) {
+      this.angularGrid.gridService.clearAllFiltersAndSorts();
+    }
+  }
+
+  displaySpinner(isProcessing: boolean) {
+    this.processing = isProcessing;
+    this.status = isProcessing
+      ? { text: 'processing...', class: 'alert alert-danger' }
+      : { text: 'finished', class: 'alert alert-success' };
+  }
+
+  getCustomerCallback(result: any) {
+    const { nodes, totalCount } = result.data[GRAPHQL_QUERY_DATASET_NAME];
+    if (this.angularGrid) {
+      this.metrics.totalItemCount = totalCount;
+
+      // even if we're not showing pagination, it is still used behind the scene to fetch next set of data (next page basically)
+      // once pagination totalItems is filled, we can update the dataset
+
+      // infinite scroll has an extra data property to determine if we hit an infinite scroll and there's still more data (in that case we need append data)
+      // or if we're on first data fetching (no scroll bottom ever occured yet)
+      if (!result.infiniteScrollBottomHit) {
+        // initial load not scroll hit yet, full dataset assignment
+        this.angularGrid.slickGrid?.scrollTo(0); // scroll back to top to avoid unwanted onScroll end triggered
+        this.dataset = nodes;
+        this.metrics.itemCount = nodes.length;
+      } else {
+        // scroll hit, for better perf we can simply use the DataView directly for better perf (which is better compare to replacing the entire dataset)
+        this.angularGrid.dataView?.addItems(nodes);
+      }
+
+      // NOTE: you can get currently loaded item count via the `onRowCountChanged`slick event, see `refreshMetrics()` below
+      // OR you could also calculate it yourself or get it via: `this.angularGrid?.dataView.getItemCount() === totalItemCount`
+      // console.log('is data fully loaded: ', this.angularGrid?.dataView?.getItemCount() === totalItemCount);
+    }
+  }
+
+  /**
+   * Calling your GraphQL backend server should always return a Promise of type GraphqlPaginatedResult
+   *
+   * @param query
+   * @return Promise<GraphqlPaginatedResult>
+   */
+  getCustomerApiCall(query: string): Promise<GraphqlPaginatedResult> {
+    // in your case, you will call your WebAPI function (wich needs to return a Promise)
+    // for the demo purpose, we will call a mock WebAPI function
+    return this.getCustomerDataApiMock(query);
+  }
+
+  getCustomerDataApiMock(query: string): Promise<any> {
+    return new Promise<GraphqlPaginatedResult>((resolve) => {
+      let firstCount = 0;
+      let offset = 0;
+      let orderByField = '';
+      let orderByDir = '';
+      this.http.get(`${sampleDataRoot}/customers_100.json`).subscribe((response: any) => {
+        let filteredData: Array<{ id: number; name: string; gender: string; company: string; category: { id: number; name: string } }> =
+          response;
+        if (query.includes('first:')) {
+          const topMatch = query.match(/first:([0-9]+),/) || [];
+          firstCount = +topMatch[1];
+        }
+        if (query.includes('offset:')) {
+          const offsetMatch = query.match(/offset:([0-9]+),/) || [];
+          offset = +offsetMatch[1];
+        }
+        if (query.includes('orderBy:')) {
+          const [_, field, dir] = /orderBy:\[{field:([a-zA-Z/]+),direction:(ASC|DESC)}\]/gi.exec(query) || [];
+          orderByField = field || '';
+          orderByDir = dir || '';
+        }
+        if (query.includes('orderBy:')) {
+          const [_, field, dir] = /orderBy:\[{field:([a-zA-Z/]+),direction:(ASC|DESC)}\]/gi.exec(query) || [];
+          orderByField = field || '';
+          orderByDir = dir || '';
+        }
+        if (query.includes('filterBy:')) {
+          const regex = /{field:(\w+),operator:(\w+),value:([0-9a-z',"\s]*)}/gi;
+
+          // loop through all filters
+          let matches;
+          while ((matches = regex.exec(query)) !== null) {
+            const field = matches[1] || '';
+            const operator = matches[2] || '';
+            const value = matches[3] || '';
+
+            let [term1, term2] = value.split(',');
+
+            if (field && operator && value !== '') {
+              filteredData = filteredData.filter((dataContext: any) => {
+                const dcVal = dataContext[field];
+                // remove any double quotes & lowercase the terms
+                term1 = unescapeAndLowerCase(term1);
+                term2 = unescapeAndLowerCase(term2 || '');
+
+                switch (operator) {
+                  case 'EQ':
+                    return dcVal.toLowerCase() === term1;
+                  case 'NE':
+                    return dcVal.toLowerCase() !== term1;
+                  case 'LE':
+                    return dcVal.toLowerCase() <= term1;
+                  case 'LT':
+                    return dcVal.toLowerCase() < term1;
+                  case 'GT':
+                    return dcVal.toLowerCase() > term1;
+                  case 'GE':
+                    return dcVal.toLowerCase() >= term1;
+                  case 'EndsWith':
+                    return dcVal.toLowerCase().endsWith(term1);
+                  case 'StartsWith':
+                    return dcVal.toLowerCase().startsWith(term1);
+                  case 'Starts+Ends':
+                    return dcVal.toLowerCase().startsWith(term1) && dcVal.toLowerCase().endsWith(term2);
+                  case 'Contains':
+                    return dcVal.toLowerCase().includes(term1);
+                  case 'Not_Contains':
+                    return !dcVal.toLowerCase().includes(term1);
+                  case 'IN':
+                    const terms = value.toLocaleLowerCase().split(',');
+                    for (const term of terms) {
+                      if (dcVal.toLocaleLowerCase() === unescapeAndLowerCase(term)) {
+                        return true;
+                      }
+                    }
+                    break;
+                }
+              });
+            }
+          }
+        }
+
+        // make sure page skip is not out of boundaries, if so reset to first page & remove skip from query
+        let firstRow = offset;
+        if (firstRow > filteredData.length) {
+          query = query.replace(`offset:${firstRow}`, '');
+          firstRow = 0;
+        }
+
+        // sorting when defined
+        const selector = (obj: any) => (orderByField ? obj[orderByField] : obj);
+        switch (orderByDir.toUpperCase()) {
+          case 'ASC':
+            filteredData = filteredData.sort((a, b) => selector(a).localeCompare(selector(b)));
+            break;
+          case 'DESC':
+            filteredData = filteredData.sort((a, b) => selector(b).localeCompare(selector(a)));
+            break;
+        }
+
+        // return data subset (page)
+        const updatedData = filteredData.slice(firstRow, firstRow + firstCount);
+
+        // in your case, you will call your WebAPI function (wich needs to return a Promise)
+        // for the demo purpose, we will call a mock WebAPI function
+        const mockedResult = {
+          // the dataset name is the only unknown property
+          // will be the same defined in your GraphQL Service init, in our case GRAPHQL_QUERY_DATASET_NAME
+          data: {
+            [GRAPHQL_QUERY_DATASET_NAME]: {
+              nodes: updatedData,
+              totalCount: filteredData.length,
+            },
+          },
+        };
+
+        setTimeout(() => {
+          this.graphqlQuery = this.gridOptions.backendServiceApi!.service.buildQuery();
+          resolve(mockedResult);
+        }, this.serverWaitDelay);
+      });
+    });
+  }
+
+  refreshMetrics(args: OnRowCountChangedEventArgs) {
+    if (args?.current >= 0) {
+      this.metrics.itemCount = this.angularGrid.dataView?.getFilteredItemCount() || 0;
+      this.tagDataClass = this.metrics.itemCount === this.metrics.totalItemCount ? 'fully-loaded' : 'partial-load';
+    }
+  }
+
+  switchLanguage() {
+    const nextLanguage = this.selectedLanguage === 'en' ? 'fr' : 'en';
+    this.subscriptions.push(
+      this.translate.use(nextLanguage).subscribe(() => {
+        this.selectedLanguage = nextLanguage;
+      })
+    );
+    // we could also force a query since we provide a Locale and it changed
+    this.getCustomerApiCall(this.backendService.buildQuery() || '');
+  }
+}

package/src/demos/examples/example40.component.html

@@ -0,0 +1,76 @@
+<div class="demo40">
+  <h2>
+    Example 40: Infinite Scroll from JSON data
+    <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-infinite-json.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+    <button class="ms-2 btn btn-outline-secondary btn-sm btn-icon" type="button" data-test="toggle-subtitle" (click)="toggleSubTitle()">
+      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
+    </button>
+  </h2>
+
+  <div class="subtitle">
+    <ul>
+      <li>
+        Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. In its simplest
+        form, the more the user scrolls down, the more rows get loaded.
+      </li>
+      <li>
+        NOTES: <code>presets.pagination</code> is not supported with Infinite Scroll and will revert to the first page, simply because since
+        we keep appending data, we always have to start from index zero (no offset).
+      </li>
+    </ul>
+  </div>
+
+  <div class="row">
+    <div class="col-sm-12">
+      <button
+        class="btn btn-outline-secondary btn-sm btn-icon"
+        data-test="clear-filters-sorting"
+        (click)="clearAllFiltersAndSorts()"
+        title="Clear all Filters & Sorts"
+      >
+        <span class="mdi mdi-close"></span>
+        <span>Clear all Filter & Sorts</span>
+      </button>
+      <button class="btn btn-outline-secondary btn-sm" data-test="set-dynamic-filter" (click)="setFiltersDynamically()">
+        Set Filters Dynamically
+      </button>
+      <button class="btn btn-outline-secondary btn-sm" data-test="set-dynamic-sorting" (click)="setSortingDynamically()">
+        Set Sorting Dynamically
+      </button>
+      <button class="btn btn-outline-secondary btn-sm" data-test="group-by-duration" (click)="groupByDuration()">Group by Duration</button>
+
+      <label class="ml-4">Reset Dataset <code>onSort</code>:</label>
+      <button class="btn btn-outline-secondary btn-sm" data-test="onsort-on" (click)="onSortReset(true)">ON</button>
+      <button class="btn btn-outline-secondary btn-sm" data-test="onsort-off" (click)="onSortReset(false)">OFF</button>
+    </div>
+  </div>
+
+  <div *ngIf="metrics" class="mt-2" style="margin: 10px 0px">
+    <b>Metrics:</b>
+    <span>
+      <span>{{ metrics.endTime | date: 'dd MMM, h:mm:ssa' }}</span> —
+      <span data-test="totalItemCount">{{ metrics.totalItemCount }}</span>
+      items
+    </span>
+  </div>
+
+  <angular-slickgrid
+    gridId="grid40"
+    [columns]="columnDefinitions"
+    [options]="gridOptions"
+    [dataset]="dataset"
+    (onAngularGridCreated)="angularGridReady($event.detail)"
+    (onSort)="handleOnSort()"
+    (onScroll)="handleOnScroll($event.detail.args)"
+    (onRowCountChanged)="handleOnRowCountChanged($event.detail.args)"
+  >
+  </angular-slickgrid>
+</div>

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

@@ -0,0 +1,226 @@
+import { Component, OnInit } from '@angular/core';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
+import {
+  type AngularGridInstance,
+  Aggregators,
+  type Column,
+  Filters,
+  Formatters,
+  type GridOption,
+  type Grouping,
+  type Metrics,
+  type OnRowCountChangedEventArgs,
+  SortComparers,
+  SortDirectionNumber,
+} from '../../library';
+
+import { randomNumber } from './utilities';
+
+const FETCH_SIZE = 50;
+
+@Component({
+  templateUrl: './example40.component.html',
+  standalone: false,
+})
+export class Example40Component implements OnInit {
+  angularGrid!: AngularGridInstance;
+  columnDefinitions!: Column[];
+  dataset: any[] = [];
+  hideSubTitle = false;
+  gridOptions!: GridOption;
+  metrics!: Partial<Metrics>;
+  scrollEndCalled = false;
+  shouldResetOnSort = false;
+
+  ngOnInit(): void {
+    this.defineGrid();
+    this.dataset = this.loadData(0, FETCH_SIZE);
+    this.metrics = {
+      itemCount: FETCH_SIZE,
+      totalItemCount: FETCH_SIZE,
+    };
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
+  defineGrid() {
+    this.columnDefinitions = [
+      { id: 'title', name: 'Title', field: 'title', sortable: true, minWidth: 100, filterable: true },
+      {
+        id: 'duration',
+        name: 'Duration (days)',
+        field: 'duration',
+        sortable: true,
+        minWidth: 100,
+        filterable: true,
+        type: 'number',
+      },
+      {
+        id: 'percentComplete',
+        name: '% Complete',
+        field: 'percentComplete',
+        sortable: true,
+        minWidth: 100,
+        filterable: true,
+        type: 'number',
+      },
+      {
+        id: 'start',
+        name: 'Start',
+        field: 'start',
+        type: 'date',
+        outputType: 'dateIso', // for date picker format
+        formatter: Formatters.date,
+        exportWithFormatter: true,
+        params: { dateFormat: 'MMM DD, YYYY' },
+        sortable: true,
+        filterable: true,
+        filter: {
+          model: Filters.compoundDate,
+        },
+      },
+      {
+        id: 'finish',
+        name: 'Finish',
+        field: 'finish',
+        type: 'date',
+        outputType: 'dateIso', // for date picker format
+        formatter: Formatters.date,
+        exportWithFormatter: true,
+        params: { dateFormat: 'MMM DD, YYYY' },
+        sortable: true,
+        filterable: true,
+        filter: {
+          model: Filters.compoundDate,
+        },
+      },
+      {
+        id: 'effort-driven',
+        name: 'Effort Driven',
+        field: 'effortDriven',
+        sortable: true,
+        minWidth: 100,
+        filterable: true,
+        formatter: Formatters.checkmarkMaterial,
+      },
+    ];
+
+    this.gridOptions = {
+      autoResize: {
+        container: '#demo-container',
+        rightPadding: 10,
+      },
+      enableAutoResize: true,
+      enableFiltering: true,
+      enableGrouping: true,
+      editable: false,
+      rowHeight: 33,
+      enableExcelExport: true,
+      externalResources: [new ExcelExportService()],
+    };
+  }
+
+  // add onScroll listener which will detect when we reach the scroll end
+  // if so, then append items to the dataset
+  handleOnScroll(args: any) {
+    const viewportElm = args.grid.getViewportNode();
+    if (
+      ['mousewheel', 'scroll'].includes(args.triggeredBy || '') &&
+      !this.scrollEndCalled &&
+      viewportElm.scrollTop > 0 &&
+      Math.ceil(viewportElm.offsetHeight + args.scrollTop) >= args.scrollHeight
+    ) {
+      console.log('onScroll end reached, add more items');
+      const startIdx = this.angularGrid.dataView?.getItemCount() || 0;
+      const newItems = this.loadData(startIdx, FETCH_SIZE);
+      this.angularGrid.dataView?.addItems(newItems);
+      this.scrollEndCalled = false;
+    }
+  }
+
+  // do we want to reset the dataset when Sorting?
+  // if answering Yes then use the code below
+  handleOnSort() {
+    if (this.shouldResetOnSort) {
+      const newData = this.loadData(0, FETCH_SIZE);
+      this.angularGrid.slickGrid?.scrollTo(0); // scroll back to top to avoid unwanted onScroll end triggered
+      this.angularGrid.dataView?.setItems(newData);
+      this.angularGrid.dataView?.reSort();
+    }
+  }
+
+  groupByDuration() {
+    this.angularGrid?.dataView?.setGrouping({
+      getter: 'duration',
+      formatter: (g) => `Duration: ${g.value} <span class="text-green">(${g.count} items)</span>`,
+      comparer: (a, b) => SortComparers.numeric(a.value, b.value, SortDirectionNumber.asc),
+      aggregators: [new Aggregators.Avg('percentComplete'), new Aggregators.Sum('cost')],
+      aggregateCollapsed: false,
+      lazyTotalsCalculation: true,
+    } as Grouping);
+
+    // you need to manually add the sort icon(s) in UI
+    this.angularGrid?.slickGrid?.setSortColumns([{ columnId: 'duration', sortAsc: true }]);
+    this.angularGrid?.slickGrid?.invalidate(); // invalidate all rows and re-render
+  }
+
+  loadData(startIdx: number, count: number) {
+    const tmpData: any[] = [];
+    for (let i = startIdx; i < startIdx + count; i++) {
+      tmpData.push(this.newItem(i));
+    }
+
+    return tmpData;
+  }
+
+  newItem(idx: number) {
+    return {
+      id: idx,
+      title: 'Task ' + idx,
+      duration: Math.round(Math.random() * 100) + '',
+      percentComplete: randomNumber(1, 12),
+      start: new Date(2020, randomNumber(1, 11), randomNumber(1, 28)),
+      finish: new Date(2022, randomNumber(1, 11), randomNumber(1, 28)),
+      effortDriven: idx % 5 === 0,
+    };
+  }
+
+  onSortReset(shouldReset: boolean) {
+    this.shouldResetOnSort = shouldReset;
+  }
+
+  clearAllFiltersAndSorts() {
+    if (this.angularGrid?.gridService) {
+      this.angularGrid.gridService.clearAllFiltersAndSorts();
+    }
+  }
+
+  setFiltersDynamically() {
+    // we can Set Filters Dynamically (or different filters) afterward through the FilterService
+    this.angularGrid?.filterService.updateFilters([{ columnId: 'start', searchTerms: ['2020-08-25'], operator: '<=' }]);
+  }
+
+  handleOnRowCountChanged(args: OnRowCountChangedEventArgs) {
+    if (this.angularGrid && args?.current >= 0) {
+      // we probably want to re-sort the data when we get new items
+      this.angularGrid.dataView?.reSort();
+
+      // update metrics
+      this.metrics.itemCount = this.angularGrid.dataView?.getFilteredItemCount() || 0;
+      this.metrics.totalItemCount = args.itemCount || 0;
+    }
+  }
+
+  setSortingDynamically() {
+    this.angularGrid?.sortService.updateSorting([{ columnId: 'title', direction: 'DESC' }]);
+  }
+
+  toggleSubTitle() {
+    this.hideSubTitle = !this.hideSubTitle;
+    const action = this.hideSubTitle ? 'add' : 'remove';
+    document.querySelector('.subtitle')?.classList[action]('hidden');
+    this.angularGrid.resizerService.resizeGrid(2);
+  }
+}