feat(examples): add new sample to showcase queued editing (#28)

* feat(examples): add new sample to showcase queued editing

.github/ISSUE_TEMPLATE/bug_report.md

@@ -20,11 +20,11 @@ Thanks for filing a Feature Request! However, before you submit, please read the
 
 ### Your Environment
 <!--- Include as many relevant details as possible about the library versions -->
-| Software             | Version(s) |
-| -------------------- | ---------- |
+| Software               | Version(s) |
+| --------------------- | ---------- |
 | Slickgrid-Universal  | x.y        |
-| TypeScript           | x.y        |
-| Package Name         | x.y        |
+| TypeScript               | x.y        |
+| Package Name        | x.y        |
 
 ### Describe the Bug
 <!-- REQUIRED - could you explain a bit what the Bug is -->
@@ -43,4 +43,4 @@ Thanks for filing a Feature Request! However, before you submit, please read the
 <!--- Not obligatory, but suggest a fix/reason for the bug -->
 
 ### Code Sample
-<!-- Please provide Stackblitz, Gist or Code Sample to reproduce the issue -->
+<!-- Please provide Stackblitz, Gist or Code Sample to reproduce the issue -->

.vscode/launch.json

@@ -14,10 +14,7 @@
       "userDataDir": "${workspaceRoot}/.chrome",
       "trace": true,
       "sourceMapPathOverrides": {
-        "webpack:///../../packages/common/*": "${webRoot}/packages/common/*",
-        "webpack:///../../packages/excel-export/*": "${webRoot}/packages/excel-export/*",
-        "webpack:///../../packages/file-export/*": "${webRoot}/packages/file-export/*",
-        "webpack:///../../packages/vanilla-bundle/*": "${webRoot}/packages/vanilla-bundle/*",
+        "webpack:///${workspaceRoot}/packages/*": "${webRoot}/packages/*",
         "webpack:///./src/*": "${webRoot}/examples/webpack-demo-vanilla-bundle/src/*"
       }
     },

README.md

@@ -114,7 +114,7 @@ yarn run test:watch
   - [x] Grid Menu
   - [x] Header Button
   - [x] Header Menu
-  - [ ] Resizer
+  - [x] Resizer
   - [ ] Row Detail
   - [x] Row Move Manager
   - [x] Row Selection
@@ -157,5 +157,6 @@ yarn run test:watch
 - [x] Copy cell text (context menu) doesn't work in SF
 - [x] Remove all Services init method 2nd argument (we can get DataView directly from the Grid object)
 - [x] The Pagination/Footer width is a little off sometime compare to the width of the grid container
-- [ ] See if we can make all vanilla-grid-bundle services as readonly
 - [ ] Check why `DOM Purify` doesn't work in SF
+- [ ] See if we can get all the vanilla-grid-bundle `instances` as `readonly` class members
+- [ ] Draggable Grouping pre-header (dragging) is not working as intended

examples/webpack-demo-vanilla-bundle/package.json

@@ -35,13 +35,13 @@
   "devDependencies": {
     "@types/jquery": "^3.5.0",
     "@types/moment": "^2.13.0",
-    "@types/node": "^14.0.23",
+    "@types/node": "^14.0.26",
     "@types/webpack": "^4.41.21",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^6.0.3",
-    "css-loader": "^3.6.0",
+    "css-loader": "^4.0.0",
     "file-loader": "^6.0.0",
-    "fork-ts-checker-webpack-plugin": "^5.0.7",
+    "fork-ts-checker-webpack-plugin": "^5.0.11",
     "html-loader": "^1.1.0",
     "html-webpack-plugin": "^4.3.0",
     "json-loader": "^0.5.7",
@@ -52,8 +52,8 @@
     "ts-loader": "^8.0.1",
     "ts-node": "^8.10.2",
     "url-loader": "^4.1.0",
-    "webpack": "^4.43.0",
+    "webpack": "^4.44.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0"
   }
-}
+}

examples/webpack-demo-vanilla-bundle/src/app-routing.ts

@@ -14,6 +14,7 @@ export class AppRouting {
       { route: 'example08', name: 'example08', title: 'Example08', moduleId: './examples/example08' },
       { route: 'example09', name: 'example09', title: 'Example09', moduleId: './examples/example09' },
       { route: 'example10', name: 'example10', title: 'Example10', moduleId: './examples/example10' },
+      { route: 'example11', name: 'example11', title: 'Example11', moduleId: './examples/example11' },
       { route: 'example50', name: 'example50', title: 'Example50', moduleId: './examples/example50' },
       { route: 'example51', name: 'example51', title: 'Example51', moduleId: './examples/example51' },
       { route: '', redirect: 'example01' },

examples/webpack-demo-vanilla-bundle/src/app.html

@@ -9,12 +9,12 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
       </span>
       <span style="position: relative; top: 5px; margin-left: 5px;">
         <iframe src="//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>
+                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>
@@ -57,6 +57,9 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
           <a class="navbar-item" onclick.delegate="loadRoute('example10')">
             Example10 - Grid with GraphQL Backend Service
           </a>
+          <a class="navbar-item" onclick.delegate="loadRoute('example11')">
+            Example11 - Queued Editing
+          </a>
           <!--
           <hr class="navbar-divider">
           <a class="navbar-item" onclick.delegate="loadRoute('example50')">Example50 - SE Tree Data</a>

examples/webpack-demo-vanilla-bundle/src/examples/example02.ts

@@ -10,13 +10,12 @@ import {
   GroupTotalFormatters,
   SlickDataView,
   SlickGrid,
-  SlickerGridInstance,
   SortComparers,
   SortDirectionNumber
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { FileExportService } from '@slickgrid-universal/file-export';
-import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
+import { Slicker, SlickerGridInstance, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 
 import { ExampleGridOptions } from './example-grid-options';
 import '../material-styles.scss';

examples/webpack-demo-vanilla-bundle/src/examples/example03.html

@@ -4,7 +4,7 @@ <h3 class="title is-3">
 </h3>
 
 <section>
-  <div class="row" style="margin-bottom: 4px;">
+  <div class="row">
     <button class="button is-small" onclick.delegate="loadData(500)">
       500 rows
     </button>
@@ -26,12 +26,9 @@ <h3 class="title is-3">
     <button class="button is-small" onclick.delegate="toggleDraggableGroupingRow()">
       Toggle Draggable Grouping Row
     </button>
-    <button class="button is-small" onclick.delegate="changeGridToReadOnly()">
-      Change Grid to Readonly
-    </button>
   </div>
 
-  <div class="row">
+  <div class="row" style="margin-top: 4px;">
     <button class="button is-small" onclick.delegate="groupByDurationOrderByCount(false)">
       Group by duration &amp; sort groups by value
     </button>

examples/webpack-demo-vanilla-bundle/src/examples/example03.ts

@@ -12,33 +12,19 @@ import {
   SlickDataView,
   SlickDraggableGrouping,
   SlickGrid,
-  SlickerGridInstance,
+  SlickNamespace,
   SortComparers,
   SortDirectionNumber,
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
-import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
+import { Slicker, SlickerGridInstance, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 
 import { ExampleGridOptions } from './example-grid-options';
 import '../salesforce-styles.scss';
 import './example03.scss';
 
-// you can create custom validator to pass to an inline editor
-const myCustomTitleValidator = (value, args) => {
-  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' };
-  }
-  return { valid: true, msg: '' };
-};
-
-const customEditableInputFormatter = (row, cell, value, columnDef, dataContext, grid) => {
-  const gridOptions = grid && grid.getOptions && grid.getOptions();
-  const isEditableLine = gridOptions.editable && columnDef.editor;
-  value = (value === null || value === undefined) ? '' : value;
-  return isEditableLine ? { text: value, addClasses: 'editable-field', toolTip: 'Click to Edit' } : value;
-};
+// using external SlickGrid JS libraries
+declare const Slick: SlickNamespace;
 
 interface ReportItem {
   title: string;
@@ -56,7 +42,7 @@ export class Example3 {
   dataset: any[];
   dataViewObj: SlickDataView;
   gridObj: SlickGrid;
-  commandQueue = [];
+  editCommandQueue = [];
   sgb: SlickVanillaGridBundle;
   slickerGridInstance: SlickerGridInstance;
   durationOrderByCount = false;
@@ -84,12 +70,10 @@ export class Example3 {
     this.columnDefinitions = [
       {
         id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string,
-        formatter: customEditableInputFormatter,
         editor: {
           model: Editors.longText,
           required: true,
           alwaysSaveOnEnterKey: true,
-          validator: myCustomTitleValidator, // use a custom validator
         },
         filterable: true,
         grouping: {
@@ -102,7 +86,6 @@ export class Example3 {
       },
       {
         id: 'duration', name: 'Duration', field: 'duration', sortable: true, filterable: true,
-        formatter: customEditableInputFormatter,
         editor: {
           model: Editors.float,
           // required: true,
@@ -131,7 +114,7 @@ export class Example3 {
         filterable: true,
         // filter: { model: Filters.compoundInput },
         // formatter: Formatters.dollar,
-        formatter: Formatters.multiple, params: { formatters: [Formatters.dollar, customEditableInputFormatter,] },
+        formatter: Formatters.dollar,
         groupTotalsFormatter: GroupTotalFormatters.sumTotalsDollar,
         type: FieldType.number,
         grouping: {
@@ -146,7 +129,6 @@ export class Example3 {
       },
       {
         id: 'percentComplete', name: '% Complete', field: 'percentComplete', type: FieldType.number,
-        formatter: customEditableInputFormatter,
         editor: {
           model: Editors.slider,
           minValue: 0,
@@ -172,7 +154,7 @@ export class Example3 {
         // formatter: Formatters.dateIso,
         type: FieldType.date, outputType: FieldType.dateIso,
         filterable: true, filter: { model: Filters.compoundDate },
-        formatter: Formatters.multiple, params: { formatters: [Formatters.dateIso, customEditableInputFormatter,] },
+        formatter: Formatters.dateIso,
         editor: { model: Editors.date },
         grouping: {
           getter: 'start',
@@ -189,7 +171,7 @@ export class Example3 {
         editor: { model: Editors.date, editorOptions: { minDate: 'today' }, },
         // formatter: Formatters.dateIso,
         type: FieldType.date, outputType: FieldType.dateIso,
-        formatter: Formatters.multiple, params: { formatters: [Formatters.dateIso, customEditableInputFormatter,] },
+        formatter: Formatters.dateIso,
         filterable: true, filter: { model: Filters.compoundDate },
         grouping: {
           getter: 'finish',
@@ -325,9 +307,8 @@ export class Example3 {
         hideInFilterHeaderRow: false,
         hideInColumnTitleRow: true,
       },
-      alwaysShowVerticalScroll: false, // disable scroll since we don't want it to show on the left pinned columns
       editCommandHandler: (item, column, editCommand) => {
-        this.commandQueue.push(editCommand);
+        this.editCommandQueue.push(editCommand);
         editCommand.execute();
       },
       // when using the cellMenu, you can change some of the default options and all use some of the callback methods
@@ -348,12 +329,6 @@ export class Example3 {
     };
   }
 
-  changeGridToReadOnly() {
-    // change a single grid options to make the grid non-editable (readonly)
-    this.sgb.gridOptions = { editable: false };
-    this.gridOptions = this.sgb.gridOptions;
-  }
-
   loadData(count: number) {
     // mock data
     const tmpArray = [];
@@ -531,4 +506,12 @@ export class Example3 {
         break;
     }
   }
+
+  undo() {
+    const command = this.editCommandQueue.pop();
+    if (command && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+      command.undo();
+      this.gridObj.gotoCell(command.row, command.cell, false);
+    }
+  }
 }

examples/webpack-demo-vanilla-bundle/src/examples/example05.ts

@@ -4,8 +4,6 @@ import {
   Filters,
   Formatters,
   GridOption,
-  SlickDataView,
-  SlickGrid,
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';

examples/webpack-demo-vanilla-bundle/src/examples/example06.ts

@@ -7,7 +7,6 @@ import {
   Formatter,
   Formatters,
   SlickDataView,
-  SlickGrid,
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';

examples/webpack-demo-vanilla-bundle/src/examples/example09.ts

@@ -1,4 +1,4 @@
-import { Column, GridOption, Metrics, FieldType, Filters, OperatorType, GridStateChange, SlickGrid, PaginationService } from '@slickgrid-universal/common';
+import { Column, FieldType, Filters, GridOption, GridStateChange, Metrics, OperatorType, } from '@slickgrid-universal/common';
 import { GridOdataService, OdataServiceApi, OdataOption } from '@slickgrid-universal/odata';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 import { ExampleGridOptions } from './example-grid-options';

examples/webpack-demo-vanilla-bundle/src/examples/example10.ts

@@ -9,7 +9,6 @@ import {
   MultipleSelectOption,
   OperatorType,
   SortDirection,
-  SlickGrid,
 } from '@slickgrid-universal/common';
 import { GraphqlService, GraphqlPaginatedResult, GraphqlServiceApi, } from '@slickgrid-universal/graphql';
 import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';

examples/webpack-demo-vanilla-bundle/src/examples/example11.html

@@ -0,0 +1,34 @@
+<h3 class="title is-3">
+  Example 11 - Queued Editing
+  <span class="subtitle">(with Salesforce Theme)</span>
+</h3>
+
+<section>
+  <div class="row">
+    <button class="button is-small" onclick.delegate="toggleGridEditReadonly()" data-test="toggle-readonly-btn">
+      <span class="icon mdi mdi-table-edit"></span>
+      <span>Toggle Edit/Readonly Grid</span>
+    </button>
+    <button class="button is-small" onclick.delegate="undoLastEdit()" data-test="undo-last-edit-btn">
+      <span class="icon mdi mdi-undo"></span>
+      <span>Undo Last Edit</span>
+    </button>
+    <button class="button is-small" onclick.delegate="undoLastEdit(true)" data-test="undo-open-editor-btn">
+      <span class="icon mdi mdi-undo"></span>
+      <span>Undo Last Edit &amp; Open Editor</span>
+    </button>
+    <button class="button is-small" onclick.delegate="undoAllEdits()" data-test="undo-all-edits-btn">
+      <span class="icon mdi mdi-history"></span>
+      <span>Undo All Edits</span>
+    </button>
+    <button class="button is-small is-info" onclick.delegate="saveAll()" data-test="save-all-btn"
+            title="Check your console log for the result">
+      <span>Save All</span>
+    </button>
+  </div>
+</section>
+
+<br>
+
+<div class="grid11">
+</div>

examples/webpack-demo-vanilla-bundle/src/examples/example11.scss

@@ -0,0 +1,4 @@
+$control-height: 2.4em;
+
+@import 'bulma/bulma';
+