saasufy-components 7.0.2 → 7.1.0

package/README.md

@@ -321,7 +321,8 @@ In addition to the slots shown above, the `collection-viewer` also supports the
 - `collection-page-size`: Sets how many items from the collection are displayed at once. This is useful for pagination, allowing users to navigate through large sets of data in chunks.
 - `collection-page-offset`: Indicates the current page offset in the collection's data. It’s like telling the viewer which page of data you want to display initially.
 - `collection-get-count`: If this attribute is present, the component will get the record count of the target view. The count can be rendered into the template by prefixing the model name with a dollar sign and accessing the `count` property like this: `{{$MyModelName.count}}`.
-- `collection-view-primary-fields`: An optional list of field names to specify which specific `collection-view-params` to watch for real time updates. Fewer primary fields means that the view will be exposed to a broader range of real time updates but at the cost of performance. It is generally recommended to have just one primary field.
+- `collection-view-primary-fields`: An optional list of field names to specify which specific `collection-view-params` to watch for realtime updates. Fewer primary fields means that the view will be exposed to a broader range of realtime updates but at the cost of performance. It is generally recommended to have just one primary field.
+- `collection-disable-realtime`: If this attribute is present, the underlying collection will not listen for changes nor update in realtime. Fields of records that are in view may still update in realtime.
 - `auto-reset-page-offset`: If this attribute is present, the `collection-page-offset` will be reset to zero whenever the view params change.
 - `type-alias`: Allows you to provide an alternative name for your `Model` to use when injecting values inside the template. This is useful for situations where you may have multiple `collection-viewer` elements and/or `model-viewer` elements of the same type nested inside each other and want to avoid `Model` name clashes in the nested template definitions. For example, if the `type-alias` in the snippet above was set to `SubChat`, then `{{Chat.message}}` would become `{{SubChat.message}}`.
 - `hide-error-logs`: A flag which, when present, suppresses error logs from being printed to the console.
@@ -532,7 +533,7 @@ In the example above, the name of the first element can be accessed with `{{Cate
 
 ### model-input
 
-Used for displaying and editing a single field of a model instance in real time.
+Used for displaying and editing a single field of a model instance in realtime.
 
 **Import**
 
@@ -583,7 +584,7 @@ Used for displaying and editing a single field of a model instance in real time.
 
 ### model-text
 
-Used to displaying a field of a model instance in real time.
+Used to displaying a field of a model instance in realtime.
 
 **Import**
 

package/collection-viewer.js

@@ -18,10 +18,10 @@ class CollectionViewer extends SocketConsumer {
       modal.show(event.detail.message, event.detail.callback);
     };
 
-    this.handleCRUDCreateEvent = (event) => {
+    this.handleCRUDCreateEvent = async (event) => {
       event.stopPropagation();
       if (this.collection) {
-        this.collection.create(event.detail);
+        await this.collection.create(event.detail);
         this.dispatchEvent(
           new CustomEvent('collectionCreate', {
             detail: {
@@ -31,13 +31,16 @@ class CollectionViewer extends SocketConsumer {
             bubbles: true
           })
         );
+        if (this.hasAttribute('collection-disable-realtime') && this.collection) {
+          this.collection.reloadCurrentPage();
+        }
       }
     };
 
-    this.handleCRUDDeleteEvent = (event) => {
+    this.handleCRUDDeleteEvent = async (event) => {
       event.stopPropagation();
       if (this.collection) {
-        this.collection.delete(event.detail);
+        await this.collection.delete(event.detail);
         this.dispatchEvent(
           new CustomEvent('collectionDelete', {
             detail: {
@@ -47,6 +50,9 @@ class CollectionViewer extends SocketConsumer {
             bubbles: true
           })
         );
+        if (this.hasAttribute('collection-disable-realtime') && this.collection) {
+          this.collection.reloadCurrentPage();
+        }
       }
     };
 
@@ -123,6 +129,7 @@ class CollectionViewer extends SocketConsumer {
       'collection-page-size',
       'collection-page-offset',
       'collection-get-count',
+      'collection-disable-realtime',
       'auto-reset-page-offset',
       'max-show-loader',
       'type-alias',
@@ -289,6 +296,7 @@ class CollectionViewer extends SocketConsumer {
     let collectionPageSize = this.getAttribute('collection-page-size');
     let collectionPageOffset = this.getAttribute('collection-page-offset');
     let collectionGetCount = this.hasAttribute('collection-get-count');
+    let collectionDisableRealtime = this.hasAttribute('collection-disable-realtime');
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
     let collectionReloadDelay = Number(
       this.getAttribute('collection-reload-delay') || DEFAULT_RELOAD_DELAY
@@ -312,7 +320,8 @@ class CollectionViewer extends SocketConsumer {
       pageSize: Number(collectionPageSize || 10),
       pageOffset: Number(collectionPageOffset || 0),
       changeReloadDelay: collectionReloadDelay,
-      getCount: collectionGetCount
+      getCount: collectionGetCount,
+      realtimeCollection: !collectionDisableRealtime
     });
 
     this.shadowRoot.innerHTML = `

package/package.json

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

package/utils.js

@@ -273,14 +273,17 @@ function* selectExpressions(string) {
   let isCapturing = false;
   let isTripleBracket = false;
   let captureList = [];
+  let captureStartIndex = 0;
   for (let i = 1; i < charList.length; i++) {
     if (charList[i - 1] === '{' && charList[i] === '{') {
       captureList = [];
       captureList.push('{');
       isCapturing = true;
+      captureStartIndex = i - 1;
       isTripleBracket = charList[i - 2] === '{';
       if (isTripleBracket) {
         captureList.push('{');
+        captureStartIndex--;
       }
     }
     if (isCapturing) {
@@ -288,10 +291,16 @@ function* selectExpressions(string) {
     } else if (captureList.length) {
       captureList.push('}');
       captureList.push('}');
+      let closeBrackets = 2;
       if (isTripleBracket) {
         captureList.push('}');
+        closeBrackets++;
       }
-      yield captureList.join('');
+      yield {
+        startIndex: captureStartIndex,
+        length: (i + closeBrackets) - captureStartIndex,
+        value: captureList.join('')
+      };
       captureList = [];
     }
     if (
@@ -303,37 +312,44 @@ function* selectExpressions(string) {
   }
 }
 
+function replaceExpressions(string, replaceFn) {
+  let charList = string.split('');
+  let matches = [ ...selectExpressions(string) ];
+  let charSubs = matches.map(item => String(replaceFn(item.value) ?? '').split(''));
+  for (let i = matches.length - 1; i >= 0; i--) {
+    let match = matches[i];
+    charList.splice(match.startIndex, match.length, ...charSubs[i]);
+  }
+  return charList.join('');
+}
+
 export function renderTemplate(templateString, data, socket) {
-  let expressionIterator = selectExpressions(templateString);
   let options = getRenderOptions(data, socket);
-  for (let expression of expressionIterator) {
-    let computedValue;
-    if (expression.match(templateTripleTagsRegExp)) {
-      let expString = expression.slice(3, -3);
+  return replaceExpressions(templateString, (expression) => {
+    let expString;
+    if (expression.startsWith('{{{') && expression.endsWith('}}}')) {
+      expString = expression.slice(3, -3);
       try {
-        computedValue = execExpression(
+        return execExpression(
           toExpression(expString),
           options
         );
       } catch (error) {
-        computedValue = expression;
-      }
-    } else {
-      let expString = expression.slice(2, -2);
-      try {
-        computedValue = toSafeHTML(
-          execExpression(
-            toExpression(expString),
-            options
-          )
-        );
-      } catch (error) {
-        computedValue = expression;
+        return expression;
       }
     }
-    templateString = templateString.replace(expression, computedValue);
-  }
-  return templateString;
+    expString = expression.slice(2, -2);
+    try {
+      return toSafeHTML(
+        execExpression(
+          toExpression(expString),
+          options
+        )
+      );
+    } catch (error) {
+      return expression;
+    }
+  });
 }
 
 export function updateConsumerElements(consumers, value, template, sourceElementName, outputType) {