angular-slickgrid 9.0.0 → 9.0.2

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

@@ -1,446 +0,0 @@
-import { GraphqlService, GraphqlPaginatedResult, GraphqlServiceApi, GraphqlServiceOption } from '@slickgrid-universal/graphql';
-import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
-import { addDay, format as tempoFormat } from '@formkit/tempo';
-import { TranslateService } from '@ngx-translate/core';
-import { Subscription } from 'rxjs';
-import {
-  AngularGridInstance,
-  Column,
-  CursorPageInfo,
-  Filters,
-  Formatters,
-  GridOption,
-  GridStateChange,
-  Metrics,
-  type MultipleSelectOption,
-  OperatorType,
-  unsubscribeAllObservables,
-} from '../../library';
-
-const defaultPageSize = 20;
-const GRAPHQL_QUERY_DATASET_NAME = 'users';
-const LOCAL_STORAGE_KEY = 'gridStateGraphql';
-const FAKE_SERVER_DELAY = 250;
-
-@Component({
-  templateUrl: './example06.component.html',
-  standalone: false,
-})
-export class Example6Component implements OnInit, OnDestroy {
-  private subscriptions: Subscription[] = [];
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset = [];
-  metrics!: Metrics;
-
-  isWithCursor = false;
-  graphqlQuery = '';
-  processing = true;
-  status = { text: 'processing...', class: 'alert alert-danger' };
-  selectedLanguage: string;
-  serverWaitDelay = FAKE_SERVER_DELAY; // server simulation with default of 250ms but 50ms for Cypress tests
-
-  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
-    unsubscribeAllObservables(this.subscriptions);
-  }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      {
-        id: 'name',
-        field: 'name',
-        nameKey: 'NAME',
-        width: 60,
-        columnGroupKey: 'CUSTOMER_INFORMATION',
-        sortable: true,
-        filterable: true,
-        filter: {
-          model: Filters.compoundInput,
-          compoundOperatorList: [
-            { operator: '', desc: 'Contains' },
-            { operator: '<>', desc: 'Not Contains' },
-            { operator: '=', desc: 'Equals' },
-            { operator: '!=', desc: 'Not equal to' },
-            { operator: 'a*', desc: 'Starts With' },
-            { operator: 'Custom', desc: 'SQL Like' },
-          ],
-        },
-      },
-      {
-        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' },
-          ],
-          options: {
-            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: '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: 'date',
-        columnGroupKey: 'BILLING.INFORMATION', // or use "columnGroup" without Translate
-        filterable: true,
-        filter: {
-          model: Filters.dateRange,
-          filterShortcuts: [
-            {
-              titleKey: 'NEXT_20_DAYS',
-              iconCssClass: 'mdi mdi-calendar',
-              searchTerms: [tempoFormat(new Date(), 'YYYY-MM-DD'), tempoFormat(addDay(new Date(), 20), 'YYYY-MM-DD')],
-            },
-          ],
-        },
-      },
-    ];
-
-    const currentYear = new Date().getFullYear();
-    const presetLowestDay = `${currentYear}-01-01`;
-    const presetHighestDay = `${currentYear}-02-15`;
-
-    this.gridOptions = {
-      gridHeight: 200,
-      gridWidth: 900,
-      compoundOperatorAltTexts: {
-        // where '=' is any of the `OperatorString` type shown above
-        text: { Custom: { operatorAlt: '%%', descAlt: 'SQL Like' } },
-      },
-      enableFiltering: true,
-      enableCellNavigation: true,
-      enableTranslate: true,
-      createPreHeaderPanel: true,
-      showPreHeaderPanel: true,
-      preHeaderPanelHeight: 28,
-      i18n: this.translate,
-      gridMenu: {
-        resizeOnShowHeaderRow: true,
-        commandItems: [
-          {
-            iconCssClass: 'mdi mdi-close 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: 'name', searchTerms: ['Joh*oe'], operator: OperatorType.startsWithEndsWith },
-          { 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: 'DESC' },
-        ],
-        pagination: { pageNumber: this.isWithCursor ? 1 : 2, pageSize: 20 }, // if cursor based, start at page 1
-      },
-      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,
-            },
-          ],
-          filterQueryOverride: ({ fieldName, columnDef, columnFilterOperator, searchValues }) => {
-            if (columnFilterOperator === OperatorType.custom && columnDef?.id === 'name') {
-              // technically speaking GraphQL isn't a database query language like SQL, it's an application query language.
-              // What that means is that GraphQL won't let you write arbitrary queries out of the box.
-              // It will only support the types of queries defined in your GraphQL schema.
-              // see this SO: https://stackoverflow.com/a/37981802/1212166
-              return { field: fieldName, operator: 'Like', value: searchValues[0] };
-            }
-            return;
-          },
-          useCursor: this.isWithCursor, // sets pagination strategy, if true requires a call to setPageInfo() when graphql call returns
-          // 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> {
-    let pageInfo: CursorPageInfo;
-    if (this.angularGrid?.paginationService) {
-      const { paginationService } = this.angularGrid;
-      // there seems to a timing issue where when you click "cursor" it requests the data before the pagination-service is initialized...
-      const pageNumber = (paginationService as any)._initialized ? paginationService.getCurrentPageNumber() : 1;
-      // In the real world, each node item would be A,B,C...AA,AB,AC, etc and so each page would actually be something like A-T, T-AN
-      // but for this mock data it's easier to represent each page as
-      // Page1: A-B
-      // Page2: B-C
-      // Page3: C-D
-      // Page4: D-E
-      // Page5: E-F
-      const startCursor = String.fromCharCode('A'.charCodeAt(0) + pageNumber - 1);
-      const endCursor = String.fromCharCode(startCursor.charCodeAt(0) + 1);
-      pageInfo = {
-        hasPreviousPage: paginationService.dataFrom === 0,
-        hasNextPage: paginationService.dataTo === 100,
-        startCursor,
-        endCursor,
-      };
-    } else {
-      pageInfo = {
-        hasPreviousPage: false,
-        hasNextPage: true,
-        startCursor: 'A',
-        endCursor: 'B',
-      };
-    }
-
-    // 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,
-          pageInfo,
-        },
-      },
-    };
-
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        this.graphqlQuery = this.angularGrid.backendService!.buildQuery();
-        if (this.isWithCursor) {
-          // When using cursor pagination, the pagination service needs to be updated with the PageInfo data from the latest request
-          // This might be done automatically if using a framework specific slickgrid library
-          // Note because of this timeout, this may cause race conditions with rapid clicks!
-          this.angularGrid?.paginationService?.setCursorPageInfo(mockedResult.data[GRAPHQL_QUERY_DATASET_NAME].pageInfo);
-        }
-        resolve(mockedResult);
-      }, this.serverWaitDelay);
-    });
-  }
-
-  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 currentYear = new Date().getFullYear();
-    const presetLowestDay = `${currentYear}-01-01`;
-    const presetHighestDay = `${currentYear}-02-15`;
-
-    // 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' },
-    ]);
-  }
-
-  resetToOriginalPresets() {
-    const currentYear = new Date().getFullYear();
-    const presetLowestDay = `${currentYear}-01-01`;
-    const presetHighestDay = `${currentYear}-02-15`;
-
-    this.angularGrid.filterService.updateFilters([
-      // 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: 'name', searchTerms: ['Joh*oe'], operator: OperatorType.startsWithEndsWith },
-      { columnId: 'company', searchTerms: ['xyz'], operator: 'IN' },
-
-      // use a date range with 2 searchTerms values
-      { columnId: 'finish', searchTerms: [presetLowestDay, presetHighestDay], operator: OperatorType.rangeInclusive },
-    ]);
-    this.angularGrid.sortService.updateSorting([
-      // direction can written as 'asc' (uppercase or lowercase) and/or use the SortDirection type
-      { columnId: 'name', direction: 'asc' },
-      { columnId: 'company', direction: 'DESC' },
-    ]);
-    setTimeout(() => {
-      this.angularGrid.paginationService?.changeItemPerPage(20);
-      this.angularGrid.paginationService?.goToPageNumber(2);
-    });
-  }
-
-  setIsWithCursor(isWithCursor: boolean) {
-    this.isWithCursor = isWithCursor;
-    this.resetOptions({ useCursor: this.isWithCursor });
-    return true;
-  }
-
-  private resetOptions(options: Partial<GraphqlServiceOption>) {
-    this.displaySpinner(true);
-    const graphqlService = this.gridOptions.backendServiceApi!.service as GraphqlService;
-    this.angularGrid.paginationService!.setCursorBased(options.useCursor as boolean);
-    graphqlService.updateOptions(options);
-    this.gridOptions = { ...this.gridOptions };
-    this.angularGrid.paginationService?.goToFirstPage();
-  }
-
-  switchLanguage() {
-    const nextLanguage = this.selectedLanguage === 'en' ? 'fr' : 'en';
-    this.subscriptions.push(
-      this.translate.use(nextLanguage).subscribe(() => {
-        this.selectedLanguage = nextLanguage;
-      })
-    );
-  }
-}

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

@@ -1,56 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    Example 7: Header Button Plugin
-    <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-headerbutton.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    This example demonstrates using the <b>Slick.Plugins.HeaderButtons</b> plugin to easily add buttons to colum headers. These buttons can
-    be specified directly in the column definition, and are very easy to configure and use. (<a
-      href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/header-menu-and-header-buttons"
-      target="_blank"
-      >Wiki docs</a
-    >)
-    <ul>
-      <li>Resize the 1st column to see all icon/command</li>
-      <li>Mouse hover the 2nd column to see it's icon/command</li>
-      <li>For all the other columns, click on top-right red circle icon to enable highlight of negative numbers.</li>
-      <li>
-        Use override callback functions to change the properties of show/hide, enable/disable the menu or certain item(s) from the list
-      </li>
-      <ol>
-        <li>These callbacks are: "itemVisibilityOverride", "itemUsabilityOverride"</li>
-        <li>for example the "Column E" does not show the header button via "itemVisibilityOverride"</li>
-        <li>for example the "Column J" header button is displayed but it not usable via "itemUsabilityOverride"</li>
-      </ol>
-    </ul>
-  </div>
-
-  <h5>Grid 1</h5>
-  <angular-slickgrid
-    gridId="grid7-1"
-    [columns]="columnDefinitions1"
-    [options]="gridOptions1"
-    [dataset]="dataset1"
-    (onAngularGridCreated)="angularGrid1Ready($event.detail)"
-  >
-  </angular-slickgrid>
-
-  <br />
-  <h5>Grid 2 - <span class="subtitle">with both Header Buttons & Menus</span></h5>
-  <angular-slickgrid
-    gridId="grid7-2"
-    [columns]="columnDefinitions2"
-    [options]="gridOptions2"
-    [dataset]="dataset2"
-    (onAngularGridCreated)="angularGrid2Ready($event.detail)"
-  >
-  </angular-slickgrid>
-</div>

package/src/demos/examples/example07.component.scss

@@ -1,10 +0,0 @@
-/* 1st grid */
-#grid7-1 {
-  --slick-header-button-float: right;
-}
-
-/* 2nd grid */
-#grid7-2 {
-  --slick-header-button-margin: 4px 0 50px 0;
-  --slick-header-button-float: left;
-}