angular-slickgrid 4.2.0 → 4.2.1

package/src/app/examples/grid-draggrouping.component.ts

@@ -1,397 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-import { ExcelExportService } from '@slickgrid-universal/excel-export';
-import { TextExportService } from '@slickgrid-universal/text-export';
-
-import {
-  AngularGridInstance,
-  Aggregators,
-  Column,
-  DelimiterType,
-  FieldType,
-  FileType,
-  Filters,
-  Formatters,
-  GridOption,
-  Grouping,
-  GroupingGetterFunction,
-  GroupTotalFormatters,
-  SortDirectionNumber,
-  SortComparers,
-} from './../modules/angular-slickgrid';
-
-@Component({
-  templateUrl: './grid-draggrouping.component.html'
-})
-export class GridDraggableGroupingComponent implements OnInit {
-  title = 'Example 19: Draggable Grouping & Aggregators';
-  subTitle = `
-      <ul>
-        <li><a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Grouping-&-Aggregators" target="_blank">Wiki docs</a></li>
-        <li>This example shows 3 ways of grouping</li>
-        <ol>
-          <li>Drag any Column Header on the top placeholder to group by that column (support moti-columns grouping by adding more columns to the drop area).</li>
-          <li>Use buttons and defined functions to group by wichever field you want</li>
-          <li>Use the Select dropdown to group, the position of the Selects represent the grouping level</li>
-        </ol>
-        <li>Fully dynamic and interactive multi-level grouping with filtering and aggregates ovor 50'000 items</li>
-        <li>Each grouping level can have its own aggregates (over child rows, child groups, or all descendant rows)..</li>
-        <li>Use "Aggregators" and "GroupTotalFormatters" directly from Angular-Slickgrid</li>
-      </ul>
-    `;
-
-  angularGrid!: AngularGridInstance;
-  columnDefinitions!: Column[];
-  dataset!: any[];
-  dataviewObj: any;
-  draggableGroupingPlugin: any;
-  durationOrderByCount = false;
-  gridObj: any;
-  gridOptions!: GridOption;
-  processing = false;
-  selectedGroupingFields: Array<string | GroupingGetterFunction> = ['', '', ''];
-  excelExportService = new ExcelExportService();
-  textExportService = new TextExportService();
-
-  constructor() {
-    // define the grid options & columns and then create the grid itself
-    this.loadData(500);
-    this.defineGrid();
-  }
-
-  ngOnInit(): void {
-    // populate the dataset once the grid is ready
-    this.defineGrid();
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-    this.gridObj = angularGrid.slickGrid; // grid object
-    this.dataviewObj = angularGrid.dataView;
-  }
-
-  /* Define grid Options and Columns */
-  defineGrid() {
-    this.columnDefinitions = [
-      {
-        id: 'title', name: 'Title', field: 'title',
-        width: 70, minWidth: 50,
-        cssClass: 'cell-title',
-        filterable: true,
-        sortable: true,
-        grouping: {
-          getter: 'title',
-          formatter: (g) => `Title: ${g.value}  <span style="color:green">(${g.count} items)</span>`,
-          aggregators: [
-            new Aggregators.Sum('cost')
-          ],
-          aggregateCollapsed: false,
-          collapsed: false
-        }
-      },
-      {
-        id: 'duration', name: 'Duration', field: 'duration',
-        width: 70,
-        sortable: true,
-        filterable: true,
-        filter: { model: Filters.slider, operator: '>=' },
-        type: FieldType.number,
-        groupTotalsFormatter: GroupTotalFormatters.sumTotals,
-        grouping: {
-          getter: 'duration',
-          formatter: (g) => `Duration: ${g.value}  <span style="color:green">(${g.count} items)</span>`,
-          comparer: (a, b) => {
-            return this.durationOrderByCount ? (a.count - b.count) : SortComparers.numeric(a.value, b.value, SortDirectionNumber.asc);
-          },
-          aggregators: [
-            new Aggregators.Sum('cost')
-          ],
-          aggregateCollapsed: false,
-          collapsed: false
-        }
-      },
-      {
-        id: 'percentComplete', name: '% Complete', field: 'percentComplete',
-        minWidth: 70, width: 90,
-        formatter: Formatters.percentCompleteBar,
-        type: FieldType.number,
-        filterable: true,
-        filter: { model: Filters.compoundSlider },
-        sortable: true,
-        groupTotalsFormatter: GroupTotalFormatters.avgTotalsPercentage,
-        grouping: {
-          getter: 'percentComplete',
-          formatter: (g) => `% Complete: ${g.value}  <span style="color:green">(${g.count} items)</span>`,
-          aggregators: [
-            new Aggregators.Sum('cost')
-          ],
-          aggregateCollapsed: false,
-          collapsed: false
-        },
-        params: { groupFormatterPrefix: '<i>Avg</i>: ' }
-      },
-      {
-        id: 'start', name: 'Start', field: 'start', minWidth: 60,
-        sortable: true,
-        filterable: true,
-        filter: { model: Filters.compoundDate },
-        formatter: Formatters.dateIso,
-        type: FieldType.dateUtc,
-        outputType: FieldType.dateIso,
-        exportWithFormatter: true,
-        grouping: {
-          getter: 'start',
-          formatter: (g) => `Start: ${g.value}  <span style="color:green">(${g.count} items)</span>`,
-          aggregators: [
-            new Aggregators.Sum('cost')
-          ],
-          aggregateCollapsed: false,
-          collapsed: false
-        }
-      },
-      {
-        id: 'finish', name: 'Finish', field: 'finish',
-        minWidth: 60,
-        sortable: true,
-        filterable: true,
-        filter: { model: Filters.compoundDate },
-        formatter: Formatters.dateIso,
-        type: FieldType.dateUtc,
-        outputType: FieldType.dateIso,
-        exportWithFormatter: true,
-        grouping: {
-          getter: 'finish',
-          formatter: (g) => `Finish: ${g.value} <span style="color:green">(${g.count} items)</span>`,
-          aggregators: [
-            new Aggregators.Sum('cost')
-          ],
-          aggregateCollapsed: false,
-          collapsed: false
-        }
-      },
-      {
-        id: 'cost', name: 'Cost', field: 'cost',
-        width: 90,
-        sortable: true,
-        filterable: true,
-        filter: { model: Filters.compoundInput },
-        formatter: Formatters.dollar,
-        groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollar,
-        type: FieldType.number,
-        grouping: {
-          getter: 'cost',
-          formatter: (g) => `Cost: ${g.value} <span style="color:green">(${g.count} items)</span>`,
-          aggregators: [
-            new Aggregators.Sum('cost')
-          ],
-          aggregateCollapsed: true,
-          collapsed: true
-        }
-      },
-      {
-        id: 'effortDriven', name: 'Effort-Driven', field: 'effortDriven',
-        width: 80, minWidth: 20, maxWidth: 100,
-        cssClass: 'cell-effort-driven',
-        sortable: true,
-        filterable: true,
-        filter: {
-          collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
-          model: Filters.singleSelect
-        },
-        formatter: Formatters.checkmark,
-        grouping: {
-          getter: 'effortDriven',
-          formatter: (g) => `Effort-Driven: ${g.value ? 'True' : 'False'} <span style="color:green">(${g.count} items)</span>`,
-          aggregators: [
-            new Aggregators.Sum('cost')
-          ],
-          collapsed: false
-        }
-      }
-    ];
-
-    this.gridOptions = {
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10
-      },
-      enableDraggableGrouping: true,
-      createPreHeaderPanel: true,
-      showPreHeaderPanel: true,
-      preHeaderPanelHeight: 40,
-      showCustomFooter: true,
-      enableFiltering: true,
-      // you could debounce/throttle the input text filter if you have lots of data
-      // filterTypingDebounce: 250,
-      enableSorting: true,
-      exportOptions: {
-        sanitizeDataExport: true
-      },
-      gridMenu: {
-        onCommand: (e, args) => {
-          if (args.command === 'toggle-preheader') {
-            // in addition to the grid menu pre-header toggling (internally), we will also clear grouping
-            this.clearGrouping();
-          }
-        },
-      },
-      draggableGrouping: {
-        dropPlaceHolderText: 'Drop a column header here to group by the column',
-        // groupIconCssClass: 'fa fa-outdent',
-        deleteIconCssClass: 'fa fa-times',
-        onGroupChanged: (e, args) => this.onGroupChanged(args),
-        onExtensionRegistered: (extension) => this.draggableGroupingPlugin = extension,
-      },
-      enableTextExport: true,
-      enableExcelExport: true,
-      excelExportOptions: { sanitizeDataExport: true },
-      textExportOptions: { sanitizeDataExport: true },
-      registerExternalResources: [this.excelExportService, this.textExportService],
-    };
-
-    this.loadData(500);
-  }
-
-  loadData(rowCount: number) {
-    // mock a dataset
-    this.dataset = [];
-    for (let i = 0; i < rowCount; i++) {
-      const randomYear = 2000 + Math.floor(Math.random() * 10);
-      const randomMonth = Math.floor(Math.random() * 11);
-      const randomDay = Math.floor((Math.random() * 29));
-      const randomPercent = Math.round(Math.random() * 100);
-
-      this.dataset[i] = {
-        id: 'id_' + i,
-        num: i,
-        title: 'Task ' + i,
-        duration: Math.round(Math.random() * 100) + '',
-        percentComplete: randomPercent,
-        percentCompleteNumber: randomPercent,
-        start: new Date(randomYear, randomMonth, randomDay),
-        finish: new Date(randomYear, (randomMonth + 1), randomDay),
-        cost: (i % 33 === 0) ? null : Math.round(Math.random() * 10000) / 100,
-        effortDriven: (i % 5 === 0)
-      };
-    }
-  }
-
-  clearGroupsAndSelects() {
-    this.clearGroupingSelects();
-    this.clearGrouping();
-  }
-
-  clearGrouping() {
-    if (this.draggableGroupingPlugin && this.draggableGroupingPlugin.setDroppedGroups) {
-      this.draggableGroupingPlugin.clearDroppedGroups();
-    }
-    this.gridObj.invalidate(); // invalidate all rows and re-render
-  }
-
-  clearGroupingSelects() {
-    this.selectedGroupingFields.forEach((g, i) => this.selectedGroupingFields[i] = '');
-  }
-
-  collapseAllGroups() {
-    this.dataviewObj.collapseAllGroups();
-  }
-
-  expandAllGroups() {
-    this.dataviewObj.expandAllGroups();
-  }
-
-  exportToExcel() {
-    this.excelExportService.exportToExcel({
-      filename: 'Export',
-      format: FileType.xlsx
-    });
-  }
-
-  exportToCsv(type = 'csv') {
-    this.textExportService.exportToFile({
-      delimiter: (type === 'csv') ? DelimiterType.comma : DelimiterType.tab,
-      filename: 'myExport',
-      format: (type === 'csv') ? FileType.csv : FileType.txt
-    });
-  }
-
-  groupByDuration() {
-    this.clearGrouping();
-    if (this.draggableGroupingPlugin && this.draggableGroupingPlugin.setDroppedGroups) {
-      this.showPreHeader();
-      this.draggableGroupingPlugin.setDroppedGroups('duration');
-      this.gridObj.invalidate(); // invalidate all rows and re-render
-    }
-  }
-
-  groupByDurationOrderByCount(sortedByCount = false) {
-    this.durationOrderByCount = sortedByCount;
-    this.clearGrouping();
-    this.groupByDuration();
-
-    // you need to manually add the sort icon(s) in UI
-    const sortColumns = sortedByCount ? [] : [{ columnId: 'duration', sortAsc: true }];
-    this.angularGrid.filterService.setSortColumnIcons(sortColumns);
-  }
-
-  groupByDurationEffortDriven() {
-    this.clearGrouping();
-    if (this.draggableGroupingPlugin && this.draggableGroupingPlugin.setDroppedGroups) {
-      this.showPreHeader();
-      this.draggableGroupingPlugin.setDroppedGroups(['duration', 'effortDriven']);
-      this.gridObj.invalidate(); // invalidate all rows and re-render
-    }
-  }
-
-  groupByFieldName(fieldName: string, index: number) {
-    this.clearGrouping();
-    if (this.draggableGroupingPlugin && this.draggableGroupingPlugin.setDroppedGroups) {
-      // get the field names from Group By select(s) dropdown, but filter out any empty fields
-      const groupedFields = this.selectedGroupingFields.filter((g) => g !== '');
-
-      this.showPreHeader();
-      this.draggableGroupingPlugin.setDroppedGroups(groupedFields);
-      this.gridObj.invalidate(); // invalidate all rows and re-render
-    }
-  }
-
-  onGroupChanged(change: { caller?: string; groupColumns: Grouping[] }) {
-    // the "caller" property might not be in the SlickGrid core lib yet, reference PR https://github.com/6pac/SlickGrid/pull/303
-    const caller = change && change.caller || [];
-    const groups = change && change.groupColumns || [];
-
-    if (Array.isArray(this.selectedGroupingFields) && Array.isArray(groups) && groups.length > 0) {
-      // update all Group By select dropdown
-      this.selectedGroupingFields.forEach((g, i) => this.selectedGroupingFields[i] = groups[i] && groups[i].getter || '');
-    } else if (groups.length === 0 && caller === 'remove-group') {
-      this.clearGroupingSelects();
-    }
-  }
-
-  showPreHeader() {
-    this.gridObj.setPreHeaderPanelVisibility(true);
-  }
-
-  selectTrackByFn(index: number, item: any) {
-    return index;
-  }
-
-  setFiltersDynamically() {
-    // we can Set Filters Dynamically (or different filters) afterward through the FilterService
-    this.angularGrid.filterService.updateFilters([
-      { columnId: 'percentComplete', operator: '>=', searchTerms: ['55'] },
-      { columnId: 'cost', operator: '<', searchTerms: ['80'] },
-    ]);
-  }
-
-  setSortingDynamically() {
-    this.angularGrid.sortService.updateSorting([
-      // orders matter, whichever is first in array will be the first sorted column
-      { columnId: 'percentComplete', direction: 'ASC' },
-    ]);
-  }
-
-  toggleDraggableGroupingRow() {
-    this.clearGrouping();
-    this.gridObj.setPreHeaderPanelVisibility(!this.gridObj.getOptions().showPreHeaderPanel);
-  }
-}

package/src/app/examples/grid-editor.component.html

@@ -1,88 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    {{title}}
-    <span class="float-end">
-      <a style="font-size: 18px"
-         target="_blank"
-         href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-editor.component.ts">
-        <span class="fa fa-link"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle" [innerHTML]="subTitle"></div>
-
-  <div class="col-sm-6">
-    <label>autoEdit setting: </label>
-    <span id="radioAutoEdit">
-      <label class="radio-inline control-label" for="radioTrue">
-        <input type="radio" name="inlineRadioOptions" id="radioTrue" checked [value]="isAutoEdit"
-               (change)="setAutoEdit(true)"> ON (single-click)
-      </label>
-      <label class="radio-inline control-label" for="radioFalse">
-        <input type="radio" name="inlineRadioOptions" id="radioFalse" [value]="isAutoEdit"
-               (change)="setAutoEdit(false)"> OFF (double-click)
-      </label>
-    </span>
-    <div class="row col-sm-12">
-      <span>
-        <button class="btn btn-outline-secondary btn-sm" (click)="undo()">
-          <i class="fa fa-undo"></i>
-          Undo last edit(s)
-        </button>
-        <label class="checkbox-inline control-label" for="autoCommitEdit">
-          <input type="checkbox" id="autoCommitEdit" data-test="auto-commit" [checked]="gridOptions.autoCommitEdit"
-                 (click)="changeAutoCommit()">
-          Auto Commit Edit
-        </label>
-      </span>
-    </div>
-    <div class="row" style="margin-top: 5px">
-      <div class="col-sm-12">
-        <button class="btn btn-outline-secondary btn-sm" (click)="angularGrid.filterService.clearFilters()">
-          Clear Filters
-        </button>
-        <button class="btn btn-outline-secondary btn-sm" (click)="angularGrid.sortService.clearSorting()">
-          Clear Sorting
-        </button>
-        <button class="btn btn-sm btn-outline-primary" (click)="addItem()"
-                title="Clear Filters &amp; Sorting to see it better">Add item</button>
-        <button class="btn btn-sm btn-outline-danger" (click)="deleteItem()">Delete item</button>
-      </div>
-    </div>
-    <div class="row" style="margin-top: 5px">
-      <div class="col-sm-12">
-        <button class="btn btn-outline-secondary btn-sm" data-test="add-title-column"
-                (click)="dynamicallyAddTitleHeader()">
-          <i class="fa fa-plus"></i>
-          Dynamically Duplicate Title Column
-        </button>
-        <button class="btn btn-outline-secondary btn-sm" data-test="remove-title-column"
-                (click)="dynamicallyRemoveLastColumn()">
-          <i class="fa fa-minus"></i>
-          Dynamically Remove Last Column
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div class="col-sm-6">
-    <div class="alert alert-info" *ngIf="updatedObject">
-      <strong>Updated Item:</strong> {{updatedObject | json}}
-    </div>
-    <div class="alert alert-warning" *ngIf="alertWarning">
-      <strong>Updated Item:</strong> {{alertWarning}}
-    </div>
-  </div>
-
-  <div class="col-sm-12">
-    <angular-slickgrid gridId="grid3"
-                       [columnDefinitions]="columnDefinitions"
-                       [gridOptions]="gridOptions"
-                       [dataset]="dataset"
-                       (onAngularGridCreated)="angularGridReady($event.detail)"
-                       (onCellChange)="onCellChanged($event.detail.eventData, $event.detail.args)"
-                       (onClick)="onCellClicked($event.detail.eventData, $event.detail.args)"
-                       (onValidationError)="onValidationError($event.detail.eventData, $event.detail.args)">
-    </angular-slickgrid>
-  </div>
-</div>