angular-slickgrid 9.0.0 → 9.0.1

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

@@ -1,445 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ExcelExportService } from '@slickgrid-universal/excel-export';
-import { TextExportService } from '@slickgrid-universal/text-export';
-
-import {
-  AngularGridInstance,
-  Aggregators,
-  Column,
-  DelimiterType,
-  Editors,
-  Filters,
-  Formatters,
-  GridOption,
-  Grouping,
-  GroupingGetterFunction,
-  GroupTotalFormatters,
-  SortDirectionNumber,
-  SortComparers,
-} from '../../library';
-
-@Component({
-  templateUrl: './example18.component.html',
-  standalone: false,
-})
-export class Example18Component implements OnInit, OnDestroy {
-  private _darkMode = false;
-  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();
-  }
-
-  ngOnDestroy() {
-    document.querySelector('.panel-wm-content')!.classList.remove('dark-mode');
-    document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'light';
-  }
-
-  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',
-        columnGroup: 'Common Factor',
-        width: 70,
-        minWidth: 50,
-        cssClass: 'cell-title',
-        filterable: true,
-        sortable: true,
-        grouping: {
-          getter: 'title',
-          formatter: (g) => `Title: ${g.value}  <span class="text-primary">(${g.count} items)</span>`,
-          aggregators: [new Aggregators.Sum('cost')],
-          aggregateCollapsed: false,
-          collapsed: false,
-        },
-      },
-      {
-        id: 'duration',
-        name: 'Duration',
-        field: 'duration',
-        columnGroup: 'Common Factor',
-        width: 70,
-        sortable: true,
-        filterable: true,
-        editor: {
-          model: Editors.float,
-          // required: true,
-          decimal: 2,
-          valueStep: 1,
-          maxValue: 10000,
-          alwaysSaveOnEnterKey: true,
-        },
-        filter: { model: Filters.slider, operator: '>=' },
-        type: 'number',
-        groupTotalsFormatter: GroupTotalFormatters.sumTotals,
-        grouping: {
-          getter: 'duration',
-          formatter: (g) => `Duration: ${g.value}  <span class="text-primary">(${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('duration'), new Aggregators.Sum('cost')],
-          aggregateCollapsed: false,
-          collapsed: false,
-        },
-      },
-      {
-        id: 'start',
-        name: 'Start',
-        field: 'start',
-        columnGroup: 'Period',
-        minWidth: 60,
-        sortable: true,
-        filterable: true,
-        filter: { model: Filters.compoundDate },
-        formatter: Formatters.dateIso,
-        type: 'dateUtc',
-        outputType: 'dateIso',
-        exportWithFormatter: true,
-        grouping: {
-          getter: 'start',
-          formatter: (g) => `Start: ${g.value}  <span class="text-primary">(${g.count} items)</span>`,
-          aggregators: [new Aggregators.Sum('cost')],
-          aggregateCollapsed: false,
-          collapsed: false,
-        },
-      },
-      {
-        id: 'finish',
-        name: 'Finish',
-        field: 'finish',
-        columnGroup: 'Period',
-        minWidth: 60,
-        sortable: true,
-        filterable: true,
-        filter: { model: Filters.compoundDate },
-        formatter: Formatters.dateIso,
-        type: 'dateUtc',
-        outputType: 'dateIso',
-        exportWithFormatter: true,
-        grouping: {
-          getter: 'finish',
-          formatter: (g) => `Finish: ${g.value} <span class="text-primary">(${g.count} items)</span>`,
-          aggregators: [new Aggregators.Sum('cost')],
-          aggregateCollapsed: false,
-          collapsed: false,
-        },
-      },
-      {
-        id: 'cost',
-        name: 'Cost',
-        field: 'cost',
-        columnGroup: 'Analysis',
-        width: 90,
-        sortable: true,
-        filterable: true,
-        filter: { model: Filters.compoundInput },
-        formatter: Formatters.dollar,
-        groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollar,
-        type: 'number',
-        grouping: {
-          getter: 'cost',
-          formatter: (g) => `Cost: ${g.value} <span class="text-primary">(${g.count} items)</span>`,
-          aggregators: [new Aggregators.Sum('cost')],
-          aggregateCollapsed: true,
-          collapsed: true,
-        },
-      },
-      {
-        id: 'percentComplete',
-        name: '% Complete',
-        field: 'percentComplete',
-        columnGroup: 'Analysis',
-        minWidth: 70,
-        width: 90,
-        formatter: Formatters.percentCompleteBar,
-        type: 'number',
-        filterable: true,
-        filter: { model: Filters.compoundSlider },
-        sortable: true,
-        groupTotalsFormatter: GroupTotalFormatters.avgTotalsPercentage,
-        grouping: {
-          getter: 'percentComplete',
-          formatter: (g) => `% Complete: ${g.value}  <span class="text-primary">(${g.count} items)</span>`,
-          aggregators: [new Aggregators.Sum('cost')],
-          aggregateCollapsed: false,
-          collapsed: false,
-        },
-        params: { groupFormatterPrefix: '<i>Avg</i>: ' },
-      },
-      {
-        id: 'effortDriven',
-        name: 'Effort-Driven',
-        field: 'effortDriven',
-        columnGroup: 'Analysis',
-        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.checkmarkMaterial,
-        grouping: {
-          getter: 'effortDriven',
-          formatter: (g) => `Effort-Driven: ${g.value ? 'True' : 'False'} <span class="text-primary">(${g.count} items)</span>`,
-          aggregators: [new Aggregators.Sum('duration'), new Aggregators.Sum('cost')],
-          collapsed: false,
-        },
-      },
-    ];
-
-    this.gridOptions = {
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10,
-      },
-      enableDraggableGrouping: true,
-      autoEdit: true, // true single click (false for double-click)
-      autoCommitEdit: true,
-      editable: true,
-      enableCellNavigation: true,
-
-      // pre-header will include our Header Grouping (i.e. "Common Factor")
-      // Draggable Grouping could be located in either the Pre-Header OR the new Top-Header
-      createPreHeaderPanel: true,
-      showPreHeaderPanel: true,
-      preHeaderPanelHeight: 30,
-
-      // when Top-Header is created, it will be used by the Draggable Grouping (otherwise the Pre-Header will be used)
-      createTopHeaderPanel: true,
-      showTopHeaderPanel: true,
-      topHeaderPanelHeight: 35,
-
-      showCustomFooter: true,
-      enableFiltering: true,
-      // you could debounce/throttle the input text filter if you have lots of data
-      // filterTypingDebounce: 250,
-      enableSorting: true,
-      textExportOptions: {
-        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: 'mdi mdi-drag-vertical',
-        deleteIconCssClass: 'mdi mdi-close text-color-danger',
-        sortAscIconCssClass: 'mdi mdi-arrow-up',
-        sortDescIconCssClass: 'mdi mdi-arrow-down',
-        onGroupChanged: (e, args) => this.onGroupChanged(args),
-        onExtensionRegistered: (extension) => (this.draggableGroupingPlugin = extension),
-      },
-      darkMode: this._darkMode,
-      enableTextExport: true,
-      enableExcelExport: true,
-      excelExportOptions: { sanitizeDataExport: true },
-      externalResources: [this.excelExportService, this.textExportService],
-    };
-
-    this.loadData(500);
-  }
-
-  loadData(rowCount: number) {
-    // mock a dataset
-    const tmpData = [];
-    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);
-      const randomCost = Math.round(Math.random() * 10000) / 100;
-
-      tmpData[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 ? -randomCost : randomCost,
-        effortDriven: i % 5 === 0,
-      };
-    }
-    this.dataset = tmpData;
-  }
-
-  clearGroupsAndSelects() {
-    this.clearGroupingSelects();
-    this.clearGrouping();
-  }
-
-  clearGrouping(invalidateRows = true) {
-    this.draggableGroupingPlugin?.clearDroppedGroups();
-    if (invalidateRows) {
-      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: 'xlsx',
-    });
-  }
-
-  exportToCsv(type = 'csv') {
-    this.textExportService.exportToFile({
-      delimiter: type === 'csv' ? DelimiterType.comma : DelimiterType.tab,
-      filename: 'myExport',
-      format: type === 'csv' ? 'csv' : 'txt',
-    });
-  }
-
-  groupByDurationOrderByCount(sortedByCount = false) {
-    this.durationOrderByCount = sortedByCount;
-    this.clearGrouping(false);
-
-    if (this.draggableGroupingPlugin?.setDroppedGroups) {
-      this.showPreHeader();
-      this.draggableGroupingPlugin.setDroppedGroups('duration');
-
-      // you need to manually add the sort icon(s) in UI
-      const sortColumns = sortedByCount ? [] : [{ columnId: 'duration', sortAsc: true }];
-      this.gridObj?.setSortColumns(sortColumns);
-      this.gridObj?.invalidate(); // invalidate all rows and re-render
-    }
-  }
-
-  groupByDurationEffortDriven() {
-    this.clearGrouping(false);
-    if (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();
-    }
-  }
-
-  onCellChanged() {
-    // when user changes a cell, we need to advise the DataView for the grouping to update its totals
-    this.angularGrid.dataView?.refresh();
-  }
-
-  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);
-  }
-
-  toggleDarkMode() {
-    this._darkMode = !this._darkMode;
-    this.toggleBodyBackground();
-    this.angularGrid.slickGrid?.setOptions({ darkMode: this._darkMode });
-  }
-
-  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';
-    }
-  }
-}

package/src/demos/examples/example19-rowdetail.component.html

@@ -1,40 +0,0 @@
-<div class="container-fluid">
-  <h3>{{ model?.title }}</h3>
-  <div class="row">
-    <div class="col-3 detail-label"><label>Assignee:</label> <input class="form-control" [(ngModel)]="model.assignee" /></div>
-    <div class="col-3 detail-label">
-      <label>Reporter:</label> <span>{{ model?.reporter }}</span>
-    </div>
-    <div class="col-3 detail-label">
-      <label>Duration:</label> <span>{{ model?.duration | number: '1.2-2' }}</span>
-    </div>
-    <div class="col-3 detail-label">
-      <label>% Complete:</label> <span>{{ model?.percentComplete }}</span>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col-3 detail-label">
-      <label>Start:</label> <span>{{ model?.start | date: 'yyyy-MM-dd' }}</span>
-    </div>
-    <div class="col-3 detail-label">
-      <label>Finish:</label> <span>{{ model?.finish | date: 'yyyy-MM-dd' }}</span>
-    </div>
-    <div class="col-3 detail-label"><label>Effort Driven:</label> <i [class]="model?.effortDriven ? 'mdi mdi-check' : ''"></i></div>
-  </div>
-
-  <hr />
-
-  <div class="col-sm-8">
-    <h4>
-      Find out who is the Assignee
-      <small>
-        <button class="btn btn-primary btn-sm" (click)="alertAssignee(model?.assignee)" data-test="assignee-btn">Click Me</button>
-      </small>
-    </h4>
-  </div>
-  <div class="col-sm-4">
-    <button class="btn btn-primary btn-danger btn-sm" (click)="deleteRow(model)" data-test="delete-btn">Delete Row</button>
-    <button class="btn btn-outline-secondary btn-sm" (click)="callParentMethod(model)" data-test="parent-btn">Call Parent Method</button>
-  </div>
-</div>

package/src/demos/examples/example19-rowdetail.component.ts

@@ -1,54 +0,0 @@
-import { Component } from '@angular/core';
-import { SlickDataView, SlickGrid } from '../../library';
-import { Example19Component } from './example19.component';
-
-@Component({
-  styles: ['.detail-label { display: inline-flex; align-items: center; gap: 4px; padding: 4px; }', 'label { font-weight: 600; }'],
-  templateUrl: './example19-rowdetail.component.html',
-  standalone: false,
-})
-export class Example19RowDetailComponent {
-  model!: {
-    duration: Date;
-    percentComplete: number;
-    reporter: string;
-    start: Date;
-    finish: Date;
-    effortDriven: boolean;
-    assignee: string;
-    title: string;
-  };
-
-  // you also have access to the following objects (it must match the exact property names shown below)
-  addon: any; // row detail addon instance
-  grid!: SlickGrid;
-  dataView!: SlickDataView;
-
-  // you can also optionally use the Parent Component reference
-  // NOTE that you MUST provide it through the "parentRef" property in your "rowDetail" grid options
-  parentRef!: Example19Component;
-
-  alertAssignee(name: string) {
-    if (typeof name === 'string') {
-      alert(`Assignee on this task is: ${name.toUpperCase()}`);
-    } else {
-      alert('No one is assigned to this task.');
-    }
-  }
-
-  deleteRow(model: any) {
-    if (confirm(`Are you sure that you want to delete ${model.title}?`)) {
-      // you first need to collapse all rows (via the 3rd party addon instance)
-      this.addon.collapseAll();
-
-      // then you can delete the item from the dataView
-      this.dataView.deleteItem(model.rowId);
-
-      this.parentRef.showFlashMessage(`Deleted row with ${model.title}`, 'danger');
-    }
-  }
-
-  callParentMethod(model: any) {
-    this.parentRef.showFlashMessage(`We just called Parent Method from the Row Detail Child Component on ${model.title}`);
-  }
-}

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

@@ -1,79 +0,0 @@
-<div class="container-fluid">
-  <h2>
-    Example 19: Row Detail View
-    <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-rowdetail.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)="toggleSubTitle()">
-      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
-    </button>
-    <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="toggleDarkMode()" data-test="toggle-dark-mode">
-      <span class="mdi mdi-theme-light-dark"></span>
-      <span>Toggle Dark Mode</span>
-    </button>
-  </h2>
-  <div class="subtitle">
-    Add functionality to show extra information with a Row Detail View, (<a
-      href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/row-detail"
-      target="_blank"
-      >Wiki docs</a
-    >)
-    <ul>
-      <li>Click on the row "+" icon or anywhere on the row to open it (the latter can be changed via property "useRowClick: false")</li>
-      <li>Pass a View/Model as a Template to the Row Detail</li>
-      <li>
-        You can use "expandableOverride()" callback to override logic to display expand icon on every row (for example only show it every
-        2nd row)
-      </li>
-    </ul>
-  </div>
-
-  <div class="row">
-    <div class="col-sm-6">
-      <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="changeEditableGrid()" data-test="editable-grid-btn">
-        Make Grid Editable
-      </button>
-      <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="closeAllRowDetail()" data-test="collapse-all-btn">
-        Close All Row Details
-      </button>
-      &nbsp;&nbsp;
-
-      <span class="d-inline-flex gap-4px">
-        <label for="detailViewRowCount">Detail View Rows Shown: </label>
-        <input id="detailViewRowCount" type="number" style="height: 22px; width: 40px" [(ngModel)]="detailViewRowCount" />
-        <button class="btn btn-outline-secondary btn-xs btn-icon" (click)="changeDetailViewRowCount()" data-test="set-count-btn">
-          Set
-        </button>
-        <label for="serverdelay" class="ms-2">Server Delay: </label>
-        <input
-          id="serverdelay"
-          [(ngModel)]="serverWaitDelay"
-          type="number"
-          data-test="server-delay"
-          style="height: 26px; width: 55px"
-          title="input a fake timer delay to simulate slow server response"
-        />
-      </span>
-    </div>
-    <div class="alert alert-{{ flashAlertType }} col-sm-6" *ngIf="message" data-test="flash-msg">
-      {{ message }}
-    </div>
-  </div>
-
-  <hr />
-
-  <angular-slickgrid
-    gridId="grid19"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    (onAngularGridCreated)="angularGridReady($event.detail)"
-  >
-  </angular-slickgrid>
-</div>