feat(filters): add Pre-Defined & Custom Filters saved in Local Storage (

#143) * feat(filters): add Pre-Defined & Custom Filters saved in Local Storage
ghiscoding · Nov 4, 2020 · dea71ab · dea71ab
1 parent e9b1790
commit dea71ab
Show file tree

Hide file tree

Showing 17 changed files with 984 additions and 440 deletions.
diff --git a/examples/webpack-demo-vanilla-bundle/src/app.ts b/examples/webpack-demo-vanilla-bundle/src/app.ts
@@ -71,6 +71,7 @@ export class App {
       if (viewModel && viewModel.attached && this.renderer.className) {
         this.viewModelObj[this.renderer.className] = viewModel;
         viewModel.attached();
+        this.dropdownToggle(); // rebind bulma dropdown toggle event handlers
       }
 
       // change browser's history state & title
@@ -81,6 +82,27 @@ export class App {
     }
   }
 
+  /** bind bulma all dropdowns toggle event handlers */
+  dropdownToggle() {
+    const $dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)');
+
+    if ($dropdowns.length > 0) {
+      $dropdowns.forEach(($el) => {
+        $el.addEventListener('click', (event) => {
+          event.stopPropagation();
+          $el.classList.toggle('is-active');
+        });
+      });
+
+      document.addEventListener('click', () => this.closeDropdowns());
+    }
+  }
+
+  closeDropdowns() {
+    const $dropdowns = document.querySelectorAll('.dropdown:not(.is-hoverable)');
+    $dropdowns.forEach($el => $el.classList.remove('is-active'));
+  }
+
   /** Add event listener for the navbar hamburger menu toggle when menu shows up on mobile */
   navbarHamburgerToggle() {
     document.addEventListener('DOMContentLoaded', () => {

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example11.html b/examples/webpack-demo-vanilla-bundle/src/examples/example11.html
@@ -3,35 +3,80 @@ <h3 class="title is-3">
   <span class="subtitle has-text-grey-dark">(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>
+<div class="columns is-desktop">
+  <section class="column field has-addons is-narrow">
+    <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>
+
+  <section class="column field has-addons is-narrow">
+    <div class="row">
+      <label for="selectedFilter">Preset Filters: </label>
+      <select class="select is-small selected-filter" style="margin-left: 5px" id="selectedFilter"
+              name="selectedFilter"
+              onchange.delegate="usePredefinedFilter(event.target.value)">
+      </select>
+      <div class="dropdown action" style="margin-left: -6px">
+        <div class="dropdown-trigger">
+          <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu">
+            <span>Action</span>
+            <span class="icon is-small">
+              <i class="mdi mdi-chevron-down mdi-bold" aria-hidden="true"></i>
+            </span>
+          </button>
+        </div>
+        <div class="dropdown-menu is-small" id="dropdown-menu" role="menu">
+          <div class="dropdown-content">
+            <span class="dropdown-item" onclick.delegate="createFilter(event)" data-test="save-filter-btn">
+              Save Filter
+            </span>
+            <span class.bind="dropdownDeleteFilterClass" onclick.delegate="updateFilter(event)"
+                  data-test="update-filter-btn">
+              Update Filter
+            </span>
+            <span class.bind="dropdownUpdateFilterClass" onclick.delegate="deleteFilter(event)"
+                  data-test="delete-filter-btn">
+              Delete Filter
+            </span>
+          </div>
+        </div>
+      </div>
+      <span style="margin-left: 5px">
+        <button class="button is-small" onclick.delegate="clearLocalStorage()" data-test="clear-storage-btn">
+          <span class="icon mdi mdi-close-circle mdi-14px"></span>
+          <span>Clear LocalStorage</span>
+        </button>
+      </span>
+    </div>
+  </section>
+
+</div>
+
 
 <div class="modal-container">
 </div>
 
 <br>
 
 <div class="grid11">
-</div>
+</div>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example11.scss b/examples/webpack-demo-vanilla-bundle/src/examples/example11.scss
@@ -7,3 +7,10 @@ $autocomplete-max-height: 250px;
 .unsaved-editable-field {
   background-color: #fbfdd1 !important;
 }
+.dropdown-item {
+  cursor: pointer;
+}
+.dropdown-item-disabled {
+  color: #afafaf;
+  cursor: default;
+}