feat(core): add loading spinner to AutoComplete Editor/Filter (#65)

- add SASS styling to use the jQuery UI loading styling (internally jQuery UI will automatically add the CSS class "ui-autocomplete-loading" whenever processing) which shows up after few milliseconds (when using remote calls)
ghiscoding · Aug 5, 2020 · 4ecd2bd · 4ecd2bd
1 parent 3156cc5
commit 4ecd2bd
Show file tree

Hide file tree

Showing 10 changed files with 359 additions and 277 deletions.
diff --git a/README.md b/README.md
@@ -38,6 +38,9 @@ and [Aurelia-Slickgrid](https://github.com/ghiscoding/aurelia-slickgrid) to use
 Note however that this project also has a Vanilla Implementation (not associated to any framework)
 and it is also used to test with the UI portion. The Vanilla bundle is also used in our SalesForce (with Lightning Web Component) hence the creation of this monorepo.
 
+### Fully Tested with [Jest](https://jestjs.io/) (Unit Tests) - [Cypress](https://www.cypress.io/) (E2E Tests)
+Slickgrid-Universal has **100%** Unit Test Coverage, we are talking about 10,000 lines of code (+2,700 unit tests) that are now fully tested with [Jest](https://jestjs.io/). There are also over 300 Cypress E2E tests to cover most UI functionalities.
+
 ### Available Public Packages
 
 | Package Name | Version | Description |

diff --git a/packages/common/src/editors/autoCompleteEditor.ts b/packages/common/src/editors/autoCompleteEditor.ts
@@ -173,7 +173,7 @@ export class AutoCompleteEditor implements Editor {
       const data = (isComplexObject) ? getDescendantProperty(item, fieldName) : item[fieldName];
 
       this._currentValue = data;
-      this._defaultTextValue = typeof data === 'string' ? data : data[this.labelName];
+      this._defaultTextValue = typeof data === 'string' ? data : (data?.[this.labelName] ?? '');
       this._$editorElm.val(this._defaultTextValue);
       this._$editorElm.select();
     }
@@ -264,6 +264,9 @@ export class AutoCompleteEditor implements Editor {
         }
       });
 
+    // add a <span> in order to add spinner styling
+    $(`<span></span>`).appendTo(this.args.container);
+
     // user might pass his own autocomplete options
     const autoCompleteOptions: AutocompleteOption = this.columnEditor.editorOptions;
 

diff --git a/packages/common/src/filters/autoCompleteFilter.ts b/packages/common/src/filters/autoCompleteFilter.ts
@@ -320,7 +320,12 @@ export class AutoCompleteFilter implements Filter {
 
     // append the new DOM element to the header row
     if ($filterElm && typeof $filterElm.appendTo === 'function') {
-      $filterElm.appendTo($headerElm);
+      const $container = $(`<div class="autocomplete-container"></div>`);
+      $container.appendTo($headerElm);
+      $filterElm.appendTo($container);
+
+      // add a <span> in order to add spinner styling
+      $(`<span></span>`).appendTo($container);
     }
 
     return $filterElm;

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -145,6 +145,12 @@ $autocomplete-border-radius:	                  4px !default;
 $autocomplete-box-shadow:	                      0 6px 12px rgba(0, 0, 0, 0.175) !default;
 $autocomplete-hover-color:	                    #262626 !default;
 $autocomplete-hover-bg-color:	                  darken($row-mouse-hover-color, 3%) !default;
+$autocomplete-loading-icon:                     "\f021" !default;
+$autocomplete-loading-icon-color:               inherit !default;
+$autocomplete-loading-icon-width:               inherit !default;
+$autocomplete-loading-icon-margin-left:         -16px !default;
+$autocomplete-loading-icon-line-height:         0px !default;
+$autocomplete-loading-icon-vertical-align:      inherit !default;
 $autocomplete-max-height:	                      25vh !default;
 $autocomplete-min-height:	                      75px !default;
 $autocomplete-min-width:	                      50px !default;

diff --git a/packages/common/src/styles/bootstrap-jquery-ui-autocomplete.scss b/packages/common/src/styles/bootstrap-jquery-ui-autocomplete.scss
@@ -4,6 +4,9 @@
 // jQuery UI AutoComplete for Bootstrap
 // ---------------------------------------------------------
 
+.autocomplete-container {
+  display: flex;
+}
 .ui-autocomplete {
   position: absolute;
   z-index: $autocomplete-z-index;
@@ -33,6 +36,25 @@
   }
 }
 
+/* jquery ui loading spinner */
+@keyframes md-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+.ui-autocomplete-loading {
+  & + span:after {
+    animation: md-spin 2s infinite linear;
+    display: inline-block;
+    font-family: $icon-font-family;
+    color: $autocomplete-loading-icon-color;
+    content: $autocomplete-loading-icon !important; /* important is required to override default jquery-ui styling */
+    width: $autocomplete-loading-icon-width;
+    margin-left: $autocomplete-loading-icon-margin-left;
+    line-height: $autocomplete-loading-icon-line-height;
+    vertical-align: $autocomplete-loading-icon-vertical-align;
+  }
+}
+
 .ui-state-hover,
 .ui-state-active,
 .ui-state-focus {

diff --git a/packages/common/src/styles/material-svg-icons.scss b/packages/common/src/styles/material-svg-icons.scss
@@ -101,13 +101,6 @@ $icon-width-mdi-table-refresh: $icon-width !default;
 $icon-width-mdi-undo: $icon-width !default;
 
 .mdi {
-  &.mdi-flip-h {
-    transform: scaleX(-1);
-  }
-  &.mdi-flip-v {
-    transform: scaleY(-1);
-  }
-
   &.mdi-arrow-collapse:before {
     width: $icon-width-mdi-arrow-collapse;
     display: inline-block;

diff --git a/packages/common/src/styles/material-svg-utilities.scss b/packages/common/src/styles/material-svg-utilities.scss
@@ -0,0 +1,36 @@
+@-webkit-keyframes md-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+@keyframes md-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+@mixin md-icon-rotate($degrees, $rotation) {
+  transform: rotate($degrees);
+}
+
+.mdi {
+  &.mdi-flip-h {
+    transform: scaleX(-1);
+  }
+  &.mdi-flip-v {
+    transform: scaleY(-1);
+  }
+  &.mdi-pulse {
+    animation: md-spin 1s infinite steps(8);
+  }
+  &.mdi-spin {
+    animation: md-spin 2s infinite linear;
+  }
+  &.mdi-rotate-45  { @include md-icon-rotate(45deg, 1);  }
+  &.mdi-rotate-90  { @include md-icon-rotate(90deg, 1);  }
+  &.mdi-rotate-135 { @include md-icon-rotate(135deg, 2); }
+  &.mdi-rotate-180 { @include md-icon-rotate(180deg, 2); }
+  &.mdi-rotate-220 { @include md-icon-rotate(220deg, 3); }
+  &.mdi-rotate-270 { @include md-icon-rotate(270deg, 3); }
+  &.mdi-rotate-315 { @include md-icon-rotate(315deg, 3); }
+  &.mdi-rotate-45, .mdi-rotate-90, .mdi-rotate-135, .mdi-rotate-180, .mdi-rotate-220 .mdi-rotate-270, .mdi-rotate-315 {
+    filter: none;
+  }
+}