saasufy-components 3.7.2 → 3.9.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>
@@ -144,9 +146,12 @@ So for example, if your `index.html` file is served up from the URL `http://mywe
 
 - `default-page`: The path/route of the default page to send the user to in case no routes are matched. Commonly used to point to a `/page-not-found` page. For the home page, it's typically recommended to create a page template with `route-path=""` instead.
 - `debounce-delay`: The number of milliseconds to wait before changing the route. This can help to avoid multiple renders if the route changes rapidly (e.g. when doing hard redirects). Defaults to 100ms.
+- `target-page`: A convenience attribute which can be used to programmatically change the `location.hash` in the address bar.
 
 **Attributes of slotted page templates**
 
+- `route-path`: The path of the page. Supports custom URL parameters in the format `/org/:orgId/user/:userId`.
+- `partial-route`: An optional attribute which, if specified, will allow the `route-path` to be matched partially from the start. This can be used to ignore the ending of a path which is not relevant to the page in order to avoid unnecessary re-renders.
 - `redirect`: An optional path/route which this page should redirect to. Note that the content of this page will not be shown so it should always be empty.
 - `auth-redirect`: An optional path/route which this page should redirect to if the user is authenticated. If the user is not authenticated, then the content of the template will be displayed as normal.
 - `no-auth-redirect`: An optional path/route which this page should redirect to if the user is not authenticated. If the user is authenticated, then the content of the template will be displayed as normal.
@@ -524,6 +529,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/app-router.js

@@ -14,6 +14,7 @@ export class AppRouter extends SocketConsumer {
     this.pageRouteInfos = [];
     this.debounce = debouncer();
     this.debounceDelay = DEFAULT_DEBOUNCE_DELAY;
+    this.lastPageState = null;
 
     this.hashStartRegex = /^#/;
 
@@ -30,12 +31,15 @@ export class AppRouter extends SocketConsumer {
       }
 
       this.pageRouteInfos = Object.keys(this.pages).map((route) => {
+        let pageTemplate = this.pages[route];
+        let allowPartialMatch = pageTemplate.hasAttribute('partial-route');
         return {
-          regExp: new RegExp(`^${route.replace(/\/:[^\/]+/g, '/([^/]*)').replace(/\//g, '\\/')}$`, 'g'),
+          regExp: new RegExp(`^${route.replace(/\/:[^\/]+/g, '/([^/]*)').replace(/\//g, '\\/')}${allowPartialMatch ? '' : '$'}`, 'g'),
           route,
           params: [ ...route.matchAll(/:[^\/]*/g) ].map(paramMatch => paramMatch[0].replace(':', ''))
         };
       });
+
       if (!this.socket || this.socket.state === this.socket.OPEN) {
         this.debounce(this.renderCurrentPage, this.debounceDelay);
       }
@@ -52,6 +56,7 @@ export class AppRouter extends SocketConsumer {
 
   static get observedAttributes() {
     return [
+      'target-page',
       'default-page',
       'debounce-delay',
       'max-redirects'
@@ -65,6 +70,8 @@ export class AppRouter extends SocketConsumer {
       } else {
         this.debounceDelay = DEFAULT_DEBOUNCE_DELAY;
       }
+    } else if (name === 'target-page') {
+      location.hash = newValue;
     } else if (this.isReady) {
       this.renderCurrentPage();
     }
@@ -225,6 +232,16 @@ export class AppRouter extends SocketConsumer {
       routeArgs = {};
     }
 
+
+    let pageState = JSON.stringify({
+      route,
+      routeArgs
+    });
+
+    if (pageState === this.lastPageState) return;
+
+    this.lastPageState = pageState;
+
     routerViewport.innerHTML = renderTemplate(
       pageTemplate.innerHTML,
       routeArgs,

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.2",
+  "version": "3.9.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {

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;
           }