feat(demo): add prod build for github page sample

.eslintrc.js

@@ -81,8 +81,7 @@ module.exports = {
     "constructor-super": "error",
     "dot-notation": "off",
     "eqeqeq": [
-      "error",
-      "smart"
+      "error"
     ],
     "guard-for-in": "error",
     "id-blacklist": "off",

.vscode/launch.json

@@ -9,7 +9,7 @@
       "type": "chrome",
       "request": "launch",
       "breakOnLoad": false,
-      "url": "http://localhost:8080",
+      "url": "http://localhost:8082",
       "webRoot": "${workspaceRoot}",
       "userDataDir": "${workspaceRoot}/.chrome",
       "trace": true,

README.md

@@ -123,8 +123,8 @@ npm run test:watch
 #### Other Todos
 - [x] VScode Chrome Debugger
 - [x] Jest Debugger
-- [ ] Add Multiple Example Demos with Vanilla implementation
-  - [ ] Add GitHub Demo website
+- [x] Add Multiple Example Demos with Vanilla implementation
+  - [x] Add GitHub Demo website
 - [x] Add CI/CD (CircleCI or GitHub Actions)
   - [x] Add Jest Unit tests
   - [ ] Add Cypress E2E tests

packages/common/src/global-grid-options.ts

@@ -53,7 +53,7 @@ export const GlobalGridOptions: GridOption = {
     iconClearGroupingCommand: 'fa fa-times mdi mdi-close',
     iconCopyCellValueCommand: 'fa fa-clone mdi mdi-content-copy',
     iconExportCsvCommand: 'fa fa-download mdi mdi-download',
-    iconExportExcelCommand: 'fa fa-file-excel-o text-success',
+    iconExportExcelCommand: 'fa fa-file-excel-o text-success has-text-success',
     iconExportTextDelimitedCommand: 'fa fa-download mdi mdi-download',
     width: 200,
   },
@@ -135,10 +135,10 @@ export const GlobalGridOptions: GridOption = {
     hideToggleFilterCommand: false,
     hideTogglePreHeaderCommand: false,
     iconCssClass: 'fa fa-bars mdi mdi-menu',
-    iconClearAllFiltersCommand: 'fa fa-filter text-danger mdi mdi-filter-remove-outline',
-    iconClearAllSortingCommand: 'fa fa-unsorted mdi mdi-swap-vertical text-danger',
+    iconClearAllFiltersCommand: 'fa fa-filter text-danger has-text-danger mdi mdi-filter-remove-outline',
+    iconClearAllSortingCommand: 'fa fa-unsorted mdi mdi-swap-vertical text-danger has-text-danger',
     iconExportCsvCommand: 'fa fa-download mdi mdi-download',
-    iconExportExcelCommand: 'fa fa-file-excel-o text-success',
+    iconExportExcelCommand: 'fa fa-file-excel-o text-success has-text-success',
     iconExportTextDelimitedCommand: 'fa fa-download mdi mdi-download',
     iconRefreshDatasetCommand: 'fa fa-refresh mdi mdi-sync',
     iconToggleFilterCommand: 'fa fa-random mdi mdi-flip-vertical',
@@ -150,7 +150,7 @@ export const GlobalGridOptions: GridOption = {
     autoAlign: true,
     autoAlignOffset: 12,
     minWidth: 140,
-    iconClearFilterCommand: 'fa fa-filter mdi mdi mdi-filter-remove-outline text-danger',
+    iconClearFilterCommand: 'fa fa-filter mdi mdi mdi-filter-remove-outline text-danger has-text-danger',
     iconClearSortCommand: 'fa fa-unsorted mdi mdi-swap-vertical',
     iconSortAscCommand: 'fa fa-sort-amount-asc mdi mdi-sort-ascending',
     iconSortDescCommand: 'fa fa-sort-amount-desc mdi mdi-sort-descending',

packages/common/src/interfaces/gridOption.interface.ts

@@ -457,6 +457,12 @@ export interface GridOption {
   /** What is the top panel height in pixels (only type the number) */
   topPanelHeight?: number;
 
+  /** Tree View options */
+  treeViewOptions?: {
+    /** Column field property id associated to the tree view, in other words, which field in the dataaset is associated to the three column displayed */
+    fieldId: string;
+  }
+
   /** Defaults to false, when set to True will lead to multiple columns sorting without the need to hold or do shift-click to execute a multiple sort. */
   tristateMultiColumnSort?: boolean;
 

packages/common/src/services/utilities.ts

@@ -81,27 +81,29 @@ export function convertArrayHierarchicalToFlat(hierarchicalArray: any[], options
   const inputArray = $.extend(true, [], hierarchicalArray); // make a deep copy of the input array to avoid modifying that array
 
   convertArrayHierarchicalToFlatByOutputArrayReference(inputArray, outputArray, options, 0);
-  console.log(outputArray.map(itm => ({ __treeLevel: itm.__treeLevel, title: itm.title })));
+
   // the output array is the one passed as reference
   return outputArray;
 }
 
-export function convertArrayHierarchicalToFlatByOutputArrayReference(hierarchicalArray: any[], outputArray: any[], options?: { childPropName?: string; hasChildrenFlagPropName?: string; treeLevelPropName?: string; identifierPropName?: string; reevaluateTreeLevel?: boolean; }, treeLevel = 0) {
+export function convertArrayHierarchicalToFlatByOutputArrayReference(hierarchicalArray: any[], outputArray: any[], options?: { childPropName?: string; parentIdPropName?: string; hasChildrenFlagPropName?: string; treeLevelPropName?: string; identifierPropName?: string; reevaluateTreeLevel?: boolean; }, treeLevel = 0, parentId?: string) {
   const childPropName = options?.childPropName || 'children';
   const identifierPropName = options?.identifierPropName || 'id';
   const hasChildrenFlagPropName = options?.hasChildrenFlagPropName || '__hasChildren';
   const treeLevelPropName = options?.treeLevelPropName || '__treeLevel';
+  const parentIdPropName = options?.parentIdPropName || '__parentId';
 
   for (const item of hierarchicalArray) {
     if (item) {
       const itemExist = outputArray.find((itm: any) => itm[identifierPropName] === item[identifierPropName]);
       if (!itemExist) {
         item[treeLevelPropName] = treeLevel; // save tree level ref
+        item[parentIdPropName] = parentId || null;
         outputArray.push(item);
       }
       if (Array.isArray(item[childPropName])) {
         treeLevel++;
-        convertArrayHierarchicalToFlatByOutputArrayReference(item[childPropName], outputArray, options, treeLevel);
+        convertArrayHierarchicalToFlatByOutputArrayReference(item[childPropName], outputArray, options, treeLevel, item[identifierPropName]);
         treeLevel--;
         item[hasChildrenFlagPropName] = true;
         delete item[childPropName]; // remove the children property

packages/vanilla-bundle-examples/index.ejs

@@ -4,7 +4,6 @@
 <head>
   <meta charset="utf-8">
   <title><%- htmlWebpackPlugin.options.metadata.title %></title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
   <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <base href="<%- htmlWebpackPlugin.options.metadata.baseUrl %>">

packages/vanilla-bundle-examples/package.json

@@ -6,6 +6,7 @@
     "src": "src"
   },
   "scripts": {
+    "build:prod": "webpack --env.production --extractCss",
     "dev:watch": "webpack-dev-server --env.server --extractCss",
     "test": "echo testing slickgrid-universal demo code"
   },
@@ -26,13 +27,15 @@
   "dependencies": {
     "@slickgrid-universal/common": "^0.0.2",
     "@slickgrid-universal/vanilla-bundle": "^0.0.2",
+    "bulma": "^0.8.1",
     "moment-mini": "^2.24.0"
   },
   "devDependencies": {
     "@types/jquery": "^3.3.34",
     "@types/moment": "^2.13.0",
     "@types/node": "^12.12.32",
     "@types/webpack": "^4.41.8",
+    "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.4.2",
     "html-loader": "^1.0.0",

packages/vanilla-bundle-examples/src/app-routing.ts

@@ -2,7 +2,7 @@ import { RouterConfig } from './interfaces';
 
 export class AppRouting {
   constructor(config: RouterConfig) {
-    config.pushState = true;
+    config.pushState = false;
     config.routes = [
       { route: 'example01', name: 'example01', title: 'Example01', moduleId: './examples/example01' },
       { route: 'example02', name: 'example02', title: 'Example02', moduleId: './examples/example02' },

packages/vanilla-bundle-examples/src/app.html

@@ -1,20 +1,20 @@
 <nav class="navbar is-fixed-top is-success" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
-    <a class="navbar-item" href="https://github.com/ghiscoding/slickgrid-universal" target="_blank">
+    <a class="navbar-item" href="https://github.com/ghiscoding/slickgrid-universal">
       <span class="icon is-medium">
         <i class="mdi mdi-github mdi-24px"></i>
       </span>
       <span>
         <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
       </span>
-      <!-- <span style="position: relative; top: 5px; margin-left: 5px;">
+      <span style="position: relative; top: 5px; margin-left: 5px;">
         <iframe src="https://ghbtns.com/github-btn.html?user=ghiscoding&repo=slickgrid-universal&type=star&count=true"
-          allowtransparency="true" scrolling="no" frameborder="0" width="170px" height="20px"></iframe>
-      </span> -->
+                allowtransparency="true" scrolling="no" frameborder="0" width="170px" height="20px"></iframe>
+      </span>
     </a>
 
     <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false"
-      data-target="navbarBasicExample">
+       data-target="navbarBasicExample">
       <span aria-hidden="true"></span>
       <span aria-hidden="true"></span>
       <span aria-hidden="true"></span>
@@ -44,9 +44,9 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
           <a class="navbar-item" onclick.delegate="loadRoute('example05')">Example05 - Tree View</a>
           <a class="navbar-item" onclick.delegate="loadRoute('example06')">Example06 - Tree View from Hierarchical
             Dataset</a>
-          <hr class="navbar-divider">
+          <!-- <hr class="navbar-divider">
           <a class="navbar-item" onclick.delegate="loadRoute('example50')">Example50 - SE Grouping &amp; Aggregators</a>
-          <a class="navbar-item" onclick.delegate="loadRoute('example51')">Example51 - SE Tree View</a>
+          <a class="navbar-item" onclick.delegate="loadRoute('example51')">Example51 - SE Tree View</a> -->
         </div>
       </div>
     </div>

packages/vanilla-bundle-examples/src/app.ts

@@ -9,6 +9,7 @@ export class App {
   stateBangChar: string;
   renderer: Renderer;
   appRouting: any;
+  baseUrl = window.location.origin + window.location.pathname;
   routerConfig: RouterConfig = {
     pushState: false,
     routes: []
@@ -23,11 +24,19 @@ export class App {
 
   attached() {
     this.renderer = new Renderer(document.querySelector('view-route'));
-    const route = window.location.pathname.replace(this.stateBangChar, '') || this.defaultRouteName;
+    const location = window.location;
+    let route = this.routerConfig.pushState ? location.pathname.replace(this.stateBangChar, '') : location.hash.replace(this.stateBangChar, '');
+    if (!route || route === '/') {
+      route = this.defaultRouteName;
+    }
     this.loadRoute(route);
 
     // re-render on browser history navigation change
-    window.onpopstate = () => this.loadRoute(window.location.pathname.replace(this.stateBangChar, ''), false);
+    window.onpopstate = () => {
+      const location = window.location;
+      const prevRoute = this.routerConfig.pushState ? location.pathname.replace(this.stateBangChar, '') : location.hash.replace(this.stateBangChar, '');
+      this.loadRoute(prevRoute || this.defaultRouteName, false);
+    };
   }
 
   loadRoute(routeName: string, changeBrowserState = true) {
@@ -43,7 +52,7 @@ export class App {
 
       // change browser's history state & title
       if (changeBrowserState) {
-        window.history.pushState({}, routeName, `${window.location.origin}${this.stateBangChar}${routeName}`);
+        window.history.pushState({}, routeName, `${this.baseUrl}${this.stateBangChar}${routeName}`);
       }
       document.title = `${this.documentTitle} · ${mapRoute.name}`;
     }

packages/vanilla-bundle-examples/src/examples/example02.html

@@ -43,4 +43,4 @@ <h3 class="title is-4">Example 02 - Grouping &amp; Aggregators</h3>
 <div class="demo-container">
   <div class="grid2">
   </div>
-</div>
+</div>

packages/vanilla-bundle-examples/src/examples/example02.ts

@@ -116,7 +116,6 @@ export class Example2 {
     this.gridOptions = {
       autoResize: {
         container: '.demo-container',
-        rightPadding: 10,
       },
       enableExcelExport: true,
       enableFiltering: true,

packages/vanilla-bundle-examples/src/examples/example03.html

@@ -1,4 +1,4 @@
-<h3 class="title is-4">Example 02 - Draggable Grouping</h3>
+<h3 class="title is-4">Example 03 - Draggable Grouping</h3>
 
 <section>
   <div class="row">
@@ -40,4 +40,4 @@ <h3 class="title is-4">Example 02 - Draggable Grouping</h3>
 <div class="demo-container">
   <div class="grid3">
   </div>
-</div>
+</div>

packages/vanilla-bundle-examples/src/examples/example03.ts

@@ -241,10 +241,6 @@ export class Example3 {
       editable: true,
       autoResize: {
         container: '.demo-container',
-        rightPadding: 10,
-        bottomPadding: 20,
-        minHeight: 180,
-        minWidth: 300,
       },
       enableAutoSizeColumns: true,
       enableAutoResize: true,

packages/vanilla-bundle-examples/src/examples/example04.html

@@ -29,4 +29,4 @@ <h3 class="title is-4">Example 04 - Pinned (frozen) Columns/Rows</h3>
 <div class="demo-container">
   <div class="grid4">
   </div>
-</div>
+</div>

packages/vanilla-bundle-examples/src/examples/example04.ts

@@ -10,7 +10,7 @@ const actionFormatter = (row, cell, value, columnDef, dataContext) => {
 
 // you can create custom validator to pass to an inline editor
 const myCustomTitleValidator = (value, args) => {
-  if (value == null || value === undefined || !value.length) {
+  if (value === null || value === undefined || !value.length) {
     return { valid: false, msg: 'This is a required field' };
   } else if (!/^Task\s\d+$/.test(value)) {
     return { valid: false, msg: 'Your title is invalid, it must start with "Task" followed by a number' };
@@ -261,10 +261,6 @@ export class Example4 {
       editable: true,
       autoResize: {
         container: '.demo-container',
-        rightPadding: 10,
-        bottomPadding: 20,
-        minHeight: 180,
-        minWidth: 300,
       },
       enableAutoSizeColumns: true,
       enableAutoResize: true,

packages/vanilla-bundle-examples/src/examples/example05.html

@@ -1,4 +1,4 @@
-<h3 class="title is-4">Example 03 - Tree View</h3>
+<h3 class="title is-4">Example 05 - Tree View</h3>
 <div class="columns">
   <div class="column is-narrow">
     <button onclick.delegate="addNewRow()" class="button is-small is-info">
@@ -17,6 +17,9 @@ <h3 class="title is-4">Example 03 - Tree View</h3>
       <span class="icon mdi mdi-arrow-expand"></span>
       <span>Expand All</span>
     </button>
+    <button onclick.delegate="logFlatStructure()" class="button is-small">
+      <span>Log Flag Structure</span>
+    </button>
     <button onclick.delegate="logExpandedStructure()" class="button is-small">
       <span>Log Expanded Structure</span>
     </button>

packages/vanilla-bundle-examples/src/examples/example05.ts

@@ -1,4 +1,4 @@
-import { convertArrayFlatToHierarchical, Column, FieldType, GridOption, sortFlatArrayByHierarchy } from '@slickgrid-universal/common';
+import { convertArrayFlatToHierarchical, Column, FieldType, GridOption, sortFlatArrayByHierarchy, convertArrayHierarchicalToFlat } from '@slickgrid-universal/common';
 import { Slicker } from '@slickgrid-universal/vanilla-bundle';
 import './example05.scss';
 
@@ -63,19 +63,19 @@ export class Example5 {
   }
 
   taskNameFormatter(row, cell, value, columnDef, dataContext) {
-    if (value == null || value === undefined || dataContext === undefined) { return ''; }
+    if (value === null || value === undefined || dataContext === undefined) { return ''; }
     value = value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
     const spacer = `<span style="display:inline-block;height:1px;width:${15 * dataContext['__tr']}px"></span>`;
     const idx = this.dataViewObj.getIdxById(dataContext.id);
 
     if (this.dataset[idx + 1] && this.dataset[idx + 1].__tr > this.dataset[idx].__tr) {
       if (dataContext._collapsed) {
-        return `${spacer}<span class="toggle expand"></span>&nbsp;${value}`;
+        return `${spacer}<span class="slick-group-toggle collapsed"></span>&nbsp;${value}`;
       } else {
-        return `${spacer}<span class="toggle collapse"></span>&nbsp;${value}`;
+        return `${spacer}<span class="slick-group-toggle expanded"></span>&nbsp;${value}`;
       }
     }
-    return `${spacer}<span class="toggle"></span>&nbsp;${value}`;
+    return `${spacer}<span class="slick-group-toggle"></span>&nbsp;${value}`;
   }
 
   myFilter(item) {
@@ -87,7 +87,7 @@ export class Example5 {
       return false;
     }
 
-    if (item.parent != null) {
+    if (item.parent !== null) {
       let parent = this.dataset.find(itm => itm.id === item.parent);
       while (parent) {
         if (parent._collapsed || /* (parent["percentComplete"] < percentCompleteThreshold) || */ (this.searchString !== '' && parent['title'].indexOf(this.searchString) === -1)) {
@@ -129,7 +129,7 @@ export class Example5 {
     this.gridObj.navigateBottom();
     this.dataset = this.dataViewObj.getItems();
     console.log('new item', newItem, 'parent', parentItemFound);
-    console.warn(this.dataset)
+    console.warn(this.dataset);
     const resultSortedFlatDataset = sortFlatArrayByHierarchy(
       this.dataset,
       {
@@ -200,6 +200,12 @@ export class Example5 {
     console.log('exploded array', explodedArray);
   }
 
+  logFlatStructure() {
+    const outputHierarchicalArray = convertArrayFlatToHierarchical(this.dataset, { parentPropName: 'parent', childPropName: 'children' });
+    const outputFlatArray = convertArrayHierarchicalToFlat(outputHierarchicalArray, { childPropName: 'children' });
+    console.log('flat array', outputFlatArray, JSON.stringify(outputFlatArray, null, 2));
+  }
+
   mockDataset() {
     let __tr = 0;
     const parents = [];