saasufy-components 2.3.0 → 2.4.0

package/collection-browser.js

@@ -223,8 +223,8 @@ class CollectionBrowser extends SocketConsumer {
     );
     let viewParams = Object.fromEntries(
       collectionViewParams.split(',')
-      .map(pair => pair.split('='))
-      .filter(([field]) => field)
+        .map(pair => pair.split('='))
+        .filter(([field]) => field)
     );
     if (this.collection) this.collection.destroy();
     this.isStale = true;
@@ -282,6 +282,8 @@ class CollectionBrowser extends SocketConsumer {
 
     (async () => {
       for await (let event of this.collection.listener('change')) {
+        // Ignore change events which originate from this collection instance.
+        if (!event.isRemote) continue;
         this.renderList();
         this.updatePageButtons();
       }

package/model-input.js

@@ -23,6 +23,7 @@ class ModelInput extends SocketConsumer {
       'input-id',
       'list',
       'model-instance-property',
+      'bind-to-collection',
       'type',
       'placeholder',
       'consumers',
@@ -65,6 +66,7 @@ class ModelInput extends SocketConsumer {
   render() {
     this.innerHTML = '';
     let modelInstanceProperty = this.getAttribute('model-instance-property');
+    let bindToCollection = this.hasAttribute('bind-to-collection');
     let showErrorMessage = this.hasAttribute('show-error-message');
     let inputId = this.getAttribute('input-id');
     let inputList = this.getAttribute('list');
@@ -80,41 +82,64 @@ class ModelInput extends SocketConsumer {
     let currentNode = this.parentNode;
     let model;
     let isModelLocal = false;
-    if (modelInstanceProperty) {
+    if (bindToCollection) {
+      let collection;
       while (currentNode) {
-        model = currentNode[modelInstanceProperty];
-        if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
-          model = null;
+        collection = currentNode.collection;
+        if (collection && (collection.type !== modelType || !(collection.fields || []).includes(modelField))) {
+          collection = null;
         }
-        if (model) break;
+        if (collection && (!collection.agModels || !collection.agModels[modelId] || !collection.agModels[modelId].agFields[modelField])) {
+          collection = null;
+        }
+        if (collection) break;
         currentNode = currentNode.getRootNode().host || currentNode.parentNode;
       }
-      if (!model) {
-        throw new Error(
-          `The ${
-            this.nodeName.toLowerCase()
-          } element failed to obtain a model via the specified model-instance-property - Ensure that the element is nested inside a parent element which exposes a model instance of the same type which has the relevant field`
-        );
-      };
-    } else {
-      this.socket = this.getSocket();
-      model = new AGModel({
-        socket: this.socket,
-        type: modelType,
-        id: modelId,
-        fields: [ modelField ],
-        enableRebound
-      });
-      if (!hideErrorLogs) {
-        (async () => {
-          for await (let { error } of model.listener('error')) {
-            console.error(
-              `Model input encountered an error: ${error.message}`
-            );
+      if (collection) {
+        model = collection.agModels[modelId];
+      }
+    }
+    if (!model) {
+      currentNode = this.parentNode;
+      if (modelInstanceProperty) {
+        while (currentNode) {
+          model = currentNode[modelInstanceProperty];
+          if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
+            model = null;
           }
-        })();
+          if (model && !model.agFields) {
+            model = null;
+          }
+          if (model) break;
+          currentNode = currentNode.getRootNode().host || currentNode.parentNode;
+        }
+        if (!model) {
+          throw new Error(
+            `The ${
+              this.nodeName.toLowerCase()
+            } element failed to obtain a model via the specified model-instance-property - Ensure that the element is nested inside a parent element which exposes a model instance of the same type which has the relevant field`
+          );
+        };
+      } else {
+        this.socket = this.getSocket();
+        model = new AGModel({
+          socket: this.socket,
+          type: modelType,
+          id: modelId,
+          fields: [ modelField ],
+          enableRebound
+        });
+        if (!hideErrorLogs) {
+          (async () => {
+            for await (let { error } of model.listener('error')) {
+              console.error(
+                `Model input encountered an error: ${error.message}`
+              );
+            }
+          })();
+        }
+        isModelLocal = true;
       }
-      isModelLocal = true;
     }
     if (model.isLoaded) {
       this.setAttribute('is-loaded', '');

package/model-text.js

@@ -21,6 +21,7 @@ class ModelText extends SocketConsumer {
   static get observedAttributes() {
     return [
       'model-instance-property',
+      'bind-to-collection',
       'model-type',
       'model-id',
       'model-field',
@@ -37,6 +38,7 @@ class ModelText extends SocketConsumer {
   render() {
     this.innerHTML = '';
     let modelInstanceProperty = this.getAttribute('model-instance-property');
+    let bindToCollection = this.hasAttribute('bind-to-collection');
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelField = this.getAttribute('model-field');
@@ -44,40 +46,63 @@ class ModelText extends SocketConsumer {
     let currentNode = this.parentNode;
     let model;
     let isModelLocal = false;
-    if (modelInstanceProperty) {
+    if (bindToCollection) {
+      let collection;
       while (currentNode) {
-        model = currentNode[modelInstanceProperty];
-        if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
-          model = null;
+        collection = currentNode.collection;
+        if (collection && (collection.type !== modelType || !(collection.fields || []).includes(modelField))) {
+          collection = null;
         }
-        if (model) break;
+        if (collection && (!collection.agModels || !collection.agModels[modelId] || !collection.agModels[modelId].agFields[modelField])) {
+          collection = null;
+        }
+        if (collection) break;
         currentNode = currentNode.getRootNode().host || currentNode.parentNode;
       }
-      if (!model) {
-        throw new Error(
-          `The ${
-            this.nodeName.toLowerCase()
-          } element failed to obtain a model via the specified model-instance-property - Ensure that the element is nested inside a parent element which exposes a model instance of the same type which has the relevant field`
-        );
-      };
-    } else {
-      this.socket = this.getSocket();
-      model = new AGModel({
-        socket: this.socket,
-        type: modelType,
-        id: modelId,
-        fields: [ modelField ]
-      });
-      if (!hideErrorLogs) {
-        (async () => {
-          for await (let { error } of model.listener('error')) {
-            console.error(
-              `Model input encountered an error: ${error.message}`
-            );
+      if (collection) {
+        model = collection.agModels[modelId];
+      }
+    }
+    if (!model) {
+      currentNode = this.parentNode;
+      if (modelInstanceProperty) {
+        while (currentNode) {
+          model = currentNode[modelInstanceProperty];
+          if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
+            model = null;
           }
-        })();
+          if (model && !model.agFields) {
+            model = null;
+          }
+          if (model) break;
+          currentNode = currentNode.getRootNode().host || currentNode.parentNode;
+        }
+        if (!model) {
+          throw new Error(
+            `The ${
+              this.nodeName.toLowerCase()
+            } element failed to obtain a model via the specified model-instance-property - Ensure that the element is nested inside a parent element which exposes a model instance of the same type which has the relevant field`
+          );
+        };
+      } else {
+        this.socket = this.getSocket();
+        model = new AGModel({
+          socket: this.socket,
+          type: modelType,
+          id: modelId,
+          fields: [ modelField ]
+        });
+        if (!hideErrorLogs) {
+          (async () => {
+            for await (let { error } of model.listener('error')) {
+              console.error(
+                `Model input encountered an error: ${error.message}`
+              );
+            }
+          })();
+        }
+        isModelLocal = true;
       }
-      isModelLocal = true;
     }
     if (model.isLoaded) {
       this.setAttribute('is-loaded', '');

package/model-viewer.js

@@ -104,6 +104,9 @@ class ModelViewer extends SocketConsumer {
         if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
           model = null;
         }
+        if (model && !model.agFields) {
+          model = null;
+        }
         if (model) break;
         currentNode = currentNode.getRootNode().host || currentNode.parentNode;
       }

package/package.json

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