angular-slickgrid 8.14.0 → 9.0.0

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

@@ -0,0 +1,98 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    Example 12: Localization (i18n)
+    <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-localization.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle">
+    Support multiple locales with the ngx-translate plugin, following these steps (<a
+      href="https://ghiscoding.gitbook.io/angular-slickgrid/localization/localization-with-ngx-translate"
+      target="_blank"
+      >Wiki docs</a
+    >)
+    <ol class="small">
+      <li>You first need to "enableTranslate" in the Grid Options</li>
+      <li>In the Column Definitions, you have following options</li>
+      <ul>
+        <li>To translate a header title, use "nameKey" with a translate key (nameKey: 'TITLE')</li>
+        <li>For the cell values, you need to use a Formatter, there's 2 ways of doing it</li>
+        <ul>
+          <li>formatter: myCustomTranslateFormatter <b>&lt;= "Title" column uses it</b></li>
+          <li>formatter: Formatters.translate, i18n: this.translateService <b>&lt;= "Completed" column uses it</b></li>
+        </ul>
+      </ul>
+      <li>For date localization, you need to create your own custom formatter.</li>
+      <ul>
+        <li>You can easily implement logic to switch between Formatters "dateIso" or "dateUs", depending on current locale.</li>
+      </ul>
+      <li>For the Select (dropdown) filter, you can fill in the "labelKey" property, if found it will use it, else it will use "label"</li>
+      <ul>
+        <li>
+          What if your select options have totally different value/label pair? In this case, you can use the
+          <b>customStructure: &#123; label: 'customLabel', value: 'customValue'&#125;</b> to change the property name(s) to use.'
+        </li>
+        <li>What if you want to use "customStructure" and translation? Simply pass this flag <b>enableTranslateLabel: true</b></li>
+        <li>
+          More info on the Select Filter
+          <a href="https://ghiscoding.gitbook.io/angular-slickgrid/column-functionalities/filters/select-filter" target="_blank"
+            >Wiki page</a
+          >
+        </li>
+      </ul>
+      <li>
+        For more info about "Download to File", read the
+        <a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/export-to-text-file" target="_blank">Wiki page</a>
+      </li>
+    </ol>
+  </div>
+
+  <hr />
+
+  <div class="row">
+    <div class="col-sm-12">
+      <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="language-button" (click)="switchLanguage()">
+        <i class="mdi mdi-translate"></i>
+        Switch Language
+      </button>
+      <b>Locale:</b> <span style="font-style: italic" data-test="selected-locale">{{ selectedLanguage + '.json' }}</span>
+
+      <span style="margin-left: 20px">
+        <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="exportToFile('csv')">
+          <i class="mdi mdi-download"></i>
+          Download to CSV
+        </button>
+        <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="exportToFile('txt')">
+          <i class="mdi mdi-download"></i>
+          Download to Text
+        </button>
+        <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="exportToExcel()">
+          <i class="mdi mdi-file-excel-outline text-success"></i>
+          Download to Excel
+        </button>
+        <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="dynamicallyAddTitleHeader()">
+          <i class="mdi mdi-shape-square-plus"></i>
+          Dynamically Duplicate Title Column
+        </button>
+      </span>
+    </div>
+  </div>
+
+  <div class="col-sm-12">
+    <angular-slickgrid
+      gridId="grid12"
+      [dataset]="dataset"
+      [options]="gridOptions"
+      [columns]="columnDefinitions"
+      (onAngularGridCreated)="angularGridReady($event.detail)"
+      (onGridStateChanged)="gridStateChanged($event.detail)"
+    >
+    </angular-slickgrid>
+  </div>
+</div>

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

@@ -0,0 +1,317 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { ExcelExportService } from '@slickgrid-universal/excel-export';
+import { TextExportService } from '@slickgrid-universal/text-export';
+import { Subscription } from 'rxjs';
+
+import {
+  AngularGridInstance,
+  Column,
+  DelimiterType,
+  Filters,
+  Formatter,
+  Formatters,
+  GridOption,
+  GridStateChange,
+  type SliderOption,
+  unsubscribeAllObservables,
+} from '../../library';
+
+const NB_ITEMS = 1500;
+
+// create a custom translate Formatter (typically you would move that a separate file, for separation of concerns)
+const taskTranslateFormatter: Formatter = (row, cell, value, columnDef, dataContext, grid) => {
+  const gridOptions = grid.getOptions() as GridOption;
+  const translate = gridOptions.i18n as TranslateService;
+
+  return translate.instant('TASK_X', { x: value });
+};
+
+@Component({
+  templateUrl: './example12.component.html',
+  standalone: false,
+})
+export class Example12Component implements OnInit, OnDestroy {
+  private subscriptions: Subscription[] = [];
+  angularGrid!: AngularGridInstance;
+  columnDefinitions!: Column[];
+  gridOptions!: GridOption;
+  dataset!: any[];
+  selectedLanguage: string;
+  duplicateTitleHeaderCount = 1;
+  gridObj: any;
+  excelExportService = new ExcelExportService();
+  textExportService = new TextExportService();
+
+  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;
+  }
+
+  ngOnDestroy() {
+    // also unsubscribe all Angular Subscriptions
+    unsubscribeAllObservables(this.subscriptions);
+  }
+
+  ngOnInit(): void {
+    this.columnDefinitions = [
+      {
+        id: 'title',
+        name: 'Title',
+        field: 'id',
+        nameKey: 'TITLE',
+        minWidth: 100,
+        formatter: taskTranslateFormatter,
+        sortable: true,
+        filterable: true,
+        params: { useFormatterOuputToFilter: true },
+      },
+      { id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80 },
+      {
+        id: 'duration',
+        name: 'Duration (days)',
+        field: 'duration',
+        nameKey: 'DURATION',
+        sortable: true,
+        formatter: Formatters.percentCompleteBar,
+        minWidth: 100,
+        exportWithFormatter: false,
+        filterable: true,
+        type: 'number',
+        filter: {
+          model: Filters.slider,
+          /* operator: '=',*/
+          options: { hideSliderNumber: true } as SliderOption,
+        },
+      },
+      {
+        id: 'start',
+        name: 'Start',
+        field: 'start',
+        nameKey: 'START',
+        minWidth: 100,
+        formatter: Formatters.dateIso,
+        outputType: 'dateIso',
+        type: 'date',
+        exportWithFormatter: true,
+        filterable: true,
+        filter: { model: Filters.compoundDate },
+      },
+      {
+        id: 'finish',
+        name: 'Finish',
+        field: 'finish',
+        nameKey: 'FINISH',
+        formatter: Formatters.dateIso,
+        outputType: 'dateIso',
+        type: 'date',
+        minWidth: 100,
+        filterable: true,
+        filter: { model: Filters.compoundDate },
+      },
+      {
+        id: 'completedBool',
+        name: 'Completed',
+        field: 'completedBool',
+        nameKey: 'COMPLETED',
+        minWidth: 100,
+        sortable: true,
+        formatter: Formatters.checkmarkMaterial,
+        exportCustomFormatter: Formatters.translateBoolean,
+        filterable: true,
+        filter: {
+          collection: [
+            { value: '', label: '' },
+            { value: true, labelKey: 'TRUE' },
+            { value: false, labelKey: 'FALSE' },
+          ],
+          model: Filters.singleSelect,
+          enableTranslateLabel: true,
+        },
+      },
+      {
+        id: 'completed',
+        name: 'Completed',
+        field: 'completed',
+        nameKey: 'COMPLETED',
+        formatter: Formatters.translate,
+        sortable: true,
+        minWidth: 100,
+        exportWithFormatter: true, // you can set this property in the column definition OR in the grid options, column def has priority over grid options
+        filterable: true,
+        filter: {
+          collection: [
+            { value: '', label: '' },
+            { value: 'TRUE', labelKey: 'TRUE' },
+            { value: 'FALSE', labelKey: 'FALSE' },
+          ],
+          collectionSortBy: {
+            property: 'labelKey', // will sort by translated value since "enableTranslateLabel" is true
+          },
+          enableTranslateLabel: true,
+          model: Filters.singleSelect,
+        },
+      },
+      // OR via your own custom translate formatter
+      // { id: 'completed', name: 'Completed', field: 'completed', nameKey: 'COMPLETED', formatter: translateFormatter, sortable: true, minWidth: 100 }
+    ];
+    this.gridOptions = {
+      autoResize: {
+        container: '#demo-container',
+        rightPadding: 10,
+      },
+      enableAutoResize: true,
+      enableExcelCopyBuffer: true,
+      enableFiltering: true,
+      enableTranslate: true,
+      i18n: this.translate,
+      checkboxSelector: {
+        // you can toggle these 2 properties to show the "select all" checkbox in different location
+        hideInFilterHeaderRow: false,
+        hideInColumnTitleRow: true,
+      },
+      enableCheckboxSelector: true,
+      enableRowSelection: true,
+      showCustomFooter: true, // display some metrics in the bottom custom footer
+      customFooterOptions: {
+        metricTexts: {
+          // default text displayed in the metrics section on the right
+          // all texts optionally support translation keys,
+          // if you wish to use that feature then use the text properties with the 'Key' suffix (e.g: itemsKey, ofKey, lastUpdateKey)
+          // example "items" for a plain string OR "itemsKey" to use a translation key
+          itemsKey: 'ITEMS',
+          ofKey: 'OF',
+          lastUpdateKey: 'LAST_UPDATE',
+        },
+        dateFormat: 'YYYY-MM-DD, hh:mm a',
+        hideTotalItemCount: false,
+        hideLastUpdateTimestamp: false,
+      },
+      excelExportOptions: {
+        // optionally pass a custom header to the Excel Sheet
+        // a lot of the info can be found on Excel-Builder-Vanilla
+        // https://ghiscoding.gitbook.io/excel-builder-vanilla/cookbook/fonts-and-colors
+        customExcelHeader: (workbook, sheet) => {
+          const customTitle =
+            this.translate.currentLang === 'fr'
+              ? 'Titre qui est suffisament long pour être coupé'
+              : 'My header that is long enough to wrap';
+          const stylesheet = workbook.getStyleSheet();
+          const aFormatDefn = {
+            font: { size: 12, fontName: 'Calibri', bold: true, color: 'FF0000FF' }, // every color starts with FF, then regular HTML color
+            alignment: { wrapText: true },
+          };
+          const formatterId = stylesheet.createFormat(aFormatDefn);
+          sheet.setRowInstructions(0, { height: 30 }); // change height of row 0
+
+          // excel cells start with A1 which is upper left corner
+          sheet.mergeCells('B1', 'D1');
+          const cols = [];
+          // push empty data on A1
+          cols.push({ value: '' });
+          // push data in B1 cell with metadata formatter
+          cols.push({ value: customTitle, metadata: { style: formatterId.id } });
+          sheet.data.push(cols);
+        },
+      },
+      gridMenu: {
+        hideExportCsvCommand: false, // false by default, so it's optional
+        hideExportTextDelimitedCommand: false, // true by default, so if you want it, you will need to disable the flag
+      },
+      enableExcelExport: true,
+      enableTextExport: true,
+      textExportOptions: {
+        // set at the grid option level, meaning all column will evaluate the Formatter (when it has a Formatter defined)
+        exportWithFormatter: true,
+        sanitizeDataExport: true,
+      },
+      externalResources: [this.excelExportService, this.textExportService],
+    };
+
+    this.loadData(NB_ITEMS);
+  }
+
+  // mock a dataset
+  loadData(count: number) {
+    const tmpData = [];
+    for (let i = 0; i < count; i++) {
+      const randomYear = 2000 + Math.floor(Math.random() * 30);
+      const randomMonth = Math.floor(Math.random() * 11);
+      const randomDay = Math.floor(Math.random() * 29);
+
+      tmpData[i] = {
+        id: i,
+        description: i % 5 ? 'desc ' + i : '🚀🦄 español', // also add some random to test NULL field
+        duration: Math.round(Math.random() * 100) + '',
+        start: new Date(randomYear, randomMonth, randomDay),
+        finish: new Date(randomYear, randomMonth + 1, randomDay),
+        completedBool: i % 5 === 0 ? true : false,
+        completed: i % 5 === 0 ? 'TRUE' : 'FALSE',
+      };
+    }
+    this.dataset = tmpData;
+  }
+
+  angularGridReady(angularGrid: AngularGridInstance) {
+    this.angularGrid = angularGrid;
+    this.gridObj = angularGrid.slickGrid;
+  }
+
+  dynamicallyAddTitleHeader() {
+    // you can dynamically add your column to your column definitions
+    // and then use the spread operator [...cols] OR slice to force Angular to review the changes
+    const newCol = {
+      id: `title${this.duplicateTitleHeaderCount++}`,
+      field: 'id',
+      nameKey: 'TITLE',
+      formatter: taskTranslateFormatter,
+      sortable: true,
+      minWidth: 100,
+      filterable: true,
+      params: { useFormatterOuputToFilter: true },
+    };
+    this.columnDefinitions.push(newCol);
+    this.columnDefinitions = this.columnDefinitions.slice(); // or use spread operator [...cols]
+
+    // NOTE if you use an Extensions (Checkbox Selector, Row Detail, ...) that modifies the column definitions in any way
+    // you MUST use "getAllColumnDefinitions()" from the GridService, using this will be ALL columns including the 1st column that is created internally
+    // for example if you use the Checkbox Selector (row selection), you MUST use the code below
+    /*
+    const allColumns = this.angularGrid.gridService.getAllColumnDefinitions();
+    allColumns.push(newCol);
+    this.columnDefinitions = [...allColumns]; // (or use slice) reassign to column definitions for Angular to do dirty checking
+    */
+  }
+
+  exportToExcel() {
+    this.excelExportService.exportToExcel({
+      filename: 'Export',
+      format: 'xlsx',
+    });
+  }
+
+  exportToFile(type = 'csv') {
+    this.textExportService.exportToFile({
+      delimiter: type === 'csv' ? DelimiterType.comma : DelimiterType.tab,
+      filename: 'myExport',
+      format: type === 'csv' ? 'csv' : 'txt',
+    });
+  }
+
+  /** Dispatched event of a Grid State Changed event */
+  gridStateChanged(gridStateChanges: GridStateChange) {
+    console.log('Grid State changed:: ', gridStateChanges);
+    console.log('Grid State changed:: ', gridStateChanges.change);
+  }
+
+  switchLanguage() {
+    const nextLanguage = this.selectedLanguage === 'en' ? 'fr' : 'en';
+    this.subscriptions.push(
+      this.translate.use(nextLanguage).subscribe(() => {
+        this.selectedLanguage = nextLanguage;
+      })
+    );
+  }
+}

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

@@ -0,0 +1,96 @@
+<div id="demo-container" class="container-fluid">
+  <h2>
+    Example 13: Grouping & Aggregators
+    <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-grouping.component.ts"
+      >
+        <span class="mdi mdi-link-variant"></span> code
+      </a>
+    </span>
+  </h2>
+  <div class="subtitle">
+    (<a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/grouping-and-aggregators" target="_blank">Wiki docs</a>)
+    <ul>
+      <li>Fully dynamic and interactive multi-level grouping with filtering and aggregates over 50'000 items</li>
+      <li>Each grouping level can have its own aggregates (over child rows, child groups, or all descendant rows)..</li>
+    </ul>
+  </div>
+
+  <div class="row">
+    <div class="col-sm-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(50000)">50k rows</button>
+      <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="clear-grouping-btn" (click)="clearGrouping()">
+        <i class="mdi mdi-close"></i> Clear grouping
+      </button>
+      <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="collapse-all-btn" (click)="collapseAllGroups()">
+        <i class="mdi mdi-arrow-collapse"></i> Collapse all groups
+      </button>
+      <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="expand-all-btn" (click)="expandAllGroups()">
+        <i class="mdi mdi-arrow-expand"></i> Expand all groups
+      </button>
+      <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="export-excel-btn" (click)="exportToExcel()">
+        <i class="mdi mdi-file-excel-outline text-success"></i> Export to Excel
+      </button>
+    </div>
+  </div>
+  <hr />
+  <div class="row">
+    <div class="col-sm-12">
+      <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="group-duration-sort-value-btn" (click)="groupByDuration()">
+        Group by duration &amp; sort groups by value
+      </button>
+      <button
+        class="btn btn-outline-secondary btn-xs btn-icon"
+        data-test="group-duration-sort-count-btn"
+        (click)="groupByDurationOrderByCount(false)"
+      >
+        Group by duration &amp; sort groups by count
+      </button>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-sm-12">
+      <button
+        class="btn btn-outline-secondary btn-xs btn-icon"
+        data-test="group-duration-sort-count-collapse-btn"
+        (click)="groupByDurationOrderByCount(true)"
+      >
+        Group by duration &amp; sort groups by count, aggregate collapsed
+      </button>
+      <button
+        class="btn btn-outline-secondary btn-xs btn-icon"
+        data-test="group-duration-effort-btn"
+        (click)="groupByDurationEffortDriven()"
+      >
+        Group by duration then effort-driven
+      </button>
+      <button
+        class="btn btn-outline-secondary btn-xs btn-icon"
+        data-test="group-duration-effort-percent-btn"
+        (click)="groupByDurationEffortDrivenPercent()"
+      >
+        Group by duration then effort-driven then percent.
+      </button>
+      <span [hidden]="!processing">
+        <i class="mdi mdi-sync mdi-spin-1s"></i>
+      </span>
+    </div>
+  </div>
+
+  <angular-slickgrid
+    gridId="grid14"
+    [dataset]="dataset"
+    [columns]="columnDefinitions"
+    [options]="gridOptions"
+    (onBeforeExportToTextFile)="processing = true"
+    (onAfterExportToTextFile)="processing = false"
+    (onBeforeExportToExcel)="processing = true"
+    (onAfterExportToExcel)="processing = false"
+    (onAngularGridCreated)="angularGridReady($event.detail)"
+  >
+  </angular-slickgrid>
+</div>