angular-slickgrid 8.14.0 → 9.0.0

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

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

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

@@ -0,0 +1,277 @@
+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();
+  }
+}