saasufy-components 3.9.0 → 3.10.0

package/README.md

@@ -419,6 +419,7 @@ Used for displaying and editing a single field of a model instance in real time.
 - `height`: Allows you to set the height of the inner `input` element programmatically.
 - `default-value`: A default value to show the user if the underlying model field's value is null or undefined. Note that setting a default value will not affect the underlying model's value.
 - `value`: Used to set the model's value.
+- `computable-value`: If this attribute is present, it will be possible to execute expressions using the `{{expression}}` syntax inside the `value` attribute.
 - `hide-error-logs`: By default, this component will log errors to the console. If set, this attribute will suppress such errors from showing up on the console.
 - `autocapitalize`: Can be `on` or `off` - It will set the auto-capitalize attribute on the inner input element. This is useful for mobile devices to enable or disable auto-capitalization of the first character which is typed into the input element.
 - `autocorrect`: Can be `on` or `off` - It will set the auto-correct attribute on the inner input element. This is useful for mobile devices to enable or disable auto-correct.
@@ -526,6 +527,7 @@ This component can be configured to provide its data to multiple components (con
 - `options`: A comma-separated list of options to provide - This only works if the input type is `select`.
 - `height`: Allows you to set the height of the inner `input` element programmatically.
 - `value`: Used to set the input's value.
+- `computable-value`: If this attribute is present, it will be possible to execute expressions using the `{{expression}}` syntax inside the `value` attribute.
 - `autocapitalize`: Can be `on` or `off` - It will set the auto-capitalize attribute on the inner input element. This is useful for mobile devices to enable or disable auto-capitalization of the first character which is typed into the input element.
 - `autocorrect`: Can be `on` or `off` - It will set the auto-correct attribute on the inner input element. This is useful for mobile devices to enable or disable auto-correct.
 
@@ -546,21 +548,26 @@ This component can be configured to provide its data to multiple components (con
 The following example shows how to bind multiple `input-provider` components to an `input-combiner`.
 In this example, the `input-combiner` component forwards the combined, formatted values to the `collection-view-params` attribute of a `company-browser` component.
 
+Note that the `value` inside the `provider-template` attribute of the `input-combiner` is an object with keys that represent the `name` attribute of the different source `input-provider` components.
+The `combineFilters` function produces a combined query string (joined with `%AND%`) by iterating over the `value` object which holds different parts of the query as provided by different `input-provider` components.
+
 ```html
 <input-provider
   class="desc-input"
+  name="desc"
   type="text"
   consumers=".search-combiner"
-  provider-template="desc:description contains (?i){{value}}"
+  provider-template="description contains (?i){{value}}"
   value=""
   placeholder="Description filter"
 ></input-provider>
 
 <input-provider
   class="city-input"
+  name="city"
   type="text"
   consumers=".search-combiner"
-  provider-template="city:city contains (?i){{value}}"
+  provider-template="city contains (?i){{value}}"
   value=""
   placeholder="City filter"
 ></input-provider>

package/input-provider.js

@@ -1,4 +1,8 @@
-import { debouncer, updateConsumerElements } from './utils.js';
+import {
+  debouncer,
+  renderTemplate,
+  updateConsumerElements
+} from './utils.js';
 
 const DEFAULT_DEBOUNCE_DELAY = 800;
 
@@ -46,6 +50,9 @@ class InputProvider extends HTMLElement {
 
   set value(newValue) {
     if (this.inputElement) {
+      if (newValue && this.hasAttribute('computable-value')) {
+        newValue = renderTemplate(newValue);
+      }
       let oldValue = this.inputElement.value;
       this.inputElement.value = newValue;
       if (oldValue !== newValue) {
@@ -135,21 +142,22 @@ class InputProvider extends HTMLElement {
 
     let onInputChange = (event) => {
       debounce(async () => {
+        let elementName = this.getAttribute('name');
         let providerTemplate = this.getAttribute('provider-template');
         if (event.target.value === this.lastValue) return;
         if (inputElement.type === 'checkbox') {
           let checked = !!inputElement.checked;
           this.lastValue = checked;
-          updateConsumerElements(consumers, checked, providerTemplate);
+          updateConsumerElements(consumers, checked, providerTemplate, elementName);
           return;
         }
         this.lastValue = event.target.value;
         if (event.target.value === '') {
-          updateConsumerElements(consumers, '', providerTemplate);
+          updateConsumerElements(consumers, '', providerTemplate, elementName);
         } else {
           let targetValue = inputElement.type === 'number' ?
             Number(event.target.value) : event.target.value;
-          updateConsumerElements(consumers, targetValue, providerTemplate);
+          updateConsumerElements(consumers, targetValue, providerTemplate, elementName);
         }
       }, debounceDelay);
     };
@@ -159,15 +167,16 @@ class InputProvider extends HTMLElement {
     if (inputElement.type !== 'checkbox') {
       onInputKeyUp = async (event) => {
         debounce(async () => {
+          let elementName = this.getAttribute('name');
           let providerTemplate = this.getAttribute('provider-template');
           if (event.target.value === this.lastValue) return;
           this.lastValue = event.target.value;
           if (event.target.value === '') {
-            updateConsumerElements(consumers, '', providerTemplate);
+            updateConsumerElements(consumers, '', providerTemplate, elementName);
           } else {
             let targetValue = inputElement.type === 'number' ?
               Number(event.target.value) : event.target.value;
-            updateConsumerElements(consumers, targetValue, providerTemplate);
+            updateConsumerElements(consumers, targetValue, providerTemplate, elementName);
           }
         }, debounceDelay);
       };

package/model-input.js

@@ -60,6 +60,9 @@ class ModelInput extends SocketConsumer {
 
   set value(newValue) {
     if (this.inputElement) {
+      if (newValue && this.hasAttribute('computable-value')) {
+        newValue = renderTemplate(newValue);
+      }
       if (this.inputElement.type === 'checkbox') {
         let oldValue = this.inputElement.checked;
         this.inputElement.checked = newValue;
@@ -223,14 +226,14 @@ class ModelInput extends SocketConsumer {
     if (inputElement.type === 'checkbox') {
       let checked = !!fieldValue;
       inputElement.checked = checked;
-      updateConsumerElements(consumers, checked, providerTemplate);
+      updateConsumerElements(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);
+      updateConsumerElements(consumers, elementValue, providerTemplate, this.getAttribute('name'));
     }
   }
 
@@ -299,7 +302,7 @@ class ModelInput extends SocketConsumer {
         try {
           if (inputElement.type === 'checkbox') {
             let checked = !!inputElement.checked;
-            updateConsumerElements(consumers, checked, providerTemplate);
+            updateConsumerElements(consumers, checked, providerTemplate, this.getAttribute('name'));
             await model.update(fieldName, checked);
             inputElement.classList.remove(errorStyleClass);
             inputElement.classList.add(successStyleClass);
@@ -323,12 +326,12 @@ class ModelInput extends SocketConsumer {
             inputValue = event.target.value;
           }
           if (inputValue === '') {
-            updateConsumerElements(consumers, '', providerTemplate);
+            updateConsumerElements(consumers, '', providerTemplate, this.getAttribute('name'));
             await model.delete(fieldName);
           } else {
             let targetValue = inputElement.type === 'number' ?
               Number(inputValue) : inputValue;
-            updateConsumerElements(consumers, targetValue, providerTemplate);
+            updateConsumerElements(consumers, targetValue, providerTemplate, this.getAttribute('name'));
             await model.update(fieldName, targetValue);
           }
           inputElement.classList.remove(errorStyleClass);
@@ -353,11 +356,11 @@ class ModelInput extends SocketConsumer {
           try {
             if (event.target.value === '') {
               await model.delete(fieldName);
-              updateConsumerElements(consumers, '', providerTemplate);
+              updateConsumerElements(consumers, '', providerTemplate, this.getAttribute('name'));
             } else {
               let targetValue = inputElement.type === 'number' ?
                 Number(event.target.value) : event.target.value;
-              updateConsumerElements(consumers, targetValue, providerTemplate);
+              updateConsumerElements(consumers, targetValue, providerTemplate, this.getAttribute('name'));
               await model.update(fieldName, targetValue);
             }
             inputElement.classList.remove(errorStyleClass);

package/package.json

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

package/utils.js

@@ -251,7 +251,7 @@ export function renderTemplate(templateString, data, socket) {
   });
 }
 
-export function updateConsumerElements(consumers, value, template) {
+export function updateConsumerElements(consumers, value, template, sourceElementName) {
   if (consumers) {
     let consumerParts = consumers.split(',')
       .filter(part => part)
@@ -297,7 +297,10 @@ export function updateConsumerElements(consumers, value, template) {
           } else if (element.nodeName === 'MODEL-INPUT') {
             element.value = value;
           } else if (element.nodeName === 'INPUT-COMBINER') {
-            element.setAttribute('value', value);
+            element.setAttribute(
+              'value',
+              sourceElementName ? `${sourceElementName}:${value}` : value
+            );
           } else {
             element.innerHTML = value;
           }