saasufy-components 2.11.0 → 2.12.0

package/model-input.js

@@ -23,6 +23,7 @@ class ModelInput extends SocketConsumer {
       'input-id',
       'list',
       'model-instance-property',
+      'collection-instance-property',
       'bind-to-model',
       'bind-to-collection',
       'type',
@@ -36,6 +37,8 @@ class ModelInput extends SocketConsumer {
       'enable-rebound',
       'options',
       'height',
+      'default-value',
+      'value',
       'hide-error-logs',
       'autocapitalize',
       'autocorrect'
@@ -44,8 +47,12 @@ class ModelInput extends SocketConsumer {
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (!this.isReady) return;
-    this.destroy();
-    this.render();
+    if (name === 'value') {
+      this.value = newValue;
+    } else {
+      this.destroy();
+      this.render();
+    }
   }
 
   triggerChange() {
@@ -69,8 +76,9 @@ class ModelInput extends SocketConsumer {
   render() {
     this.innerHTML = '';
     let bindToModel = this.hasAttribute('bind-to-model');
-    let bindToCollection = this.hasAttribute('bind-to-collection');
     let modelInstanceProperty = this.getAttribute('model-instance-property');
+    let bindToCollection = this.hasAttribute('bind-to-collection');
+    let collectionInstanceProperty = this.getAttribute('collection-instance-property');
     let showErrorMessage = this.hasAttribute('show-error-message');
     let inputId = this.getAttribute('input-id');
     let autocapitalize = this.getAttribute('autocapitalize');
@@ -89,13 +97,16 @@ class ModelInput extends SocketConsumer {
     let model;
     let isModelLocal = false;
     if (bindToCollection) {
+      collectionInstanceProperty = 'collection';
+    }
+    if (collectionInstanceProperty) {
       let collection;
       while (currentNode) {
-        collection = currentNode.collection;
-        if (collection && (collection.type !== modelType || !(collection.fields || []).includes(modelField))) {
+        collection = currentNode[collectionInstanceProperty];
+        if (collection && collection.type !== modelType) {
           collection = null;
         }
-        if (collection && (!collection.agModels || !collection.agModels[modelId] || !collection.agModels[modelId].agFields[modelField])) {
+        if (collection && (!collection.agModels || !collection.agModels[modelId])) {
           collection = null;
         }
         if (collection) break;
@@ -103,6 +114,9 @@ class ModelInput extends SocketConsumer {
       }
       if (collection) {
         model = collection.agModels[modelId];
+        if (!model.agFields[modelField]) {
+          model.addField(modelField);
+        }
       }
     }
     if (!model) {
@@ -126,7 +140,7 @@ class ModelInput extends SocketConsumer {
           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`
+            } element failed to bind to a model - Ensure that the element is nested inside a parent element which exposes a model instance of the same type with a ${modelField} field`
           );
         };
       } else {

package/model-text.js

@@ -21,7 +21,9 @@ class ModelText extends SocketConsumer {
   static get observedAttributes() {
     return [
       'model-instance-property',
+      'collection-instance-property',
       'bind-to-collection',
+      'bind-to-model',
       'model-type',
       'model-id',
       'model-field',
@@ -38,8 +40,9 @@ class ModelText extends SocketConsumer {
   render() {
     this.innerHTML = '';
     let bindToModel = this.hasAttribute('bind-to-model');
-    let bindToCollection = this.hasAttribute('bind-to-collection');
     let modelInstanceProperty = this.getAttribute('model-instance-property');
+    let bindToCollection = this.hasAttribute('bind-to-collection');
+    let collectionInstanceProperty = this.getAttribute('collection-instance-property');
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelField = this.getAttribute('model-field');
@@ -48,13 +51,16 @@ class ModelText extends SocketConsumer {
     let model;
     let isModelLocal = false;
     if (bindToCollection) {
+      collectionInstanceProperty = 'collection';
+    }
+    if (collectionInstanceProperty) {
       let collection;
       while (currentNode) {
-        collection = currentNode.collection;
-        if (collection && (collection.type !== modelType || !(collection.fields || []).includes(modelField))) {
+        collection = currentNode[collectionInstanceProperty];
+        if (collection && collection.type !== modelType) {
           collection = null;
         }
-        if (collection && (!collection.agModels || !collection.agModels[modelId] || !collection.agModels[modelId].agFields[modelField])) {
+        if (collection && (!collection.agModels || !collection.agModels[modelId])) {
           collection = null;
         }
         if (collection) break;
@@ -62,6 +68,9 @@ class ModelText extends SocketConsumer {
       }
       if (collection) {
         model = collection.agModels[modelId];
+        if (!model.agFields[modelField]) {
+          model.addField(modelField);
+        }
       }
     }
     if (!model) {
@@ -85,7 +94,7 @@ class ModelText extends SocketConsumer {
           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`
+            } element failed to bind to a model - Ensure that the element is nested inside a parent element which exposes a model instance of the same type with a ${modelField} field`
           );
         };
       } else {
@@ -100,7 +109,7 @@ class ModelText extends SocketConsumer {
           (async () => {
             for await (let { error } of model.listener('error')) {
               console.error(
-                `Model input encountered an error: ${error.message}`
+                `Model text encountered an error: ${error.message}`
               );
             }
           })();

package/model-viewer.js

@@ -114,7 +114,7 @@ class ModelViewer extends SocketConsumer {
         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`
+          } 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 fields`
         );
       };
       this.model = model;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -17,8 +17,8 @@
   "author": "Jonathan Gros-Dubois",
   "license": "MIT",
   "dependencies": {
-    "ag-collection": "^4.0.0",
-    "ag-model": "^2.0.0",
+    "ag-collection": "^4.1.0",
+    "ag-model": "^2.1.0",
     "capitalisk-auth-client": "^1.5.1",
     "socketcluster-client": "^19.1.0"
   },

package/utils.js

@@ -61,6 +61,9 @@ export function createReactiveCollection(collectionOptions, callback) {
   (async () => {
     let changes = {};
     for await (let event of collection.listener('change')) {
+      // Ignore change events which originate from this collection instance.
+      if (!event.isRemote) continue;
+
       if (event.resourceId != null && changes[event.resourceId] !== false) {
         changes[event.resourceId] = event.isRemote;
       }
@@ -265,6 +268,8 @@ export function updateConsumerElements(parentElement, consumers, value) {
             } else {
               element.value = value;
             }
+          } else if (element.nodeName === 'MODEL-INPUT') {
+            element.value = value;
           } else {
             element.innerHTML = value;
           }