angular-slickgrid 4.2.0 → 4.2.1

package/src/app/examples/grid-graphql-nopage.component.ts

@@ -1,242 +0,0 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-import { GraphqlService, GraphqlResult, GraphqlServiceApi, } from '@slickgrid-universal/graphql';
-
-import {
-  AngularGridInstance,
-  Column,
-  Filters,
-  Formatters,
-  GridOption,
-  Metrics,
-  MultipleSelectOption,
-  OperatorType,
-} from './../modules/angular-slickgrid';
-import { Observable } from 'rxjs';
-
-const COUNTRIES_API = 'https://countries.trevorblades.com/';
-
-export interface Country {
-  countryCode: string;
-  countryName: string;
-  countryNative: string;
-  countryPhone: number;
-  countryCurrency: string;
-  countryEmoji: string;
-  continentCode: string;
-  continentName: string;
-  languageCode: string;
-  languageName: string;
-  languageNative: string;
-};
-
-@Component({
-  templateUrl: './grid-graphql-nopage.component.html',
-  styleUrls: ['./grid-graphql-nopage.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-})
-export class GridGraphqlWithoutPaginationComponent implements OnInit {
-  title = 'Example 27: GraphQL Basic API without Pagination';
-  subTitle = `
-  Use basic GraphQL query with any external public APIs (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/GraphQL" target="_blank">Wiki docs</a>).
-  <ul>
-    <li>This Examples uses a Public GraphQL API that you can find at this link <a href="https://countries.trevorblades.com/" target="_blank">https://countries.trevorblades.com/</a></li>
-    <li>Compare to the regular and default GraphQL implementation, you will find the following differences</li>
-    <ul>
-      <li>There are no Pagination and we only use GraphQL <b>once</b> to load the data, then we use the grid as a regular local in-memory grid</li>
-      <li>We enabled the following 2 flags "useLocalFiltering" and "useLocalSorting" to use regular (in memory) DataView filtering/sorting</li>
-    </ul>
-    <li>NOTE - This Example calls multiple GraphQL queries, this is <b>ONLY</b> for demo purposes, you would typically only call 1 query (which is what GraphQL is good at)</li>
-    <li>This example is mainly to demo the use of GraphqlService to build the query and retrieve the data but also to demo how to mix that with local (in-memory) Filtering/Sorting strategies</li>
-  </ul>
-  `;
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset = [];
-  metrics!: Metrics;
-
-  graphqlQuery = '';
-  processing = true;
-  status = { text: 'processing...', class: 'alert alert-danger' };
-  isDataLoaded = false;
-
-  constructor(private http: HttpClient) { }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      { id: 'countryCode', field: 'code', name: 'Code', maxWidth: 90, sortable: true, filterable: true, columnGroup: 'Country' },
-      { id: 'countryName', field: 'name', name: 'Name', width: 60, sortable: true, filterable: true, columnGroup: 'Country' },
-      { id: 'countryNative', field: 'native', name: 'Native', width: 60, sortable: true, filterable: true, columnGroup: 'Country' },
-      { id: 'countryPhone', field: 'phone', name: 'Phone Area Code', maxWidth: 110, sortable: true, filterable: true, columnGroup: 'Country' },
-      { id: 'countryCurrency', field: 'currency', name: 'Currency', maxWidth: 90, sortable: true, filterable: true, columnGroup: 'Country' },
-      { id: 'countryEmoji', field: 'emoji', name: 'Emoji', maxWidth: 90, sortable: true, columnGroup: 'Country' },
-      {
-        id: 'languageName', field: 'languages.name', name: 'Names', width: 60,
-        formatter: Formatters.arrayObjectToCsv, columnGroup: 'Language',
-        params: { propertyNames: ['name'], useFormatterOuputToFilter: true },
-        filterable: true,
-        // this Filter is a bit more tricky than others since the values are an array of objects
-        // what we can do is use the Formatter to search from the CSV string coming from the Formatter (with "useFormatterOuputToFilter: true")
-        // we also need to use the Operator IN_CONTAINS
-        filter: {
-          model: Filters.multipleSelect,
-          collectionAsync: this.getLanguages(),
-          operator: OperatorType.inContains,
-          collectionOptions: {
-            addBlankEntry: true,
-            // the data is not at the root of the array, so we must tell the Select Filter where to pull the data
-            collectionInsideObjectProperty: 'data.languages'
-          },
-          collectionFilterBy: [
-            // filter out any empty values
-            { property: 'name', value: '', operator: 'NE' },
-            { property: 'name', value: null, operator: 'NE' },
-          ],
-          collectionSortBy: {
-            property: 'name'
-          },
-          customStructure: {
-            value: 'name',
-            label: 'name',
-          },
-          filterOptions: {
-            filter: true
-          } as MultipleSelectOption
-        },
-      },
-      {
-        id: 'languageNative', field: 'languages.native', name: 'Native', width: 60,
-        formatter: Formatters.arrayObjectToCsv, params: { propertyNames: ['native'], useFormatterOuputToFilter: true }, columnGroup: 'Language',
-        filterable: true,
-        filter: {
-          model: Filters.multipleSelect,
-          collectionAsync: this.getLanguages(),
-          operator: OperatorType.inContains,
-          collectionOptions: {
-            addBlankEntry: true,
-            // the data is not at the root of the array, so we must tell the Select Filter where to pull the data
-            collectionInsideObjectProperty: 'data.languages'
-          },
-          collectionFilterBy: [
-            // filter out any empty values
-            { property: 'native', value: '', operator: 'NE' },
-            { property: 'native', value: null, operator: 'NE' },
-          ],
-          collectionSortBy: {
-            property: 'native'
-          },
-          customStructure: {
-            value: 'native',
-            label: 'native',
-          },
-          filterOptions: {
-            filter: true
-          } as MultipleSelectOption
-        },
-      },
-      {
-        id: 'languageCode', field: 'languages.code', name: 'Codes', maxWidth: 100,
-        formatter: Formatters.arrayObjectToCsv, params: { propertyNames: ['code'], useFormatterOuputToFilter: true }, columnGroup: 'Language',
-        filterable: true,
-      },
-      {
-        id: 'continentName', field: 'continent.name', name: 'Name', width: 60, sortable: true,
-        filterable: true, formatter: Formatters.complexObject, columnGroup: 'Continent'
-      },
-      {
-        id: 'continentCode', field: 'continent.code', name: 'Code', maxWidth: 90,
-        sortable: true,
-        filterable: true,
-        filter: {
-          model: Filters.singleSelect,
-          collectionAsync: this.getContinents(),
-          collectionOptions: {
-            // the data is not at the root of the array, so we must tell the Select Filter where to pull the data
-            collectionInsideObjectProperty: 'data.continents',
-            addBlankEntry: true,
-            separatorBetweenTextLabels: ': ',
-          },
-          customStructure: {
-            value: 'code',
-            label: 'code',
-            labelSuffix: 'name',
-          }
-        },
-        formatter: Formatters.complexObject, columnGroup: 'Continent',
-      },
-    ];
-
-    this.gridOptions = {
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10
-      },
-      enableFiltering: true,
-      enableCellNavigation: true,
-      enablePagination: false,
-      createPreHeaderPanel: true,
-      showPreHeaderPanel: true,
-      preHeaderPanelHeight: 28,
-      datasetIdPropertyName: 'code',
-      showCustomFooter: true, // display some metrics in the bottom custom footer
-      backendServiceApi: {
-        // use the GraphQL Service to build the query but use local (in memory) Filtering/Sorting strategies
-        // the useLocalFiltering/useLocalSorting flags can be enabled independently
-        service: new GraphqlService(),
-        useLocalFiltering: true,
-        useLocalSorting: true,
-
-        options: {
-          datasetName: 'countries', // the only REQUIRED property
-        },
-        // you can define the onInit callback OR enable the "executeProcessCommandOnInit" flag in the service init
-        preProcess: () => !this.isDataLoaded ? this.displaySpinner(true) : '',
-        process: (query: string) => this.getCountries(query),
-        postProcess: (result: GraphqlResult<Country>) => {
-          this.metrics = result.metrics as Metrics;
-          this.displaySpinner(false);
-          this.isDataLoaded = true;
-        }
-      } as GraphqlServiceApi
-    };
-  }
-
-  displaySpinner(isProcessing: boolean) {
-    this.processing = isProcessing;
-    this.status = (isProcessing)
-      ? { text: 'processing...', class: 'alert alert-danger' }
-      : { text: 'finished', class: 'alert alert-success' };
-  }
-
-  // --
-  // NOTE - Demo Code ONLY
-  // This Example calls multiple GraphQL queries, this is ONLY for demo purposes, you would typically only call 1 query (which is what GraphQL is good at)
-  // This demo is mainly to show the use of GraphqlService to build the query and retrieve the data but also to show how to mix that with usage of local Filtering/Sorting strategies
-  // --
-
-  /** Calling the GraphQL backend API to get the Countries with the Query created by the "process" method of GraphqlService  */
-  getCountries(query: string): Observable<GraphqlResult<Country>> {
-    return this.http.post<GraphqlResult<Country>>(COUNTRIES_API, { query });
-  }
-
-  /**
-   * Calling again the GraphQL backend API, however in this case we cannot use the GraphQL Service to build the query
-   * So we will have to write, by hand, the query to get the continents code & name
-   * We also need to resolve the data in a flat array (singleSelect/multipleSelect Filters only accept data at the root of the array)
-   */
-  getContinents(): Observable<GraphqlResult<{ code: string; name: string; }>> {
-    const continentQuery = `query { continents { code, name  }}`;
-    return this.http.post<GraphqlResult<{ code: string; name: string; }>>(COUNTRIES_API, { query: continentQuery });
-  }
-
-  /**
-   * Calling again the GraphQL backend API, however in this case we cannot use the GraphQL Service to build the query
-   * So we will have to write, by hand, the query to get the languages code & name
-   * We also need to resolve the data in a flat array (singleSelect/multipleSelect Filters only accept data at the root of the array)
-   */
-  getLanguages(): Observable<GraphqlResult<{ code: string; name: string; native: string; }>> {
-    const languageQuery = `query { languages { code, name, native  }}`;
-    return this.http.post<GraphqlResult<{ code: string; name: string; native: string; }>>(COUNTRIES_API, { query: languageQuery });
-  }
-}

package/src/app/examples/grid-graphql.component.html

@@ -1,87 +0,0 @@
-<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/Angular-Slickgrid/blob/master/src/app/examples/grid-graphql.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <div class="row">
-    <div class="col-sm-5">
-      <div [class]="status.class" role="alert" data-test="status">
-        <strong>Status: </strong> {{status.text}}
-        <span [hidden]="!processing">
-          <i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
-        </span>
-      </div>
-
-      <div class="row">
-        <div class="col-md-12">
-          <button class="btn btn-outline-secondary btn-sm" data-test="clear-filters-sorting"
-                  (click)="clearAllFiltersAndSorts()" title="Clear all Filters & Sorts">
-            <i class="fa fa-filter text-danger"></i>
-            Clear all Filter & Sorts
-          </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>
-        </div>
-      </div>
-      <div class="row mt-1">
-        <div class="col-md-12">
-          <button class="btn btn-outline-secondary btn-sm" data-test="language-button" (click)="switchLanguage()">
-            <i class="fa fa-language"></i>
-            Switch Language
-          </button>
-          <strong>Locale:</strong>
-          <span style="font-style: italic" data-test="selected-locale">
-            {{selectedLanguage + '.json'}}
-          </span>
-        </div>
-      </div>
-      <br />
-      <div *ngIf="metrics" style="margin: 10px 0px">
-        <b>Metrics:</b> {{metrics.endTime | date: 'yyyy-MM-dd hh:mm aaaaa\'m\''}} | {{metrics.executionTime}}ms
-        | {{metrics.totalItemCount}} items
-      </div>
-      <div class="row mb-2">
-        <div class="col-md-12">
-          <label>Programmatically go to first/last page:</label>
-          <button class="btn btn-outline-secondary btn-xs" data-test="goto-first-page" (click)="goToFirstPage()">
-            <i class="fa fa-caret-left fa-lg"></i>
-          </button>
-          <button class="btn btn-outline-secondary btn-xs" data-test="goto-last-page" (click)="goToLastPage()">
-            <i class="fa fa-caret-right fa-lg"></i>
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div class="col-sm-7">
-      <div class="alert alert-info" data-test="alert-graphql-query">
-        <strong>GraphQL Query:</strong>
-        <div [innerHTML]="graphqlQuery" data-test="graphql-query-result"></div>
-      </div>
-    </div>
-  </div>
-
-  <hr />
-  <angular-slickgrid gridId="grid6"
-                     [columnDefinitions]="columnDefinitions"
-                     [gridOptions]="gridOptions"
-                     [dataset]="dataset"
-                     (onAngularGridCreated)="angularGridReady($event.detail)"
-                     (onGridStateChanged)="gridStateChanged($event.detail)"
-                     (onBeforeGridDestroy)="saveCurrentGridState()">
-  </angular-slickgrid>
-</div>

package/src/app/examples/grid-graphql.component.ts

@@ -1,304 +0,0 @@
-import { GraphqlService, GraphqlPaginatedResult, GraphqlServiceApi, } from '@slickgrid-universal/graphql';
-import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import {
-  AngularGridInstance,
-  Column,
-  FieldType,
-  Filters,
-  Formatters,
-  GridOption,
-  GridStateChange,
-  Metrics,
-  MultipleSelectOption,
-  OperatorType,
-  SortDirection,
-  unsubscribeAllObservables,
-} from './../modules/angular-slickgrid';
-import * as moment from 'moment-mini';
-import { Subscription } from 'rxjs';
-
-const defaultPageSize = 20;
-const GRAPHQL_QUERY_DATASET_NAME = 'users';
-const LOCAL_STORAGE_KEY = 'gridStateGraphql';
-
-@Component({
-  templateUrl: './grid-graphql.component.html'
-})
-export class GridGraphqlComponent implements OnInit, OnDestroy {
-  title = 'Example 6: Grid connected to Backend Server with GraphQL';
-  subTitle = `
-    Sorting/Paging connected to a Backend GraphQL Service (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/GraphQL" target="_blank">Wiki docs</a>).
-    <br/>
-    <ul class="small">
-      <li><span class="red">(*) NO DATA SHOWING</span> - just change Filters &amp; Pages and look at the "GraphQL Query" changing :)</li>
-      <li>This example also demos the Grid State feature, open the console log to see the changes</li>
-      <li>String column also support operator (>, >=, <, <=, <>, !=, =, ==, *)
-      <ul>
-        <li>The (*) can be used as startsWith (ex.: "abc*" => startsWith "abc") / endsWith (ex.: "*xyz" => endsWith "xyz")</li>
-        <li>The other operators can be used on column type number for example: ">=100" (bigger or equal than 100)</li>
-      </ul>
-      <li>You can also preload a grid with certain "presets" like Filters / Sorters / Pagination <a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Grid-State-&-Preset" target="_blank">Wiki - Grid Preset</a>
-    </ul>
-  `;
-  private subscriptions: Subscription[] = [];
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset = [];
-  metrics!: Metrics;
-
-  graphqlQuery = '';
-  processing = true;
-  status = { text: 'processing...', class: 'alert alert-danger' };
-  isWithCursor = false;
-  selectedLanguage: string;
-
-  constructor(private readonly cd: ChangeDetectorRef, private translate: TranslateService) {
-    // 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
-    this.subscriptions = unsubscribeAllObservables(this.subscriptions);
-  }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      {
-        id: 'name', field: 'name', nameKey: 'NAME', width: 60, columnGroupKey: 'CUSTOMER_INFORMATION',
-        type: FieldType.string,
-        sortable: true,
-        filterable: true,
-        filter: {
-          model: Filters.compoundInput
-        }
-      },
-      {
-        id: 'gender', field: 'gender', nameKey: 'GENDER', filterable: true, sortable: true, width: 60, columnGroupKey: 'CUSTOMER_INFORMATION',
-        filter: {
-          model: Filters.singleSelect,
-          collection: [{ value: '', label: '' }, { value: 'male', label: 'male', labelKey: 'MALE' }, { value: 'female', label: 'female', labelKey: 'FEMALE' }]
-        }
-      },
-      {
-        id: 'company', field: 'company', nameKey: 'COMPANY', width: 60, columnGroupKey: 'CUSTOMER_INFORMATION',
-        sortable: true, filterable: true,
-        filter: {
-          model: Filters.multipleSelect,
-          collection: [{ value: 'acme', label: 'Acme' }, { value: 'abc', label: 'Company ABC' }, { value: 'xyz', label: 'Company XYZ' }],
-          filterOptions: {
-            filter: true // adds a filter on top of the multi-select dropdown
-          } as MultipleSelectOption
-        }
-      },
-      {
-        id: 'billingAddressStreet', field: 'billing.address.street', nameKey: 'BILLING.ADDRESS.STREET',
-        width: 60, filterable: true, sortable: true, columnGroupKey: 'BILLING.INFORMATION',
-      },
-      {
-        id: 'billingAddressZip', field: 'billing.address.zip', nameKey: 'BILLING.ADDRESS.ZIP', width: 60,
-        type: FieldType.number,
-        columnGroupKey: 'BILLING.INFORMATION', // or use "columnGroup" without Translate
-        filterable: true, sortable: true,
-        filter: {
-          model: Filters.compoundInput
-        },
-        formatter: Formatters.multiple, params: { formatters: [Formatters.complexObject, Formatters.translate] }
-      },
-      {
-        id: 'finish', field: 'finish', name: 'Date', formatter: Formatters.dateIso, sortable: true, minWidth: 90, width: 120, exportWithFormatter: true,
-        type: FieldType.date,
-        columnGroupKey: 'BILLING.INFORMATION', // or use "columnGroup" without Translate
-        filterable: true,
-        filter: {
-          model: Filters.dateRange,
-        }
-      },
-    ];
-
-    const presetLowestDay = moment().add(-2, 'days').format('YYYY-MM-DD');
-    const presetHighestDay = moment().add(20, 'days').format('YYYY-MM-DD');
-
-    this.gridOptions = {
-      gridHeight: 200,
-      gridWidth: 900,
-      enableFiltering: true,
-      enableCellNavigation: true,
-      enableTranslate: true,
-      createPreHeaderPanel: true,
-      showPreHeaderPanel: true,
-      preHeaderPanelHeight: 28,
-      i18n: this.translate,
-      gridMenu: {
-        resizeOnShowHeaderRow: true,
-        commandItems: [
-          {
-            iconCssClass: 'fa fa-times text-danger',
-            title: 'Reset Grid',
-            disabled: false,
-            command: 'reset-grid',
-            positionOrder: 60
-          }
-        ],
-        onCommand: (e, args) => {
-          if (args.command === 'reset-grid') {
-            this.angularGrid.gridService.resetGrid(this.columnDefinitions);
-            localStorage[LOCAL_STORAGE_KEY] = null;
-          }
-        }
-      },
-      enablePagination: true, // you could optionally disable the Pagination
-      pagination: {
-        pageSizes: [10, 15, 20, 25, 30, 40, 50, 75, 100],
-        pageSize: defaultPageSize,
-        totalItems: 0
-      },
-      presets: {
-        columns: [
-          { columnId: 'name', width: 100 },
-          { columnId: 'gender', width: 55 },
-          { columnId: 'company' },
-          { columnId: 'billingAddressZip' }, // flip column position of Street/Zip to Zip/Street
-          { columnId: 'billingAddressStreet', width: 120 },
-          { columnId: 'finish', width: 130 },
-        ],
-        filters: [
-          // you can use OperatorType or type them as string, e.g.: operator: 'EQ'
-          { columnId: 'gender', searchTerms: ['male'], operator: OperatorType.equal },
-          { columnId: 'name', searchTerms: ['John Doe'], operator: OperatorType.contains },
-          { columnId: 'company', searchTerms: ['xyz'], operator: 'IN' },
-
-          // use a date range with 2 searchTerms values
-          { columnId: 'finish', searchTerms: [presetLowestDay, presetHighestDay], operator: OperatorType.rangeInclusive },
-        ],
-        sorters: [
-          // direction can written as 'asc' (uppercase or lowercase) and/or use the SortDirection type
-          { columnId: 'name', direction: 'asc' },
-          { columnId: 'company', direction: SortDirection.DESC }
-        ],
-        pagination: { pageNumber: 2, pageSize: defaultPageSize }
-      },
-      backendServiceApi: {
-        service: new GraphqlService(),
-        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
-          }],
-          // when dealing with complex objects, we want to keep our field name with double quotes
-          // example with gender: query { users (orderBy:[{field:"gender",direction:ASC}]) {}
-          keepArgumentFieldDoubleQuotes: true
-        },
-        // 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 = result.metrics as Metrics;
-          this.displaySpinner(false);
-          this.cd.detectChanges();
-        }
-      } as GraphqlServiceApi
-    };
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  displaySpinner(isProcessing: boolean) {
-    this.processing = isProcessing;
-    this.status = (isProcessing)
-      ? { text: 'processing...', class: 'alert alert-danger' }
-      : { text: 'finished', class: 'alert alert-success' };
-  }
-
-  /**
-   * Calling your GraphQL backend server should always return a Promise or Observable of type GraphqlPaginatedResult (or GraphqlResult without Pagination)
-   * @param query
-   * @return Promise<GraphqlPaginatedResult> | Observable<GraphqlResult>
-   */
-  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
-    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: [],
-          totalCount: 100
-        }
-      }
-    };
-
-    return new Promise(resolve => {
-      setTimeout(() => {
-        this.graphqlQuery = this.angularGrid.backendService!.buildQuery();
-        resolve(mockedResult);
-      }, 100);
-    });
-  }
-
-  goToFirstPage() {
-    this.angularGrid.paginationService!.goToFirstPage();
-  }
-
-  goToLastPage() {
-    this.angularGrid.paginationService!.goToLastPage();
-  }
-
-  /** Dispatched event of a Grid State Changed event */
-  gridStateChanged(gridStateChanges: GridStateChange) {
-    console.log('GraphQL Example, Grid State changed:: ', gridStateChanges);
-    localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(gridStateChanges.gridState);
-  }
-
-  clearAllFiltersAndSorts() {
-    if (this.angularGrid?.gridService) {
-      this.angularGrid.gridService.clearAllFiltersAndSorts();
-    }
-  }
-
-  /** Save current Filters, Sorters in LocaleStorage or DB */
-  saveCurrentGridState() {
-    console.log('GraphQL current grid state', this.angularGrid.gridStateService.getCurrentGridState());
-  }
-
-  setFiltersDynamically() {
-    const presetLowestDay = moment().add(-2, 'days').format('YYYY-MM-DD');
-    const presetHighestDay = moment().add(20, 'days').format('YYYY-MM-DD');
-
-    // we can Set Filters Dynamically (or different filters) afterward through the FilterService
-    this.angularGrid.filterService.updateFilters([
-      { columnId: 'gender', searchTerms: ['female'], operator: OperatorType.equal },
-      { columnId: 'name', searchTerms: ['Jane'], operator: OperatorType.startsWith },
-      { columnId: 'company', searchTerms: ['acme'], operator: 'IN' },
-      { columnId: 'billingAddressZip', searchTerms: ['11'], operator: OperatorType.greaterThanOrEqual },
-      { columnId: 'finish', searchTerms: [presetLowestDay, presetHighestDay], operator: OperatorType.rangeInclusive },
-    ]);
-  }
-
-  setSortingDynamically() {
-    this.angularGrid.sortService.updateSorting([
-      // orders matter, whichever is first in array will be the first sorted column
-      { columnId: 'billingAddressZip', direction: 'DESC' },
-      { columnId: 'company', direction: 'ASC' },
-    ]);
-  }
-
-  switchLanguage() {
-    const nextLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en';
-    this.subscriptions.push(
-      this.translate.use(nextLanguage).subscribe(() => {
-        this.selectedLanguage = nextLanguage;
-      })
-    );
-  }
-}