angular-slickgrid 8.14.0 → 9.0.0

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

@@ -0,0 +1,87 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    Example 4: Client Side Sort/Filter
+    <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-clientside.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle">
+    Sort/Filter on client side only using SlickGrid DataView (<a
+      href="https://ghiscoding.gitbook.io/angular-slickgrid/column-functionalities/sorting"
+      target="_blank"
+      >Wiki docs</a
+    >)
+    <br />
+    <ul class="small">
+      <li>Support multi-sort (by default), hold "Shift" key and click on the next column to sort.</li>
+      <li>All column types support the following operators: (>, >=, <, <=, <>, !=, =, ==, *)</li>
+      <ul>
+        <li>Example: >100 ... >=2001-01-01 ... >02/28/17</li>
+        <li>
+          <b>Note:</b> For filters to work properly (default is string), make sure to provide a FieldType (type is against the dataset, not
+          the Formatter)
+        </li>
+      </ul>
+      <li>Date Filters</li>
+      <ul>
+        <li>
+          FieldType of dateUtc/date (from dataset) can use an extra option of "filterSearchType" to let user filter more easily. For
+          example, in the "UTC Date" field below, you can type "&gt;02/28/2017", also when dealing with UTC you have to take the time
+          difference in consideration.
+        </li>
+      </ul>
+      <li>On String filters, (*) can be used as startsWith (Hello* => matches "Hello Word") ... endsWith (*Doe => matches: "John Doe")</li>
+      <li>
+        Custom Filter are now possible, "Description" column below, is a customized InputFilter with different placeholder. See
+        <a href="https://ghiscoding.gitbook.io/angular-slickgrid/column-functionalities/custom-filter" target="_blank"
+          >Wiki - Custom Filter</a
+        >
+      </li>
+      <li>MultipleSelect & SingeSelect Filters can use a regular "collection" or "collectionAsync" to load it asynchronously</li>
+    </ul>
+  </div>
+
+  <br />
+  <span *ngIf="metrics" style="margin-right: 10px">
+    <b>Metrics:</b> {{ metrics.startTime | date: "yyyy-MM-dd hh:mm aaaaa'm'" }} | {{ metrics.itemCount }} of
+    {{ metrics.totalItemCount }} items
+  </span>
+  <div class="btn-group" role="group">
+    <button class="btn btn-sm btn-outline-secondary btn-icon" data-test="scroll-top-btn" (click)="scrollGridTop()">
+      <i class="mdi mdi-arrow-down mdi-rotate-180"></i>
+    </button>
+    <button class="btn btn-sm btn-outline-secondary btn-icon" data-test="scroll-bottom-btn" (click)="scrollGridBottom()">
+      <i class="mdi mdi-arrow-down"></i>
+    </button>
+  </div>
+  <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="clear-filters" (click)="angularGrid.filterService.clearFilters()">
+    Clear Filters
+  </button>
+  <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="clear-sorting" (click)="angularGrid.sortService.clearSorting()">
+    Clear Sorting
+  </button>
+  <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="set-dynamic-filter" (click)="setFiltersDynamically()">
+    Set Filters Dynamically
+  </button>
+  <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="set-dynamic-sorting" (click)="setSortingDynamically()">
+    Set Sorting Dynamically
+  </button>
+
+  <angular-slickgrid
+    gridId="grid4"
+    [columns]="columnDefinitions"
+    [options]="gridOptions"
+    [dataset]="dataset"
+    (onAngularGridCreated)="angularGridReady($event.detail)"
+    (onGridStateChanged)="gridStateChanged($event.detail)"
+    (onBeforeGridDestroy)="saveCurrentGridState()"
+    (onRowCountChanged)="refreshMetrics($event.detail.eventData, $event.detail.args)"
+  >
+  </angular-slickgrid>
+</div>

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

@@ -0,0 +1,326 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
+import { TranslateService } from '@ngx-translate/core';
+import {
+  AngularGridInstance,
+  Column,
+  Filters,
+  Formatters,
+  GridOption,
+  GridStateChange,
+  Metrics,
+  type MultipleSelectOption,
+  OperatorType,
+  type VanillaCalendarOption,
+} from '../../library';
+import { CustomInputFilter } from './custom-inputFilter';
+
+function randomBetween(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+const NB_ITEMS = 10500;
+const URL_SAMPLE_COLLECTION_DATA = 'assets/data/collection_500_numbers.json';
+
+@Component({
+  templateUrl: './example04.component.html',
+  standalone: false,
+})
+export class Example4Component implements OnInit {
+  angularGrid!: AngularGridInstance;
+  columnDefinitions: Column[] = [];
+  gridOptions!: GridOption;
+  dataset!: any[];
+  metrics!: Metrics;
+
+  constructor(
+    private http: HttpClient,
+    private translate: TranslateService
+  ) {}
+
+  ngOnInit(): void {
+    this.columnDefinitions = [
+      {
+        id: 'title',
+        name: 'Title',
+        field: 'title',
+        sortable: true,
+        minWidth: 55,
+        filterable: true,
+        filter: { model: Filters.compoundInputText },
+      },
+      {
+        id: 'description',
+        name: 'Description',
+        field: 'description',
+        filterable: true,
+        sortable: true,
+        minWidth: 80,
+        filter: {
+          model: CustomInputFilter, // create a new instance to make each Filter independent from each other
+          enableTrimWhiteSpace: true, // or use global "enableFilterTrimWhiteSpace" to trim on all Filters
+        },
+      },
+      {
+        id: 'duration',
+        name: 'Duration (days)',
+        field: 'duration',
+        sortable: true,
+        type: 'number',
+        exportCsvForceToKeepAsString: true,
+        minWidth: 55,
+        filterable: true,
+        filter: {
+          collectionAsync: this.http.get<{ option: string; value: string }[]>(URL_SAMPLE_COLLECTION_DATA),
+          // collectionFilterBy & collectionSortBy accept a single or multiple options
+          // we can exclude certains values 365 & 360 from the dropdown filter
+          collectionFilterBy: [
+            {
+              property: 'value',
+              operator: OperatorType.notEqual,
+              value: 360,
+            },
+            {
+              property: 'value',
+              operator: OperatorType.notEqual,
+              value: 365,
+            },
+          ],
+          collectionSortBy: {
+            property: 'value',
+            sortDesc: true,
+            fieldType: 'number',
+          },
+          customStructure: {
+            value: 'value',
+            label: 'label',
+            optionLabel: 'value', // if selected text is too long, we can use option labels instead
+            labelSuffix: 'text',
+          },
+          collectionOptions: {
+            separatorBetweenTextLabels: ' ',
+            filterResultAfterEachPass: 'chain', // options are "merge" or "chain" (defaults to "chain")
+          },
+          model: Filters.multipleSelect,
+
+          // we could add certain option(s) to the "multiple-select" plugin
+          options: {
+            maxHeight: 250,
+            width: 175,
+
+            // if we want to display shorter text as the selected text (on the select filter itself, parent element)
+            // we can use "useSelectOptionLabel" or "useSelectOptionLabelToHtml" the latter will parse html
+            useSelectOptionLabelToHtml: true,
+          } as MultipleSelectOption,
+        },
+      },
+      {
+        id: 'complete',
+        name: '% Complete',
+        field: 'percentComplete',
+        formatter: Formatters.percentCompleteBar,
+        minWidth: 70,
+        type: 'number',
+        sortable: true,
+        filterable: true,
+        filter: { model: Filters.compoundInputNumber },
+      },
+      {
+        id: 'start',
+        name: 'Start',
+        field: 'start',
+        formatter: Formatters.dateIso,
+        sortable: true,
+        minWidth: 75,
+        type: 'date',
+        filterable: true,
+        filter: { model: Filters.compoundDate },
+      },
+      {
+        id: 'usDateShort',
+        name: 'US Date Short',
+        field: 'usDateShort',
+        sortable: true,
+        minWidth: 70,
+        width: 70,
+        type: 'dateUsShort',
+        exportWithFormatter: true,
+        filterable: true,
+        filter: { model: Filters.compoundDate },
+      },
+      {
+        id: 'utcDate',
+        name: 'UTC Date',
+        field: 'utcDate',
+        formatter: Formatters.dateTimeIsoAmPm,
+        sortable: true,
+        minWidth: 115,
+        type: 'dateUtc',
+        exportWithFormatter: true,
+        outputType: 'dateTimeIsoAmPm',
+        filterable: true,
+        filter: {
+          model: Filters.compoundDate,
+          // override any of the date picker options through "options"
+          options: { displayDateMin: 'today' } as VanillaCalendarOption,
+        },
+      },
+      {
+        id: 'effort-driven',
+        name: 'Effort Driven',
+        field: 'effortDriven.isEffort',
+        minWidth: 85,
+        maxWidth: 85,
+        type: 'boolean',
+        sortable: true,
+        exportCustomFormatter: Formatters.complexObject,
+
+        // to pass multiple formatters, use the params property
+        // also these formatters are executed in sequence, so if you want the checkmark to work correctly, it has to be the last formatter defined
+        formatter: Formatters.multiple,
+        params: { formatters: [Formatters.complexObject, Formatters.checkmarkMaterial] },
+
+        // when the "field" string includes the dot "." notation, the library will consider this to be a complex object and Filter accordingly
+        filterable: true,
+        filter: {
+          // We can also add HTML text to be rendered (any bad script will be sanitized) but we have to opt-in, else it will be sanitized
+          // enableRenderHtml: true,
+          // collection: [{ value: '', label: '' }, { value: true, label: 'True', labelPrefix: `<i class="mdi mdi-check"></i> ` }, { value: false, label: 'False' }],
+
+          collection: [
+            { isEffort: '', label: '' },
+            { isEffort: true, label: 'True' },
+            { isEffort: false, label: 'False' },
+          ],
+          customStructure: {
+            value: 'isEffort',
+            label: 'label',
+          },
+          model: Filters.singleSelect,
+
+          // we could add certain option(s) to the "multiple-select" plugin
+          options: { autoAdjustDropHeight: true } as MultipleSelectOption,
+        },
+      },
+    ];
+
+    this.gridOptions = {
+      autoResize: {
+        container: '#demo-container',
+        rightPadding: 10,
+      },
+      enableExcelExport: true,
+      enableExcelCopyBuffer: true,
+      enableFiltering: true,
+      // enableFilterTrimWhiteSpace: true,
+      i18n: this.translate,
+      showCustomFooter: true, // display some metrics in the bottom custom footer
+
+      // use columnDef searchTerms OR use presets as shown below
+      presets: {
+        filters: [
+          { columnId: 'duration', searchTerms: [10, 98] },
+          // { columnId: 'complete', searchTerms: ['5'], operator: '>' },
+          { columnId: 'usDateShort', operator: '<', searchTerms: ['4/20/25'] },
+          // { columnId: 'effort-driven', searchTerms: [true] },
+        ],
+        sorters: [
+          { columnId: 'duration', direction: 'DESC' },
+          { columnId: 'complete', direction: 'ASC' },
+        ],
+      },
+      externalResources: [new ExcelExportService()],
+    };
+
+    // mock a dataset
+    this.dataset = this.mockData(NB_ITEMS);
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
+  mockData(itemCount: number, startingIndex = 0): any[] {
+    // mock a dataset
+    const tempDataset = [];
+    for (let i = startingIndex; i < startingIndex + itemCount; i++) {
+      const randomDuration = Math.round(Math.random() * 100);
+      const randomYear = randomBetween(2000, 2035);
+      const randomYearShort = randomBetween(10, 35);
+      const randomMonth = randomBetween(1, 12);
+      const randomMonthStr = randomMonth < 10 ? `0${randomMonth}` : randomMonth;
+      const randomDay = randomBetween(10, 28);
+      const randomPercent = randomBetween(0, 100);
+      const randomHour = randomBetween(10, 23);
+      const randomTime = randomBetween(10, 59);
+      const randomMilliseconds = `${randomBetween(1, 9)}${randomBetween(10, 99)}`;
+      const randomIsEffort = i % 3 === 0;
+
+      tempDataset.push({
+        id: i,
+        title: 'Task ' + i,
+        description: i % 5 ? 'desc ' + i : null, // also add some random to test NULL field
+        duration: randomDuration,
+        percentComplete: randomPercent,
+        percentCompleteNumber: randomPercent,
+        start: i % 4 ? null : new Date(randomYear, randomMonth, randomDay), // provide a Date format
+        usDateShort: `${randomMonth}/${randomDay}/${randomYearShort}`, // provide a date US Short in the dataset
+        utcDate: `${randomYear}-${randomMonthStr}-${randomDay}T${randomHour}:${randomTime}:${randomTime}.${randomMilliseconds}Z`,
+        effortDriven: {
+          isEffort: randomIsEffort,
+          label: randomIsEffort ? 'Effort' : 'NoEffort',
+        },
+      });
+    }
+    return tempDataset;
+  }
+
+  /** Dispatched event of a Grid State Changed event */
+  gridStateChanged(gridState: GridStateChange) {
+    console.log('Client sample, Grid State changed:: ', gridState.change);
+  }
+
+  /** Save current Filters, Sorters in LocaleStorage or DB */
+  saveCurrentGridState() {
+    console.log('Client sample, last Grid State:: ', this.angularGrid.gridStateService.getCurrentGridState());
+  }
+
+  setFiltersDynamically() {
+    // we can Set Filters Dynamically (or different filters) afterward through the FilterService
+    this.angularGrid.filterService.updateFilters([
+      { columnId: 'duration', searchTerms: [2, 25, 48, 50] },
+      { columnId: 'complete', searchTerms: [95], operator: '<' },
+      { columnId: 'effort-driven', searchTerms: [true] },
+      { columnId: 'start', operator: '>=', searchTerms: ['2001-02-28'] },
+    ]);
+  }
+
+  setSortingDynamically() {
+    this.angularGrid.sortService.updateSorting([
+      // orders matter, whichever is first in array will be the first sorted column
+      { columnId: 'duration', direction: 'ASC' },
+      { columnId: 'start', direction: 'DESC' },
+    ]);
+  }
+
+  refreshMetrics(e: Event, args: any) {
+    if (args && args.current >= 0) {
+      setTimeout(() => {
+        this.metrics = {
+          startTime: new Date(),
+          endTime: new Date(),
+          itemCount: (args && args.current) || 0,
+          totalItemCount: this.dataset.length || 0,
+        };
+      });
+    }
+  }
+
+  scrollGridBottom() {
+    this.angularGrid.slickGrid.navigateBottom();
+  }
+
+  scrollGridTop() {
+    this.angularGrid.slickGrid.navigateTop();
+  }
+}

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

@@ -0,0 +1,151 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    Example 5: Grid connected to Backend Server with OData
+    <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-odata.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="row">
+    <div class="col-sm-9">
+      <div class="subtitle">
+        Sorting/Paging connected to a Backend OData Service (<a
+          href="https://ghiscoding.gitbook.io/angular-slickgrid/backend-services/odata"
+          target="_blank"
+          >Docs</a
+        >).
+        <br />
+        <ul class="small">
+          <li>Only "Name" field is sortable for the demo (because we use JSON files), however "multiColumnSort: true" is also supported</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 (>, >=, <, <=, <>, !=, =, ==, *)</li>
+          <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>OData Service could be replaced by other Service type in the future (GraphQL or whichever you provide)</li>
+          <li>
+            You can also preload a grid with certain "presets" like Filters / Sorters / Pagination
+            <a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/grid-state-and-preset" target="_blank"
+              >Docs - Grid Preset</a
+            >
+          </li>
+          <li>
+            <span class="text-danger">NOTE:</span> For demo purposes, the last column (filter & sort) will always throw an error and its
+            only purpose is to demo what would happen when you encounter a backend server error (the UI should rollback to previous state
+            before you did the action). Also changing Page Size to 50,000 will also throw which again is for demo purposes.
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="col-sm-3">
+      <div class="alert alert-danger" *ngIf="errorStatus" data-test="error-status">
+        <em><strong>Backend Error:</strong> <span [innerHTML]="errorStatus"></span></em>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-sm-2">
+      <div [class]="status.class" role="alert" data-test="status">
+        <strong>Status: </strong> {{ status.text }}
+        <span [hidden]="!processing">
+          <i class="mdi mdi-sync mdi-spin-1s"></i>
+        </span>
+      </div>
+    </div>
+    <div class="col-sm-10">
+      <div class="alert alert-info" data-test="alert-odata-query">
+        <strong>OData Query:</strong> <span data-test="odata-query-result">{{ odataQuery }}</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-sm-4">
+      <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="set-dynamic-filter" (click)="setFiltersDynamically()">
+        Set Filters Dynamically
+      </button>
+      <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="set-dynamic-sorting" (click)="setSortingDynamically()">
+        Set Sorting Dynamically
+      </button>
+      <br />
+      <span *ngIf="metrics">
+        <b>Metrics:</b> {{ metrics.endTime | date: "yyyy-MM-dd hh:mm aaaaa'm'" }} | {{ metrics.executionTime }}ms |
+        {{ metrics.totalItemCount }} items
+      </span>
+    </div>
+
+    <div class="col-sm-8">
+      <label>OData Version: </label>
+      <span data-test="radioVersion">
+        <label class="radio-inline control-label" for="radio2">
+          <input
+            type="radio"
+            name="inlineRadioOptions"
+            data-test="version2"
+            id="radio2"
+            checked
+            [value]="2"
+            (change)="setOdataVersion(2)"
+          />
+          2
+        </label>
+        <label class="radio-inline control-label" for="radio4">
+          <input type="radio" name="inlineRadioOptions" data-test="version4" id="radio4" [value]="4" (change)="setOdataVersion(4)" /> 4
+        </label>
+      </span>
+      <label class="checkbox-inline control-label" for="enableCount" style="margin-left: 20px">
+        <input type="checkbox" id="enableCount" data-test="enable-count" [checked]="isCountEnabled" (click)="changeCountEnableFlag()" />
+        <span style="font-weight: bold">Enable Count</span> (add to OData query)
+      </label>
+      <label class="checkbox-inline control-label" for="enableSelect" style="margin-left: 20px">
+        <input type="checkbox" id="enableSelect" data-test="enable-select" [checked]="isSelectEnabled" (click)="changeEnableSelectFlag()" />
+        <span style="font-weight: bold">Enable Select</span> (add to OData query)
+      </label>
+      <label class="checkbox-inline control-label" for="enableExpand" style="margin-left: 20px">
+        <input type="checkbox" id="enableExpand" data-test="enable-expand" [checked]="isExpandEnabled" (click)="changeEnableExpandFlag()" />
+        <span style="font-weight: bold">Enable Expand</span> (add to OData query)
+      </label>
+    </div>
+  </div>
+  <div class="row mt-2 mb-1">
+    <div class="col-md-12">
+      <button class="btn btn-outline-danger btn-sm btn-icon" data-test="throw-page-error-btn" (click)="throwPageChangeError()">
+        <span>Throw Error Going to Last Page... </span>
+        <i class="mdi mdi-page-last"></i>
+      </button>
+
+      <span class="ms-2">
+        <label>Programmatically go to first/last page:</label>
+        <div class="btn-group" role="group">
+          <button class="btn btn-outline-secondary btn-xs btn-icon px-2" data-test="goto-first-page" (click)="goToFirstPage()">
+            <i class="mdi mdi-page-first"></i>
+          </button>
+          <button class="btn btn-outline-secondary btn-xs btn-icon px-2" data-test="goto-last-page" (click)="goToLastPage()">
+            <i class="mdi mdi-page-last"></i>
+          </button>
+        </div>
+      </span>
+    </div>
+  </div>
+
+  <angular-slickgrid
+    gridId="grid5"
+    [columns]="columnDefinitions"
+    [options]="gridOptions"
+    [paginationOptions]="paginationOptions"
+    [dataset]="dataset"
+    (onAngularGridCreated)="angularGridReady($event.detail)"
+    (onGridStateChanged)="gridStateChanged($event.detail)"
+    (onBeforeSort)="handleOnBeforeSort($event)"
+    (onBeforeSearchChange)="handleOnBeforeSearchChange($event)"
+    (onBeforePaginationChange)="handleOnBeforePaginationChange($event)"
+  >
+  </angular-slickgrid>
+</div>