feat(resources): add RxJS support into Slickgrid-Universal via external package

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

@@ -38,20 +38,21 @@
     "@types/node": "^14.14.35",
     "@types/webpack": "^4.41.26",
     "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^8.0.0",
-    "css-loader": "^5.1.3",
+    "copy-webpack-plugin": "^8.1.0",
+    "css-loader": "^5.2.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.2.0",
     "html-loader": "^2.1.2",
     "html-webpack-plugin": "5.3.1",
     "mini-css-extract-plugin": "^1.3.9",
     "node-sass": "5.0.0",
+    "rxjs": "^6.6.6",
     "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
     "ts-loader": "^8.0.18",
     "ts-node": "^9.1.1",
     "url-loader": "^4.1.1",
-    "webpack": "^5.27.0",
+    "webpack": "^5.28.0",
     "webpack-cli": "^4.5.0",
     "webpack-dev-server": "^3.11.2"
   }

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

@@ -17,6 +17,7 @@ export class AppRouting {
       { route: 'example11', name: 'example11', title: 'Example11', moduleId: './examples/example11' },
       { route: 'example12', name: 'example12', title: 'Example12', moduleId: './examples/example12' },
       { route: 'example13', name: 'example13', title: 'Example13', moduleId: './examples/example13' },
+      { route: 'example15', name: 'example15', title: 'Example15', moduleId: './examples/example15' },
       { route: 'icons', name: 'icons', title: 'icons', moduleId: './examples/icons' },
       { route: '', redirect: 'example01' },
       { route: '**', redirect: 'example01' }

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

@@ -72,6 +72,9 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
           <a class="navbar-item" onclick.delegate="loadRoute('example13')">
             Example13 - Header Button Plugin
           </a>
+          <a class="navbar-item" onclick.delegate="loadRoute('example15')">
+            Example15 - OData Backend Service with RxJS
+          </a>
         </div>
       </div>
     </div>

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

@@ -142,7 +142,7 @@ export class Example09 {
    * This function is only here to mock a WebAPI call (since we are using a JSON file for the demo)
    *  in your case the getCustomer() should be a WebAPI function returning a Promise
    */
-  getCustomerDataApiMock(query) {
+  getCustomerDataApiMock(query): Promise<any> {
     // the mock is returning a Promise, just like a WebAPI typically does
     return new Promise((resolve) => {
       const queryParams = query.toLowerCase().split('&');

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

@@ -0,0 +1,78 @@
+<h3 class="title is-3">
+  Example 15 - Grid with OData Backend Service using RxJS Observables
+  <div class="subtitle" style="float: right; margin-top: -20px">
+    <a class="is-size-5"
+       target="_blank"
+       href="https://github.com/ghiscoding/slickgrid-universal/blob/master/examples/webpack-demo-vanilla-bundle/src/examples/example15.ts">
+      <span class="mdi mdi-link mdi-v-align-sub"></span> code
+    </a>
+  </div>
+</h3>
+
+<div class="row">
+  <button class="button is-small" data-test="clear-filters-sorting"
+          onclick.delegate="clearAllFiltersAndSorts()" title="Clear all Filters & Sorts">
+    <span class="icon mdi mdi-close"></span>
+    <span>Clear all Filter & Sorts</span>
+  </button>
+  <button class="button is-small" data-test="set-dynamic-filter" onclick.delegate="setFiltersDynamically()">
+    Set Filters Dynamically
+  </button>
+  <button class="button is-small" data-test="set-dynamic-sorting" onclick.delegate="setSortingDynamically()">
+    Set Sorting Dynamically
+  </button>
+  <button class="button is-small" style="margin-left: 10px" data-test="add-gender-button"
+          onclick.delegate="addOtherGender()" disabled.bind="isOtherGenderAdded">
+    Add Other Gender via RxJS
+  </button>
+</div>
+
+<br />
+
+<div>
+  <span>
+    <label>Programmatically go to first/last page:</label>
+    <button class="button is-small" data-test="goto-first-page" onclick.delegate="goToFirstPage()">
+      <i class="fa fa-caret-left fa-lg"></i>&lt;
+    </button>
+    <button class="button is-small" data-test="goto-last-page" onclick.delegate="goToLastPage()">
+      <i class="fa fa-caret-right fa-lg"></i>&gt;
+    </button>
+  </span>
+
+  <span style="margin-left: 10px">
+    <label>OData Version: </label>
+    <span data-test="radioVersion">
+      <label class="radio-inline control-label" for="radio2">
+        <input type="radio" name="inlineRadioOptions" data-test="version2" id="radio2" checked value.bind="odataVersion"
+               onclick.delegate="setOdataVersion(2)"> 2
+      </label>
+      <label class="radio-inline control-label" for="radio4">
+        <input type="radio" name="inlineRadioOptions" data-test="version4" id="radio4" value.bind="odataVersion"
+               onclick.delegate="setOdataVersion(4)"> 4
+      </label>
+    </span>
+  </span>
+  <label class="checkbox-inline control-label" for="enableCount" style="margin-left: 20px">
+    <input type="checkbox" id="enableCount" data-test="enable-count" checked.bind="isCountEnabled"
+           onclick.delegate="changeCountEnableFlag()">
+    <span style="font-weight: bold">Enable Count</span> (add to OData query)
+  </label>
+</div>
+
+<div class="columns" style="margin-top: 5px">
+  <div class="column">
+    <div class="notification is-info is-light" data-test="alert-odata-query">
+      <strong>OData Query:</strong>
+      <span data-test="odata-query-result" innerhtml.bind="odataQuery"></span>
+    </div>
+  </div>
+  <div class="column is-narrow">
+    <div class.bind="statusClass" data-test="status">
+      <strong>Status:</strong> <span innerhtml.bind="status"></span>
+    </div>
+  </div>
+</div>
+
+<div class="grid15">
+</div>

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

@@ -0,0 +1 @@
+@import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';