saasufy-components 3.7.1 → 3.8.0

package/README.md

@@ -18,6 +18,7 @@ Components for Saasufy
 
 ### User input
 - [input-provider](#input-provider)
+- [input-combiner](#input-combiner)
 
 ### Authentication
 - [log-in-form](#log-in-form)
@@ -65,6 +66,7 @@ To use components, you just need to include them into your `.html` file inside y
 <script src="https://saasufy.com/node_modules/saasufy-components/model-text.js" type="module" defer></script>
 <script src="https://saasufy.com/node_modules/saasufy-components/model-viewer.js" type="module" defer></script>
 <script src="https://saasufy.com/node_modules/saasufy-components/input-provider.js" type="module" defer></script>
+<script src="https://saasufy.com/node_modules/saasufy-components/input-combiner.js" type="module" defer></script>
 <script src="https://saasufy.com/node_modules/saasufy-components/log-in-form.js" type="module" defer></script>
 <script src="https://saasufy.com/node_modules/saasufy-components/log-out.js" type="module" defer></script>
 <script src="https://saasufy.com/node_modules/saasufy-components/oauth-link.js" type="module" defer></script>
@@ -524,6 +526,55 @@ This component can be configured to provide its data to multiple components (con
 - `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.
 
+### input-combiner
+
+A component which can be used to combine data from multiple `input-provider` components and pass the combined data to other components (or HTML elements) via custom attributes.
+A common use case for it is to pass user input to `collection-browser` or `model-viewer` components to then fetch data from Saasufy.
+This component can be configured to provide its data to multiple components (consumers) via custom attributes.
+
+**Import**
+
+```html
+<script src="https://saasufy.com/node_modules/saasufy-components/input-combiner.js" type="module" defer></script>
+```
+
+**Example usage**
+
+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.
+
+```html
+<input-provider
+  class="desc-input"
+  type="text"
+  consumers=".search-combiner"
+  provider-template="desc:description contains (?i){{value}}"
+  value=""
+  placeholder="Description filter"
+></input-provider>
+
+<input-provider
+  class="city-input"
+  type="text"
+  consumers=".search-combiner"
+  provider-template="city:city contains (?i){{value}}"
+  value=""
+  placeholder="City filter"
+></input-provider>
+
+<input-combiner
+  class="search-combiner"
+  consumers=".company-browser:collection-view-params"
+  provider-template="query='{{combineFilters(value)}}'"
+></input-combiner>
+```
+
+**Attributes**
+
+- `consumers`: This allows you to connect this `input-combiner` to other elements on your page. It takes a list of selectors with optional attributes to target. For example `.my-input:value` will find all elements with a `my-input` class and update their `value` attributes with the value of the `input-provider` component in real-time. You can specify multiple selectors separated by commas such as `.my-input,my-div` - In this case, because attribute names are not specified, values will be injected into the `value` attribute (for input elements) or into the `innerHTML` property (for other kinds of elements). The default attribute/property depends on the element type.
+- `provider-template`: A template string within which the `{{value}}` can be injected before passing to consumers. In the case of the `input-combiner`, the value is an object wherein each key represents the unique label associated with different `input-provider` components.
+- `debounce-delay`: The delay in milliseconds to wait before triggering a change event. This is useful to batch multiple updates together. Default is 0ms.
+
 ### log-in-form
 
 A form component which allows end-users to authenticate themselves into your app using the Saasufy blockchain or any Capitalisk-based blockchain.

package/input-combiner.js

@@ -0,0 +1,54 @@
+import { debouncer, updateConsumerElements } from './utils.js';
+
+const DEFAULT_DEBOUNCE_DELAY = 0;
+
+class InputCombiner extends HTMLElement {
+  constructor() {
+    super();
+    this.isReady = false;
+    this.inputValues = {};
+    this.debounce = debouncer();
+  }
+  connectedCallback() {
+    this.isReady = true;
+    this.render();
+  }
+
+  static get observedAttributes() {
+    return [
+      'consumers',
+      'debounce-delay',
+      'provider-template',
+      'value'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    this.render();
+  }
+
+  render() {
+    if (!this.hasAttribute('value')) return;
+
+    let value = this.getAttribute('value') || '';
+    let debounceDelay = this.getAttribute('debounce-delay');
+    debounceDelay = debounceDelay ? Number(debounceDelay) : DEFAULT_DEBOUNCE_DELAY;
+
+    let valueParts = value.match(/^(?:([^:]*)[:])?(.*)$/);
+    let valueUpdater = valueParts[1] || '_root';
+    let rawValue = valueParts[2];
+    this.inputValues[valueUpdater] = rawValue;
+
+    if (!this.isReady) return;
+
+    let consumers = this.getAttribute('consumers');
+    if (!consumers) return;
+
+    this.debounce(async () => {
+      let providerTemplate = this.getAttribute('provider-template') || '{{value._root}}';
+      updateConsumerElements(consumers, { ...this.inputValues }, providerTemplate);
+    }, debounceDelay);
+  }
+}
+
+window.customElements.define('input-combiner', InputCombiner);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "3.7.1",
+  "version": "3.8.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
   "author": "Jonathan Gros-Dubois",
   "license": "MIT",
   "dependencies": {
-    "ag-collection": "^5.0.1",
+    "ag-collection": "^5.0.2",
     "ag-model": "^3.0.1",
     "capitalisk-auth-client": "^1.5.1",
     "socketcluster-client": "^19.1.0"

package/utils.js

@@ -193,9 +193,6 @@ let templateFormatters = {
   fallback: (...args) => {
     return args.filter(arg => arg)[0];
   },
-  joinFields: (list, field, sep) => {
-    return list.map(item => item[field]).join(sep);
-  },
   date: (timestamp) => {
     let date = new Date(timestamp);
     let year = date.getFullYear();
@@ -204,6 +201,12 @@ let templateFormatters = {
     let hour = date.getHours();
     let minutes = date.getMinutes();
     return `${month} ${day}, ${year} at ${hour}:${minutes.toString().padStart(2, '0')}`;
+  },
+  joinFields: (list, field, sep) => {
+    return list.map(item => item[field]).join(sep);
+  },
+  combineFilters: (filterMap, useOr) => {
+    return Object.values(filterMap || {}).join(useOr ? ' %OR% ' : ' %AND% ');
   }
 };
 
@@ -293,6 +296,8 @@ 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);
           } else {
             element.innerHTML = value;
           }