angular-slickgrid 8.14.1 → 9.0.0

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

@@ -0,0 +1,50 @@
+<div class="container-fluid">
+  <h2>
+    Example 41: Drag & Drop
+    <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-drag-recycle.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+  </h2>
+
+  <h6 class="subtitle italic">
+    <ul>
+      <li>Click to select, Ctrl-click to toggle selection(s).</li>
+      <li>Drag one or more rows by the handle icon to reorder.</li>
+      <li>Drag one or more rows by selection and drag to the recycle bin to delete.</li>
+    </ul>
+  </h6>
+
+  <div class="row">
+    <div class="col">
+      <div class="grid41">
+        <angular-slickgrid
+          gridId="grid41"
+          [columns]="columnDefinitions"
+          [options]="gridOptions"
+          [dataset]="dataset"
+          (onAngularGridCreated)="angularGridReady($event.detail)"
+          (onDragInit)="handleOnDragInit($event.detail.eventData)"
+          (onDragStart)="handleOnDragStart($event.detail.eventData)"
+          (onDrag)="handleOnDrag($event.detail.eventData, $event.detail.args)"
+          (onDragEnd)="handleOnDragEnd($event.detail.eventData, $event.detail.args)"
+        >
+          <ng-template #slickgridHeader>
+            <div class="grid-header">
+              <label>Santa's TODO list:</label>
+            </div>
+          </ng-template>
+        </angular-slickgrid>
+      </div>
+    </div>
+
+    <div class="col">
+      <div id="dropzone" class="recycle-bin mt-4">Recycle Bin</div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,42 @@
+.drag-message {
+  position: absolute;
+  display: inline-block;
+  padding: 4px 10px;
+  background: #e0e0e0;
+  border: 1px solid gray;
+  z-index: 99999;
+  border-radius: 8px;
+  box-shadow: 2px 2px 6px silver;
+}
+
+.grid-header {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  font-weight: bold;
+  height: 35px;
+  padding-left: 8px;
+  width: 100%;
+}
+
+.recycle-bin {
+  background: transparent;
+  cursor: default;
+  width: 120px;
+  border: 2px solid #e4e4e4;
+  background: beige;
+  padding: 4px;
+  font-size: 12pt;
+  font-weight: bold;
+  color: black;
+  text-align: center;
+  border-radius: 10px;
+
+  &.drag-dropzone {
+    border: 2px dashed pink;
+  }
+  &.drag-hover {
+    background: pink;
+    cursor: crosshair;
+  }
+}

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

@@ -0,0 +1,229 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { AngularGridInstance, Column, Editors, Formatters, GridOption, SlickGlobalEditorLock } from '../../library';
+
+@Component({
+  templateUrl: './example41.component.html',
+  styleUrls: ['./example41.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: false,
+})
+export class Example41Component implements OnInit {
+  angularGrid!: AngularGridInstance;
+  gridOptions!: GridOption;
+  columnDefinitions!: Column[];
+  dataset!: any[];
+  dragHelper?: HTMLElement;
+  dragRows: number[] = [];
+  dragMode = '';
+
+  ngOnInit(): void {
+    this.defineGrids();
+
+    // mock a dataset
+    this.dataset = this.mockData();
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
+  isBrowserDarkModeEnabled() {
+    return window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+  }
+
+  /* Define grid Options and Columns */
+  defineGrids() {
+    this.columnDefinitions = [
+      {
+        id: 'name',
+        name: 'Name',
+        field: 'name',
+        width: 300,
+        cssClass: 'cell-title',
+        editor: { model: Editors.Text },
+        validator: this.requiredFieldValidator,
+      },
+      {
+        id: 'complete',
+        name: 'Complete',
+        width: 60,
+        cssClass: 'cell-effort-driven',
+        field: 'complete',
+        cannotTriggerInsert: true,
+        formatter: Formatters.checkmarkMaterial,
+        editor: { model: Editors.Checkbox },
+      },
+    ];
+
+    this.gridOptions = {
+      enableAutoResize: false,
+      gridHeight: 225,
+      gridWidth: 800,
+      rowHeight: 33,
+      enableCellNavigation: true,
+      enableRowSelection: true,
+      enableRowMoveManager: true,
+      rowSelectionOptions: {
+        // True (Single Selection), False (Multiple Selections)
+        selectActiveRow: false,
+      },
+      rowMoveManager: {
+        columnIndexPosition: 0,
+        cancelEditOnDrag: true,
+        disableRowSelection: true,
+        hideRowMoveShadow: false,
+        onBeforeMoveRows: this.onBeforeMoveRows.bind(this),
+        onMoveRows: this.onMoveRows.bind(this),
+
+        // 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
+      },
+    };
+  }
+
+  mockData() {
+    return [
+      { id: 0, name: 'Make a list', complete: true },
+      { id: 1, name: 'Check it twice', complete: false },
+      { id: 2, name: `Find out who's naughty`, complete: false },
+      { id: 3, name: `Find out who's nice`, complete: false },
+    ];
+  }
+
+  onBeforeMoveRows(e: MouseEvent | TouchEvent, data: { rows: number[]; insertBefore: number }) {
+    for (const dataRow of data.rows) {
+      // no point in moving before or after itself
+      if (dataRow === data.insertBefore || dataRow === data.insertBefore - 1) {
+        e.stopPropagation();
+        return false;
+      }
+    }
+    return true;
+  }
+
+  onMoveRows(_e: MouseEvent | TouchEvent, args: { rows: number[]; insertBefore: number }) {
+    const extractedRows: any[] = [];
+    const rows = args.rows;
+    const insertBefore = args.insertBefore;
+    const left = this.dataset.slice(0, insertBefore);
+    const right = this.dataset.slice(insertBefore, this.dataset.length);
+
+    rows.sort((a, b) => a - b);
+
+    for (const row of rows) {
+      extractedRows.push(this.dataset[row]);
+    }
+
+    rows.reverse();
+
+    for (const row of rows) {
+      if (row < insertBefore) {
+        left.splice(row, 1);
+      } else {
+        right.splice(row - insertBefore, 1);
+      }
+    }
+
+    this.dataset = left.concat(extractedRows.concat(right));
+
+    const selectedRows: number[] = [];
+    for (let i = 0; i < rows.length; i++) {
+      selectedRows.push(left.length + i);
+    }
+
+    this.angularGrid.slickGrid?.resetActiveCell();
+    this.dataset = [...this.dataset];
+  }
+
+  handleOnDragInit(e: CustomEvent) {
+    // prevent the grid from cancelling drag'n'drop by default
+    e.stopImmediatePropagation();
+  }
+
+  handleOnDragStart(e: CustomEvent) {
+    const cell = this.angularGrid.slickGrid?.getCellFromEvent(e);
+
+    if (!cell || cell.cell === 0) {
+      this.dragMode = '';
+      return;
+    }
+
+    const row = cell.row;
+    if (!this.dataset[row]) {
+      return;
+    }
+
+    if (SlickGlobalEditorLock.isActive()) {
+      return;
+    }
+
+    e.stopImmediatePropagation();
+    this.dragMode = 'recycle';
+
+    let selectedRows: number[] = this.angularGrid.slickGrid?.getSelectedRows() || [];
+
+    if (!selectedRows.length || selectedRows.findIndex((row) => row === row) === -1) {
+      selectedRows = [row];
+      this.angularGrid.slickGrid?.setSelectedRows(selectedRows);
+    }
+
+    this.dragRows = selectedRows;
+    const dragCount = selectedRows.length;
+
+    const dragMsgElm = document.createElement('span');
+    dragMsgElm.className = 'drag-message';
+    dragMsgElm.textContent = `Drag to Recycle Bin to delete ${dragCount} selected row(s)`;
+    this.dragHelper = dragMsgElm;
+    document.body.appendChild(dragMsgElm);
+    document.querySelector<HTMLDivElement>('#dropzone')?.classList.add('drag-dropzone');
+
+    return dragMsgElm;
+  }
+
+  handleOnDrag(e: MouseEvent, args: any) {
+    if (this.dragMode !== 'recycle') {
+      return;
+    }
+    if (this.dragHelper instanceof HTMLElement) {
+      this.dragHelper.style.top = `${e.pageY + 5}px`;
+      this.dragHelper.style.left = `${e.pageX + 5}px`;
+    }
+
+    // add/remove pink background color when hovering recycle bin
+    const dropzoneElm = document.querySelector<HTMLDivElement>('#dropzone')!;
+    if (args.target instanceof HTMLElement && (args.target.id === 'dropzone' || args.target === dropzoneElm)) {
+      dropzoneElm.classList.add('drag-hover'); // OR: dd.target.style.background = 'pink';
+    } else {
+      dropzoneElm.classList.remove('drag-hover');
+    }
+  }
+
+  handleOnDragEnd(e: CustomEvent, args: any) {
+    if (this.dragMode != 'recycle') {
+      return;
+    }
+    this.dragHelper?.remove();
+    document.querySelector<HTMLDivElement>('#dropzone')?.classList.remove('drag-dropzone', 'drag-hover');
+
+    if (this.dragMode != 'recycle' || args.target.id !== 'dropzone') {
+      return;
+    }
+
+    // reaching here means that we'll remove the row that we started dragging from the dataset
+    const rowsToDelete = this.dragRows.sort().reverse();
+    for (const rowToDelete of rowsToDelete) {
+      this.dataset.splice(rowToDelete, 1);
+    }
+    this.angularGrid.slickGrid?.invalidate();
+    this.angularGrid.slickGrid?.setSelectedRows([]);
+    this.dataset = [...this.dataset];
+  }
+
+  requiredFieldValidator(value: any) {
+    if (value == null || value == undefined || !value.length) {
+      return { valid: false, msg: 'This is a required field' };
+    } else {
+      return { valid: true, msg: null };
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    Example 42: Custom Pagination
+    <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-custom-pagination.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle">
+    You can create a Custom Pagination by passing an Angular Custom Component and it must <code>implements BasePaginationComponent</code>.
+    Any of the pagination controls could be moved anywhere on the page (for example we purposely moved the page size away from the rest of
+    the pagination elements).
+  </div>
+
+  <div>
+    <button class="btn btn-outline-secondary btn-icon" (click)="togglePaginationPosition()" data-text="toggle-pagination-btn">
+      <span class="mdi mdi-swap-vertical"></span>
+      <span>Toggle Pagination Position</span>
+    </button>
+
+    <span class="margin-15px">
+      Page Size
+      <input
+        type="text"
+        class="input is-small is-narrow"
+        data-test="page-size-input"
+        [(ngModel)]="pageSize"
+        (ngModelChange)="setPaginationSize($event)"
+        style="width: 55px"
+      />
+    </span>
+  </div>
+
+  <angular-slickgrid
+    gridId="grid42"
+    [columns]="columnDefinitions"
+    [options]="gridOptions"
+    [dataset]="dataset"
+    (onAngularGridCreated)="angularGridReady($event.detail)"
+  >
+  </angular-slickgrid>
+</div>

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

@@ -0,0 +1,203 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  AngularGridInstance,
+  AngularUtilService,
+  Column,
+  Filters,
+  Formatters,
+  GridOption,
+  MultipleSelectOption,
+  SliderRangeOption,
+} from '../../library';
+import { CustomPagerComponent } from './grid-custom-pager.component';
+
+const NB_ITEMS = 5000;
+
+function randomBetween(min: number, max: number): number {
+  return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+@Component({
+  templateUrl: './example42.component.html',
+  providers: [AngularUtilService],
+  standalone: false,
+})
+export class Example42Component implements OnInit {
+  pageSize = 50;
+  columnDefinitions: Column[] = [];
+  gridContainerElm!: HTMLDivElement;
+  gridOptions!: GridOption;
+  dataset: any[] = [];
+  paginationPosition: 'bottom' | 'top' = 'top';
+  angularGrid!: AngularGridInstance;
+
+  constructor(protected readonly angularUtilService: AngularUtilService) {}
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
+  ngOnInit(): void {
+    this.defineGrid();
+
+    // mock a dataset
+    this.dataset = this.loadData(NB_ITEMS);
+  }
+
+  /* Define grid Options and Columns */
+  defineGrid() {
+    this.columnDefinitions = [
+      {
+        id: 'title',
+        name: 'Title',
+        field: 'id',
+        minWidth: 100,
+        sortable: true,
+        filterable: true,
+        formatter: (_row, _cell, val) => `Task ${val}`,
+        params: { useFormatterOuputToFilter: true },
+      },
+      {
+        id: 'description',
+        name: 'Description',
+        field: 'description',
+        filterable: true,
+        sortable: true,
+        minWidth: 80,
+      },
+      {
+        id: 'percentComplete',
+        name: '% Complete',
+        field: 'percentComplete',
+        minWidth: 120,
+        sortable: true,
+        customTooltip: { position: 'center' },
+        formatter: Formatters.progressBar,
+        type: 'number',
+        filterable: true,
+        filter: {
+          model: Filters.sliderRange,
+          maxValue: 100, // or you can use the options as well
+          operator: 'RangeInclusive', // defaults to inclusive
+          options: {
+            hideSliderNumbers: false, // you can hide/show the slider numbers on both side
+            min: 0,
+            step: 5,
+          } as SliderRangeOption,
+        },
+      },
+      {
+        id: 'start',
+        name: 'Start',
+        field: 'start',
+        formatter: Formatters.dateIso,
+        sortable: true,
+        minWidth: 75,
+        width: 100,
+        exportWithFormatter: true,
+        type: 'date',
+        filterable: true,
+        filter: { model: Filters.compoundDate },
+      },
+      {
+        id: 'finish',
+        name: 'Finish',
+        field: 'finish',
+        formatter: Formatters.dateIso,
+        sortable: true,
+        minWidth: 75,
+        width: 120,
+        exportWithFormatter: true,
+        type: 'date',
+        filterable: true,
+        filter: {
+          model: Filters.dateRange,
+        },
+      },
+      {
+        id: 'duration',
+        field: 'duration',
+        name: 'Duration',
+        maxWidth: 90,
+        type: 'number',
+        sortable: true,
+        filterable: true,
+        filter: {
+          model: Filters.input,
+          operator: 'RangeExclusive', // defaults to exclusive
+        },
+      },
+      {
+        id: 'completed',
+        name: 'Completed',
+        field: 'completed',
+        minWidth: 85,
+        maxWidth: 90,
+        formatter: Formatters.checkmarkMaterial,
+        exportWithFormatter: true, // you can set this property in the column definition OR in the grid options, column def has priority over grid options
+        filterable: true,
+        filter: {
+          collection: [
+            { value: '', label: '' },
+            { value: true, label: 'True' },
+            { value: false, label: 'False' },
+          ],
+          model: Filters.singleSelect,
+          options: { autoAdjustDropHeight: true } as MultipleSelectOption,
+        },
+      },
+    ];
+
+    this.gridOptions = {
+      autoResize: {
+        container: '#demo-container',
+        bottomPadding: this.paginationPosition === 'top' ? -1 : 38, // use a negative bottom padding since we've prepended custom pagination
+      },
+      enableExcelCopyBuffer: true,
+      enableFiltering: true,
+      customPaginationComponent: CustomPagerComponent, // load our Custom Pagination Component
+      enablePagination: true,
+      pagination: {
+        pageSize: this.pageSize,
+      },
+      rowHeight: 40,
+    };
+  }
+
+  loadData(itemCount: number): any[] {
+    // mock a dataset
+    const tempDataset: any[] = [];
+    for (let i = 0, ln = itemCount; i < ln; i++) {
+      const randomDuration = randomBetween(0, 365);
+      const randomYear = randomBetween(new Date().getFullYear(), new Date().getFullYear() + 1);
+      const randomMonth = randomBetween(0, 12);
+      const randomDay = randomBetween(10, 28);
+      const randomPercent = randomBetween(0, 100);
+
+      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
+        finish: new Date(randomYear, randomMonth, randomDay),
+        completed: randomPercent === 100 ? true : false,
+      });
+    }
+
+    return tempDataset;
+  }
+
+  setPaginationSize(pageSize: number) {
+    this.angularGrid.paginationService?.changeItemPerPage(pageSize);
+  }
+
+  togglePaginationPosition() {
+    const gridContainerElm = document.querySelector(`#${this.gridOptions.gridContainerId || ''}`) as HTMLElement;
+    this.paginationPosition = this.paginationPosition === 'top' ? 'bottom' : 'top';
+    (this.angularGrid.paginationComponent as CustomPagerComponent)?.disposeElement();
+    (this.angularGrid.paginationComponent as CustomPagerComponent)?.renderPagination(gridContainerElm, this.paginationPosition);
+  }
+}

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

@@ -0,0 +1,94 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    Example 43: colspan/rowspan - Employees Timesheets
+    <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/grid43.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+    <button
+      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
+      type="button"
+      data-test="toggle-subtitle"
+      (click)="hideSubTitle = !hideSubTitle"
+    >
+      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
+    </button>
+  </h2>
+
+  <div class="subtitle" [hidden]="hideSubTitle">
+    <p class="italic example-details">
+      <b>NOTES</b>: <code>rowspan</code> is an opt-in feature, because of its small perf hit (it needs to loop through all row metadatas to
+      map all rowspan), and requires the <code>enableCellRowSpan</code> grid option to be enabled to work properly. The
+      <code>colspan</code>/<code>rowspan</code> are both using DataView item metadata and are both based on row indexes and will
+      <b>not</b> keep the row in sync with the data. It is really up to you the user to update the metadata logic of how and where the cells
+      should span when a side effect kicks in. (i.e: Filtering/Sorting/Paging/Column Reorder... will <b>not</b> change/update the spanning
+      in the grid by itself and that is why they these features are all disabled in this example). Also, column/row freezing (pinning) are
+      also not supported, or at least not recommended unless you know exactly what you're doing (like in this demo here because we know our
+      pinning doesn't intersect)! Any freezing column/row that could intersect with a <code>colspan</code>/<code>rowspan</code>
+      <b>will cause problems</b>.
+    </p>
+  </div>
+
+  <button
+    class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
+    data-test="goto-up"
+    (click)="navigateUp()"
+    title="from an active cell, navigate to cell above"
+  >
+    <span class="mdi mdi-chevron-down mdi-rotate-180"></span>
+    Navigate Up Cell
+  </button>
+  <button
+    class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
+    data-test="goto-down"
+    (click)="navigateDown()"
+    title="from an active cell, navigate to cell below"
+  >
+    <span class="mdi mdi-chevron-down"></span>
+    Navigate Down Cell
+  </button>
+  <button
+    class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
+    data-test="goto-prev"
+    (click)="navigatePrev()"
+    title="from an active cell, navigate to previous left cell"
+  >
+    <span class="mdi mdi-chevron-down mdi-rotate-90"></span>
+    Navigate to Left Cell
+  </button>
+  <button
+    class="ms-1 btn btn-outline-secondary btn-sm btn-icon"
+    data-test="goto-next"
+    (click)="navigateNext()"
+    title="from an active cell, navigate to next right cell"
+  >
+    <span class="mdi mdi-chevron-down mdi-rotate-270"></span>
+    Navigate to Right Cell
+  </button>
+  <button class="ms-2 btn btn-outline-secondary btn-sm btn-icon mx-1" data-test="toggle-employee-id" (click)="toggleEmployeeIdVisibility()">
+    Show/Hide EmployeeID
+  </button>
+  <button class="ms-1 btn btn-outline-secondary btn-sm btn-icon mx-1" (click)="toggleEditing()" data-test="toggle-editing">
+    <span class="mdi mdi-pencil-outline"></span>
+    <span
+      >Toggle Editing: <span id="isEditable" class="text-italic">{{ isEditable }}</span></span
+    >
+  </button>
+  <button class="btn btn-outline-secondary btn-sm btn-icon mx-1" data-test="export-excel-btn" (click)="exportToExcel()">
+    <i class="mdi mdi-file-excel-outline text-success"></i> Export to Excel
+  </button>
+
+  <angular-slickgrid
+    gridId="grid43"
+    [columns]="columnDefinitions"
+    [options]="gridOptions"
+    [dataset]="dataset"
+    (onAngularGridCreated)="angularGridReady($event.detail)"
+  >
+  </angular-slickgrid>
+</div>

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

@@ -0,0 +1,30 @@
+#grid43 {
+  --slick-border-color: #d4d4d4;
+  // --slick-cell-border-left: 1px solid var(--slick-border-color);
+  --slick-header-menu-display: none;
+  --slick-header-column-height: 20px;
+  --slick-grid-border-color: #d4d4d4;
+  --slick-row-selected-color: #d4ebfd;
+  --slick-cell-active-box-shadow: inset 0 0 0 1px #3ca4ff;
+
+  --slick-row-mouse-hover-box-shadow: 0;
+  --slick-cell-odd-background-color: #fff;
+  --slick-cell-border-right: 1px solid var(--slick-border-color);
+  --slick-cell-border-bottom: 0;
+  --slick-cell-border-top: 1px solid var(--slick-border-color);
+  --slick-header-filter-row-border-bottom: 1px solid var(--slick-border-color);
+  --slick-cell-border-left: 0;
+  --slick-cell-box-shadow: none;
+  --slick-row-mouse-hover-color: #fff;
+  --slick-cell-display: flex;
+
+  .slick-cell.rowspan {
+    // background: white;
+    z-index: 9;
+  }
+  .slick-cell {
+    display: flex;
+    align-items: center;
+    /* justify-content: center; */
+  }
+}