saasufy-components 1.3.1 → 1.4.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/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.4.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {