saasufy-components 3.22.0 → 3.24.0

package/README.md

@@ -499,6 +499,7 @@ Used for displaying and editing a single field of a model instance in real time.
 - `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.
+- `slice-to`: Optional field which can be set to a number to trim strings down to a maximum number of characters. This is useful when dealing with potentially very long field values. Extra care should be taken when using this attribute on a `model-input` element as it will cause values to be overwritten with shortened values if the user edits the input box. Note also that it may affect caching if the same field is being referenced in multiple parts of the application at the same time within the same `socket-provider`.
 - `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.
@@ -533,6 +534,7 @@ Used to displaying a field of a model instance in real time.
 - `model-type` (required): Specifies the type of model to bind to. This should match a `Model` available in your Saasufy service.
 - `model-id` (required): The id of the model instance/record to bind to.
 - `model-field` (required): The field of the model instance/record to bind to for reading.
+- `slice-to`: Optional field which can be set to a number to trim strings down to a maximum number of characters when reading. This is useful when dealing with potentially very long field values. Note that it may affect caching if the same field is being referenced in multiple parts of the application at the same time within the same `socket-provider`.
 - `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.
 
 ### model-viewer
@@ -811,6 +813,7 @@ When using an OAuth provider, the callback URL which you register with the provi
 - `provider` (required): The name of the provider. It must match the provider name specified on the `Authentication` page of your Saasufy control panel and also the value provided to the `oauth-link` component at the start of the OAuth flow.
 - `success-location-hash`: If authentication is successful, the browser's `location.hash` will be set to this value. It can be used to redirect the user to their dashboard, for example.
 - `success-url`: If authentication is successful, the browser's `location.href` will be set to this value. It can be used to redirect the user to their dashboard, for example.
+- `extra-data`: This attribute can be used to pass additional data to the OAuth `getAccessTokenURL` endpoint. For Google OAuth, for example, an additional `redirect_uri` field is required, so it should be set using `extra-data="redirect_uri=http://localhost.com:8000/"` (substitute the URI with your own).
 - `navigate-event-path`: If authentication is successful and a path is set via this attribute, the component will emit a `navigate` event which will bubble up the component hierarchy and can be used by a parent component to perform the success redirection. This approach can be used as an alternative to `success-location-hash` or `success-url` for doing the final redirect.
 - `state-session-storage-key`: The state string is stored in the browser's `sessionStorage` under this key. Defaults to `oauth.state`. It must match the value provided to the `oauth-link` component at the start of the OAuth flow.
 - `code-param-name`: The name of the query parameter which holds the `code` as provided by the OAuth provider within the OAuth callback URL. Defaults to `code`.

package/model-input.js

@@ -31,6 +31,7 @@ class ModelInput extends SocketConsumer {
       'model-type',
       'model-id',
       'model-field',
+      'slice-to',
       'debounce-delay',
       'enable-rebound',
       'options',
@@ -109,6 +110,7 @@ class ModelInput extends SocketConsumer {
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelField = this.getAttribute('model-field');
+    let sliceTo = this.getAttribute('slice-to');
     let options = this.getAttribute('options');
     let height = this.getAttribute('height');
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
@@ -141,11 +143,21 @@ class ModelInput extends SocketConsumer {
 
     let modelFieldList = writeOnly ? [] : [ modelField ];
 
+    let fieldTransformations;
+    if (sliceTo != null) {
+      fieldTransformations = {
+        [modelField]: { sliceTo: Number(sliceTo) }
+      };
+    } else {
+      fieldTransformations = {};
+    }
+
     let model = new AGModel({
       socket: this.socket,
       type: modelType,
       id: modelId,
       fields: modelFieldList,
+      fieldTransformations,
       enableRebound
     });
     if (!hideErrorLogs) {

package/model-text.js

@@ -24,6 +24,7 @@ class ModelText extends SocketConsumer {
       'model-type',
       'model-id',
       'model-field',
+      'slice-to',
       'hide-error-logs'
     ];
   }
@@ -40,6 +41,7 @@ class ModelText extends SocketConsumer {
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelField = this.getAttribute('model-field');
+    let sliceTo = this.getAttribute('slice-to');
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
 
     let socket;
@@ -63,11 +65,22 @@ class ModelText extends SocketConsumer {
       socket = this.getSocket();
     }
     this.socket = socket;
+
+    let fieldTransformations;
+    if (sliceTo != null) {
+      fieldTransformations = {
+        [modelField]: { sliceTo: Number(sliceTo) }
+      };
+    } else {
+      fieldTransformations = {};
+    }
+
     let model = new AGModel({
       socket: this.socket,
       type: modelType,
       id: modelId,
-      fields: [ modelField ]
+      fields: [ modelField ],
+      fieldTransformations
     });
     if (!hideErrorLogs) {
       (async () => {

package/oauth-handler.js

@@ -1,5 +1,5 @@
 import { SocketConsumer } from './socket.js';
-import { generateRandomHexString } from './utils.js';
+import { generateRandomHexString, convertStringToFieldParams } from './utils.js';
 
 const DEFAULT_AUTH_TIMEOUT = 10000;
 
@@ -49,9 +49,10 @@ class OAuthHandler extends SocketConsumer {
 
     let codeParamName = this.getAttribute('code-param-name') || 'code';
     let stateParamName = this.getAttribute('state-param-name') || 'state';
+    let extraDataString = this.getAttribute('extra-data') || '';
+    let { fieldValues: extraData } = convertStringToFieldParams(extraDataString);
 
     let authTimeout = Number(this.getAttribute('auth-timeout') || DEFAULT_AUTH_TIMEOUT);
-
     let urlSearchParams = new URLSearchParams(location.search);
     let code = urlSearchParams.get(codeParamName);
 
@@ -63,7 +64,7 @@ class OAuthHandler extends SocketConsumer {
 
       if (state === expectedOAuthState) {
         try {
-          await socket.invoke('log-in-oauth', { provider, data: { code } });
+          await socket.invoke('log-in-oauth', { provider, data: { code, ...extraData } });
         } catch (error) {
           this.innerHTML = `
             <div class="error">OAuth authentication failed. ${error.message}</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "3.22.0",
+  "version": "3.24.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -17,8 +17,8 @@
   "author": "Jonathan Gros-Dubois",
   "license": "MIT",
   "dependencies": {
-    "ag-collection": "^5.0.2",
-    "ag-model": "^3.0.1",
+    "ag-collection": "^5.1.0",
+    "ag-model": "^3.1.0",
     "capitalisk-auth-client": "^1.5.1",
     "socketcluster-client": "^19.1.0",
     "uuid": "^8.3.2"