saasufy-components 8.6.0 → 9.0.0

package/README.md

@@ -446,6 +446,7 @@ This component is a simplified version of the `collection-adder-form` component
 - `collection-type` (required): Specifies the type of collection to add the resource to when the form is submitted. This should match a `Model` available in your Saasufy service.
 - `collection-fields`: A comma-separated list of fields from the `Model` to display as input elements inside the form for the user to fill in. Each field name in this list can optionally be followed by an input element type after a `:` character. For example `collection-fields="qty:number, size:select(small,medium,large)` will create one input element with `type="number"` and one with `type=select` with options `small`, `medium` or `large`. To make a select field optional, you can prefix the list of options with a comma; e.g. `size:select(,small,medium,large)`. Supported input types include: `text`, `select`, `number`, `checkbox`, `radio`, `textarea`, `file` and `text-select`.
 - `model-values`: An optional list of key-value pairs in the format `field1=value1,field2=value2` to add to the newly created resource alongside the values collected from the user via the form. For non-string values, the type should be provided in the format `fieldName:type=value`; supported types are `string`, `number` and `boolean`. Unlike `collection-fields` which are rendered as input elements in the form, `model-values` are not shown to the user.
+- `computable-model-values`: If this attribute exists on the element, then the `model-values` attribute will be re-computed before the form is submitted; this may be useful if the `model-values` attribute contains expressions which need to be updated before submitting.
 - `field-labels`: Allows you to specify custom input labels by mapping field names to more user-friendly labels in the format `fieldName1='Field Name 1',fieldName2='Field Name 2'`.
 - `submit-button-label`: Text to display on the submit button. If not specified, defaults to `Submit`.
 - `hide-submit-button`: Adding this attribute will hide the submit button from the form.
@@ -489,6 +490,7 @@ This component is similar to the `collection-adder` component except that it req
 
 - `collection-type` (required): Specifies the type of collection to add the resource to when the form is submitted. This should match a `Model` available in your Saasufy service.
 - `model-values`: An optional list of key-value pairs in the format `field1=value1,field2=value2` to add to the newly created resource alongside the values collected from the user via the form. For non-string values, the type should be provided in the format `fieldName:type=value`; supported types are `string`, `number` and `boolean`. Unlike `collection-fields` which are rendered as input elements in the form, `model-values` are not shown to the user.
+- `computable-model-values`: If this attribute exists on the element, then the `model-values` attribute will be re-computed before the form is submitted; this may be useful if the `model-values` attribute contains expressions which need to be updated before submitting.
 - `success-message`: A message to show the user if the resource has been successfully added to the collection after submitting the form.
 - `trim-spaces`: If this attribute exists on the element, then leading and trailing spaces will be trimmed from each input element's value before submitting the form.
 - `auto-reset-hidden-inputs`: If this attribute exists, then `hidden` input elements which are inside the `collection-adder-form` will be cleared along with other input fields. By default, `hidden` input elements are not cleared when the form is reset.

package/app-router.js

@@ -291,7 +291,8 @@ export class AppRouter extends SocketConsumer {
     }
 
     this.setCurrentState(routeArgs);
-    routerViewport.innerHTML = renderTemplate(
+    routerViewport.innerHTML = renderTemplate.call(
+      this,
       pageTemplate.innerHTML,
       this.getStateContext(),
       this.socket

package/collection-adder-form.js

@@ -3,7 +3,8 @@ import {
   updateConsumerElements,
   convertStringToFieldParams,
   getTypeCastFunction,
-  formatError
+  formatError,
+  renderTemplate
 } from './utils.js';
 import AGCollection from '/node_modules/ag-collection/ag-collection.js';
 
@@ -61,6 +62,18 @@ class CollectionAdderForm extends SocketConsumer {
     let inputElements = this.getAllInputElements();
     let outputValue;
 
+    let modelValues = this.getAttribute('model-values');
+
+    if (modelValues && this.hasAttribute('computable-model-values')) {
+      modelValues = renderTemplate.call(this, modelValues, null, null, true);
+    }
+
+    let {
+      fieldValues: modelFieldValues
+    } = convertStringToFieldParams(modelValues);
+
+    this.modelFieldValues = modelFieldValues;
+
     try {
       let newModelData = {
         ...this.modelFieldValues,
@@ -121,7 +134,9 @@ class CollectionAdderForm extends SocketConsumer {
         })
       );
 
-      this.reset();
+      if (!this.hasAttribute('no-auto-reset')) {
+        this.reset();
+      }
 
       outputValue = {
         resource: insertedModelData
@@ -166,8 +181,8 @@ class CollectionAdderForm extends SocketConsumer {
     }
     let providerTemplate = this.getAttribute('provider-template');
     let selfName = this.getAttribute('name');
-    updateConsumerElements(consumers, outputValue, providerTemplate, selfName);
-    updateConsumerElements(oppositeOutcomeConsumers, '', null, selfName);
+    updateConsumerElements.call(this, consumers, outputValue, providerTemplate, selfName);
+    updateConsumerElements.call(this, oppositeOutcomeConsumers, '', null, selfName);
   }
 
   getAllInputElements() {
@@ -188,12 +203,17 @@ class CollectionAdderForm extends SocketConsumer {
     for (let element of inputElements) {
       if (element.nodeName === 'INPUT') {
         if (element.type === 'checkbox' || element.type === 'radio') {
-          element.checked = false;
-        } else if (element.type !== 'hidden' || this.hasAttribute('auto-reset-hidden-inputs')) {
+          let isChecked = element.hasAttribute('checked');
+          element.checked = isChecked || false;
+        } else if (element.type !== 'hidden') {
+          let currentValue = element.getAttribute('value');
+          element.value = currentValue || '';
+        } else if (element.type === 'hidden' && this.hasAttribute('auto-reset-hidden-inputs')) {
           element.value = '';
         }
       } else if (element.nodeName === 'TEXTAREA') {
-        element.value = '';
+        let currentValue = element.getAttribute('value');
+        element.value = currentValue || '';
       } else if (element.nodeName === 'SELECT') {
         element.selectedIndex = 0;
       }
@@ -203,12 +223,6 @@ class CollectionAdderForm extends SocketConsumer {
   render() {
     let collectionType = this.getAttribute('collection-type');
 
-    let {
-      fieldValues: modelFieldValues
-    } = convertStringToFieldParams(this.getAttribute('model-values'));
-
-    this.modelFieldValues = modelFieldValues;
-
     if (this.collection) this.collection.destroy();
 
     this.collection = new AGCollection({

package/collection-adder.js

@@ -3,7 +3,8 @@ import {
   updateConsumerElements,
   convertStringToFieldParams,
   getTypeCastFunction,
-  formatError
+  formatError,
+  renderTemplate
 } from './utils.js';
 import AGCollection from '/node_modules/ag-collection/ag-collection.js';
 
@@ -69,6 +70,17 @@ class CollectionAdder extends SocketConsumer {
     let trimSpaces = this.hasAttribute('trim-spaces');
     let outputValue;
 
+    let modelValues = this.getAttribute('model-values');
+    if (modelValues && this.hasAttribute('computable-model-values')) {
+      modelValues = renderTemplate.call(this, modelValues, null, null, true);
+    }
+
+    let {
+      fieldValues: modelFieldValues
+    } = convertStringToFieldParams(modelValues);
+
+    this.modelFieldValues = modelFieldValues;
+
     try {
       let newModelData = {
         ...this.modelFieldValues,
@@ -160,8 +172,8 @@ class CollectionAdder extends SocketConsumer {
     }
     let providerTemplate = this.getAttribute('provider-template');
     let selfName = this.getAttribute('name');
-    updateConsumerElements(consumers, outputValue, providerTemplate, selfName);
-    updateConsumerElements(oppositeOutcomeConsumers, '', null, selfName);
+    updateConsumerElements.call(this, consumers, outputValue, providerTemplate, selfName);
+    updateConsumerElements.call(this, oppositeOutcomeConsumers, '', null, selfName);
   }
 
   reset() {
@@ -185,11 +197,6 @@ class CollectionAdder extends SocketConsumer {
 
     this.fieldTypes = fieldTypes;
 
-    let {
-      fieldNames: modelFieldNames,
-      fieldValues: modelFieldValues
-    } = convertStringToFieldParams(this.getAttribute('model-values'));
-
     let {
       fieldValues: modelFieldLabels
     } = convertStringToFieldParams(this.getAttribute('field-labels'));
@@ -198,6 +205,11 @@ class CollectionAdder extends SocketConsumer {
       fieldValues: optionLabels
     } = convertStringToFieldParams(this.getAttribute('option-labels'));
 
+    let modelValues = this.getAttribute('model-values');
+    let {
+      fieldNames: modelFieldNames
+    } = convertStringToFieldParams(modelValues);
+
     let autocapitalize = this.getAttribute('autocapitalize');
     let autocorrect = this.getAttribute('autocorrect');
 
@@ -207,8 +219,6 @@ class CollectionAdder extends SocketConsumer {
       autocorrect ? ` autocorrect="${autocorrect}"` : ''
     }`;
 
-    this.modelFieldValues = modelFieldValues;
-
     if (this.collection) this.collection.destroy();
 
     this.collection = new AGCollection({

package/collection-reducer.js

@@ -148,7 +148,8 @@ class CollectionReducer extends SocketConsumer {
     if (errorTemplate) {
       let type = this.getAttribute('type-alias') || this.getAttribute('collection-type');
       this.setCurrentState({ [`$${type}`]: { error } });
-      let errorItemString = renderTemplate(
+      let errorItemString = renderTemplate.call(
+        this,
         errorTemplate.innerHTML,
         this.getStateContext(),
         this.socket
@@ -189,7 +190,8 @@ class CollectionReducer extends SocketConsumer {
     } else if (itemTemplate) {
       let type = this.getAttribute('type-alias') || this.collection.type;
       this.setCurrentState({ [type]: this.collection.value, [`$${type}`]: this.collection.meta });
-      let itemString = renderTemplate(
+      let itemString = renderTemplate.call(
+        this,
         itemTemplate.innerHTML,
         this.getStateContext(),
         this.socket

package/collection-viewer.js

@@ -252,7 +252,8 @@ class CollectionViewer extends SocketConsumer {
     if (errorTemplate) {
       let type = this.getAttribute('type-alias') || this.getAttribute('collection-type');
       this.setCurrentState({ [`$${type}`]: { error } });
-      let errorItemString = renderTemplate(
+      let errorItemString = renderTemplate.call(
+        this,
         errorTemplate.innerHTML,
         this.getStateContext(),
         this.socket
@@ -313,7 +314,8 @@ class CollectionViewer extends SocketConsumer {
 
     if (firstItemTemplate) {
       let state = { [`$${type}`]: this.collection.meta };
-      let itemString = renderTemplate(
+      let itemString = renderTemplate.call(
+        this,
         firstItemTemplate.innerHTML,
         {...stateContext, ...state},
         this.socket
@@ -322,7 +324,8 @@ class CollectionViewer extends SocketConsumer {
     }
     if (noItemTemplate && !this.collection.value.length) {
       let state = { [`$${type}`]: this.collection.meta };
-      let itemString = renderTemplate(
+      let itemString = renderTemplate.call(
+        this,
         noItemTemplate.innerHTML,
         {...stateContext, ...state},
         this.socket
@@ -334,7 +337,8 @@ class CollectionViewer extends SocketConsumer {
           [type]: modelItem,
           [`$${type}`]: this.collection.meta
         };
-        let itemString = renderTemplate(
+        let itemString = renderTemplate.call(
+          this,
           itemTemplate.innerHTML,
           {...stateContext, ...state},
           this.socket
@@ -344,7 +348,8 @@ class CollectionViewer extends SocketConsumer {
     }
     if (lastItemTemplate) {
       let state = { [`$${type}`]: this.collection.meta };
-      let itemString = renderTemplate(
+      let itemString = renderTemplate.call(
+        this,
         lastItemTemplate.innerHTML,
         {...stateContext, ...state},
         this.socket

package/input-combiner.js

@@ -48,7 +48,7 @@ class InputCombiner extends HTMLElement {
 
     this.debounce(async () => {
       let providerTemplate = this.getAttribute('provider-template') || '{{value._root}}';
-      updateConsumerElements(consumers, { ...this.inputValues }, providerTemplate);
+      updateConsumerElements.call(this, consumers, { ...this.inputValues }, providerTemplate);
     }, debounceDelay);
   }
 }

package/input-provider.js

@@ -78,7 +78,7 @@ class InputProvider extends HTMLElement {
       let skipInitChange = this.skipInitChange && !forceInitChange;
       delete this.skipInitChange;
       if (newValue && this.hasAttribute('computable-value')) {
-        newValue = renderTemplate(newValue, null, null, true);
+        newValue = renderTemplate.call(this, newValue, null, null, true);
       }
       this.updateInputClassList(newValue);
       let oldValue;
@@ -228,16 +228,16 @@ class InputProvider extends HTMLElement {
           let checked = !!inputElement.checked;
           this.lastValue = checked;
 
-          updateConsumerElements(consumers, checked, providerTemplate, elementName);
+          updateConsumerElements.call(this, consumers, checked, providerTemplate, elementName);
           return;
         }
         this.lastValue = event.target.value;
         if (event.target.value === '') {
-          updateConsumerElements(consumers, '', providerTemplate, elementName);
+          updateConsumerElements.call(this, consumers, '', providerTemplate, elementName);
         } else {
           let targetValue = inputElement.type === 'number' ?
             Number(event.target.value) : event.target.value;
-          updateConsumerElements(consumers, targetValue, providerTemplate, elementName);
+          updateConsumerElements.call(this, consumers, targetValue, providerTemplate, elementName);
         }
       }, debounceDelay);
     };
@@ -254,11 +254,11 @@ class InputProvider extends HTMLElement {
           if (event.target.value === this.lastValue) return;
           this.lastValue = event.target.value;
           if (event.target.value === '') {
-            updateConsumerElements(consumers, '', providerTemplate, elementName);
+            updateConsumerElements.call(this, consumers, '', providerTemplate, elementName);
           } else {
             let targetValue = inputElement.type === 'number' ?
               Number(event.target.value) : event.target.value;
-            updateConsumerElements(consumers, targetValue, providerTemplate, elementName);
+            updateConsumerElements.call(this, consumers, targetValue, providerTemplate, elementName);
           }
         }, debounceDelay);
       };

package/input-transformer.js

@@ -44,7 +44,7 @@ class InputTransformer extends HTMLElement {
 
     this.debounce(async () => {
       let providerTemplate = this.getAttribute('provider-template') || '{{value}}';
-      updateConsumerElements(consumers, value, providerTemplate, null, outputType);
+      updateConsumerElements.call(this, consumers, value, providerTemplate, null, outputType);
     }, debounceDelay);
   }
 }

package/model-input.js

@@ -4,7 +4,8 @@ import {
   updateConsumerElements,
   convertStringToFieldParams,
   convertStringToFieldTypeValues,
-  formatError
+  formatError,
+  renderTemplate
 } from './utils.js';
 import AGModel from '/node_modules/ag-model/ag-model.js';
 
@@ -72,7 +73,7 @@ class ModelInput extends SocketConsumer {
   set value(newValue) {
     if (this.inputElement) {
       if (newValue && this.hasAttribute('computable-value')) {
-        newValue = renderTemplate(newValue, null, null, true);
+        newValue = renderTemplate.call(this, newValue, null, null, true);
       }
       let oldValue;
       if (this.inputElement.type === 'checkbox') {
@@ -273,14 +274,14 @@ class ModelInput extends SocketConsumer {
     if (inputElement.type === 'checkbox') {
       let checked = !!fieldValue;
       inputElement.checked = checked;
-      updateConsumerElements(consumers, checked, providerTemplate, this.getAttribute('name'));
+      updateConsumerElements.call(this, consumers, checked, providerTemplate, this.getAttribute('name'));
     } else {
       let defaultValue = this.getAttribute('default-value') || '';
       let elementValue = fieldValue == null ? defaultValue : fieldValue;
       if (inputElement.type !== 'file') {
         inputElement.value = elementValue;
       }
-      updateConsumerElements(consumers, elementValue, providerTemplate, this.getAttribute('name'));
+      updateConsumerElements.call(this, consumers, elementValue, providerTemplate, this.getAttribute('name'));
     }
   }
 
@@ -354,7 +355,7 @@ class ModelInput extends SocketConsumer {
         try {
           if (inputElement.type === 'checkbox') {
             let checked = !!inputElement.checked;
-            updateConsumerElements(consumers, checked, providerTemplate, this.getAttribute('name'));
+            updateConsumerElements.call(this, consumers, checked, providerTemplate, this.getAttribute('name'));
             await model.update(fieldName, checked);
             inputElement.classList.remove(errorStyleClass);
             inputElement.classList.add(successStyleClass);
@@ -383,12 +384,12 @@ class ModelInput extends SocketConsumer {
             inputValue = event.target.value;
           }
           if (inputValue === '') {
-            updateConsumerElements(consumers, '', providerTemplate, this.getAttribute('name'));
+            updateConsumerElements.call(this, consumers, '', providerTemplate, this.getAttribute('name'));
             await model.delete(fieldName);
           } else {
             let targetValue = inputElement.type === 'number' ?
               Number(inputValue) : inputValue;
-            updateConsumerElements(consumers, targetValue, providerTemplate, this.getAttribute('name'));
+            updateConsumerElements.call(this, consumers, targetValue, providerTemplate, this.getAttribute('name'));
             await model.update(fieldName, targetValue);
           }
           inputElement.classList.remove(errorStyleClass);
@@ -415,11 +416,11 @@ class ModelInput extends SocketConsumer {
           try {
             if (event.target.value === '') {
               await model.delete(fieldName);
-              updateConsumerElements(consumers, '', providerTemplate, this.getAttribute('name'));
+              updateConsumerElements.call(this, consumers, '', providerTemplate, this.getAttribute('name'));
             } else {
               let targetValue = inputType === 'number' ?
                 Number(event.target.value) : event.target.value;
-              updateConsumerElements(consumers, targetValue, providerTemplate, this.getAttribute('name'));
+              updateConsumerElements.call(this, consumers, targetValue, providerTemplate, this.getAttribute('name'));
               await model.update(fieldName, targetValue);
             }
             inputElement.classList.remove(errorStyleClass);

package/model-viewer.js

@@ -64,7 +64,8 @@ class ModelViewer extends SocketConsumer {
     if (errorTemplate) {
       let type = this.getAttribute('type-alias') || this.getAttribute('model-type');
       this.setCurrentState({ [`$${type}`]: { error } });
-      let errorItemString = renderTemplate(
+      let errorItemString = renderTemplate.call(
+        this,
         errorTemplate.innerHTML,
         this.getStateContext(),
         this.socket
@@ -102,7 +103,8 @@ class ModelViewer extends SocketConsumer {
     } else if (itemTemplate) {
       let type = this.getAttribute('type-alias') || this.model.type;
       this.setCurrentState({ [type]: modelValue });
-      let itemString = renderTemplate(
+      let itemString = renderTemplate.call(
+        this,
         itemTemplate.innerHTML,
         this.getStateContext(),
         this.socket

package/oauth-link.js

@@ -50,7 +50,8 @@ class OAuthLink extends HTMLElement {
 
     let clientId = this.getAttribute('client-id');
 
-    let itemString = renderTemplate(
+    let itemString = renderTemplate.call(
+      this,
       itemTemplate.innerHTML,
       {
         oauth: {

package/package.json

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

package/utils.js

@@ -235,9 +235,9 @@ function execExpression(expression, options) {
     ...keys,
     `return (function () {
       return (${expression});
-    })();`
+    }).call(this);`
   ];
-  return (new Function(...args))(...keys.map(key => options[key]));
+  return (new Function(...args)).call(this, ...keys.map(key => options[key]));
 }
 
 function getRenderOptions(data, socket) {
@@ -317,7 +317,8 @@ export function renderTemplate(templateString, data, socket, autoExecFunction) {
     if (expression.startsWith('{{{') && expression.endsWith('}}}')) {
       expString = expression.slice(3, -3);
       try {
-        let result = execExpression(
+        let result = execExpression.call(
+          this,
           toExpression(expString),
           options
         );
@@ -334,7 +335,8 @@ export function renderTemplate(templateString, data, socket, autoExecFunction) {
     }
     expString = expression.slice(2, -2);
     try {
-      let result = execExpression(
+      let result = execExpression.call(
+        this,
         toExpression(expString),
         options
       );
@@ -362,7 +364,7 @@ export function updateConsumerElements(consumers, value, template, sourceElement
       .filter(([ selector, attributeName ]) => selector);
 
     if (template) {
-      value = renderTemplate(template, { value }, null, true);
+      value = renderTemplate.call(this, template, { value }, null, true);
     }
 
     if (outputType === 'boolean') {