saasufy-components 2.11.0 → 2.12.1

package/collection-adder.js

@@ -1,4 +1,5 @@
 import { SocketConsumer } from './socket.js';
+import { convertStringToFieldParams, getTypeCastFunction } from './utils.js';
 import AGCollection from '/node_modules/ag-collection/ag-collection.js';
 
 class CollectionAdder extends SocketConsumer {
@@ -6,18 +7,7 @@ class CollectionAdder extends SocketConsumer {
     super();
     this.options = options || {};
 
-    this.typeCastFunctions = {
-      text: String,
-      textarea: String,
-      checkbox: Boolean,
-      number: Number,
-      radio: String,
-      select: String,
-      'text-select': String
-    };
-    this.fieldPartsRegExp = /("[^"]*"|'[^']*'|\([^)]*\)|[^,()"']+)+/g;
     this.inputTypeWithParamsRegExp = /^([^()]*)(\(([^)]*)\))?/;
-    this.quotedContentRegExp = /^\s*["']?(.*?)["']?\s*$/;
     this.isReady = false;
   }
 
@@ -52,44 +42,6 @@ class CollectionAdder extends SocketConsumer {
     this.render();
   }
 
-  getTypeCastFunction(type) {
-    return this.typeCastFunctions[type] || ((value) => value);
-  }
-
-  getFieldDetails(string) {
-    let parts = ((string || '').match(this.fieldPartsRegExp) || []).map(field => field.trim());
-    let fieldTypeValues = parts.map((part) => {
-      let subParts = part.split('=');
-      let nameType = (subParts[0] || '').split(':');
-      let name = nameType[0];
-      let type = nameType[1] || 'text';
-      let value = subParts.slice(1).join('=').replace(this.quotedContentRegExp, '$1');
-      return {
-        name,
-        type,
-        value
-      }
-    });
-    let fieldNames = fieldTypeValues.map(item => item.name);
-    let fieldTypes = Object.fromEntries(
-      fieldTypeValues.map(item => [ item.name, item.type ])
-    );
-    let fieldValues = Object.fromEntries(
-      fieldTypeValues.map(
-        (item) => {
-          let type = fieldTypes[item.name];
-          let Type = this.getTypeCastFunction(type);
-          return [ item.name, Type(item.value) ];
-        }
-      )
-    );
-    return {
-      fieldNames,
-      fieldTypes,
-      fieldValues
-    };
-  }
-
   async submit() {
     if (!this.isReady) {
       throw new Error('Collection adder form is not ready to be submitted');
@@ -119,7 +71,7 @@ class CollectionAdder extends SocketConsumer {
           .filter(input => input.value !== '')
           .map((input) => {
             let fieldType = this.fieldTypes[input.name];
-            let Type = this.getTypeCastFunction(fieldType);
+            let Type = getTypeCastFunction(fieldType);
             let value;
             if (fieldType === 'checkbox') {
               value = input.checked;
@@ -180,22 +132,22 @@ class CollectionAdder extends SocketConsumer {
     let {
       fieldNames,
       fieldTypes
-    } = this.getFieldDetails(this.getAttribute('collection-fields'));
+    } = convertStringToFieldParams(this.getAttribute('collection-fields'));
 
     this.fieldTypes = fieldTypes;
 
     let {
       fieldNames: modelFieldNames,
       fieldValues: modelFieldValues
-    } = this.getFieldDetails(this.getAttribute('model-values'));
+    } = convertStringToFieldParams(this.getAttribute('model-values'));
 
     let {
       fieldValues: modelFieldLabels
-    } = this.getFieldDetails(this.getAttribute('field-labels'));
+    } = convertStringToFieldParams(this.getAttribute('field-labels'));
 
     let {
       fieldValues: optionLabels
-    } = this.getFieldDetails(this.getAttribute('option-labels'));
+    } = convertStringToFieldParams(this.getAttribute('option-labels'));
 
     let autocapitalize = this.getAttribute('autocapitalize');
     let autocorrect = this.getAttribute('autocorrect');

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.1",
   "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;
           }
@@ -286,6 +291,57 @@ export function generateRandomHexString(byteLength) {
   }).join('');
 }
 
+export const fieldPartsRegExp = /("[^"]*"|'[^']*'|\([^)]*\)|[^,()"']+)+/g;
+export const quotedContentRegExp = /^\s*["']?(.*?)["']?\s*$/;
+
+export const typeCastFunctions = {
+  text: String,
+  textarea: String,
+  checkbox: Boolean,
+  number: Number,
+  radio: String,
+  select: String,
+  'text-select': String
+};
+
+export function getTypeCastFunction(type) {
+  return typeCastFunctions[type] || ((value) => value);
+}
+
+export function convertStringToFieldParams(string) {
+  let parts = ((string || '').match(fieldPartsRegExp) || []).map(field => field.trim());
+  let fieldTypeValues = parts.map((part) => {
+    let subParts = part.split('=');
+    let nameType = (subParts[0] || '').split(':');
+    let name = nameType[0];
+    let type = nameType[1] || 'text';
+    let value = subParts.slice(1).join('=').replace(quotedContentRegExp, '$1');
+    return {
+      name,
+      type,
+      value
+    }
+  });
+  let fieldNames = fieldTypeValues.map(item => item.name);
+  let fieldTypes = Object.fromEntries(
+    fieldTypeValues.map(item => [ item.name, item.type ])
+  );
+  let fieldValues = Object.fromEntries(
+    fieldTypeValues.map(
+      (item) => {
+        let type = fieldTypes[item.name];
+        let Type = getTypeCastFunction(type);
+        return [ item.name, Type(item.value) ];
+      }
+    )
+  );
+  return {
+    fieldNames,
+    fieldTypes,
+    fieldValues
+  };
+}
+
 export function wait(duration) {
   return new Promise((resolve) => setTimeout(resolve, duration));
 }