saasufy-components 7.0.3 → 7.2.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 = `
@@ -352,8 +361,6 @@ class CollectionViewer extends SocketConsumer {
 
     (async () => {
       for await (let event of this.collection.listener('change')) {
-        // Ignore change events which originate from this collection instance.
-        if (!event.isRemote) continue;
         this.renderList();
         this.updatePageButtons();
       }

package/package.json

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

package/utils.js

@@ -63,32 +63,17 @@ export function createReactiveCollection(collectionOptions, callback) {
   collection.safeValue = [];
 
   (async () => {
-    let changes = {};
     for await (let event of collection.listener('change')) {
-      // Ignore change events which originate from this collection instance.
-      if (!event.isRemote) continue;
-
-      if (event.resourceId != null && changes[event.resourceId] !== false) {
-        changes[event.resourceId] = event.isRemote;
-      }
-
       if (!collection.isLoaded) continue;
-
       collection.safeValue = collection.value.map(toSafeModelValue);
-
-      callback({
-        changes
-      });
-      changes = {};
+      callback();
     }
   })();
 
   (async () => {
     for await (let event of collection.listener('load')) {
       if (collection.isLoaded && !collection.value.length) {
-        callback({
-          changes: {}
-        });
+        callback();
       }
     }
   })();
@@ -114,17 +99,9 @@ export function createReactiveModel(modelOptions, callback) {
   })();
 
   (async () => {
-    let changes = {};
     for await (let event of model.listener('change')) {
-      if (changes[event.resourceField] !== false) {
-        changes[event.resourceField] = event.isRemote;
-      }
-
       model.safeValue = toSafeModelValue(model.value);
-      callback({
-        changes
-      });
-      changes = {};
+      callback();
     }
   })();