saasufy-components 3.1.5 → 3.2.0

package/README.md

@@ -226,6 +226,7 @@ Can also perform basic CRUD operations such as deleting or creating records by l
 - `collection-view-params` (required): Parameters for the view, specified as comma-separated key-value pairs (e.g., key1=value1,key2=value2). These parameters can customize the behavior of the collection view. The keys must match `paramFields` specified in your Saasufy service under the relevant `View`.
 - `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 browser 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}}`.
 - `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-browser` 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.
 - `max-show-loader`: If this attribute is present, your slotted `loader` element will be shown as often as possible; this includes situations where the collection is merely refreshing itself. It is disabled by default.
@@ -369,6 +370,7 @@ In the example above, the name of the first element can be accessed with `{{Cate
 - `collection-view-params` (required): Parameters for the view, specified as comma-separated key-value pairs (e.g., key1=value1,key2=value2). These parameters can customize the behavior of the collection view. The keys must match `paramFields` specified in your Saasufy service under the relevant `View`.
 - `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 browser 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}}`.
 - `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-browser` 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.
 

package/collection-browser.js

@@ -103,6 +103,7 @@ class CollectionBrowser extends SocketConsumer {
       'collection-view-params',
       'collection-page-size',
       'collection-page-offset',
+      'collection-get-count',
       'max-show-loader',
       'type-alias',
       'hide-error-logs'
@@ -203,7 +204,10 @@ class CollectionBrowser extends SocketConsumer {
       for (let modelItem of this.collection.value) {
         let itemString = renderTemplate(
           itemTemplate.innerHTML,
-          { [type]: modelItem },
+          {
+            [type]: modelItem,
+            [`$${type}`]: this.collection.meta
+          },
           this.socket
         );
         items.push(itemString);
@@ -222,6 +226,7 @@ class CollectionBrowser extends SocketConsumer {
     let collectionPageSize = this.getAttribute('collection-page-size');
     let collectionViewParams = this.getAttribute('collection-view-params') || '';
     let collectionPageOffset = this.getAttribute('collection-page-offset');
+    let collectionGetCount = this.hasAttribute('collection-get-count');
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
     let collectionReloadDelay = Number(
       this.getAttribute('collection-reload-delay') || DEFAULT_RELOAD_DELAY
@@ -239,7 +244,8 @@ class CollectionBrowser extends SocketConsumer {
       viewParams,
       pageSize: Number(collectionPageSize || 10),
       pageOffset: Number(collectionPageOffset || 0),
-      changeReloadDelay: collectionReloadDelay
+      changeReloadDelay: collectionReloadDelay,
+      getCount: collectionGetCount
     });
 
     this.shadowRoot.innerHTML = `

package/collection-reducer.js

@@ -74,6 +74,7 @@ class CollectionReducer extends SocketConsumer {
       'collection-view-params',
       'collection-page-size',
       'collection-page-offset',
+      'collection-get-count',
       'max-show-loader',
       'type-alias',
       'hide-error-logs'
@@ -165,7 +166,7 @@ class CollectionReducer extends SocketConsumer {
       let type = this.getAttribute('type-alias') || this.collection.type;
       let itemString = renderTemplate(
         itemTemplate.innerHTML,
-        { [type]: this.collection.value },
+        { [type]: this.collection.value, [`$${type}`]: this.collection.meta },
         this.socket
       );
       viewportNode.innerHTML = itemString;
@@ -179,6 +180,7 @@ class CollectionReducer extends SocketConsumer {
     let collectionPageSize = this.getAttribute('collection-page-size');
     let collectionViewParams = this.getAttribute('collection-view-params') || '';
     let collectionPageOffset = this.getAttribute('collection-page-offset');
+    let collectionGetCount = this.hasAttribute('collection-get-count');
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
     let collectionReloadDelay = Number(
       this.getAttribute('collection-reload-delay') || DEFAULT_RELOAD_DELAY
@@ -196,7 +198,8 @@ class CollectionReducer extends SocketConsumer {
       viewParams,
       pageSize: Number(collectionPageSize || 10),
       pageOffset: Number(collectionPageOffset || 0),
-      changeReloadDelay: collectionReloadDelay
+      changeReloadDelay: collectionReloadDelay,
+      getCount: collectionGetCount
     });
 
     this.shadowRoot.innerHTML = `

package/package.json

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

package/styles.css

@@ -1,5 +1,6 @@
 body {
   margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
 }
 
 a {