angular-slickgrid 8.14.0 → 9.0.0

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

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

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

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

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