angular-slickgrid 9.0.0 → 9.0.2

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

@@ -1,383 +0,0 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-
-import {
-  AngularGridInstance,
-  AngularUtilService,
-  Column,
-  Editors,
-  Filters,
-  Formatters,
-  GridOption,
-  type MultipleSelectOption,
-  OnEventArgs,
-  SlickGlobalEditorLock,
-  type SliderOption,
-} from '../../library';
-import { EditorNgSelectComponent } from './editor-ng-select.component';
-import { CustomAngularComponentEditor } from './custom-angularComponentEditor';
-import { CustomAngularComponentFilter } from './custom-angularComponentFilter';
-import { CustomTitleFormatterComponent } from './custom-titleFormatter.component';
-import { FilterNgSelectComponent } from './filter-ng-select.component';
-import { CustomButtonFormatterComponent } from './custom-buttonFormatter.component';
-
-const NB_ITEMS = 100;
-
-@Component({
-  templateUrl: './example26.component.html',
-  styleUrls: ['./example26.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  providers: [AngularUtilService],
-  standalone: false,
-})
-export class Example26Component implements OnInit {
-  private _commandQueue: any[] = [];
-  angularGrid!: AngularGridInstance;
-  columnDefinitions: Column[] = [];
-  gridOptions!: GridOption;
-  dataset!: any[];
-  gridObj: any;
-  isAutoEdit = true;
-  alertWarning: any;
-  updatedObject: any;
-  selectedLanguage = 'en';
-  assignees = [
-    { id: '', name: '' },
-    { id: '1', name: 'John' },
-    { id: '2', name: 'Pierre' },
-    { id: '3', name: 'Paul' },
-  ];
-
-  constructor(
-    private angularUtilService: AngularUtilService,
-    private translate: TranslateService
-  ) {}
-
-  ngOnInit(): void {
-    this.prepareGrid();
-  }
-
-  angularGridReady(angularGrid: AngularGridInstance) {
-    this.angularGrid = angularGrid;
-    this.gridObj = angularGrid.slickGrid;
-  }
-
-  prepareGrid() {
-    this.columnDefinitions = [
-      {
-        id: 'title',
-        name: 'Title',
-        field: 'title',
-        minWidth: 100,
-        filterable: true,
-        sortable: true,
-        editor: {
-          model: Editors.longText,
-          minLength: 5,
-          maxLength: 255,
-        },
-        onCellChange: (e: Event, args: OnEventArgs) => {
-          console.log(args);
-          this.alertWarning = `Updated Title: ${args.dataContext.title}`;
-        },
-      },
-      {
-        id: 'title2',
-        name: 'Title with Angular Component',
-        field: 'title',
-        minWidth: 100,
-        sortable: true,
-        // loading formatter, text to display while Post Render gets processed
-        formatter: () => '...',
-
-        // if the component needs to stay and be interactive after rendering
-        asyncPostRender: this.renderInteractiveAngularComponent.bind(this),
-        params: {
-          component: CustomButtonFormatterComponent,
-          angularUtilService: this.angularUtilService,
-        },
-      },
-      {
-        id: 'assignee',
-        name: 'Assignee',
-        field: 'assignee',
-        minWidth: 100,
-        filterable: true,
-        sortable: true,
-        filter: {
-          model: CustomAngularComponentFilter, // create a new instance to make each Filter independent from each other
-          collection: this.assignees,
-          params: {
-            component: FilterNgSelectComponent,
-          },
-        },
-        queryFieldFilter: 'assignee.id', // for a complex object it's important to tell the Filter which field to query and our CustomAngularComponentFilter returns the "id" property
-        queryFieldSorter: 'assignee.name',
-        formatter: Formatters.complexObject,
-        params: {
-          complexFieldLabel: 'assignee.name',
-        },
-        exportWithFormatter: true,
-        editor: {
-          model: CustomAngularComponentEditor,
-          collection: this.assignees,
-          params: {
-            component: EditorNgSelectComponent,
-          },
-        },
-        onCellChange: (e: Event, args: OnEventArgs) => {
-          console.log(args);
-          this.alertWarning = `Updated Title: ${args.dataContext.title}`;
-        },
-      },
-      {
-        id: 'assignee2',
-        name: 'Assignee with Angular Component',
-        field: 'assignee',
-        minWidth: 125,
-        filterable: true,
-        sortable: true,
-        filter: {
-          model: CustomAngularComponentFilter, // create a new instance to make each Filter independent from each other
-          collection: this.assignees,
-          params: {
-            component: FilterNgSelectComponent,
-          },
-        },
-        queryFieldFilter: 'assignee.id', // for a complex object it's important to tell the Filter which field to query and our CustomAngularComponentFilter returns the "id" property
-        queryFieldSorter: 'assignee.name',
-
-        // loading formatter, text to display while Post Render gets processed
-        formatter: () => '...',
-
-        // to load an Angular Component, you cannot use a Formatter since Angular needs at least 1 cycle to render everything
-        // you can use a PostRenderer but you will visually see the data appearing,
-        // which is why it's still better to use regular Formatter instead of Angular Component
-        asyncPostRender: this.renderAngularComponent.bind(this),
-        params: {
-          component: CustomTitleFormatterComponent,
-          angularUtilService: this.angularUtilService,
-          complexFieldLabel: 'assignee.name', // for the exportCustomFormatter
-        },
-        exportCustomFormatter: Formatters.complexObject,
-      },
-      {
-        id: 'complete',
-        name: '% Complete',
-        field: 'percentComplete',
-        minWidth: 100,
-        filterable: true,
-        formatter: Formatters.multiple,
-        type: 'number',
-        editor: {
-          model: Editors.singleSelect,
-
-          // We can also add HTML text to be rendered (any bad script will be sanitized) but we have to opt-in, else it will be sanitized
-          enableRenderHtml: true,
-          collection: Array.from(Array(101).keys()).map((k) => ({
-            value: k,
-            label: k,
-            symbol: '<i class="mdi mdi-percent-outline" style="color:cadetblue"></i>',
-          })),
-          customStructure: {
-            value: 'value',
-            label: 'label',
-            labelSuffix: 'symbol',
-          },
-          options: { maxHeight: 400 } as MultipleSelectOption,
-        },
-        filter: {
-          model: Filters.slider,
-          operator: '>=',
-          options: { hideSliderNumber: false } as SliderOption,
-        },
-        params: {
-          formatters: [Formatters.collectionEditor, Formatters.percentCompleteBar],
-        },
-      },
-      {
-        id: 'start',
-        name: 'Start',
-        field: 'start',
-        minWidth: 100,
-        filterable: true,
-        filter: { model: Filters.compoundDate },
-        formatter: Formatters.dateIso,
-        exportWithFormatter: true,
-        sortable: true,
-        type: 'date',
-        editor: {
-          model: Editors.date,
-        },
-      },
-      {
-        id: 'finish',
-        name: 'Finish',
-        field: 'finish',
-        minWidth: 100,
-        filterable: true,
-        sortable: true,
-        filter: { model: Filters.compoundDate },
-        formatter: Formatters.dateIso,
-        exportWithFormatter: true,
-        type: 'date',
-        editor: {
-          model: Editors.date,
-        },
-      },
-      {
-        id: 'action',
-        name: 'Action',
-        field: 'id',
-        maxWidth: 100,
-        formatter: () => `<div class="cell-menu-dropdown">Action<i class="mdi mdi-chevron-down"></i></div>`,
-        cellMenu: {
-          commandTitle: 'Commands',
-          commandItems: [
-            {
-              command: 'help',
-              title: 'Help',
-              iconCssClass: 'mdi mdi-help-circle text-info',
-              positionOrder: 66,
-              action: () => alert('Please Help!'),
-            },
-            {
-              command: 'delete-row',
-              title: 'Delete Row',
-              positionOrder: 64,
-              iconCssClass: 'mdi mdi-close color-danger',
-              cssClass: 'red',
-              textCssClass: 'text-italic color-danger-light',
-              action: (_event, args) => this.angularGrid.gridService.deleteItemById(args.dataContext.id),
-            },
-          ],
-        },
-      },
-    ];
-
-    this.gridOptions = {
-      asyncEditorLoading: false,
-      autoEdit: this.isAutoEdit,
-      autoCommitEdit: false,
-      autoResize: {
-        container: '#demo-container',
-        rightPadding: 10,
-      },
-      headerRowHeight: 45,
-      rowHeight: 45, // increase row height so that the ng-select fits in the cell
-      editable: true,
-      enableCellMenu: true,
-      enableCellNavigation: true,
-      enableColumnPicker: true,
-      enableExcelCopyBuffer: true,
-      enableFiltering: true,
-      enableAsyncPostRender: true, // for the Angular PostRenderer, don't forget to enable it
-      asyncPostRenderDelay: 0, // also make sure to remove any delay to render it
-      editCommandHandler: (item, column, editCommand) => {
-        this._commandQueue.push(editCommand);
-        editCommand.execute();
-      },
-      i18n: this.translate,
-      params: {
-        angularUtilService: this.angularUtilService, // provide the service to all at once (Editor, Filter, AsyncPostRender)
-      },
-    };
-
-    this.dataset = this.mockData(NB_ITEMS);
-  }
-
-  mockData(itemCount: number, startingIndex = 0) {
-    // mock a dataset
-    const tempDataset = [];
-    for (let i = startingIndex; i < startingIndex + itemCount; 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);
-
-      tempDataset.push({
-        id: i,
-        title: 'Task ' + i,
-        assignee: i % 3 ? this.assignees[3] : i % 2 ? this.assignees[2] : this.assignees[1],
-        duration: Math.round(Math.random() * 100) + '',
-        percentComplete: randomPercent,
-        percentCompleteNumber: randomPercent,
-        start: new Date(randomYear, randomMonth, randomDay),
-        finish: new Date(randomYear, randomMonth + 1, randomDay),
-        effortDriven: i % 5 === 0,
-      });
-    }
-    return tempDataset;
-  }
-
-  onCellChanged(e: Event, args: any) {
-    this.updatedObject = args.item;
-  }
-
-  onCellClicked(e: Event, args: any) {
-    const metadata = this.angularGrid.gridService.getColumnFromEventArguments(args);
-    console.log(metadata);
-
-    if (metadata.columnDef.id === 'edit') {
-      this.alertWarning = `open a modal window to edit: ${metadata.dataContext.title}`;
-
-      // highlight the row, to customize the color, you can change the SASS variable $row-highlight-background-color
-      this.angularGrid.gridService.highlightRow(args.row, 1500);
-
-      // you could also select the row, when using "enableCellNavigation: true", it automatically selects the row
-      // this.angularGrid.gridService.setSelectedRow(args.row);
-    } else if (metadata.columnDef.id === 'delete') {
-      if (confirm('Are you sure?')) {
-        this.angularGrid.gridService.deleteItemById(metadata.dataContext.id);
-      }
-    }
-  }
-
-  onCellValidationError(e: Event, args: any) {
-    alert(args.validationResults.msg);
-  }
-
-  changeAutoCommit() {
-    this.gridOptions.autoCommitEdit = !this.gridOptions.autoCommitEdit;
-    this.gridObj.setOptions({
-      autoCommitEdit: this.gridOptions.autoCommitEdit,
-    });
-    return true;
-  }
-
-  setAutoEdit(isAutoEdit: boolean) {
-    this.isAutoEdit = isAutoEdit;
-    this.gridObj.setOptions({ autoEdit: isAutoEdit }); // change the grid option dynamically
-    return true;
-  }
-
-  undo() {
-    const command = this._commandQueue.pop();
-    if (command && SlickGlobalEditorLock.cancelCurrentEdit()) {
-      command.undo();
-      this.gridObj.gotoCell(command.row, command.cell, false);
-    }
-  }
-
-  renderAngularComponent(cellNode: HTMLElement, row: number, dataContext: any, colDef: Column) {
-    if (colDef.params.component) {
-      // the last 2 arguments of createAngularComponent() are optional
-      // but when they are provided, that is the DOM target (cellNode) and the dataContext,
-      // the util will render everything for you without too much delay
-      const componentOutput = this.angularUtilService.createAngularComponent(colDef.params.component, cellNode, { item: dataContext });
-      componentOutput.componentRef.destroy(); // cleanup no longer needed temp component
-    }
-  }
-
-  renderInteractiveAngularComponent(cellNode: HTMLElement, row: number, dataContext: any, colDef: Column) {
-    if (colDef.params.component) {
-      this.angularUtilService.createInteractiveAngularComponent(colDef.params.component, cellNode, { item: dataContext });
-    }
-  }
-
-  /* Create an Action Dropdown Menu */
-  deleteCell(rowNumber: number) {
-    const item = this.angularGrid.dataView.getItem(rowNumber);
-    this.angularGrid.gridService.deleteItemById(item.id);
-  }
-}

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

@@ -1,138 +0,0 @@
-<div class="container-fluid">
-  <h2>
-    Example 27: Tree Data
-    <small>
-      <span class="mdi mdi-file-tree mdi-27px"></span> (from a flat dataset with <code>parentId</code> references -
-      <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-parent-child.component.ts"
-      >
-        <span class="mdi mdi-link mdi-v-align-sub"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    <ul>
-      <li>It is assumed that your dataset will have Parent/Child references AND also Tree Level (indent) property.</li>
-      <ul>
-        <li>
-          If you do not have the Tree Level (indent), you could call "convertParentChildArrayToHierarchicalView()" then call
-          "convertHierarchicalViewToParentChildArray()"
-        </li>
-        <li>
-          You could also pass the result of "convertParentChildArrayToHierarchicalView()" to "dataset-hierarchical.bind" as defined in the
-          next Hierarchical Example
-        </li>
-      </ul>
-    </ul>
-  </div>
-
-  <div class="row" style="margin-bottom: 4px">
-    <div class="col-md-12">
-      <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="add-500-rows-btn" (click)="loadData(500)">500 rows</button>
-      <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="add-50k-rows-btn" (click)="loadData(25000)">25k rows</button>
-      <button (click)="dynamicallyChangeFilter()" class="btn btn-outline-secondary btn-xs btn-icon" data-test="change-filter-dynamically">
-        <span class="mdi mdi-filter-outline"></span>
-        <span>Dynamically Change Filter (% complete &lt; 40)</span>
-      </button>
-      <button (click)="collapseAllWithoutEvent()" data-test="collapse-all-noevent-btn" class="btn btn-outline-secondary btn-xs btn-icon">
-        <span class="icon mdi mdi-arrow-collapse"></span>
-        <span>Collapse All (without triggering event)</span>
-      </button>
-      <button
-        (click)="reapplyToggledItems()"
-        data-test="reapply-toggled-items-btn"
-        class="btn btn-outline-secondary btn-xs btn-icon"
-        [disabled]="hasNoExpandCollapseChanged"
-      >
-        <span class="icon mdi mdi-history"></span>
-        <span>Reapply Previous Toggled Items</span>
-      </button>
-      <button (click)="collapseAllWithoutEvent()" class="btn btn-outline-secondary btn-xs btn-icon" data-test="collapse-all-noevent-btn">
-        <span class="mdi mdi-arrow-collapse"></span>
-        <span>Collapse All (without triggering event)</span>
-      </button>
-      <button
-        (click)="dynamicallyToggledFirstParent()"
-        class="btn btn-outline-secondary btn-xs btn-icon"
-        data-test="dynamically-toggle-first-parent-btn"
-      >
-        <span>Dynamically Toggle First Parent</span>
-      </button>
-      <button
-        (click)="reapplyToggledItems()"
-        data-test="reapply-toggled-items-btn"
-        class="btn btn-outline-secondary btn-xs btn-icon"
-        [disabled]="hasNoExpandCollapseChanged"
-      >
-        <span class="mdi mdi-history"></span>
-        <span>Reapply Previous Toggled Items</span>
-      </button>
-      <div [class]="loadingClass"></div>
-    </div>
-  </div>
-
-  <div class="row">
-    <div class="col-md-12">
-      <button (click)="addNewRow()" data-test="add-item-btn" class="btn btn-primary btn-xs btn-icon">
-        <span class="icon mdi mdi-plus color-white"></span>
-        <span>Add New Item to "Task 1" group</span>
-      </button>
-      <button (click)="updateFirstRow()" data-test="update-item-btn" class="btn btn-outline-secondary btn-xs btn-icon">
-        <span class="icon mdi mdi-pencil"></span>
-        <span>Update 1st Row Item</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 (click)="logTreeDataToggledItems()" class="btn btn-outline-secondary btn-xs btn-icon">
-        <span>Log Tree Toggled Items</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>
-      <button (click)="dynamicallyChangeFilter()" class="btn btn-outline-secondary btn-xs btn-icon">
-        <span>Dynamically Change Filter (% complete &lt; 40)</span>
-      </button>
-    </div>
-  </div>
-
-  <br />
-
-  <angular-slickgrid
-    gridId="grid27"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    [dataset]="dataset"
-    (onGridStateChanged)="handleOnGridStateChanged($event.detail)"
-    (onAngularGridCreated)="angularGridReady($event.detail)"
-    (onBeforeFilterChange)="showSpinner()"
-    (onFilterChanged)="hideSpinner()"
-    (onBeforeFilterClear)="showSpinner()"
-    (onFilterCleared)="hideSpinner()"
-    (onBeforeSortChange)="showSpinner()"
-    (onSortChanged)="hideSpinner()"
-    (onBeforeToggleTreeCollapse)="showSpinner()"
-    (onToggle-tree-collapsed)="hideSpinner()"
-    (onTree-full-toggle-start)="showSpinner()"
-    (onTree-full-toggle-end)="handleOnTreeFullToggleEnd($event.detail)"
-    (onTree-item-toggled)="handleOnTreeItemToggled($event.detail)"
-  >
-  </angular-slickgrid>
-</div>

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

@@ -1,10 +0,0 @@
-/* make sure to add the @use the SlickGrid Theme AFTER the variables changes */
-// @use '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-material.lite.scss';
-
-#grid28 {
-  .slick-cell {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-  }
-}