saasufy-components 3.8.0 → 3.10.0

package/README.md

@@ -146,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.
@@ -416,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.
@@ -523,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.
 
@@ -543,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/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-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.8.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;
           }