angular-slickgrid 9.0.0 → 9.0.2

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

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

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

@@ -1,226 +0,0 @@
-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);
-  }
-}