saasufy-components 1.4.0 → 1.5.1

package/README.md

@@ -25,6 +25,13 @@ Used for displaying and editing a field of a model instance in real time.
 
 Used for rendering models using a template.
 
+### input-provider
+
+An input component which can pass data to other components (or HTML elements) via custom attributes.
+A common use case for it is to pass user input to `collection-browser` or `model-viewer` to display relevant data loaded from Saasufy (e.g. based on a user query).
+This component can be configured to provide its data to multiple components (consumers) via custom attributes.
+Note that an `input-provider` only targets elements which are downstream from its parent element in the HTML hierarchy.
+
 ### confirm-modal
 
 A modal component to prompt the user for confirmation before performing sensitive operations.

package/collection-browser.js

@@ -91,6 +91,7 @@ class CollectionBrowser extends SocketConsumer {
       'collection-view-params',
       'collection-page-size',
       'collection-page-offset',
+      'type-alias',
       'hide-error-logs'
     ];
   }
@@ -158,11 +159,12 @@ class CollectionBrowser extends SocketConsumer {
     if (noItemTemplate && !this.collection.value.length) {
       viewportNode.innerHTML = noItemTemplate.innerHTML;
     } else if (itemTemplate) {
+      let type = this.getAttribute('type-alias') || this.collection.type;
       let items = [];
       for (let modelItem of this.collection.value) {
         let itemString = renderTemplate(
           itemTemplate.innerHTML,
-          { [this.collection.type]: modelItem }
+          { [type]: modelItem }
         );
         items.push(itemString);
       }

package/input-provider.js

@@ -0,0 +1,217 @@
+import { debouncer } from './utils.js';
+
+const DEFAULT_DEBOUNCE_DELAY = 800;
+
+class InputProvider extends HTMLElement {
+  constructor() {
+    super();
+    this.isReady = false;
+    this.inputElement = null;
+  }
+  connectedCallback() {
+    this.isReady = true;
+    this.destroy = () => {};
+    this.render();
+  }
+
+  disconnectedCallback() {
+    this.destroy();
+  }
+
+  static get observedAttributes() {
+    return [
+      'input-id',
+      'list',
+      'type',
+      'placeholder',
+      'consumers',
+      'debounce-delay',
+      'options',
+      'value',
+      'height'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isReady) return;
+    this.destroy();
+    this.render();
+  }
+
+  triggerChange() {
+    this.inputElement && this.inputElement.dispatchEvent(new Event('change'));
+  }
+
+  set value(newValue) {
+    if (this.inputElement) {
+      let oldValue = this.inputElement.value;
+      this.inputElement.value = newValue;
+      if (oldValue !== newValue) {
+        this.triggerChange();
+      }
+    }
+  }
+
+  get value() {
+    return (this.inputElement && this.inputElement.value) || '';
+  }
+
+  render() {
+    this.innerHTML = '';
+    let inputId = this.getAttribute('input-id');
+    let inputList = this.getAttribute('list');
+    let type = this.getAttribute('type') || 'text';
+    let placeholder = this.getAttribute('placeholder');
+    let options = this.getAttribute('options');
+    let height = this.getAttribute('height');
+    let value = this.getAttribute('value') || '';
+
+    let elementType;
+    if (type === 'select') {
+      elementType = 'select';
+    } else if (type === 'textarea') {
+      elementType = 'textarea';
+    } else {
+      elementType = 'input';
+    }
+    this.inputElement = document.createElement(elementType);
+    if (type === 'select') {
+      if (options) {
+        let optionElements = options
+        .split(',')
+        .map((option) => {
+          return `<option value="${option}">${option}</option>`;
+        })
+        .join('');
+        this.inputElement.innerHTML = optionElements;
+      }
+    } else if (elementType === 'input') {
+      if (inputList) {
+        this.inputElement.setAttribute('list', inputList)
+      }
+      this.inputElement.type = type;
+    }
+    if (height) {
+      this.inputElement.style.height = height;
+    }
+    if (inputId) {
+      this.inputElement.setAttribute('id', inputId);
+    }
+    if (placeholder) {
+      this.inputElement.setAttribute('placeholder', placeholder);
+    }
+
+    this.appendChild(this.inputElement);
+
+    let destroyHandlers = this.updateConsumerElementsOnEdit();
+
+    if (value) {
+      this.value = value;
+    }
+    this.destroy = () => {
+      destroyHandlers();
+    };
+  }
+
+  updateConsumerElements(consumers, value) {
+    let parentElement = this.parentElement;
+    if (parentElement) {
+      let consumerParts = consumers.split(',')
+        .filter(part => part)
+        .map(part => {
+          part = part.trim();
+          return part.split(':').map(subPart => subPart.trim());
+        })
+        .filter(([ selector, attributeName ]) => selector);
+
+      for (let [ selector, attributeName ] of consumerParts) {
+        let matchingElements = parentElement.querySelectorAll(selector);
+        if (attributeName) {
+          for (let element of matchingElements) {
+            if (typeof value === 'boolean') {
+              if (value) {
+                element.setAttribute(attributeName, '');
+              } else {
+                element.removeAttribute(attributeName);
+              }
+            } else {
+              element.setAttribute(attributeName, value);
+            }
+          }
+        } else {
+          for (let element of matchingElements) {
+            if (element.nodeName === 'INPUT') {
+              if (element.type === 'checkbox') {
+                if (value) {
+                  element.setAttribute('checked', '');
+                } else {
+                  element.removeAttribute('checked');
+                }
+              } else {
+                element.value = value;
+              }
+            } else {
+              element.innerHTML = value;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  updateConsumerElementsOnEdit() {
+    let consumers = this.getAttribute('consumers');
+    if (!consumers) return;
+
+    let inputElement = this.inputElement;
+
+    let debounceDelay = this.getAttribute('debounce-delay');
+    debounceDelay = debounceDelay ? Number(debounceDelay) : DEFAULT_DEBOUNCE_DELAY;
+    let debounce = debouncer();
+
+    let onInputChange = (event) => {
+      debounce(async () => {
+        if (event.target.value === this.lastValue) return;
+        if (inputElement.type === 'checkbox') {
+          let checked = !!inputElement.checked;
+          this.lastValue = checked;
+          this.updateConsumerElements(consumers, checked);
+          return;
+        }
+        this.lastValue = event.target.value;
+        if (event.target.value === '') {
+          this.updateConsumerElements(consumers, '');
+        } else {
+          let targetValue = inputElement.type === 'number' ?
+            Number(event.target.value) : event.target.value;
+          this.updateConsumerElements(consumers, targetValue);
+        }
+      }, debounceDelay);
+    };
+    inputElement.addEventListener('change', onInputChange);
+
+    let onInputKeyUp;
+    if (inputElement.type !== 'checkbox') {
+      onInputKeyUp = async (event) => {
+        debounce(async () => {
+          if (event.target.value === this.lastValue) return;
+          this.lastValue = event.target.value;
+          if (event.target.value === '') {
+            this.updateConsumerElements(consumers, '');
+          } else {
+            let targetValue = inputElement.type === 'number' ?
+              Number(event.target.value) : event.target.value;
+            this.updateConsumerElements(consumers, targetValue);
+          }
+        }, debounceDelay);
+      };
+      inputElement.addEventListener('keyup', onInputKeyUp);
+    }
+    return () => {
+      inputElement.removeEventListener('change', onInputChange);
+      onInputKeyUp && inputElement.removeEventListener('keyup', onInputKeyUp);
+    };
+  }
+}
+
+window.customElements.define('input-provider', InputProvider);

package/model-input.js

@@ -21,7 +21,7 @@ class ModelInput extends SocketConsumer {
   static get observedAttributes() {
     return [
       'input-id',
-      'input-list',
+      'list',
       'model-instance-property',
       'type',
       'placeholder',
@@ -31,7 +31,8 @@ class ModelInput extends SocketConsumer {
       'model-field',
       'debounce-delay',
       'options',
-      'height'
+      'height',
+      'hide-error-logs'
     ];
   }
 
@@ -64,8 +65,8 @@ class ModelInput extends SocketConsumer {
     let modelInstanceProperty = this.getAttribute('model-instance-property');
     let showErrorMessage = this.hasAttribute('show-error-message');
     let inputId = this.getAttribute('input-id');
-    let inputList = this.getAttribute('input-list');
-    let type = this.getAttribute('type');
+    let inputList = this.getAttribute('list');
+    let type = this.getAttribute('type') || 'text';
     let placeholder = this.getAttribute('placeholder');
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');

package/model-text.js

@@ -18,7 +18,8 @@ class ModelText extends SocketConsumer {
       'model-instance-property',
       'model-type',
       'model-id',
-      'model-field'
+      'model-field',
+      'hide-error-logs'
     ];
   }
 

package/model-viewer.js

@@ -29,6 +29,7 @@ class ModelViewer extends SocketConsumer {
       'model-type',
       'model-id',
       'model-fields',
+      'type-alias',
       'hide-error-logs'
     ];
   }
@@ -55,9 +56,10 @@ class ModelViewer extends SocketConsumer {
     if (noItemTemplate && !this.modelValueExists(modelValue)) {
       viewportNode.innerHTML = noItemTemplate.innerHTML;
     } else if (itemTemplate) {
+      let type = this.getAttribute('type-alias') || this.model.type;
       let itemString = renderTemplate(
         itemTemplate.innerHTML,
-        { [this.model.type]: modelValue }
+        { [type]: modelValue }
       );
       viewportNode.innerHTML = itemString;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -20,7 +20,7 @@
     "ag-collection": "^3.3.0",
     "ag-model": "^1.4.1",
     "expr-eval": "^2.0.2",
-    "socketcluster-client": "^19.0.2"
+    "socketcluster-client": "^19.1.0"
   },
   "bugs": {
     "url": "https://github.com/Saasufy/saasufy-components/issues"

package/socket.js

@@ -41,7 +41,6 @@ export class SocketProvider extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (!this.isReady) return;
-    this.destroySocket();
     this.getSocket();
   }
 
@@ -51,16 +50,14 @@ export class SocketProvider extends HTMLElement {
     }
   }
 
-  getSocket() {
-    if (this.saasufySocket) {
-      return this.saasufySocket;
-    }
-    return this.createSocket();
+  getSanitizedURL() {
+    let url = this.getAttribute('url') || '';
+    return url.trim();
   }
 
-  createSocket() {
+  getSocketOptions() {
     let authTokenName = this.getAttribute('auth-token-name') || null;
-    let url = this.getAttribute('url') || '';
+    let url = this.getSanitizedURL();
     let urlOptions;
     let matchedList = url.match(urlPartsRegExp);
     if (matchedList) {
@@ -75,12 +72,36 @@ export class SocketProvider extends HTMLElement {
         path
       };
     } else {
+      if (url) {
+        throw new Error(`The specified URL ${url} was invalid`);
+      }
       urlOptions = {};
     }
-    this.saasufySocket = create({
+    let socketOptions = {
       authTokenName,
       ...urlOptions
-    });
+    };
+    socketOptions.autoConnect = !!url;
+    return socketOptions;
+  }
+
+  getSocket() {
+    if (this.saasufySocket) {
+      if (this.saasufySocket.uri() !== this.getSanitizedURL()) {
+        this.saasufySocket.connect(
+          this.getSocketOptions()
+        );
+      } else {
+        this.saasufySocket.connect();
+      }
+      return this.saasufySocket;
+    }
+    return this.createSocket();
+  }
+
+  createSocket() {
+    let socketOptions = this.getSocketOptions();
+    this.saasufySocket = create(socketOptions);
 
     return this.saasufySocket;
   }
@@ -95,6 +116,13 @@ export class SocketConsumer extends HTMLElement {
       if (socket) break;
       currentNode = currentNode.getRootNode().host || currentNode.parentNode;
     }
+    if (!socket) {
+      throw new Error(
+        `The ${
+          this.nodeName.toLowerCase()
+        } element failed to obtain a socket - Make sure it is nested inside a socket-provider element`
+      );
+    }
     return socket;
   }
 }

package/utils.js

@@ -164,6 +164,7 @@ let templateFormatters = {
     let valueString = String(value);
     return `${valueString.slice(0, 1).toUpperCase()}${valueString.slice(1)}`;
   },
+  trim: (value) => String(value).trim(),
   fallback: (...args) => {
     return args.filter(arg => arg)[0];
   }