angular-slickgrid 8.14.1 → 9.0.0

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

@@ -0,0 +1,504 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import {
+  Aggregator,
+  Aggregators,
+  AngularGridInstance,
+  Column,
+  Editors,
+  ExcelCellValueParserArgs,
+  ExcelGroupValueParserArgs,
+  Formatter,
+  Formatters,
+  GridOption,
+  GroupTotalFormatters,
+  Grouping,
+  SlickGrid,
+  SlickGroupTotals,
+} from '../../library';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
+
+interface GroceryItem {
+  id: number;
+  name: string;
+  qty: number;
+  price: number;
+  taxable: boolean;
+  subTotal: number;
+  taxes: number;
+  total: number;
+}
+
+/** Check if the current item (cell) is editable or not */
+function checkItemIsEditable(_dataContext: GroceryItem, columnDef: Column, grid: SlickGrid) {
+  const gridOptions = grid.getOptions();
+  const hasEditor = columnDef.editor;
+  const isGridEditable = gridOptions.editable;
+  const isEditable = isGridEditable && hasEditor;
+
+  return isEditable;
+}
+
+const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef, dataContext: GroceryItem, grid) => {
+  const isEditableItem = checkItemIsEditable(dataContext, columnDef, grid);
+  value = value === null || value === undefined ? '' : value;
+  const divElm = document.createElement('div');
+  divElm.className = 'editing-field';
+  if (value instanceof HTMLElement) {
+    divElm.appendChild(value);
+  } else {
+    divElm.textContent = value;
+  }
+  return isEditableItem ? divElm : value;
+};
+
+/** Create a Custom Aggregator in order to calculate all Totals by accessing other fields of the item dataContext */
+export class CustomSumAggregator implements Aggregator {
+  private _sum = 0;
+  private _type = 'sum' as const;
+
+  constructor(
+    public readonly field: number | string,
+    public taxRate: number
+  ) {}
+
+  get type(): string {
+    return this._type;
+  }
+
+  init() {
+    this._sum = 0;
+  }
+
+  accumulate(item: GroceryItem) {
+    if (this.field === 'taxes' && item['taxable']) {
+      this._sum += item['price'] * item['qty'] * (this.taxRate / 100);
+    }
+    if (this.field === 'subTotal') {
+      this._sum += item['price'] * item['qty'];
+    }
+    if (this.field === 'total') {
+      let taxes = 0;
+      if (item['taxable']) {
+        taxes = item['price'] * item['qty'] * (this.taxRate / 100);
+      }
+      this._sum += item['price'] * item['qty'] + taxes;
+    }
+  }
+
+  storeResult(groupTotals: any) {
+    if (!groupTotals || groupTotals[this._type] === undefined) {
+      groupTotals[this._type] = {};
+    }
+    groupTotals[this._type][this.field] = this._sum;
+  }
+}
+
+@Component({
+  templateUrl: './example36.component.html',
+  styleUrls: ['./example36.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  standalone: false,
+})
+export class Example36Component implements OnInit {
+  columnDefinitions: Column<GroceryItem>[] = [];
+  gridOptions!: GridOption;
+  dataset: GroceryItem[] = [];
+  angularGrid!: AngularGridInstance;
+  excelExportService: ExcelExportService;
+  isDataGrouped = false;
+  taxRate = 7.5;
+
+  constructor() {
+    this.excelExportService = new ExcelExportService();
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
+  ngOnInit() {
+    this.prepareGrid();
+
+    // mock a dataset
+    this.dataset = this.getData();
+  }
+
+  prepareGrid() {
+    this.columnDefinitions = [
+      {
+        id: 'sel',
+        name: '#',
+        field: 'id',
+        headerCssClass: 'header-centered',
+        cssClass: 'cell-unselectable',
+        excludeFromExport: true,
+        maxWidth: 30,
+      },
+      {
+        id: 'name',
+        name: 'Name',
+        field: 'name',
+        sortable: true,
+        width: 140,
+        filterable: true,
+        excelExportOptions: { width: 18 },
+      },
+      {
+        id: 'price',
+        name: 'Price',
+        field: 'price',
+        type: 'number',
+        editor: { model: Editors.float, decimal: 2 },
+        sortable: true,
+        width: 70,
+        filterable: true,
+        formatter: Formatters.dollar,
+        groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollarBold,
+        groupTotalsExcelExportOptions: {
+          style: {
+            font: { bold: true, size: 11.5 },
+            format: '$0.00', // currency format
+            border: { top: { color: 'FF747474', style: 'thick' } },
+          },
+          valueParserCallback: this.excelGroupCellParser.bind(this),
+        },
+      },
+      {
+        id: 'qty',
+        name: 'Quantity',
+        field: 'qty',
+        type: 'number',
+        groupTotalsFormatter: GroupTotalFormatters.sumTotalsBold,
+        groupTotalsExcelExportOptions: {
+          style: {
+            font: { bold: true, size: 11.5 },
+            border: { top: { color: 'FF747474', style: 'thick' } },
+          },
+          valueParserCallback: this.excelGroupCellParser.bind(this),
+        },
+        params: { minDecimal: 0, maxDecimal: 0 },
+        editor: { model: Editors.integer },
+        sortable: true,
+        width: 60,
+        filterable: true,
+      },
+      {
+        id: 'subTotal',
+        name: 'Sub-Total',
+        field: 'subTotal',
+        cssClass: 'text-sub-total',
+        type: 'number',
+        sortable: true,
+        width: 70,
+        filterable: true,
+        exportWithFormatter: false,
+        formatter: Formatters.multiple,
+        groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollarBold,
+        params: {
+          formatters: [
+            (_row, _cell, _value, _coldef, dataContext) => dataContext.price * dataContext.qty,
+            Formatters.dollar,
+          ] as Formatter[],
+        },
+        excelExportOptions: {
+          style: {
+            font: { outline: true, italic: true, color: 'FF215073' },
+            format: '$0.00', // currency format
+          },
+          width: 12,
+          valueParserCallback: this.excelRegularCellParser.bind(this),
+        },
+        groupTotalsExcelExportOptions: {
+          style: {
+            font: { bold: true, italic: true, size: 11.5 },
+            format: '$0.00', // currency format
+            border: { top: { color: 'FF747474', style: 'thick' } },
+          },
+          valueParserCallback: this.excelGroupCellParser.bind(this),
+        },
+      },
+      {
+        id: 'taxable',
+        name: 'Taxable',
+        field: 'taxable',
+        cssClass: 'text-center',
+        sortable: true,
+        width: 60,
+        filterable: true,
+        formatter: Formatters.checkmarkMaterial,
+        exportCustomFormatter: (_row, _cell, val) => (val ? '✓' : ''),
+        excelExportOptions: {
+          style: {
+            alignment: { horizontal: 'center' },
+          },
+        },
+      },
+      {
+        id: 'taxes',
+        name: 'Taxes',
+        field: 'taxes',
+        cssClass: 'text-taxes',
+        type: 'number',
+        sortable: true,
+        width: 70,
+        filterable: true,
+        formatter: Formatters.multiple,
+        groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollarBold,
+        params: {
+          formatters: [
+            (_row, _cell, _value, _coldef, dataContext) => {
+              if (dataContext.taxable) {
+                return dataContext.price * dataContext.qty * (this.taxRate / 100);
+              }
+              return null;
+            },
+            Formatters.dollar,
+          ] as Formatter[],
+        },
+        excelExportOptions: {
+          style: {
+            font: { outline: true, italic: true, color: 'FFC65911' },
+            format: '$0.00', // currency format
+          },
+          width: 12,
+          valueParserCallback: this.excelRegularCellParser.bind(this),
+        },
+        groupTotalsExcelExportOptions: {
+          style: {
+            font: { bold: true, italic: true, color: 'FFC65911', size: 11.5 },
+            format: '$0.00', // currency format
+            border: { top: { color: 'FF747474', style: 'thick' } },
+          },
+          valueParserCallback: this.excelGroupCellParser.bind(this),
+        },
+      },
+      {
+        id: 'total',
+        name: 'Total',
+        field: 'total',
+        type: 'number',
+        sortable: true,
+        width: 70,
+        filterable: true,
+        cssClass: 'text-total',
+        formatter: Formatters.multiple,
+        groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollarBold,
+        params: {
+          formatters: [
+            (_row, _cell, _value, _coldef, dataContext) => {
+              let subTotal = dataContext.price * dataContext.qty;
+              if (dataContext.taxable) {
+                subTotal += subTotal * (this.taxRate / 100);
+              }
+              return subTotal;
+            },
+            Formatters.dollar,
+          ] as Formatter[],
+        },
+        excelExportOptions: {
+          style: {
+            font: { outline: true, bold: true, color: 'FF005A9E' },
+            format: '$0.00', // currency format
+          },
+          width: 12,
+          valueParserCallback: this.excelRegularCellParser.bind(this),
+        },
+        groupTotalsExcelExportOptions: {
+          style: {
+            font: { bold: true, color: 'FF005A9E', size: 12 },
+            format: '$0.00',
+            border: { top: { color: 'FF747474', style: 'thick' } },
+          },
+          valueParserCallback: this.excelGroupCellParser.bind(this),
+        },
+      },
+    ];
+
+    this.gridOptions = {
+      autoAddCustomEditorFormatter: customEditableInputFormatter,
+      gridHeight: 410,
+      gridWidth: 750,
+      enableCellNavigation: true,
+      autoEdit: true,
+      autoCommitEdit: true,
+      editable: true,
+      rowHeight: 33,
+      formatterOptions: {
+        maxDecimal: 2,
+        minDecimal: 2,
+      },
+      enableGrouping: true,
+      externalResources: [this.excelExportService],
+      enableExcelExport: true,
+      excelExportOptions: {
+        filename: 'grocery-list',
+        sanitizeDataExport: true,
+        sheetName: 'Grocery List',
+        columnHeaderStyle: {
+          font: { color: 'FFFFFFFF' },
+          fill: { type: 'pattern', patternType: 'solid', fgColor: 'FF4a6c91' },
+        },
+
+        // optionally pass a custom header to the Excel Sheet
+        // a lot of the info can be found on Web Archive of Excel-Builder
+        // https://ghiscoding.gitbook.io/excel-builder-vanilla/cookbook/fonts-and-colors
+        customExcelHeader: (workbook, sheet) => {
+          const excelFormat = workbook.getStyleSheet().createFormat({
+            // every color is prefixed with FF, then regular HTML color
+            font: { size: 18, fontName: 'Calibri', bold: true, color: 'FFFFFFFF' },
+            alignment: { wrapText: true, horizontal: 'center' },
+            fill: { type: 'pattern', patternType: 'solid', fgColor: 'FF203764' },
+          });
+          sheet.setRowInstructions(0, { height: 40 }); // change height of row 0
+
+          // excel cells start with A1 which is upper left corner
+          const customTitle = 'Grocery Shopping List';
+          const lastCellMerge = this.isDataGrouped ? 'H1' : 'G1';
+          sheet.mergeCells('A1', lastCellMerge);
+          sheet.data.push([{ value: customTitle, metadata: { style: excelFormat.id } }]);
+        },
+      },
+    };
+  }
+
+  invalidateAll() {
+    // make sure to call both refresh/invalid in this order so that whenever a cell changes we recalculate all Groups
+    this.angularGrid.dataView?.refresh();
+    this.angularGrid.slickGrid?.invalidate();
+  }
+
+  updateTaxRate() {
+    // since Aggregator are cached and we provided the Tax Rate to our custom Aggregator,
+    // we need to recompile them by resetting the Group
+    if (this.isDataGrouped) {
+      this.groupByTaxable();
+    }
+
+    this.invalidateAll();
+  }
+
+  exportToExcel() {
+    this.excelExportService.exportToExcel();
+  }
+
+  excelGroupCellParser(totals: SlickGroupTotals, { columnDef, excelFormatId, dataRowIdx }: ExcelGroupValueParserArgs) {
+    const colOffset = 0; // col offset of 1x because we skipped 1st column OR 0 offset if we use a Group because the Group column replaces the skip
+    const rowOffset = 3; // row offset of 3x because: 1x Title, 1x Headers and Excel row starts at 1 => 3
+    const priceIdx = this.angularGrid.slickGrid?.getColumnIndex('price') || 0;
+    const qtyIdx = this.angularGrid.slickGrid?.getColumnIndex('qty') || 0;
+    const taxesIdx = this.angularGrid.slickGrid?.getColumnIndex('taxes') || 0;
+    const subTotalIdx = this.angularGrid.slickGrid?.getColumnIndex('subTotal') || 0;
+    const totalIdx = this.angularGrid.slickGrid?.getColumnIndex('total') || 0;
+    const groupItemCount = totals?.group?.count || 0;
+
+    // the code below calculates Excel column position dynamically, technically Price is at "B" and Qty is "C"
+    const excelPriceCol = `${String.fromCharCode('A'.charCodeAt(0) + priceIdx - colOffset)}`;
+    const excelQtyCol = `${String.fromCharCode('A'.charCodeAt(0) + qtyIdx - colOffset)}`;
+    const excelSubTotalCol = `${String.fromCharCode('A'.charCodeAt(0) + subTotalIdx - colOffset)}`;
+    const excelTaxesCol = `${String.fromCharCode('A'.charCodeAt(0) + taxesIdx - colOffset)}`;
+    const excelTotalCol = `${String.fromCharCode('A'.charCodeAt(0) + totalIdx - colOffset)}`;
+
+    let excelCol = '';
+    switch (columnDef.id) {
+      case 'price':
+        excelCol = excelPriceCol;
+        break;
+      case 'qty':
+        excelCol = excelQtyCol;
+        break;
+      case 'subTotal':
+        excelCol = excelSubTotalCol;
+        break;
+      case 'taxes':
+        excelCol = excelTaxesCol;
+        break;
+      case 'total':
+        excelCol = excelTotalCol;
+        break;
+    }
+    return {
+      value: `SUM(${excelCol}${dataRowIdx + rowOffset - groupItemCount}:${excelCol}${dataRowIdx + rowOffset - 1})`,
+      metadata: { type: 'formula', style: excelFormatId },
+    };
+  }
+
+  /**  We'll use a generic parser to reuse similar logic for all 3 calculable columns (SubTotal, Taxes, Total) */
+  excelRegularCellParser(_data: any, { columnDef, excelFormatId, dataRowIdx, dataContext }: ExcelCellValueParserArgs<GroceryItem>) {
+    // assuming that we want to calculate: (Price * Qty) => Sub-Total
+    const colOffset = !this.isDataGrouped ? 1 : 0; // col offset of 1x because we skipped 1st column OR 0 offset if we use a Group because the Group column replaces the skip
+    const rowOffset = 3; // row offset of 3x because: 1x Title, 1x Headers and Excel row starts at 1 => 3
+    const priceIdx = this.angularGrid.slickGrid?.getColumnIndex('price') || 0;
+    const qtyIdx = this.angularGrid.slickGrid?.getColumnIndex('qty') || 0;
+    const taxesIdx = this.angularGrid.slickGrid?.getColumnIndex('taxes') || 0;
+
+    // the code below calculates Excel column position dynamically, technically Price is at "B" and Qty is "C"
+    const excelPriceCol = `${String.fromCharCode('A'.charCodeAt(0) + priceIdx - colOffset)}${dataRowIdx + rowOffset}`;
+    const excelQtyCol = `${String.fromCharCode('A'.charCodeAt(0) + qtyIdx - colOffset)}${dataRowIdx + rowOffset}`;
+    const excelTaxesCol = `${String.fromCharCode('A'.charCodeAt(0) + taxesIdx - colOffset)}${dataRowIdx + rowOffset}`;
+
+    // `value` is our Excel cells to calculat (e.g.: "B4*C4")
+    // metadata `type` has to be set to "formula" and the `style` is what we defined in `excelExportOptions.style` which is `excelFormatId` in the callback arg
+
+    let excelVal = '';
+    switch (columnDef.id) {
+      case 'subTotal':
+        excelVal = `${excelPriceCol}*${excelQtyCol}`; // like "C4*D4"
+        break;
+      case 'taxes':
+        excelVal = dataContext.taxable ? `${excelPriceCol}*${excelQtyCol}*${this.taxRate / 100}` : '';
+        break;
+      case 'total':
+        excelVal = `(${excelPriceCol}*${excelQtyCol})+${excelTaxesCol}`;
+        break;
+    }
+    return { value: excelVal, metadata: { type: 'formula', style: excelFormatId } };
+  }
+
+  getData() {
+    let i = 1;
+    const datasetTmp = [
+      { id: i++, name: 'Oranges', qty: 4, taxable: false, price: 2.22 },
+      { id: i++, name: 'Apples', qty: 3, taxable: false, price: 1.55 },
+      { id: i++, name: 'Honeycomb Cereals', qty: 2, taxable: true, price: 4.55 },
+      { id: i++, name: 'Raisins', qty: 77, taxable: false, price: 0.23 },
+      { id: i++, name: 'Corn Flake Cereals', qty: 1, taxable: true, price: 6.62 },
+      { id: i++, name: 'Tomatoes', qty: 3, taxable: false, price: 1.88 },
+      { id: i++, name: 'Butter', qty: 1, taxable: false, price: 3.33 },
+      { id: i++, name: 'BBQ Chicken', qty: 1, taxable: false, price: 12.33 },
+      { id: i++, name: 'Chicken Wings', qty: 12, taxable: true, price: 0.53 },
+      { id: i++, name: 'Drinkable Yogurt', qty: 6, taxable: true, price: 1.22 },
+      { id: i++, name: 'Milk', qty: 3, taxable: true, price: 3.11 },
+    ] as GroceryItem[];
+
+    return datasetTmp;
+  }
+
+  clearGrouping() {
+    this.isDataGrouped = false;
+    this.angularGrid?.dataView?.setGrouping([]);
+  }
+
+  groupByTaxable() {
+    const checkIcon = 'mdi-check-box-outline';
+    const uncheckIcon = 'mdi-checkbox-blank-outline';
+    this.isDataGrouped = true;
+
+    this.angularGrid?.dataView?.setGrouping({
+      getter: 'taxable',
+      formatter: (g) =>
+        `Taxable: <span class="mdi ${g.value ? checkIcon : uncheckIcon} text-info"></span> <span class="text-primary">(${g.count} items)</span>`,
+      comparer: (a, b) => b.value - a.value,
+      aggregators: [
+        new Aggregators.Sum('price'),
+        new Aggregators.Sum('qty'),
+        new CustomSumAggregator('subTotal', this.taxRate),
+        new CustomSumAggregator('taxes', this.taxRate),
+        new CustomSumAggregator('total', this.taxRate),
+      ],
+      aggregateCollapsed: false,
+      lazyTotalsCalculation: false,
+    } as Grouping);
+
+    this.angularGrid?.dataView?.refresh();
+  }
+}

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

@@ -0,0 +1,30 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    Example 37: Footer Totals Row
+    <button class="btn btn-outline-secondary btn-sm ms-3" (click)="toggleDarkMode()" data-test="toggle-dark-mode">
+      <span class="mdi mdi-theme-light-dark"></span>
+      <span>Toggle Dark Mode</span>
+    </button>
+    <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-footer-totals.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle">Display a totals row at the end of the grid.</div>
+
+  <angular-slickgrid
+    gridId="grid37"
+    [columns]="columnDefinitions"
+    [options]="gridOptions"
+    [dataset]="dataset"
+    (onAngularGridCreated)="angularGridReady($event.detail)"
+    (onCellChange)="handleOnCellChange($event.detail.eventData, $event.detail.args)"
+    (onColumnsReordered)="handleOnColumnsReordered()"
+  >
+  </angular-slickgrid>
+</div>

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

@@ -0,0 +1,123 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AngularGridInstance, Column, Editors, GridOption, OnCellChangeEventArgs } from '../../library';
+
+const NB_ITEMS = 100;
+
+@Component({
+  templateUrl: './example37.component.html',
+  standalone: false,
+})
+export class Example37Component implements OnDestroy, OnInit {
+  private _darkMode = false;
+  columnDefinitions: Column[] = [];
+  gridOptions!: GridOption;
+  dataset!: any[];
+  angularGrid!: AngularGridInstance;
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+    this.updateAllTotals();
+  }
+
+  ngOnInit(): void {
+    this.defineGrid();
+
+    // mock a dataset
+    this.dataset = this.loadData(NB_ITEMS);
+  }
+
+  ngOnDestroy() {
+    document.querySelector('.panel-wm-content')!.classList.remove('dark-mode');
+    document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'light';
+  }
+
+  /* Define grid Options and Columns */
+  defineGrid() {
+    const columnDefs: Column[] = [];
+    for (let i = 0; i < 10; i++) {
+      columnDefs.push({
+        id: i,
+        name: String.fromCharCode('A'.charCodeAt(0) + i),
+        field: String(i),
+        type: 'number',
+        width: 58,
+        editor: { model: Editors.integer },
+      });
+    }
+    this.columnDefinitions = columnDefs;
+
+    this.gridOptions = {
+      autoEdit: true,
+      autoCommitEdit: true,
+      editable: true,
+      darkMode: this._darkMode,
+      gridHeight: 450,
+      gridWidth: 800,
+      enableCellNavigation: true,
+      rowHeight: 30,
+      createFooterRow: true,
+      showFooterRow: true,
+      footerRowHeight: 28,
+    };
+  }
+
+  loadData(itemCount: number) {
+    // mock a dataset
+    const datasetTmp: any[] = [];
+    for (let i = 0; i < itemCount; i++) {
+      const d = (datasetTmp[i] = {} as any);
+      d.id = i;
+      for (let j = 0; j < this.columnDefinitions.length; j++) {
+        d[j] = Math.round(Math.random() * 10);
+      }
+    }
+
+    return datasetTmp;
+  }
+
+  handleOnCellChange(_e: Event, args: OnCellChangeEventArgs) {
+    this.updateTotal(args.cell);
+  }
+
+  handleOnColumnsReordered() {
+    this.updateAllTotals();
+  }
+
+  toggleDarkMode() {
+    this._darkMode = !this._darkMode;
+    this.toggleBodyBackground();
+    this.angularGrid.slickGrid?.setOptions({ darkMode: this._darkMode });
+    this.updateAllTotals();
+  }
+
+  toggleBodyBackground() {
+    if (this._darkMode) {
+      document.querySelector<HTMLDivElement>('.panel-wm-content')!.classList.add('dark-mode');
+      document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'dark';
+    } else {
+      document.querySelector('.panel-wm-content')!.classList.remove('dark-mode');
+      document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'light';
+    }
+  }
+
+  updateAllTotals() {
+    let columnIdx = this.angularGrid.slickGrid?.getColumns().length || 0;
+    while (columnIdx--) {
+      this.updateTotal(columnIdx);
+    }
+  }
+
+  updateTotal(cell: number) {
+    const columnId = this.angularGrid.slickGrid?.getColumns()[cell].id as number;
+
+    let total = 0;
+    let i = this.dataset.length;
+    while (i--) {
+      total += parseInt(this.dataset[i][columnId], 10) || 0;
+    }
+    const columnElement = this.angularGrid.slickGrid?.getFooterRowColumn(columnId);
+    if (columnElement) {
+      columnElement.textContent = `Sum: ${total}`;
+    }
+  }
+}