angular-slickgrid 9.0.0 → 9.0.2

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

@@ -1,50 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    Example 17: Dynamically Create Grid from CSV / Excel import
-    <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/grid18.component.ts"
-      >
-        <span class="mdi mdi-link mdi-v-align-sub"></span> code
-      </a>
-    </span>
-    <button class="ms-2 btn btn-outline-secondary btn-sm btn-icon" type="button" data-test="toggle-subtitle" (click)="toggleSubTitle()">
-      <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
-    </button>
-  </h2>
-
-  <div *ngIf="showSubTitle" class="subtitle">
-    Allow creating a grid dynamically by importing an external CSV or Excel file. This script demo will read the CSV file and will consider
-    the first row as the column header and create the column definitions accordingly, while the next few rows will be considered the
-    dataset. Note that this example is demoing a CSV file import but in your application you could easily implemnt an Excel file uploading.
-  </div>
-
-  <div>A default CSV file can be download <a id="template-dl" [href]="templateUrl">here</a>.</div>
-
-  <div class="d-flex mt-5 align-items-end">
-    <div class="file-upload">
-      <label for="formFile" class="form-label">Choose a CSV file…</label>
-      <input
-        class="form-control"
-        type="file"
-        data-test="file-upload-input"
-        [(ngModel)]="uploadFileRef"
-        (input)="handleFileImport($event)"
-      />
-    </div>
-    <span class="mx-3">or</span>
-    <div>
-      <button id="uploadBtn" data-test="static-data-btn" class="btn btn-outline-secondary" (click)="handleDefaultCsv()">
-        Use default CSV data
-      </button>
-      <button class="btn btn-outline-secondary" (click)="destroyGrid()">Destroy Grid</button>
-    </div>
-  </div>
-
-  <hr />
-
-  <angular-slickgrid *ngIf="gridCreated" gridId="grid17" [columns]="columnDefinitions" [options]="gridOptions" [dataset]="dataset">
-  </angular-slickgrid>
-</div>

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

@@ -1,109 +0,0 @@
-import { ChangeDetectorRef, Component, ViewEncapsulation } from '@angular/core';
-import { ExcelExportService } from '@slickgrid-universal/excel-export';
-import { type Column, type GridOption, toCamelCase } from '../../library';
-
-const sampleDataRoot = 'assets/data';
-
-@Component({
-  styles: ['.file-upload { max-width: 300px; }'],
-  encapsulation: ViewEncapsulation.None,
-  templateUrl: './example17.component.html',
-  standalone: false,
-})
-export class Example17Component {
-  columnDefinitions: Column[] = [];
-  gridOptions!: GridOption;
-  dataset: any[] = [];
-  gridCreated = false;
-  showSubTitle = true;
-  uploadFileRef = '';
-  templateUrl = `${sampleDataRoot}/users.csv`;
-
-  constructor(private readonly cd: ChangeDetectorRef) {}
-
-  handleFileImport(event: any) {
-    const file = event.target.files[0];
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e: any) => {
-        const content = e.target.result;
-        this.dynamicallyCreateGrid(content);
-      };
-      reader.readAsText(file);
-    }
-  }
-
-  handleDefaultCsv() {
-    const staticDataCsv = `First Name,Last Name,Age,Type\nBob,Smith,33,Teacher\nJohn,Doe,20,Student\nJane,Doe,21,Student`;
-    this.dynamicallyCreateGrid(staticDataCsv);
-    this.uploadFileRef = '';
-  }
-
-  destroyGrid() {
-    this.gridCreated = false;
-  }
-
-  dynamicallyCreateGrid(csvContent: string) {
-    // dispose of any previous grid before creating a new one
-    this.gridCreated = false;
-    this.cd.detectChanges();
-
-    const dataRows = csvContent?.split('\n');
-    const colDefs: Column[] = [];
-    const outputData: any[] = [];
-
-    // create column definitions
-    dataRows.forEach((dataRow, rowIndex) => {
-      const cellValues = dataRow.split(',');
-      const dataEntryObj: any = {};
-
-      if (rowIndex === 0) {
-        // the 1st row is considered to be the header titles, we can create the column definitions from it
-        for (const cellVal of cellValues) {
-          const camelFieldName = toCamelCase(cellVal);
-          colDefs.push({
-            id: camelFieldName,
-            name: cellVal,
-            field: camelFieldName,
-            filterable: true,
-            sortable: true,
-          });
-        }
-      } else {
-        // at this point all column defs were created and we can loop through them and
-        // we can now start adding data as an object and then simply push it to the dataset array
-        cellValues.forEach((cellVal, colIndex) => {
-          dataEntryObj[colDefs[colIndex].id] = cellVal;
-        });
-
-        // a unique "id" must be provided, if not found then use the row index and push it to the dataset
-        if ('id' in dataEntryObj) {
-          outputData.push(dataEntryObj);
-        } else {
-          outputData.push({ ...dataEntryObj, id: rowIndex });
-        }
-      }
-    });
-
-    this.gridOptions = {
-      gridHeight: 300,
-      gridWidth: 800,
-      enableFiltering: true,
-      enableExcelExport: true,
-      externalResources: [new ExcelExportService()],
-      headerRowHeight: 35,
-      rowHeight: 33,
-    };
-
-    this.dataset = outputData;
-    this.columnDefinitions = colDefs;
-    this.gridCreated = true;
-    this.cd.detectChanges();
-  }
-
-  toggleSubTitle() {
-    this.showSubTitle = !this.showSubTitle;
-    const action = this.showSubTitle ? 'remove' : 'add';
-    document.querySelector('.subtitle')?.classList[action]('hidden');
-  }
-}

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

@@ -1,132 +0,0 @@
-<div id="demo-container" class="container-fluid">
-  <h2>
-    Example 18: Draggable Grouping & Aggregators
-    <button class="btn btn-outline-secondary btn-sm ms-3" (click)="toggleDarkMode()" data-test="toggle-dark-mode">
-      <span class="mdi mdi-theme-light-dark"></span>
-      <span>Toggle Dark Mode</span>
-    </button>
-    <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-draggrouping.component.ts"
-      >
-        <span class="mdi mdi-link-variant"></span> code
-      </a>
-    </span>
-  </h2>
-  <div class="subtitle">
-    <ul>
-      <li>
-        <a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/grouping-and-aggregators" target="_blank"
-          >Wiki docs</a
-        >
-      </li>
-      <li>This example shows 3 ways of grouping</li>
-      <ol>
-        <li>
-          Drag any Column Header on the top placeholder to group by that column (support moti-columns grouping by adding more columns to the
-          drop area).
-        </li>
-        <li>Use buttons and defined functions to group by wichever field you want</li>
-        <li>Use the Select dropdown to group, the position of the Selects represent the grouping level</li>
-      </ol>
-      <li>Fully dynamic and interactive multi-level grouping with filtering and aggregates ovor 50'000 items</li>
-      <li>Each grouping level can have its own aggregates (over child rows, child groups, or all descendant rows)..</li>
-      <li>Use "Aggregators" and "GroupTotalFormatters" directly from Angular-Slickgrid</li>
-    </ul>
-  </div>
-
-  <form class="form-inline">
-    <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)="clearGroupsAndSelects()">
-          <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" (click)="toggleDraggableGroupingRow()">
-          Toggle Draggable Grouping Row
-        </button>
-        <button class="btn btn-outline-secondary btn-xs btn-icon" (click)="exportToExcel()">
-          <i class="mdi mdi-file-excel-outline text-success"></i> Export to Excel
-        </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-value-btn"
-          (click)="groupByDurationOrderByCount(false)"
-        >
-          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(true)"
-        >
-          Group by duration &amp; sort groups by count
-        </button>
-        <button
-          class="btn btn-outline-secondary btn-xs btn-icon"
-          data-test="group-duration-effort-btn"
-          (click)="groupByDurationEffortDriven()"
-        >
-          Group by Duration &amp; then Effort-Driven
-        </button>
-        <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="set-dynamic-filter" (click)="setFiltersDynamically()">
-          <span class="mdi mdi-filter-outline"></span>
-          <span> Set Filters Dynamically </span>
-        </button>
-        <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="set-dynamic-sorting" (click)="setSortingDynamically()">
-          <span class="mdi mdi-sort-ascending"></span>
-          <span> Set Sorting Dynamically </span>
-        </button>
-      </div>
-    </div>
-    <div class="row mt-2">
-      <div class="col-sm-12">
-        <div class="form-row">
-          <div class="row form-group">
-            <label for="field1" class="col-sm-3 mb-2">Group by field(s)</label>
-            <div
-              class="form-group col-md-3 grouping-selects"
-              *ngFor="let groupField of selectedGroupingFields; let i = index; trackBy: selectTrackByFn"
-            >
-              <select
-                class="form-select"
-                name="group-field-{{ i }}"
-                [(ngModel)]="selectedGroupingFields[i]"
-                (ngModelChange)="groupByFieldName($event, i)"
-              >
-                <option value=""></option>
-                <option [ngValue]="field.id" *ngFor="let field of columnDefinitions">{{ field.name }}</option>
-              </select>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-  <div class="row mt-1 mb-1">
-    <hr />
-  </div>
-
-  <angular-slickgrid
-    gridId="grid18"
-    [dataset]="dataset"
-    [columns]="columnDefinitions"
-    [options]="gridOptions"
-    (onCellChange)="onCellChanged()"
-    (onAngularGridCreated)="angularGridReady($event.detail)"
-  >
-  </angular-slickgrid>
-</div>