angular-slickgrid 9.0.0 → 9.0.2

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

@@ -1,369 +0,0 @@
-import { ChangeDetectorRef, Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { ExcelExportService } from '@slickgrid-universal/excel-export';
-
-import {
-  AngularGridInstance,
-  Column,
-  Filters,
-  Formatters,
-  GridOption,
-  GridStateChange,
-  TreeToggledItem,
-  TreeToggleStateChange,
-} from '../../library';
-
-const NB_ITEMS = 500;
-
-@Component({
-  templateUrl: './example27.component.html',
-  styleUrls: ['example27.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  standalone: false,
-})
-export class Example27Component implements OnInit {
-  angularGrid!: AngularGridInstance;
-  dataViewObj: any;
-  gridObj: any;
-  gridOptions!: GridOption;
-  columnDefinitions!: Column[];
-  dataset!: any[];
-  loadingClass = '';
-  isLargeDataset = false;
-  hasNoExpandCollapseChanged = true;
-  treeToggleItems: TreeToggledItem[] = [];
-
-  constructor(private cdref: ChangeDetectorRef) {}
-
-  ngOnInit(): void {
-    // define the grid options & columns and then create the grid itself
-    this.defineGrid();
-
-    // mock a dataset
-    this.dataset = this.loadData(NB_ITEMS);
-  }
-
-  defineGrid() {
-    this.columnDefinitions = [
-      {
-        id: 'title',
-        name: 'Title',
-        field: 'title',
-        width: 220,
-        cssClass: 'cell-title',
-        filterable: true,
-        sortable: true,
-        exportWithFormatter: false,
-        queryFieldSorter: 'id',
-        formatter: Formatters.tree,
-        exportCustomFormatter: Formatters.treeExport,
-      },
-      { id: 'duration', name: 'Duration', field: 'duration', minWidth: 90, filterable: true },
-      {
-        id: 'percentComplete',
-        name: '% Complete',
-        field: 'percentComplete',
-        minWidth: 120,
-        maxWidth: 200,
-        exportWithFormatter: false,
-        sortable: true,
-        filterable: true,
-        filter: { model: Filters.compoundSlider, operator: '>=' },
-        formatter: Formatters.percentCompleteBarWithText,
-        type: 'number',
-      },
-      {
-        id: 'start',
-        name: 'Start',
-        field: 'start',
-        minWidth: 60,
-        type: 'dateIso',
-        filterable: true,
-        sortable: true,
-        filter: { model: Filters.compoundDate },
-        formatter: Formatters.dateIso,
-      },
-      {
-        id: 'finish',
-        name: 'Finish',
-        field: 'finish',
-        minWidth: 60,
-        type: 'dateIso',
-        filterable: true,
-        sortable: true,
-        filter: { model: Filters.compoundDate },
-        formatter: Formatters.dateIso,
-      },
-      {
-        id: 'effortDriven',
-        name: 'Effort Driven',
-        width: 80,
-        minWidth: 20,
-        maxWidth: 80,
-        cssClass: 'cell-effort-driven',
-        field: 'effortDriven',
-        exportWithFormatter: false,
-        formatter: Formatters.checkmarkMaterial,
-        cannotTriggerInsert: true,
-        filterable: true,
-        filter: {
-          collection: [
-            { value: '', label: '' },
-            { value: true, label: 'True' },
-            { value: false, label: 'False' },
-          ],
-          model: Filters.singleSelect,
-        },
-      },
-    ];
-
-    this.gridOptions = {
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10,
-      },
-      enableAutoSizeColumns: true,
-      enableAutoResize: true,
-      enableExcelExport: true,
-      excelExportOptions: { exportWithFormatter: true, sanitizeDataExport: true },
-      externalResources: [new ExcelExportService()],
-      enableFiltering: true,
-      showCustomFooter: true, // display some metrics in the bottom custom footer
-      enableTreeData: true, // you must enable this flag for the filtering & sorting to work as expected
-      treeDataOptions: {
-        columnId: 'title',
-        parentPropName: 'parentId',
-        // this is optional, you can define the tree level property name that will be used for the sorting/indentation, internally it will use "__treeLevel"
-        levelPropName: 'treeLevel',
-        indentMarginLeft: 15,
-        initiallyCollapsed: true,
-
-        // you can optionally sort by a different column and/or sort direction
-        // this is the recommend approach, unless you are 100% that your original array is already sorted (in most cases it's not)
-        initialSort: {
-          columnId: 'title',
-          direction: 'ASC',
-        },
-        // we can also add a custom Formatter just for the title text portion
-        titleFormatter: (_row, _cell, value, _def, dataContext) => {
-          let prefix = '';
-          if (dataContext.treeLevel > 0) {
-            prefix = `<span class="mdi mdi-subdirectory-arrow-right"></span>`;
-          }
-          return `${prefix}<span class="bold">${value}</span> <span style="font-size:11px; margin-left: 15px;">(parentId: ${dataContext.parentId})</span>`;
-        },
-      },
-      multiColumnSort: false, // multi-column sorting is not supported with Tree Data, so you need to disable it
-      presets: {
-        filters: [{ columnId: 'percentComplete', searchTerms: [25], operator: '>=' }],
-        // treeData: { toggledItems: [{ itemId: 1, isCollapsed: false }] },
-      },
-
-      // change header/cell row height
-      headerRowHeight: 45,
-      rowHeight: 40,
-      // if you're dealing with lots of data, it is recommended to use the filter debounce
-      filterTypingDebounce: 250,
-    };
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-    this.gridObj = angularGrid.slickGrid;
-    this.dataViewObj = angularGrid.dataView;
-  }
-
-  /**
-   * A simple method to add a new item inside the first group that has children which is "Task 1"
-   * After adding the item, it will resort by parent/child recursively but keep current sort column
-   */
-  addNewRow() {
-    const newId = this.dataViewObj.getItemCount();
-    // find "Task 1" which has `id = 1`
-    const parentItemFound = this.dataViewObj.getItemById(1);
-
-    if (parentItemFound?.__hasChildren) {
-      const newItem = {
-        id: newId,
-        parentId: parentItemFound.id,
-        title: `Task ${newId}`,
-        duration: '1 day',
-        percentComplete: 99,
-        start: new Date(),
-        finish: new Date(),
-        effortDriven: false,
-      };
-
-      // use the Grid Service to insert the item,
-      // it will also internally take care of updating & resorting the hierarchical dataset
-      this.angularGrid.gridService.addItem(newItem);
-    }
-  }
-
-  updateFirstRow() {
-    // to update any of the grid rows, we CANNOT simply pass a new updated object
-    // we MUST read it from the DataView first (that will include all mutated Tree Data props, like `__treeLevel`, `__parentId`, ...) and then update it
-    const item = this.angularGrid.dataView.getItemById<any>(0);
-
-    // option 1
-    /*
-    // now that we have the extra Tree Data props, we can update any of the object properties (while keeping the Tree Data props)
-    item.duration = `11 days`;
-    item.percentComplete = 77;
-    item.start = new Date();
-    item.finish = new Date();
-    item.effortDriven = false;
-
-    // finally we can now update the item which includes our updated props + the Tree Data props (`__treeLevel`, ...)
-    this.angularGrid.gridService.updateItem(item);
-    */
-
-    // optiona 2 - alternative
-    // we could also simply use the spread operator directly
-    this.angularGrid.gridService.updateItem({
-      ...item,
-      duration: `11 days`,
-      percentComplete: 77,
-      start: new Date(),
-      finish: new Date(),
-      effortDriven: false,
-    });
-  }
-
-  collapseAll() {
-    this.angularGrid.treeDataService.toggleTreeDataCollapse(true);
-  }
-
-  collapseAllWithoutEvent() {
-    this.angularGrid.treeDataService.toggleTreeDataCollapse(true, false);
-  }
-
-  expandAll() {
-    this.angularGrid.treeDataService.toggleTreeDataCollapse(false);
-  }
-
-  dynamicallyChangeFilter() {
-    // const randomPercentage = Math.floor((Math.random() * 99));
-    this.angularGrid.filterService.updateFilters([{ columnId: 'percentComplete', operator: '<', searchTerms: [40] }]);
-  }
-
-  hideSpinner() {
-    setTimeout(() => (this.loadingClass = ''), 200); // delay the hide spinner a bit to avoid show/hide too quickly
-  }
-
-  showSpinner() {
-    if (this.isLargeDataset) {
-      this.loadingClass = 'mdi mdi-load mdi-spin-1s mdi-24px';
-    }
-  }
-
-  logHierarchicalStructure() {
-    console.log('exploded array', this.angularGrid.treeDataService.datasetHierarchical);
-  }
-
-  logFlatStructure() {
-    console.log('flat array', this.angularGrid.treeDataService.dataset);
-  }
-
-  loadData(rowCount: number) {
-    this.isLargeDataset = rowCount > 5000; // we'll show a spinner when it's large, else don't show show since it should be fast enough
-    let indent = 0;
-    const parents = [];
-    const data = [];
-    // prepare the data
-    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 item: any = (data[i] = {});
-      let parentId;
-
-      /*
-        for demo & E2E testing purposes, let's make "Task 0" empty and then "Task 1" a parent that contains at least "Task 2" and "Task 3" which the latter will also contain "Task 4" (as shown below)
-        also for all other rows don't go over indent tree level depth of 2
-        Task 0
-        Task 1
-          Task 2
-          Task 3
-            Task 4
-        ...
-       */
-      if (i === 1 || i === 0) {
-        indent = 0;
-        parents.pop();
-      }
-      if (i === 3) {
-        indent = 1;
-      } else if (i === 2 || i === 4 || (Math.random() > 0.8 && i > 0 && indent < 3 && i - 1 !== 0 && i - 1 !== 2)) {
-        // also make sure Task 0, 2 remains empty
-        indent++;
-        parents.push(i - 1);
-      } else if (Math.random() < 0.3 && indent > 0) {
-        indent--;
-        parents.pop();
-      }
-      if (parents.length > 0) {
-        parentId = parents[parents.length - 1];
-      } else {
-        parentId = null;
-      }
-
-      item['id'] = i;
-      item['parentId'] = parentId;
-      item['title'] = `Task ${i}`;
-      item['duration'] = '5 days';
-      item['percentComplete'] = Math.round(Math.random() * 100);
-      item['start'] = new Date(randomYear, randomMonth, randomDay);
-      item['finish'] = new Date(randomYear, randomMonth + 1, randomDay);
-      item['effortDriven'] = i % 5 === 0;
-    }
-    this.dataset = data;
-    return data;
-  }
-
-  handleOnTreeFullToggleEnd(treeToggleExecution: TreeToggleStateChange) {
-    console.log('Tree Data changes', treeToggleExecution);
-    this.hideSpinner();
-  }
-
-  /** Whenever a parent is being toggled, we'll keep a reference of all of these changes so that we can reapply them whenever we want */
-  handleOnTreeItemToggled(treeToggleExecution: TreeToggleStateChange) {
-    this.hasNoExpandCollapseChanged = false;
-    this.cdref.detectChanges();
-    this.treeToggleItems = treeToggleExecution.toggledItems as TreeToggledItem[];
-    console.log('Tree Data changes', treeToggleExecution);
-  }
-
-  handleOnGridStateChanged(gridStateChange: GridStateChange) {
-    this.hasNoExpandCollapseChanged = false;
-    this.cdref.detectChanges();
-
-    if (gridStateChange?.change?.type === 'treeData') {
-      console.log('Tree Data gridStateChange', gridStateChange?.gridState?.treeData);
-      this.treeToggleItems = gridStateChange?.gridState?.treeData?.toggledItems as TreeToggledItem[];
-    }
-  }
-
-  logTreeDataToggledItems() {
-    console.log(this.angularGrid.treeDataService.getToggledItems());
-  }
-
-  dynamicallyToggledFirstParent() {
-    const parentPropName = 'parentId';
-    const treeLevelPropName = 'treeLevel'; // if undefined in your options, the default prop name is "__treeLevel"
-    const newTreeLevel = 1;
-
-    // find first parent object and toggle it
-    const childItemFound = this.dataset.find((item) => item[treeLevelPropName] === newTreeLevel);
-    const parentItemFound = this.angularGrid.dataView.getItemByIdx(childItemFound[parentPropName]);
-
-    if (childItemFound && parentItemFound) {
-      this.angularGrid.treeDataService.dynamicallyToggleItemState([
-        { itemId: parentItemFound.id, isCollapsed: !parentItemFound.__collapsed },
-      ]);
-    }
-  }
-
-  reapplyToggledItems() {
-    this.angularGrid.treeDataService.applyToggledItemStateChanges(this.treeToggleItems);
-  }
-}

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

@@ -1,143 +0,0 @@
-<div class="container-fluid">
-  <h2>
-    Example 28: Tree Data with Aggregators
-    <small
-      ><span class="mdi mdi-file-tree mdi-27px"></span> (from a Hierarchical Dataset -
-      <a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/tree-data-grid" target="_blank">Wiki</a>)</small
-    >
-    <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-tree-data-hierarchical.component.ts"
-      >
-        <span class="mdi mdi-link mdi-v-align-sub"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    <ul>
-      <li>
-        <b>NOTE #1:</b> The grid will automatically sort Ascending with the column that has the Tree Data, you could add a "sortByFieldId"
-        in your column "treeData" option if you wish to sort on a different column
-      </li>
-      <li>
-        <b>NOTE #2:</b> Tree Totals are only calculated once and are <b>NOT</b> recalculated while filtering data, if you do want that
-        feature then you will need to enable <code>autoRecalcTotalsOnFilterChange</code> <i>(see checkbox below)</i>
-      </li>
-    </ul>
-  </div>
-
-  <div class="row">
-    <div class="col-md-7">
-      <button (click)="addNewFile()" data-test="add-item-btn" class="btn btn-xs btn-icon btn-primary">
-        <span class="icon mdi mdi-plus color-white"></span>
-        <span>Add New Pop Song</span>
-      </button>
-      <button
-        (click)="deleteFile()"
-        data-test="remove-item-btn"
-        class="btn btn-outline-secondary btn-xs btn-icon"
-        [disabled]="isRemoveLastInsertedPopSongDisabled"
-      >
-        <span class="mdi mdi-minus"></span>
-        <span>Remove Last Inserted Pop Song</span>
-      </button>
-      <button (click)="collapseAll()" data-test="collapse-all-btn" class="btn btn-outline-secondary btn-xs btn-icon">
-        <span class="icon mdi mdi-arrow-collapse"></span>
-        <span>Collapse All</span>
-      </button>
-      <button (click)="expandAll()" data-test="expand-all-btn" class="btn btn-outline-secondary btn-xs btn-icon">
-        <span class="icon mdi mdi-arrow-expand"></span>
-        <span>Expand All</span>
-      </button>
-      <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="clear-filters-btn" (click)="clearFilters()">
-        <span class="mdi mdi-close"></span>
-        <span>Clear Filters</span>
-      </button>
-      <button (click)="logFlatStructure()" class="btn btn-outline-secondary btn-xs btn-icon" title="console.log of the Flat dataset">
-        <span>Log Flat Structure</span>
-      </button>
-      <button
-        (click)="logHierarchicalStructure()"
-        class="btn btn-outline-secondary btn-xs btn-icon"
-        title="console.log of the Hierarchical Tree dataset"
-      >
-        <span>Log Hierarchical Structure</span>
-      </button>
-    </div>
-
-    <div class="col-md-5">
-      <div class="input-group">
-        <input
-          type="text"
-          class="form-control search-string"
-          data-test="search-string"
-          placeholder="search value"
-          autocomplete="off"
-          [(ngModel)]="searchString"
-          (ngModelChange)="searchStringChanged()"
-        />
-        <button class="btn btn-sm btn-outline-secondary d-flex align-items-center" data-test="clear-search-string" (click)="clearSearch()">
-          <span class="icon mdi mdi-close-thick"></span>
-        </button>
-      </div>
-    </div>
-  </div>
-
-  <div>
-    <label class="checkbox-inline control-label" for="excludeChildWhenFiltering" style="margin-left: 20px">
-      <input
-        type="checkbox"
-        id="excludeChildWhenFiltering"
-        data-test="exclude-child-when-filtering"
-        [checked]="isExcludingChildWhenFiltering"
-        (click)="changeExcludeChildWhenFiltering()"
-      />
-      <span
-        title="for example if we filter the word 'pop' and we exclude children, then only the folder 'pop' will show up without any content unless we uncheck this flag"
-      >
-        Exclude Children when Filtering Tree
-      </span>
-    </label>
-    <label class="checkbox-inline control-label" for="autoApproveParentItem" style="margin-left: 20px">
-      <input
-        type="checkbox"
-        id="autoApproveParentItem"
-        data-test="auto-approve-parent-item"
-        [checked]="isAutoApproveParentItemWhenTreeColumnIsValid"
-        (click)="changeAutoApproveParentItem()"
-      />
-      <span
-        title="for example in this demo if we filter with 'music' and size '> 70' nothing will show up unless we have this flag enabled
-            because none of the files have both criteria at the same time, however the column with the tree 'file' does pass the filter criteria 'music'
-            and with this flag we tell the lib to skip any other filter(s) as soon as the with the tree (file in this demo) passes its own filter criteria"
-      >
-        Skip Other Filter Criteria when Parent with Tree is valid
-      </span>
-    </label>
-    <label class="checkbox-inline control-label" for="autoRecalcTotalsOnFilterChange" style="margin-left: 20px">
-      <input
-        type="checkbox"
-        id="autoRecalcTotalsOnFilterChange"
-        data-test="auto-recalc-totals"
-        [checked]="isAutoRecalcTotalsOnFilterChange"
-        (click)="changeAutoRecalcTotalsOnFilterChange()"
-      />
-      <span
-        title="Should we recalculate Tree Data Totals (when Aggregators are defined) while filtering? This feature is disabled by default."
-      >
-        auto-recalc Tree Data totals on filter changed
-      </span>
-    </label>
-  </div>
-
-  <angular-slickgrid
-    gridId="grid28"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [datasetHierarchical]="datasetHierarchical"
-    (onAngularGridCreated)="angularGridReady($event.detail)"
-  >
-  </angular-slickgrid>
-</div>

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

@@ -1,54 +0,0 @@
-// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
-
-#grid29 {
-  .slick-cell {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .avg-total {
-    color: #a365ff;
-  }
-  .bold {
-    font-weight: bold;
-  }
-  .total-suffix {
-    margin-left: 10px;
-  }
-  .hidden {
-    display: none;
-  }
-
-  .mdi-file-pdf-outline {
-    color: #f14668;
-    opacity: 0.9;
-  }
-
-  .mdi-folder, .mdi-folder-open {
-    color: #ffa500;
-    opacity: 0.9;
-  }
-  .mdi-file-music-outline {
-    color: #3298dc;
-    opacity: 0.9;
-  }
-  .mdi-file-excel-outline {
-    color: #1E9F75;
-    opacity: 0.9;
-  }
-  .mdi-file-document-outline,
-  .mdi-file-question-outline {
-    color: #686868;
-    opacity: 0.9;
-  }
-
-  .display-inline-block {
-    display: inline-block;
-  }
-}
-
-// create a few 15px indentation multiplied by level number
-@for $i from 1 through 6 {
-  .width-#{$i*15}px { width: #{$i * 15}px; }
-}