saasufy-components 1.5.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

@@ -128,11 +128,19 @@ class InputProvider extends HTMLElement {
         let matchingElements = parentElement.querySelectorAll(selector);
         if (attributeName) {
           for (let element of matchingElements) {
-            element.setAttribute(attributeName, value);
+            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.nodeType === 'INPUT') {
+            if (element.nodeName === 'INPUT') {
               if (element.type === 'checkbox') {
                 if (value) {
                   element.setAttribute('checked', '');
@@ -164,11 +172,13 @@ class InputProvider extends HTMLElement {
     let onInputChange = (event) => {
       debounce(async () => {
         if (event.target.value === this.lastValue) return;
-        this.lastValue = event.target.value;
         if (inputElement.type === 'checkbox') {
-          this.updateConsumerElements(consumers, !!inputElement.checked);
+          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 {

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.5.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,14 +41,6 @@ export class SocketProvider extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (!this.isReady) return;
-    let sanitizedURL = this.getSanitizedURL();
-    if (
-      this.saasufySocket &&
-      this.saasufySocket.transport &&
-      this.saasufySocket.transport.uri() !== sanitizedURL
-    ) {
-      this.saasufySocket.disconnect();
-    }
     this.getSocket();
   }
 
@@ -58,18 +50,6 @@ export class SocketProvider extends HTMLElement {
     }
   }
 
-  getSocket() {
-    if (this.saasufySocket) {
-      this.saasufySocket.options = {
-        ...this.saasufySocket.options,
-        ...this.getSocketOptions()
-      };
-      this.saasufySocket.connect();
-      return this.saasufySocket;
-    }
-    return this.createSocket();
-  }
-
   getSanitizedURL() {
     let url = this.getAttribute('url') || '';
     return url.trim();
@@ -105,6 +85,20 @@ export class SocketProvider extends HTMLElement {
     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);
@@ -122,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;
   }
 }