angular-slickgrid 9.0.0 → 9.0.2

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

@@ -1,304 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { format as tempoFormat } from '@formkit/tempo';
-import { TranslateService } from '@ngx-translate/core';
-import { Subscription } from 'rxjs';
-import {
-  AngularGridInstance,
-  Column,
-  Filters,
-  Formatters,
-  GridOption,
-  GridState,
-  GridStateChange,
-  type MultipleSelectOption,
-  unsubscribeAllObservables,
-} from '../../library';
-
-function randomBetween(min: number, max: number) {
-  return Math.floor(Math.random() * (max - min + 1) + min);
-}
-const DEFAULT_PAGE_SIZE = 25;
-const LOCAL_STORAGE_KEY = 'gridState';
-const NB_ITEMS = 500;
-
-@Component({
-  templateUrl: './example15.component.html',
-  standalone: false,
-})
-export class Example15Component implements OnInit, OnDestroy {
-  private subscriptions: Subscription[] = [];
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset!: any[];
-  selectedLanguage: string;
-
-  constructor(private translate: TranslateService) {
-    this.selectedLanguage = this.translate.getDefaultLang();
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  ngOnDestroy() {
-    // also unsubscribe all Angular Subscriptions
-    unsubscribeAllObservables(this.subscriptions);
-  }
-
-  ngOnInit(): void {
-    const presets = JSON.parse(localStorage[LOCAL_STORAGE_KEY] || null);
-
-    // use some Grid State preset defaults if you wish or just restore from Locale Storage
-    // presets = presets || this.useDefaultPresets();
-    this.defineGrid(presets);
-
-    // always start with English for Cypress E2E tests to be consistent
-    const defaultLang = 'en';
-    this.translate.use(defaultLang);
-    this.selectedLanguage = defaultLang;
-  }
-
-  /** Clear the Grid State from Local Storage and reset the grid to it's original state */
-  clearGridStateFromLocalStorage() {
-    this.angularGrid.gridService.resetGrid(this.columnDefinitions);
-    this.angularGrid.paginationService!.changeItemPerPage(DEFAULT_PAGE_SIZE);
-    setTimeout(() => (localStorage[LOCAL_STORAGE_KEY] = null));
-  }
-
-  /* Define grid Options and Columns */
-  defineGrid(gridStatePresets?: GridState) {
-    // prepare a multiple-select array to filter with
-    const multiSelectFilterArray = [];
-    for (let i = 0; i < NB_ITEMS; i++) {
-      multiSelectFilterArray.push({ value: i, label: i });
-    }
-
-    this.columnDefinitions = [
-      {
-        id: 'title',
-        name: 'Title',
-        field: 'title',
-        nameKey: 'TITLE',
-        filterable: true,
-        sortable: true,
-        minWidth: 45,
-        width: 100,
-        filter: {
-          model: Filters.compoundInput,
-        },
-      },
-      {
-        id: 'description',
-        name: 'Description',
-        field: 'description',
-        filterable: true,
-        sortable: true,
-        minWidth: 80,
-        width: 100,
-        filter: {
-          model: Filters.input,
-          filterShortcuts: [
-            { titleKey: 'BLANK_VALUES', searchTerms: ['< A'], iconCssClass: 'mdi mdi-filter-minus-outline' },
-            { titleKey: 'NON_BLANK_VALUES', searchTerms: ['> A'], iconCssClass: 'mdi mdi-filter-plus-outline' },
-          ],
-        },
-      },
-      {
-        id: 'duration',
-        name: 'Duration (days)',
-        field: 'duration',
-        sortable: true,
-        type: 'number',
-        exportCsvForceToKeepAsString: true,
-        minWidth: 55,
-        width: 100,
-        nameKey: 'DURATION',
-        filterable: true,
-        filter: {
-          collection: multiSelectFilterArray,
-          model: Filters.multipleSelect,
-          // we could add certain option(s) to the "multiple-select" plugin
-          options: {
-            maxHeight: 250,
-            width: 175,
-          } as MultipleSelectOption,
-        },
-      },
-      {
-        id: 'complete',
-        name: '% Complete',
-        field: 'percentComplete',
-        nameKey: 'PERCENT_COMPLETE',
-        minWidth: 70,
-        type: 'number',
-        sortable: true,
-        width: 100,
-        formatter: Formatters.percentCompleteBar,
-        filterable: true,
-        filter: { model: Filters.slider, operator: '>' },
-      },
-      {
-        id: 'start',
-        name: 'Start',
-        field: 'start',
-        nameKey: 'START',
-        formatter: Formatters.dateIso,
-        sortable: true,
-        minWidth: 75,
-        exportWithFormatter: true,
-        width: 100,
-        type: 'date',
-        filterable: true,
-        filter: {
-          model: Filters.compoundDate,
-          filterShortcuts: [
-            { titleKey: 'PAST', searchTerms: [tempoFormat(new Date(), 'YYYY-MM-DD')], operator: '<', iconCssClass: 'mdi mdi-calendar' },
-            {
-              titleKey: 'FUTURE',
-              searchTerms: [tempoFormat(new Date(), 'YYYY-MM-DD')],
-              operator: '>',
-              iconCssClass: 'mdi mdi-calendar-clock',
-            },
-          ],
-        },
-      },
-      {
-        id: 'completed',
-        field: 'completed',
-        nameKey: 'COMPLETED',
-        minWidth: 85,
-        maxWidth: 85,
-        formatter: Formatters.checkmarkMaterial,
-        width: 100,
-        type: 'boolean',
-        sortable: true,
-        filterable: true,
-        filter: {
-          collection: [
-            { value: '', label: '' },
-            { value: true, label: 'True' },
-            { value: false, label: 'False' },
-          ],
-          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,
-      },
-      enableCheckboxSelector: true,
-      enableFiltering: true,
-      enableTranslate: true,
-      i18n: this.translate,
-      columnPicker: {
-        hideForceFitButton: true,
-      },
-      gridMenu: {
-        hideForceFitButton: true,
-        hideClearFrozenColumnsCommand: false,
-      },
-      headerMenu: {
-        hideFreezeColumnsCommand: false,
-      },
-      enablePagination: true,
-      pagination: {
-        pageSizes: [5, 10, 15, 20, 25, 30, 40, 50, 75, 100],
-        pageSize: DEFAULT_PAGE_SIZE,
-      },
-    };
-
-    // reload the Grid State with the grid options presets
-    if (gridStatePresets) {
-      this.gridOptions.presets = gridStatePresets;
-    }
-
-    this.dataset = this.getData(NB_ITEMS);
-  }
-
-  getData(count: number) {
-    // mock a dataset
-    const currentYear = new Date().getFullYear();
-    const tmpData: any[] = [];
-    for (let i = 0; i < count; i++) {
-      const randomDuration = Math.round(Math.random() * 100);
-      const randomYear = randomBetween(currentYear - 15, currentYear + 8);
-      const randomYearShort = randomBetween(10, 25);
-      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);
-
-      tmpData[i] = {
-        id: i,
-        title: 'Task ' + i,
-        etc: 'Something hidden ' + i,
-        description: i % 5 ? 'desc ' + i : null, // also add some random to test NULL field
-        duration: randomDuration,
-        percentComplete: randomPercent,
-        percentCompleteNumber: randomPercent,
-        start: 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}Z`,
-        completed: i % 3 === 0,
-      };
-    }
-    return tmpData;
-  }
-
-  /** Dispatched event of a Grid State Changed event */
-  gridStateChanged(gridStateChanges: GridStateChange) {
-    console.log('Client sample, Grid State changed:: ', gridStateChanges);
-    localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(gridStateChanges.gridState);
-  }
-
-  /** Save current Filters, Sorters in LocaleStorage or DB */
-  saveCurrentGridState() {
-    const gridState: GridState = this.angularGrid.gridStateService.getCurrentGridState();
-    console.log('Client sample, last Grid State:: ', gridState);
-    localStorage[LOCAL_STORAGE_KEY] = JSON.stringify(gridState);
-  }
-
-  switchLanguage() {
-    const nextLanguage = this.selectedLanguage === 'en' ? 'fr' : 'en';
-    this.subscriptions.push(
-      this.translate.use(nextLanguage).subscribe(() => {
-        this.selectedLanguage = nextLanguage;
-      })
-    );
-  }
-
-  useDefaultPresets() {
-    // use columnDef searchTerms OR use presets as shown below
-    return {
-      columns: [
-        { columnId: 'description', width: 170 }, // flip column position of Title/Description to Description/Title
-        { columnId: 'title', width: 55 },
-        { columnId: 'duration' },
-        { columnId: 'complete' },
-        { columnId: 'start' },
-        { columnId: 'usDateShort' },
-        { columnId: 'utcDate' },
-        // { columnId: 'completed' }, // to HIDE a column, simply ommit it from the preset array
-      ],
-      filters: [
-        { columnId: 'duration', searchTerms: [2, 22, 44] },
-        // { columnId: 'complete', searchTerms: ['5'], operator: '>' },
-        { columnId: 'usDateShort', operator: '<', searchTerms: ['4/20/25'] },
-        // { columnId: 'completed', searchTerms: [true] }
-      ],
-      sorters: [
-        { columnId: 'duration', direction: 'DESC' },
-        { columnId: 'complete', direction: 'ASC' },
-      ],
-    } as GridState;
-  }
-}

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

@@ -1,77 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    Example 16: Row Move & Checkbox Selector
-    <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-rowmove.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    This example demonstrates using the <b>Slick.Plugins.RowMoveManager</b> plugin to easily move a row in the grid.<br />
-    <ul>
-      <li>Click to select, Ctrl+Click to toggle selection, Shift+Click to select a range.</li>
-      <li>Drag one or more rows by the handle (icon) to reorder</li>
-      <li>If you plan to use Row Selection + Row Move, then use "singleRowMove: true" and "disableRowSelection: true"</li>
-      <li>You can change "columnIndexPosition" to move the icon position of any extension (RowMove, RowDetail or RowSelector icon)</li>
-      <ul>
-        <li>You will also want to enable the DataView "syncGridSelection: true" to keep row selection even after a row move</li>
-      </ul>
-      <li>
-        If you plan to use only Row Move, then you could keep default values (or omit them completely) of "singleRowMove: false" and
-        "disableRowSelection: false"
-      </li>
-      <ul>
-        <li>
-          SingleRowMove has the name suggest will only move 1 row at a time, by default it will move any row(s) that are selected unless you
-          disable the flag
-        </li>
-      </ul>
-    </ul>
-  </div>
-
-  <div class="row mb-2">
-    <div class="col-sm-12">
-      <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="hide-duration-btn" (click)="hideDurationColumnDynamically()">
-        <i class="mdi mdi-eye-off-outline"></i>
-        Dynamically Hide "Duration"
-      </button>
-      <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="disable-filters-btn" (click)="disableFilters()">
-        <i class="mdi mdi-close"></i>
-        Disable Filters
-      </button>
-      <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="disable-sorting-btn" (click)="disableSorting()">
-        <i class="mdi mdi-close"></i>
-        Disable Sorting
-      </button>
-      <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="toggle-filtering-btn" (click)="toggleFilter()">
-        <i class="mdi mdi-swap-vertical"></i>
-        Toggle Filtering
-      </button>
-      <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="toggle-sorting-btn" (click)="toggleSorting()">
-        <i class="mdi mdi-swap-vertical"></i>
-        Toggle Sorting
-      </button>
-      <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="add-crud-columns-btn" (click)="addEditDeleteColumns()">
-        <i class="mdi mdi-plus"></i>
-        Add Edit/Delete Columns
-      </button>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col-sm-12">
-      <angular-slickgrid
-        gridId="grid16"
-        [(columns)]="columnDefinitions"
-        [options]="gridOptions"
-        [dataset]="dataset"
-        (onAngularGridCreated)="angularGridReady($event.detail)"
-      >
-      </angular-slickgrid>
-    </div>
-  </div>
-</div>

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

@@ -1,277 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-import { AngularGridInstance, Column, ExtensionName, Filters, Formatters, GridOption, OnEventArgs } from '../../library';
-
-@Component({
-  templateUrl: './example16.component.html',
-  standalone: false,
-})
-export class Example16Component implements OnInit {
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  gridOptions!: GridOption;
-  dataset!: any[];
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-  }
-
-  get rowMoveInstance() {
-    return this.angularGrid?.extensionService?.getExtensionInstanceByName(ExtensionName.rowMoveManager) ?? {};
-  }
-
-  ngOnInit(): void {
-    this.columnDefinitions = [
-      { id: 'title', name: 'Title', field: 'title', filterable: true },
-      { id: 'duration', name: 'Duration', field: 'duration', filterable: true, sortable: true },
-      { id: '%', name: '% Complete', field: 'percentComplete', filterable: true, sortable: true },
-      {
-        id: 'start',
-        name: 'Start',
-        field: 'start',
-        filterable: true,
-        sortable: true,
-        filter: { model: Filters.compoundDate },
-      },
-      {
-        id: 'finish',
-        name: 'Finish',
-        field: 'finish',
-        filterable: true,
-        sortable: true,
-        filter: { model: Filters.compoundDate },
-      },
-      {
-        id: 'effort-driven',
-        name: 'Completed',
-        field: 'effortDriven',
-        formatter: Formatters.checkmarkMaterial,
-        filterable: true,
-        sortable: true,
-        filter: {
-          collection: [
-            { value: '', label: '' },
-            { value: true, label: 'True' },
-            { value: false, label: 'False' },
-          ],
-          model: Filters.singleSelect,
-        },
-      },
-    ];
-
-    this.gridOptions = {
-      enableAutoResize: true,
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10,
-      },
-      enableCellNavigation: true,
-      enableFiltering: true,
-      enableCheckboxSelector: true,
-      checkboxSelector: {
-        columnIndexPosition: 1,
-
-        // you can toggle these 2 properties to show the "select all" checkbox in different location
-        hideInFilterHeaderRow: false,
-        hideInColumnTitleRow: true,
-      },
-      enableRowSelection: true,
-      rowSelectionOptions: {
-        // True (Single Selection), False (Multiple Selections)
-        selectActiveRow: false,
-      },
-      dataView: {
-        syncGridSelection: true, // enable this flag so that the row selection follows the row even if we move it to another position
-      },
-      enableRowMoveManager: true,
-      rowMoveManager: {
-        // when using Row Move + Row Selection, you want to move only a single row and we will enable the following flags so it doesn't cancel row selection
-        singleRowMove: true,
-        disableRowSelection: true,
-        cancelEditOnDrag: true,
-        hideRowMoveShadow: false,
-        width: 30,
-        onBeforeMoveRows: this.onBeforeMoveRow.bind(this),
-        onMoveRows: this.onMoveRows.bind(this),
-
-        // you can change the move icon position of any extension (RowMove, RowDetail or RowSelector icon)
-        // note that you might have to play with the position when using multiple extension
-        // since it really depends on which extension get created first to know what their real position are
-        columnIndexPosition: 0,
-
-        // you can also override the usability of the rows, for example make every 2nd row the only moveable rows,
-        // usabilityOverride: (row, dataContext, grid) => dataContext.id % 2 === 1
-      },
-      showCustomFooter: true,
-      presets: {
-        // you can presets row selection here as well, you can choose 1 of the following 2 ways of setting the selection
-        // by their index position in the grid (UI) or by the object IDs, the default is "dataContextIds" and if provided it will use it and disregard "gridRowIndexes"
-        // the RECOMMENDED is to use "dataContextIds" since that will always work even with Pagination, while "gridRowIndexes" is only good for 1 page
-        rowSelection: {
-          // gridRowIndexes: [2],       // the row position of what you see on the screen (UI)
-          dataContextIds: [1, 2, 6, 7], // (recommended) select by your data object IDs
-        },
-      },
-    };
-
-    this.getData();
-  }
-
-  getData() {
-    // Set up some test columns.
-    const mockDataset = [];
-    for (let i = 0; i < 500; i++) {
-      mockDataset[i] = {
-        id: i,
-        title: 'Task ' + i,
-        duration: Math.round(Math.random() * 25) + ' days',
-        percentComplete: Math.round(Math.random() * 100),
-        start: '01/01/2009',
-        finish: '01/05/2009',
-        effortDriven: i % 5 === 0,
-      };
-    }
-    this.dataset = mockDataset;
-  }
-
-  onBeforeMoveRow(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number }) {
-    for (const rowIdx of data.rows) {
-      // no point in moving before or after itself
-      if (
-        rowIdx === data.insertBefore ||
-        (rowIdx === data.insertBefore - 1 && data.insertBefore - 1 !== this.angularGrid.dataView.getItemCount())
-      ) {
-        e.stopPropagation();
-        return false;
-      }
-    }
-    return true;
-  }
-
-  onMoveRows(_e: MouseEvent | TouchEvent, args: any) {
-    // rows and insertBefore references,
-    // note that these references are assuming that the dataset isn't filtered at all
-    // which is not always the case so we will recalcualte them and we won't use these reference afterward
-    const rows = args.rows as number[];
-    const insertBefore = args.insertBefore;
-    const extractedRows = [];
-
-    // when moving rows, we need to cancel any sorting that might happen
-    // we can do this by providing an undefined sort comparer
-    // which basically destroys the current sort comparer without resorting the dataset, it basically keeps the previous sorting
-    this.angularGrid.dataView.sort(undefined as any, true);
-
-    // the dataset might be filtered/sorted,
-    // so we need to get the same dataset as the one that the SlickGrid DataView uses
-    const tmpDataset = this.angularGrid.dataView.getItems();
-    const filteredItems = this.angularGrid.dataView.getFilteredItems();
-
-    const itemOnRight = this.angularGrid.dataView.getItem(insertBefore);
-    const insertBeforeFilteredIdx = itemOnRight
-      ? this.angularGrid.dataView.getIdxById(itemOnRight.id)
-      : this.angularGrid.dataView.getItemCount();
-
-    const filteredRowItems: any[] = [];
-    rows.forEach((row) => filteredRowItems.push(filteredItems[row]));
-    const filteredRows = filteredRowItems.map((item) => this.angularGrid.dataView.getIdxById(item.id));
-
-    const left = tmpDataset.slice(0, insertBeforeFilteredIdx);
-    const right = tmpDataset.slice(insertBeforeFilteredIdx, tmpDataset.length);
-
-    // convert into a final new dataset that has the new order
-    // we need to resort with
-    rows.sort((a: number, b: number) => a - b);
-    for (const filteredRow of filteredRows) {
-      if (filteredRow !== undefined) {
-        extractedRows.push(tmpDataset[filteredRow]);
-      }
-    }
-    filteredRows.reverse();
-    for (const row of filteredRows) {
-      if (row !== undefined && insertBeforeFilteredIdx !== undefined) {
-        if (row < insertBeforeFilteredIdx) {
-          left.splice(row, 1);
-        } else {
-          right.splice(row - insertBeforeFilteredIdx, 1);
-        }
-      }
-    }
-
-    // final updated dataset, we need to overwrite the DataView dataset (and our local one) with this new dataset that has a new order
-    const finalDataset = left.concat(extractedRows.concat(right));
-    this.dataset = finalDataset; // update dataset and re-render the grid
-  }
-
-  hideDurationColumnDynamically() {
-    // -- you can hide by one Id or multiple Ids:
-    // hideColumnById(id, options), hideColumnByIds([ids], options)
-    // you can also provide options, defaults are: { autoResizeColumns: true, triggerEvent: true, hideFromColumnPicker: false, hideFromGridMenu: false }
-
-    this.angularGrid.gridService.hideColumnById('duration');
-
-    // or with multiple Ids and extra options
-    // this.angularGrid.gridService.hideColumnByIds(['duration', 'finish'], { hideFromColumnPicker: true, hideFromGridMenu: false });
-  }
-
-  // Disable/Enable Filtering/Sorting functionalities
-  // --------------------------------------------------
-
-  disableFilters() {
-    this.angularGrid.filterService.disableFilterFunctionality(true);
-  }
-
-  disableSorting() {
-    this.angularGrid.sortService.disableSortFunctionality(true);
-  }
-
-  addEditDeleteColumns() {
-    if (this.columnDefinitions[0].id !== 'change-symbol') {
-      const newCols = [
-        {
-          id: 'change-symbol',
-          field: 'id',
-          excludeFromColumnPicker: true,
-          excludeFromGridMenu: true,
-          excludeFromHeaderMenu: true,
-          formatter: Formatters.icon,
-          params: { iconCssClass: 'mdi mdi-pencil pointer' },
-          minWidth: 30,
-          maxWidth: 30,
-          onCellClick: (clickEvent: Event, args: OnEventArgs) => {
-            alert(`Technically we should Edit "Task ${args.dataContext.id}"`);
-          },
-        },
-        {
-          id: 'delete-symbol',
-          field: 'id',
-          excludeFromColumnPicker: true,
-          excludeFromGridMenu: true,
-          excludeFromHeaderMenu: true,
-          formatter: Formatters.icon,
-          params: { iconCssClass: 'mdi mdi-trash-can pointer' },
-          minWidth: 30,
-          maxWidth: 30,
-          onCellClick: (e: Event, args: OnEventArgs) => {
-            if (confirm('Are you sure?')) {
-              this.angularGrid.gridService.deleteItemById(args.dataContext.id);
-            }
-          },
-        },
-      ];
-
-      this.columnDefinitions.splice(0, 0, newCols[0], newCols[1]);
-      this.columnDefinitions = this.columnDefinitions.slice(); // or use spread operator [...cols] to trigger change
-    }
-  }
-
-  // or Toggle Filtering/Sorting functionalities
-  // ---------------------------------------------
-
-  toggleFilter() {
-    this.angularGrid.filterService.toggleFilterFunctionality();
-  }
-
-  toggleSorting() {
-    this.angularGrid.sortService.toggleSortFunctionality();
-  }
-}