angular-slickgrid 8.14.0 → 9.0.0

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

@@ -0,0 +1,264 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { SlickCustomTooltip } from '@slickgrid-universal/custom-tooltip-plugin';
+import { Subscription } from 'rxjs';
+
+import { AngularGridInstance, Column, Editors, Formatters, GridOption } from '../../library';
+
+const NB_ITEMS = 20;
+
+@Component({
+  encapsulation: ViewEncapsulation.None,
+  styleUrls: ['./example35.component.scss'],
+  templateUrl: './example35.component.html',
+  standalone: false,
+})
+export class Example35Component implements OnInit {
+  private subscriptions: Subscription[] = [];
+  angularGrid!: AngularGridInstance;
+  gridOptions!: GridOption;
+  columnDefinitions!: Column[];
+  dataset!: any[];
+  selectedLanguage = '';
+  selectedLanguageFile = '';
+  fetchResult = '';
+  statusClass = 'alert alert-light';
+  statusStyle = 'display: none';
+
+  constructor(private translate: TranslateService) {
+    // always start with English for Cypress E2E tests to be consistent
+    const defaultLang = 'en';
+    this.translate.use(defaultLang);
+    this.selectedLanguage = defaultLang;
+  }
+
+  ngOnInit() {
+    this.dataset = this.getData(NB_ITEMS);
+    this.defineGrid();
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+  }
+
+  /* Define grid Options and Columns */
+  defineGrid() {
+    this.columnDefinitions = [
+      {
+        id: 'title',
+        name: 'Title',
+        field: 'title',
+        sortable: true,
+        minWidth: 100,
+        filterable: true,
+        editor: { model: Editors.text },
+      },
+      {
+        id: 'duration',
+        name: 'Duration (days)',
+        field: 'duration',
+        sortable: true,
+        minWidth: 100,
+        filterable: true,
+        type: 'number',
+        editor: { model: Editors.text },
+      },
+      {
+        id: '%',
+        name: '% Complete',
+        field: 'percentComplete',
+        sortable: true,
+        minWidth: 100,
+        filterable: true,
+        type: 'number',
+        editor: { model: Editors.text },
+      },
+      {
+        id: 'start',
+        name: 'Start',
+        field: 'start',
+        formatter: Formatters.dateIso,
+        exportWithFormatter: true,
+        filterable: true,
+        editor: { model: Editors.date },
+      },
+      {
+        id: 'finish',
+        name: 'Finish',
+        field: 'finish',
+        formatter: Formatters.dateIso,
+        exportWithFormatter: true,
+        filterable: true,
+        editor: { model: Editors.date },
+      },
+      {
+        id: 'effort-driven',
+        name: 'Effort Driven',
+        field: 'effortDriven',
+        sortable: true,
+        minWidth: 100,
+        filterable: true,
+        type: 'boolean',
+        editor: { model: Editors.checkbox },
+      },
+    ];
+
+    this.gridOptions = {
+      enableAutoResize: false,
+      gridHeight: 350,
+      gridWidth: 800,
+      rowHeight: 33,
+      enableExcelCopyBuffer: true,
+      excelCopyBufferOptions: {
+        onBeforePasteCell: (_e, args) => {
+          // for the sake of the demo, do not allow to paste into the first column title
+          // this will be overriden by the row based edit plugin to additionally only work if the row is in editmode
+          return args.cell > 0;
+        },
+      },
+      // NOTE: this will be automatically turned to true by the Row Based Edit Plugin.
+      // A console warning will be shown if you omit this flag
+      autoEdit: false,
+      editable: true,
+      enableCellNavigation: true,
+      enableRowBasedEdit: true,
+      enableTranslate: true,
+      i18n: this.translate,
+      rowBasedEditOptions: {
+        allowMultipleRows: false,
+        onBeforeEditMode: () => this.clearStatus(),
+        onBeforeRowUpdated: (args) => {
+          const { effortDriven, percentComplete, finish, start, duration, title } = args.dataContext;
+
+          if (duration > 40) {
+            alert('Sorry, 40 is the maximum allowed duration.');
+            return Promise.resolve(false);
+          }
+
+          return fakeFetch('your-backend-api/endpoint', {
+            method: 'POST',
+            body: JSON.stringify({ effortDriven, percentComplete, finish, start, duration, title }),
+            headers: {
+              'Content-type': 'application/json; charset=UTF-8',
+            },
+          })
+            .catch((err) => {
+              console.error(err);
+              return false;
+            })
+            .then((response: any) => {
+              if (response === false) {
+                this.statusClass = 'alert alert-danger';
+                return false;
+              }
+              if (typeof response === 'object') {
+                return response!.json();
+              }
+            })
+            .then((json) => {
+              this.statusStyle = 'display: block';
+              this.statusClass = 'alert alert-success';
+              this.fetchResult = json.message;
+              return true;
+            });
+        },
+        actionColumnConfig: {
+          // override the defaults of the action column
+          width: 100,
+          minWidth: 100,
+          maxWidth: 100,
+        },
+        actionButtons: {
+          editButtonClassName: 'button-style margin-auto btn-icon px-2 me-1',
+          iconEditButtonClassName: 'mdi mdi-pencil',
+          // since no title and no titleKey is provided, it will fallback to the default text provided by the plugin
+          // if the title is provided but no titleKey, it will override the default text
+          // last but not least if a titleKey is provided, it will use the translation key to translate the text
+          // editButtonTitle: 'Edit row',
+
+          cancelButtonClassName: 'button-style btn-icon px-2',
+          cancelButtonTitle: 'Cancel row',
+          cancelButtonTitleKey: 'RBE_BTN_CANCEL',
+          iconCancelButtonClassName: 'mdi mdi-undo text-danger',
+          cancelButtonPrompt: 'Are you sure you want to cancel your changes?',
+
+          updateButtonClassName: 'button-style btn-icon px-2 me-1',
+          updateButtonTitle: 'Update row',
+          updateButtonTitleKey: 'RBE_BTN_UPDATE',
+          iconUpdateButtonClassName: 'mdi mdi-check text-success',
+          updateButtonPrompt: 'Save changes?',
+
+          deleteButtonClassName: 'button-style btn-icon px-2',
+          deleteButtonTitle: 'Delete row',
+          iconDeleteButtonClassName: 'mdi mdi-trash-can text-danger',
+          deleteButtonPrompt: 'Are you sure you want to delete this row?',
+        },
+      },
+      externalResources: [new SlickCustomTooltip()],
+    };
+  }
+
+  getData(count: number) {
+    // mock a dataset
+    const mockDataset: any[] = [];
+    for (let i = 0; i < count; 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);
+
+      mockDataset[i] = {
+        id: i,
+        title: 'Task ' + i,
+        duration: Math.round(Math.random() * 40) + '',
+        percentComplete: randomPercent,
+        start: new Date(randomYear, randomMonth + 1, randomDay),
+        finish: new Date(randomYear + 1, randomMonth + 1, randomDay),
+        effortDriven: i % 5 === 0,
+      };
+    }
+
+    return mockDataset;
+  }
+
+  clearStatus() {
+    this.statusClass = 'alert alert-light';
+    this.statusStyle = 'display: none';
+    this.fetchResult = '';
+  }
+
+  toggleSingleMultiRowEdit() {
+    const gridOptions = {
+      ...this.gridOptions,
+      ...{
+        rowBasedEditOptions: {
+          ...this.gridOptions.rowBasedEditOptions,
+          ...{ allowMultipleRows: !this.gridOptions.rowBasedEditOptions?.allowMultipleRows },
+        },
+      },
+    };
+    this.angularGrid.slickGrid.setOptions(gridOptions);
+    this.gridOptions = this.angularGrid.slickGrid.getOptions() as GridOption;
+  }
+
+  switchLanguage() {
+    const nextLanguage = this.selectedLanguage === 'en' ? 'fr' : 'en';
+    this.subscriptions.push(
+      this.translate.use(nextLanguage).subscribe(() => {
+        this.selectedLanguage = nextLanguage;
+      })
+    );
+  }
+}
+
+function fakeFetch(_input: string | URL | Request, _init?: RequestInit | undefined): Promise<Response> {
+  return new Promise((resolve) => {
+    setTimeout(
+      () => {
+        resolve(new Response(JSON.stringify({ status: 200, message: 'success' })));
+        // reduces the delay for automated Cypress tests
+      },
+      (window as any).Cypress ? 10 : 500
+    );
+  });
+}

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

@@ -0,0 +1,56 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    Example 36: Excel Export Formulas
+    <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-excel-formula.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle">
+    Grid with Excel Formulas (<a
+      href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/export-to-excel#cell-value-parser"
+      target="_blank"
+      >Wiki docs</a
+    >). Calculate Totals via Formatters in the UI, but use Excel Formula when exporting via
+    <code>excelExportOptions.valueParserCallback</code> When Grouped we will also calculate the Group Totals in the UI via Group Formatter
+    and we again use Excel Formula to calculate the Group Totals (sum) dynamically. For Grouping we need to use
+    <code>groupTotalsExcelExportOptions.valueParserCallback</code> instead.
+  </div>
+
+  <section class="row mb-2">
+    <div class="mb-1">
+      <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="exportToExcel()" data-test="export-excel-btn">
+        <span class="mdi mdi-file-excel-outline text-success"></span>
+        <span>Export to Excel</span>
+      </button>
+      <span>
+        <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="groupByTaxable()" data-test="group-by-btn">
+          <span>Group by Taxable</span>
+        </button>
+        <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="clearGrouping()" data-test="clear-grouping-btn">
+          <span>Clear grouping</span>
+        </button>
+      </span>
+      <span class="ml-6 text-bold d-inline-flex gap-4px">
+        Tax Rate (%):
+        <input type="number" [(ngModel)]="taxRate" class="narrow input" step="0.25" data-test="taxrate" />
+        <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="updateTaxRate()" data-test="update-btn">Update</button>
+      </span>
+    </div>
+  </section>
+
+  <angular-slickgrid
+    gridId="grid36"
+    [columns]="columnDefinitions"
+    [options]="gridOptions"
+    [dataset]="dataset"
+    (onAngularGridCreated)="angularGridReady($event.detail)"
+    (onCellChange)="invalidateAll()"
+  >
+  </angular-slickgrid>
+</div>

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

@@ -0,0 +1,26 @@
+input[type=number].narrow {
+  height: 32px;
+  width: 50px;
+  border: 1px solid #c0c0c0;
+  border-radius: 3px;
+}
+
+#grid36 {
+  .slick-row:not(.slick-group) >.cell-unselectable {
+    background: #ececec !important;
+    font-weight: bold;
+  }
+
+  .text-sub-total {
+    font-style: italic;
+    color: rgb(33, 80, 115) !important;
+  }
+  .text-taxes {
+    font-style: italic;
+    color: rgb(198, 89, 17);
+  }
+  .text-total {
+    font-weight: bold;
+    color: rgb(0, 90, 158);
+  }
+}