refactor(code): tweak tree view example

ghiscoding · Mar 23, 2020 · 6ce876e · 6ce876e
1 parent 309318e
commit 6ce876e
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -98,6 +98,8 @@ npm run test:watch
   - [x] Header Menu
   - [ ] Row Detail
   - [x] Row Move
+    - [ ] the Column itself should be created by the extension instead of the user itself
+    - [ ] column index position (requires SlickGrid [PR #474](https://github.com/6pac/SlickGrid/pull/474))
   - [x] Row Selection
 - [x] Grouping Formatters (12)
 - [x] Sorters (5)

diff --git a/packages/common/src/styles/slickgrid-theme-material.scss b/packages/common/src/styles/slickgrid-theme-material.scss
@@ -67,6 +67,8 @@ $multiselect-icon-radio-checked:        "\F043E";
 $multiselect-icon-radio-unchecked:      "\F0130";
 $multiselect-icon-search:               "\F0349";
 $multiselect-unchecked-opacity:         0.8;
+$row-move-plugin-cursor:                grab;
+$row-move-plugin-icon:                  "\F0278";
 $slider-editor-height:                  26px;
 $primary-color:                         #009530;
 $row-mouse-hover-color:                 #ebfaef;

diff --git a/packages/vanilla-bundle-examples/src/app.html b/packages/vanilla-bundle-examples/src/app.html
@@ -35,8 +35,9 @@ <h4 class="title is-4 has-text-white">Slickgrid-Universal</h4>
         <div class="navbar-dropdown">
           <a class="navbar-item" onclick.delegate="loadRoute('example01')">Example01 - Editors</a>
           <a class="navbar-item" onclick.delegate="loadRoute('example02')">Example02 - Draggable Grouping</a>
-          <!-- <a class="navbar-item" onclick.delegate="loadRoute('example03')">Example03 - Grouping &amp; Aggregators</a> -->
+          <a class="navbar-item" onclick.delegate="loadRoute('example03')">Example03 - Grouping &amp; Aggregators</a>
           <a class="navbar-item" onclick.delegate="loadRoute('example04')">Example04 - Tree View</a>
+          <a class="navbar-item" onclick.delegate="loadRoute('example05')">Example05 - SF Tree View</a>
         </div>
       </div>
     </div>

diff --git a/packages/vanilla-bundle-examples/src/app.ts b/packages/vanilla-bundle-examples/src/app.ts
@@ -11,6 +11,7 @@ export class App {
     { route: 'example02', name: 'example02', title: 'Example02', moduleId: './examples/example02' },
     { route: 'example03', name: 'example03', title: 'Example03', moduleId: './examples/example03' },
     { route: 'example04', name: 'example04', title: 'Example04', moduleId: './examples/example04' },
+    { route: 'example05', name: 'example05', title: 'Example05', moduleId: './examples/example05' },
   ]
 
   attached() {
@@ -25,6 +26,9 @@ export class App {
   loadRoute(routeName: string, changeBrowserState = true) {
     if (this.renderer && routeName) {
       const mapRoute = this.routing.find((map) => map.route === routeName);
+      if (!mapRoute) {
+        throw new Error('No Route found, make sure that you have an associated Route in your Routing before trying to use it');
+      }
       const viewModel = this.renderer.loadViewModel(require(`${mapRoute.moduleId}.ts`));
       this.renderer.loadView(require(`${mapRoute.moduleId}.html`));
       viewModel.attached();

diff --git a/packages/vanilla-bundle-examples/src/examples/example04.html b/packages/vanilla-bundle-examples/src/examples/example04.html
@@ -1,7 +1,18 @@
 <h3 class="title is-4">Example 04 - Tree View</h3>
 <div class="columns">
   <div class="column is-narrow">
-    <button onclick.delegate="addNewRow()" class="button is-small">Add New Item</button>
+    <button onclick.delegate="addNewRow()" class="button is-small is-info">
+      <span class="icon mdi mdi-plus"></span>
+      <span>Add New Item</span>
+    </button>
+    <button onclick.delegate="collapseAll()" class="button is-small">
+      <span class="icon mdi mdi-arrow-collapse"></span>
+      <span>Collapse All</span>
+    </button>
+    <button onclick.delegate="expandAll()" class="button is-small">
+      <span class="icon mdi mdi-arrow-expand"></span>
+      <span>Expand All</span>
+    </button>
   </div>
   <div class="column is-6">
     <div class="field is-horizontal">

diff --git a/packages/vanilla-bundle-examples/src/examples/example04.ts b/packages/vanilla-bundle-examples/src/examples/example04.ts
@@ -247,6 +247,18 @@ export class Example4 {
     // ]);
   }
 
+  collapseAll() {
+    this.dataset.forEach((item) => item._collapsed = true);
+    this.slickgridLwc.dataset = this.dataset;
+    this.gridObj.invalidate();
+  }
+
+  expandAll() {
+    this.dataset.forEach((item) => item._collapsed = false);
+    this.slickgridLwc.dataset = this.dataset;
+    this.gridObj.invalidate();
+  }
+
   handleOnClick(event: any) {
     const eventDetail = event?.detail;
     const args = event?.detail?.args;
@@ -344,7 +356,7 @@ export class Example4 {
     const data = [];
 
     // prepare the data
-    for (let i = 0; i < 15; i++) {
+    for (let i = 0; i < 25; i++) {
       const d = (data[i] = {});
       let parent;