angular-slickgrid 8.14.0 → 9.0.0

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

@@ -0,0 +1,316 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { AngularGridInstance, Column, Editors, Filters, Formatters, GridOption, SlickRowDetailView } from '../../library';
+import { Example19RowDetailComponent } from './example19-rowdetail.component';
+import { RowDetailPreloadComponent } from './rowdetail-preload.component';
+
+const FAKE_SERVER_DELAY = 250;
+const NB_ITEMS = 1000;
+
+@Component({
+  templateUrl: './example19.component.html',
+  standalone: false,
+})
+export class Example19Component implements OnDestroy, OnInit {
+  private _darkMode = false;
+  angularGrid!: AngularGridInstance;
+  columnDefinitions: Column[] = [];
+  gridOptions!: GridOption;
+  dataset: any[] = [];
+  detailViewRowCount = 9;
+  hideSubTitle = false;
+  flashAlertType = 'info';
+  message = '';
+  serverWaitDelay = FAKE_SERVER_DELAY;
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
+  get rowDetailInstance(): SlickRowDetailView {
+    // you can get the SlickGrid RowDetail plugin (addon) instance via 2 ways
+
+    // option 1
+    return this.angularGrid.extensions.rowDetailView?.instance || {};
+
+    // OR option 2
+    // return this.angularGrid?.extensionService.getExtensionInstanceByName(ExtensionName.rowDetailView) || {};
+  }
+
+  ngOnInit(): void {
+    this.defineGrid();
+  }
+
+  ngOnDestroy(): void {
+    document.querySelector('.panel-wm-content')!.classList.remove('dark-mode');
+    document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'light';
+  }
+
+  /* Define grid Options and Columns */
+  defineGrid() {
+    this.columnDefinitions = [
+      {
+        id: 'title',
+        name: 'Title',
+        field: 'title',
+        sortable: true,
+        width: 70,
+        filterable: true,
+        editor: { model: Editors.text },
+      },
+      {
+        id: 'duration',
+        name: 'Duration (days)',
+        field: 'duration',
+        formatter: Formatters.decimal,
+        params: { minDecimal: 1, maxDecimal: 2 },
+        sortable: true,
+        type: 'number',
+        minWidth: 90,
+        filterable: true,
+      },
+      {
+        id: 'percent2',
+        name: '% Complete',
+        field: 'percentComplete2',
+        editor: { model: Editors.slider },
+        formatter: Formatters.progressBar,
+        type: 'number',
+        sortable: true,
+        minWidth: 100,
+        filterable: true,
+        filter: { model: Filters.slider, operator: '>' },
+      },
+      {
+        id: 'start',
+        name: 'Start',
+        field: 'start',
+        formatter: Formatters.dateIso,
+        sortable: true,
+        type: 'date',
+        minWidth: 90,
+        exportWithFormatter: true,
+        filterable: true,
+        filter: { model: Filters.compoundDate },
+      },
+      {
+        id: 'finish',
+        name: 'Finish',
+        field: 'finish',
+        formatter: Formatters.dateIso,
+        sortable: true,
+        type: 'date',
+        minWidth: 90,
+        exportWithFormatter: true,
+        filterable: true,
+        filter: { model: Filters.compoundDate },
+      },
+      {
+        id: 'effort-driven',
+        name: 'Effort Driven',
+        field: 'effortDriven',
+        minWidth: 100,
+        formatter: Formatters.checkmarkMaterial,
+        type: 'boolean',
+        filterable: true,
+        sortable: true,
+        filter: {
+          collection: [
+            { value: '', label: '' },
+            { value: true, label: 'True' },
+            { value: false, label: 'False' },
+          ],
+          model: Filters.singleSelect,
+        },
+      },
+    ];
+
+    this.gridOptions = {
+      autoResize: {
+        container: '#demo-container',
+        rightPadding: 10,
+      },
+      enableFiltering: true,
+      enableRowDetailView: true,
+      rowTopOffsetRenderType: 'top', // RowDetail and/or RowSpan don't render well with "transform", you should use "top"
+      darkMode: this._darkMode,
+      datasetIdPropertyName: 'rowId', // optionally use a different "id"
+      rowDetailView: {
+        // optionally change the column index position of the icon (defaults to 0)
+        // columnIndexPosition: 1,
+
+        // We can load the "process" asynchronously in 2 different ways (httpClient OR even Promise)
+        process: (item) => this.simulateServerAsyncCall(item),
+        // process: (item) => this.http.get(`api/item/${item.id}`),
+
+        // load only once and reuse the same item detail without calling process method
+        loadOnce: true,
+
+        // limit expanded row to only 1 at a time
+        singleRowExpand: false,
+
+        // false by default, clicking anywhere on the row will open the detail view
+        // when set to false, only the "+" icon would open the row detail
+        // if you use editor or cell navigation you would want this flag set to false (default)
+        useRowClick: true,
+
+        // how many grid rows do we want to use for the row detail panel (this is only set once and will be used for all row detail)
+        // also note that the detail view adds an extra 1 row for padding purposes
+        // so if you choose 4 panelRows, the display will in fact use 5 rows
+        panelRows: this.detailViewRowCount,
+
+        // you can override the logic for showing (or not) the expand icon
+        // for example, display the expand icon only on every 2nd row
+        // expandableOverride: (row: number, dataContext: any) => (dataContext.rowId % 2 === 1),
+
+        // Preload View Component
+        preloadComponent: RowDetailPreloadComponent,
+
+        // View Component to load when row detail data is ready
+        viewComponent: Example19RowDetailComponent,
+
+        // Optionally pass your Parent Component reference to your Child Component (row detail component)
+        parentRef: this,
+
+        onBeforeRowDetailToggle: (e, args) => {
+          // you coud cancel opening certain rows
+          // if (args.item.rowId === 1) {
+          //   e.preventDefault();
+          //   return false;
+          // }
+          console.log('before toggling row detail', args.item);
+          return true;
+        },
+      },
+      rowSelectionOptions: {
+        // True (Single Selection), False (Multiple Selections)
+        selectActiveRow: true,
+      },
+
+      // You could also enable Row Selection as well, but just make sure to disable `useRowClick: false`
+      // enableCheckboxSelector: true,
+      // enableRowSelection: true,
+      // checkboxSelector: {
+      //   hideInFilterHeaderRow: false,
+      //   hideSelectAllCheckbox: true,
+      // },
+    };
+
+    this.getData();
+  }
+
+  getData() {
+    // mock a dataset
+    const tmpData: any[] = [];
+    for (let i = 0; i < NB_ITEMS; 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);
+
+      tmpData[i] = {
+        rowId: i,
+        title: 'Task ' + i,
+        duration: i % 33 === 0 ? null : Math.random() * 100 + '',
+        percentComplete: randomPercent,
+        percentComplete2: randomPercent,
+        percentCompleteNumber: randomPercent,
+        start: new Date(randomYear, randomMonth, randomDay),
+        finish: new Date(randomYear, randomMonth + 1, randomDay),
+        effortDriven: i % 5 === 0,
+      };
+    }
+    this.dataset = tmpData;
+  }
+
+  changeDetailViewRowCount() {
+    if (this.angularGrid?.extensionService) {
+      const options = this.rowDetailInstance.getOptions();
+      if (options?.panelRows) {
+        options.panelRows = this.detailViewRowCount; // change number of rows dynamically
+        this.rowDetailInstance.setOptions(options);
+      }
+    }
+  }
+
+  changeEditableGrid() {
+    this.rowDetailInstance.collapseAll();
+    this.rowDetailInstance.addonOptions.useRowClick = false;
+    this.gridOptions.autoCommitEdit = !this.gridOptions.autoCommitEdit;
+    this.angularGrid?.slickGrid.setOptions({
+      editable: true,
+      autoEdit: true,
+      enableCellNavigation: true,
+    });
+    return true;
+  }
+
+  closeAllRowDetail() {
+    if (this.angularGrid?.extensionService) {
+      this.rowDetailInstance.collapseAll();
+    }
+  }
+
+  showFlashMessage(message: string, alertType = 'info') {
+    this.message = message;
+    this.flashAlertType = alertType;
+  }
+
+  /** Just for demo purposes, we will simulate an async server call and return more details on the selected row item */
+  simulateServerAsyncCall(item: any) {
+    // random set of names to use for more item detail
+    const randomNames = [
+      'John Doe',
+      'Jane Doe',
+      'Chuck Norris',
+      'Bumblebee',
+      'Jackie Chan',
+      'Elvis Presley',
+      'Bob Marley',
+      'Mohammed Ali',
+      'Bruce Lee',
+      'Rocky Balboa',
+    ];
+
+    // fill the template on async delay
+    return new Promise((resolve) => {
+      window.setTimeout(() => {
+        const itemDetail = item;
+
+        // let's add some extra properties to our item for a better async simulation
+        itemDetail.assignee = randomNames[this.randomNumber(0, 9)] || '';
+        itemDetail.reporter = randomNames[this.randomNumber(0, 9)] || '';
+
+        // resolve the data after delay specified
+        resolve(itemDetail);
+      }, this.serverWaitDelay);
+    });
+  }
+
+  toggleDarkMode() {
+    this._darkMode = !this._darkMode;
+    this.toggleBodyBackground();
+    this.angularGrid.slickGrid?.setOptions({ darkMode: this._darkMode });
+    this.closeAllRowDetail();
+  }
+
+  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';
+    }
+  }
+
+  toggleSubTitle() {
+    this.hideSubTitle = !this.hideSubTitle;
+    const action = this.hideSubTitle ? 'add' : 'remove';
+    document.querySelector('.subtitle')?.classList[action]('hidden');
+    this.angularGrid.resizerService.resizeGrid(2);
+  }
+
+  private randomNumber(min: number, max: number) {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  }
+}

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

@@ -0,0 +1,76 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    Example 20: Pinned (frozen) Columns/Rows
+    <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-frozen.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle">
+    This example demonstrates the use of Pinned (aka frozen) Columns and/or Rows (<a
+      href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/frozen-columns-rows"
+      target="_blank"
+      >Wiki docs</a
+    >)
+    <ul>
+      <li>Option to pin any number of columns (left only) or rows</li>
+      <li>Option to pin the rows at the bottom instead of the top (default)</li>
+      <li>You can also dynamically any of these options, through SlickGrid "setOptions()"</li>
+      <li>Possibility to change the styling of the line border between pinned columns/rows</li>
+    </ul>
+  </div>
+
+  <div class="row gx-2 mb-2 align-items-end">
+    <div class="col-2">
+      <label for="pinned-rows">Pinned Rows: </label>
+      <input id="pinned-rows" class="form-control" type="number" [(ngModel)]="frozenRowCount" />
+    </div>
+    <div class="col-auto gr-2">
+      <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="changeFrozenRowCount()">Set</button>
+    </div>
+    <div class="col-1"></div>
+    <div class="col-2">
+      <label for="pinned-columns">Pinned Columns: </label>
+      <input id="pinned-columns" class="form-control" type="number" [(ngModel)]="frozenColumnCount" />
+    </div>
+    <div class="col-auto">
+      <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="changeFrozenColumnCount()">Set</button>
+    </div>
+  </div>
+
+  <div class="row">
+    <div class="col-12">
+      <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="setFrozenColumns(-1)" data-test="remove-frozen-column-button">
+        <i class="mdi mdi-close"></i> Remove Frozen Columns
+      </button>
+      <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="setFrozenColumns(2)" data-test="set-3frozen-columns">
+        <i class="mdi mdi-pin-outline"></i> Set 3 Frozen Columns
+      </button>
+
+      <span style="margin-left: 15px">
+        <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="toggleFrozenBottomRows()">
+          <i class="mdi mdi-flip-vertical"></i> Toggle Pinned Rows
+        </button>
+        <span style="font-weight: bold">: {{ isFrozenBottom ? 'Bottom' : 'Top' }}</span>
+      </span>
+    </div>
+  </div>
+  <div class="row mt-2 mb-2">
+    <hr />
+  </div>
+  <angular-slickgrid
+    gridId="grid20"
+    gridWidth="875"
+    [columns]="columnDefinitions"
+    [options]="gridOptions"
+    [dataset]="dataset"
+    (onValidationError)="onValidationError($event.detail.eventData, $event.detail.args)"
+    (onAngularGridCreated)="angularGridReady($event.detail)"
+  >
+  </angular-slickgrid>
+</div>

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

@@ -0,0 +1,11 @@
+/** You can change the pinned/frozen border styling through this css override */
+
+.slick-row .slick-cell.frozen:last-child,
+.slick-headerrow-column.frozen:last-child,
+.slick-footerrow-column.frozen:last-child {
+  border-right: 1px solid #969696 !important;
+}
+
+.slick-pane-bottom {
+  border-top: 1px solid #969696 !important;
+}