saasufy-components 3.1.6 → 3.3.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.
 
@@ -402,9 +404,9 @@ Used for displaying and editing a single field of a model instance in real time.
 - `debounce-delay`: The delay in milliseconds to wait before sending an update to the server. This is useful to batch multiple updates together (as is common when user is typing). Default is 300ms.
 - `input-id`: Can be used to set an `id` attribute on the inner `input` element.
 - `list`: If specified, this sets the list attribute of the inner `input` element to provide input suggestions (only works with standard input elements).
-- `type`: The type of the input component; can be `text`, `number`, `select`, `textarea` or `checkbox`.
+- `type`: The type of the input component; can be `text`, `number`, `select`, `textarea`, `checkbox` or `file`.
 - `placeholder`: Can be used to set the placeholder text on the inner input element.
-- `consumers`: This allows you to connect this `model-input` to other elements on your page which share the same parent element. 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 `model-input` 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.
+- `consumers`: This allows you to connect this `model-input` 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 `model-input` 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.
 - `show-error-message`: If this attribute is present, an error message will be displayed above the input if it fails to update the value.
 - `options`: A comma-separated list of options to provide - This only works if the input type is `select`.
@@ -415,6 +417,7 @@ Used for displaying and editing a single field of a model instance in real time.
 - `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.
 - `enable-rebound`: By default, for efficiency reasons, real-time updates performed via `model-input` components are not sent back to the publishing client; it is usually unnecessary because state changes are shared locally between all components which are bound to the same `socket-provider`. You can add the `enable-rebound` attribute to the `model-input` component to force real-time updates to rebound back to the publisher to support more advanced scenarios. Note that enabling rebound comes with additional performance overheads.
+- `accept`: This attribute should only be used if the `type` is set to `file`; it serves to constrain the types of files which can be selected by the user.
 
 ### model-text
 
@@ -511,7 +514,7 @@ This component can be configured to provide its data to multiple components (con
 - `list`: If specified, this sets the list attribute of the inner `input` element to provide input suggestions (only works with standard input elements).
 - `type`: The type of the input component; can be `text`, `number`, `select`, `textarea` or `checkbox`.
 - `placeholder`: Can be used to set the placeholder text on the inner input element.
-- `consumers`: This allows you to connect this `input-provider` to other elements on your page which share the same parent element. 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.
+- `consumers`: This allows you to connect this `input-provider` 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.
 - `debounce-delay`: The delay in milliseconds to wait before triggering a change event. This is useful to batch multiple updates together (as is common when user is typing). Default is 800ms.
 - `options`: A comma-separated list of options to provide - This only works if the input type is `select`.
@@ -736,7 +739,7 @@ A component which can be used to group together multiple `collection-adder` comp
 
 ```html
 <!--
-  This collection-adder-group adds two pre-defined records into a Product
+  This collection-adder-group adds multiple pre-defined records into a Product
   collection using a single button click. This example assumes that the name
   field is the only required field in the Product model.
 -->

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/model-input.js

@@ -26,6 +26,7 @@ class ModelInput extends SocketConsumer {
       'socket-instance-property',
       'type',
       'placeholder',
+      'accept',
       'consumers',
       'show-error-message',
       'model-type',
@@ -95,6 +96,7 @@ class ModelInput extends SocketConsumer {
     let inputList = this.getAttribute('list');
     let type = this.getAttribute('type') || 'text';
     let placeholder = this.getAttribute('placeholder');
+    let accept = this.getAttribute('accept');
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelField = this.getAttribute('model-field');
@@ -191,6 +193,9 @@ class ModelInput extends SocketConsumer {
     if (placeholder) {
       this.inputElement.setAttribute('placeholder', placeholder);
     }
+    if (accept) {
+      this.inputElement.setAttribute('accept', accept);
+    }
     let errorMessageContainer = null;
     if (showErrorMessage) {
       errorMessageContainer = document.createElement('div');
@@ -215,8 +220,11 @@ class ModelInput extends SocketConsumer {
       updateConsumerElements(consumers, checked, providerTemplate);
     } else {
       let defaultValue = this.getAttribute('default-value') || '';
-      inputElement.value = fieldValue == null ? defaultValue : fieldValue;
-      updateConsumerElements(consumers, inputElement.value, providerTemplate);
+      let elementValue = fieldValue == null ? defaultValue : fieldValue;
+      if (inputElement.type !== 'file') {
+        inputElement.value = elementValue;
+      }
+      updateConsumerElements(consumers, elementValue, providerTemplate);
     }
   }
 
@@ -278,12 +286,28 @@ class ModelInput extends SocketConsumer {
             hideErrorMessage(fieldName);
             return;
           }
-          if (event.target.value === '') {
+          let inputValue;
+          if (inputElement.type === 'file' && inputElement.files && inputElement.files.length) {
+            let reader = new FileReader();
+            let readerLoadPromise = new Promise((resolve, reject) => {
+              reader.addEventListener('load', () => {
+                resolve(reader.result);
+              });
+              reader.addEventListener('error', () => {
+                reject(new Error('Failed to read file'));
+              });
+            });
+            reader.readAsDataURL(inputElement.files[0]);
+            inputValue = await readerLoadPromise;
+          } else {
+            inputValue = event.target.value;
+          }
+          if (inputValue === '') {
             updateConsumerElements(consumers, '', providerTemplate);
             await model.delete(fieldName);
           } else {
             let targetValue = inputElement.type === 'number' ?
-              Number(event.target.value) : event.target.value;
+              Number(inputValue) : inputValue;
             updateConsumerElements(consumers, targetValue, providerTemplate);
             await model.update(fieldName, targetValue);
           }

package/package.json

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