saasufy-components 1.3.1 → 1.5.0

package/README.md

@@ -13,7 +13,7 @@ A form component for inserting data into collections.
 
 ### collection-browser
 
-Used for rendering collections as lists, tables or other sequences based on a specific view.
+Used for rendering collections as lists, tables or other sequences based on a specific view using a template.
 Supports pagination by allowing you to specify custom buttons or links to navigate between pages.
 Can also perform basic CRUD operations such as deleting or creating records.
 
@@ -21,6 +21,10 @@ Can also perform basic CRUD operations such as deleting or creating records.
 
 Used for displaying and editing a field of a model instance in real time.
 
+### model-viewer
+
+Used for rendering models using a template.
+
 ### confirm-modal
 
 A modal component to prompt the user for confirmation before performing sensitive operations.

package/collection-browser.js

@@ -90,7 +90,8 @@ class CollectionBrowser extends SocketConsumer {
       'collection-view',
       'collection-view-params',
       'collection-page-size',
-      'collection-page-offset'
+      'collection-page-offset',
+      'hide-error-logs'
     ];
   }
 
@@ -148,23 +149,23 @@ class CollectionBrowser extends SocketConsumer {
 
   renderList() {
     if (!this.collection || !this.collection.isLoaded) return;
-    let itemTemplate = this.shadowRoot.querySelector('slot[name="item"]').assignedNodes()[0];
-    if (!itemTemplate) return;
     let viewportNode = this.shadowRoot.querySelector('slot[name="viewport"]').assignedNodes()[0];
     if (!viewportNode) return;
-    let items = [];
-
-    for (let modelItem of this.collection.value) {
-      let itemString = renderTemplate(
-        itemTemplate.innerHTML,
-        { [this.collection.type]: modelItem }
-      );
-      items.push(itemString);
-    }
+
+    let itemTemplate = this.shadowRoot.querySelector('slot[name="item"]').assignedNodes()[0];
     let noItemTemplate = this.shadowRoot.querySelector('slot[name="no-item"]').assignedNodes()[0];
-    if (noItemTemplate && !items.length) {
+
+    if (noItemTemplate && !this.collection.value.length) {
       viewportNode.innerHTML = noItemTemplate.innerHTML;
-    } else {
+    } else if (itemTemplate) {
+      let items = [];
+      for (let modelItem of this.collection.value) {
+        let itemString = renderTemplate(
+          itemTemplate.innerHTML,
+          { [this.collection.type]: modelItem }
+        );
+        items.push(itemString);
+      }
       viewportNode.innerHTML = items.join('');
     }
   }

package/input-provider.js

@@ -0,0 +1,207 @@
+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) {
+            element.setAttribute(attributeName, value);
+          }
+        } else {
+          for (let element of matchingElements) {
+            if (element.nodeType === '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;
+        this.lastValue = event.target.value;
+        if (inputElement.type === 'checkbox') {
+          this.updateConsumerElements(consumers, !!inputElement.checked);
+          return;
+        }
+        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

@@ -0,0 +1,114 @@
+import { SocketConsumer } from './socket.js';
+import AGModel from '/node_modules/ag-model/ag-model.js';
+import { renderTemplate } from './utils.js';
+
+class ModelViewer extends SocketConsumer {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    this.handleSlotChangeEvent = () => {
+      this.renderItem();
+    };
+  }
+
+  connectedCallback() {
+    this.isReady = true;
+    this.socket = this.getSocket();
+    this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
+    this.render();
+  }
+
+  disconnectedCallback() {
+    if (this.model) this.model.destroy();
+    this.shadowRoot.removeEventListener('slotchange', this.handleSlotChangeEvent);
+  }
+
+  static get observedAttributes() {
+    return [
+      'model-type',
+      'model-id',
+      'model-fields',
+      'hide-error-logs'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isReady) return;
+    this.render();
+  }
+
+  modelValueExists(modelValue) {
+    let { id, ...otherProps } = modelValue;
+    return !!Object.values(otherProps).filter(value => value != null).length;
+  }
+
+  renderItem() {
+    if (!this.model || !this.model.isLoaded) return;
+    let viewportNode = this.shadowRoot.querySelector('slot[name="viewport"]').assignedNodes()[0];
+    if (!viewportNode) return;
+
+    let itemTemplate = this.shadowRoot.querySelector('slot[name="item"]').assignedNodes()[0];
+    let modelValue = this.model.value;
+
+    let noItemTemplate = this.shadowRoot.querySelector('slot[name="no-item"]').assignedNodes()[0];
+    if (noItemTemplate && !this.modelValueExists(modelValue)) {
+      viewportNode.innerHTML = noItemTemplate.innerHTML;
+    } else if (itemTemplate) {
+      let itemString = renderTemplate(
+        itemTemplate.innerHTML,
+        { [this.model.type]: modelValue }
+      );
+      viewportNode.innerHTML = itemString;
+    }
+  }
+
+  render() {
+    let modelType = this.getAttribute('model-type');
+    let modelId = this.getAttribute('model-id');
+    let modelFields = this.getAttribute('model-fields') || '';
+    let hideErrorLogs = this.hasAttribute('hide-error-logs');
+
+    if (this.model) this.model.destroy();
+
+    this.model = new AGModel({
+      socket: this.socket,
+      type: modelType,
+      id: modelId,
+      fields: modelFields.split(',').map(field => field.trim()).filter(field => field)
+    });
+
+    this.shadowRoot.innerHTML = `
+      <slot name="item"></slot>
+      <slot name="no-item"></slot>
+      <slot name="viewport"></slot>
+    `;
+
+    (async () => {
+      await this.model.listener('load').once();
+      if (!this.modelValueExists(this.model.value)) {
+        this.renderItem();
+      }
+      this.setAttribute('is-loaded', '');
+      this.dispatchEvent(new CustomEvent('load', { bubbles: true }));
+    })();
+
+    (async () => {
+      for await (let event of this.model.listener('change')) {
+        this.renderItem();
+      }
+    })();
+
+    if (!hideErrorLogs) {
+      (async () => {
+        for await (let { error } of this.model.listener('error')) {
+          console.error(
+            `Model viewer encountered an error: ${error.message}`
+          );
+        }
+      })();
+    }
+  }
+}
+
+window.customElements.define('model-viewer', ModelViewer);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "1.3.1",
+  "version": "1.5.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {

package/socket.js

@@ -41,7 +41,14 @@ export class SocketProvider extends HTMLElement {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (!this.isReady) return;
-    this.destroySocket();
+    let sanitizedURL = this.getSanitizedURL();
+    if (
+      this.saasufySocket &&
+      this.saasufySocket.transport &&
+      this.saasufySocket.transport.uri() !== sanitizedURL
+    ) {
+      this.saasufySocket.disconnect();
+    }
     this.getSocket();
   }
 
@@ -53,14 +60,24 @@ 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();
   }
 
-  createSocket() {
-    let authTokenName = this.getAttribute('auth-token-name') || null;
+  getSanitizedURL() {
     let url = this.getAttribute('url') || '';
+    return url.trim();
+  }
+
+  getSocketOptions() {
+    let authTokenName = this.getAttribute('auth-token-name') || null;
+    let url = this.getSanitizedURL();
     let urlOptions;
     let matchedList = url.match(urlPartsRegExp);
     if (matchedList) {
@@ -75,12 +92,22 @@ 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;
+  }
+
+  createSocket() {
+    let socketOptions = this.getSocketOptions();
+    this.saasufySocket = create(socketOptions);
 
     return this.saasufySocket;
   }

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];
   }