refactor: convert order views as LitTemplate

vaadin · Mar 21, 2022 · ccbdd1e · ccbdd1e
1 parent b163902
commit ccbdd1e
Show file tree

Hide file tree

Showing 8 changed files with 607 additions and 423 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -15,10 +15,7 @@
   ],
   "globals": {
     "Polymer": false,
-    "Vaadin": false,
-    "moment": false,
-    "DateUtilsMixin": false,
-    "ScrollShadowMixin": false
+    "Vaadin": false
   },
   "parserOptions": {
       "sourceType": "module"

diff --git a/frontend/src/components/search-bar.js b/frontend/src/components/search-bar.js
@@ -1,10 +1,10 @@
-import { html, css, LitElement } from "lit";
-import "@polymer/iron-icon/iron-icon.js";
-import "@vaadin/icons/vaadin-icons.js";
-import "@vaadin/button/src/vaadin-button.js";
-import "@vaadin/checkbox/src/vaadin-checkbox.js";
-import "@vaadin/text-field/src/vaadin-text-field.js";
-import "../../styles/shared-styles.js";
+import { html, css, LitElement } from 'lit';
+import '@polymer/iron-icon/iron-icon.js';
+import '@vaadin/icons/vaadin-icons.js';
+import '@vaadin/button/src/vaadin-button.js';
+import '@vaadin/checkbox/src/vaadin-checkbox.js';
+import '@vaadin/text-field/src/vaadin-text-field.js';
+import '../../styles/shared-styles.js';
 
 class SearchBar extends LitElement {
   static get styles() {
@@ -131,7 +131,7 @@ class SearchBar extends LitElement {
   }
 
   static get is() {
-    return "search-bar";
+    return 'search-bar';
   }
   static get properties() {
     return {
@@ -153,7 +153,7 @@ class SearchBar extends LitElement {
       showCheckbox: {
         type: Boolean,
         reflect: true,
-        attribute: "show-checkbox",
+        attribute: 'show-checkbox',
       },
       checkboxText: {
         type: String,
@@ -167,7 +167,7 @@ class SearchBar extends LitElement {
       showExtraFilters: {
         type: Boolean,
         reflect: true,
-        attribute: "show-extra-filters",
+        attribute: 'show-extra-filters',
       },
       _focused: {
         type: Boolean,
@@ -177,21 +177,25 @@ class SearchBar extends LitElement {
 
   updated(changedProperties) {
     if (
-      changedProperties.has("fieldValue") ||
-      changedProperties.has("checkboxChecked") ||
-      changedProperties.has("_focused")
+      changedProperties.has('fieldValue') ||
+      changedProperties.has('checkboxChecked') ||
+      changedProperties.has('_focused')
     ) {
-      this._debounceSearch(this.fieldValue, this.checkboxChecked, this._focused);
+      this._debounceSearch(
+        this.fieldValue,
+        this.checkboxChecked,
+        this._focused
+      );
     }
 
     const notifyingProperties = [
       {
-        property: "fieldValue",
-        eventName: "field-value-changed",
+        property: 'fieldValue',
+        eventName: 'field-value-changed',
       },
       {
-        property: "checkboxChecked",
-        eventName: "checkbox-checked-changed",
+        property: 'checkboxChecked',
+        eventName: 'checkbox-checked-changed',
       },
     ];
 
@@ -212,15 +216,15 @@ class SearchBar extends LitElement {
 
   constructor() {
     super();
-    this.buttonIcon = "vaadin:plus";
-    this.fieldIcon = "vaadin:search";
-    this.clearText = "Clear search";
+    this.buttonIcon = 'vaadin:plus';
+    this.fieldIcon = 'vaadin:search';
+    this.clearText = 'Clear search';
     this.showExtraFilters = false;
     this.showCheckbox = false;
 
     // In iOS prevent body scrolling to avoid going out of the viewport
     // when keyboard is opened
-    this.addEventListener("touchmove", (e) => e.preventDefault());
+    this.addEventListener('touchmove', (e) => e.preventDefault());
 
     this._debounceSearch = debounce((fieldValue, checkboxChecked, focused) => {
       this.showExtraFilters = fieldValue || checkboxChecked || focused;
@@ -229,19 +233,19 @@ class SearchBar extends LitElement {
   }
 
   _onFieldFocus(e) {
-    if (e.currentTarget.id === "field") {
+    if (e.currentTarget.id === 'field') {
       this.dispatchEvent(
-        new Event("search-focus", { bubbles: true, composed: true })
+        new Event('search-focus', { bubbles: true, composed: true })
       );
     }
 
     this._focused = true;
   }
 
   _onFieldBlur(e) {
-    if (e.currentTarget.id === "field") {
+    if (e.currentTarget.id === 'field') {
       this.dispatchEvent(
-        new Event("search-blur", { bubbles: true, composed: true })
+        new Event('search-blur', { bubbles: true, composed: true })
       );
     }
 
@@ -251,15 +255,14 @@ class SearchBar extends LitElement {
 
 customElements.define(SearchBar.is, SearchBar);
 
-
 function debounce(func, delay = 0) {
   let timeoutId;
-  
+
   return function() {
     clearTimeout(timeoutId);
-    
+
     timeoutId = setTimeout(() => {
-      func.apply(this, arguments);
+      func(...arguments);
     }, delay);
-  }
-};
+  };
+}
diff --git a/frontend/src/components/utils-mixin.js b/frontend/src/components/utils-mixin.js
@@ -1,37 +1,38 @@
-import '@polymer/polymer/polymer-element.js';
-import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 /**
  * Adds the scroll-shadow attribute if there is a `#main` element with scrollsize
  * larger than its height, and there is hidden content at the bottom.
  */
-/* @polymerMixin */
-window.ScrollShadowMixin = subclass => class extends subclass {
-  static get properties() {
-    return {
-      noScroll: {
-        type: Boolean,
-        reflectToAttribute: true
-      },
-      _main: Element,
-      _boundContentScroll: Function
-    };
-  }
+export const ScrollShadowMixin = (subclass) =>
+  class extends subclass {
+    static get properties() {
+      return {
+        noScroll: {
+          type: Boolean,
+          reflect: true,
+          attribute: 'no-scroll',
+        },
+        _main: {
+          attribute: false,
+        },
+      };
+    }
+
+    firstUpdated() {
+      super.firstUpdated();
+
+      this._main = this.shadowRoot.querySelector('#main');
 
-  ready() {
-    super.ready();
-    afterNextRender(this, () => {
-      this._main = this.root.querySelector('#main');
       if (this._main) {
-        this._main.addEventListener('scroll', this._contentScroll.bind(this));
+        this._main.addEventListener('scroll', () => this._contentScroll());
         this._contentScroll();
       }
-    });
-    this._boundContentScroll = this._contentScroll.bind(this);
-  }
+    }
 
-  _contentScroll() {
-    if (this._main) {
-      this.noScroll = this._main.scrollHeight - this._main.scrollTop == this._main.clientHeight;
+    _contentScroll() {
+      if (this._main) {
+        this.noScroll =
+          this._main.scrollHeight - this._main.scrollTop ==
+          this._main.clientHeight;
+      }
     }
-  }
-};
+  };