angular-slickgrid 9.0.0 → 9.0.1

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

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

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

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