saasufy-components 10.3.0 → 10.5.0

package/README.md

@@ -669,6 +669,8 @@ Used for displaying and editing a single field of a model instance in realtime.
 - `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 in the format `element-selector:attribute-name`. 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. Note that `model-input` elements of the `file` type are treated as write-only unless the `consumers` attribute is present.
 - `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.
+- `error-consumers`: Sends error messages to other elements on your page instead of (or as well as) showing them next to the input. It takes the same list of selectors with optional attributes as `consumers`, in the format `element-selector:attribute-name`. This is useful when a message appearing beside the input would move the surrounding layout; the messages of a list of rows can be collected into a single area above the list, for example. Each input should be given a target of its own, since inputs which share one will overwrite each other's messages. The message is cleared (an empty string is sent) as soon as the input saves successfully. Can be used with or without `show-error-message`.
+- `error-provider-template`: A template string within which the `{{value}}` of an error message can be injected before passing it to the elements named by `error-consumers`. Serves the same purpose for errors as `provider-template` does for values. Note that an error message is escaped before the template is applied, so markup in the message itself is shown as text while markup in the template is not.
 - `options`: A comma-separated list of options to provide - This only works if the input type is `select`. Each option is in the format `label:type=value`; the `:type` and `=value` parts are optional. If the value is not specified, the label is used as the value. The type can be `string` (default), `number` or `boolean` and determines the type which will be saved to the model field when the option is selected; for example `options="30 min:number=30,1 hour:number=60"` will save the number `30` or `60` instead of the string `'30'` or `'60'`.
 - `height`: Allows you to set the height of the inner `input` element programmatically.
 - `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.

package/model-input.js

@@ -6,7 +6,8 @@ import {
   convertStringToFieldTypeValues,
   getTypeCastFunction,
   formatError,
-  renderTemplate
+  renderTemplate,
+  toSafeHTML
 } from './utils.js';
 import AGModel from '/node_modules/ag-model/ag-model.js';
 
@@ -35,6 +36,7 @@ class ModelInput extends SocketConsumer {
       'placeholder',
       'accept',
       'consumers',
+      'error-consumers',
       'show-error-message',
       'model-type',
       'model-id',
@@ -292,6 +294,40 @@ class ModelInput extends SocketConsumer {
     }
   }
 
+  reportError(messageContainerElement, errorMessage) {
+    if (messageContainerElement) {
+      messageContainerElement.textContent = errorMessage;
+      messageContainerElement.classList.add('error');
+      messageContainerElement.classList.remove('hidden');
+    }
+    this.updateErrorConsumerElements(errorMessage);
+  }
+
+  clearError(messageContainerElement) {
+    if (messageContainerElement) {
+      messageContainerElement.textContent = '';
+      messageContainerElement.classList.remove('error');
+      messageContainerElement.classList.add('hidden');
+    }
+    this.updateErrorConsumerElements('');
+  }
+
+  // A consumer which is not given an attribute to write to has the message injected as HTML,
+  // and an error message can carry whatever the server quoted back, so the message is escaped
+  // first. Markup can still be introduced on purpose through the error-provider-template,
+  // which is applied after the escaping.
+  updateErrorConsumerElements(errorMessage) {
+    let errorConsumers = this.getAttribute('error-consumers');
+    if (!errorConsumers) return;
+    updateConsumerElements.call(
+      this,
+      errorConsumers,
+      toSafeHTML(errorMessage || ''),
+      this.getAttribute('error-provider-template'),
+      this.getAttribute('name')
+    );
+  }
+
   verifyValue(fieldValue, optionList, inputElement, messageContainerElement) {
     if (
       optionList &&
@@ -301,11 +337,7 @@ class ModelInput extends SocketConsumer {
     ) {
       inputElement.classList.add('error');
       inputElement.classList.remove('success');
-      if (messageContainerElement) {
-        messageContainerElement.textContent = 'Invalid selection';
-        messageContainerElement.classList.add('error');
-        messageContainerElement.classList.remove('hidden');
-      }
+      this.reportError(messageContainerElement, 'Invalid selection');
     }
   }
 
@@ -336,17 +368,11 @@ class ModelInput extends SocketConsumer {
     let errorStyleClass = 'error';
     let successStyleClass = 'success';
     let showErrorMessage = (fieldName, errorMessage) => {
-      if (!messageContainerElement) return;
-      messageContainerElement.textContent = errorMessage;
-      messageContainerElement.classList.add(errorStyleClass);
-      messageContainerElement.classList.remove('hidden');
+      this.reportError(messageContainerElement, errorMessage);
     };
 
     let hideErrorMessage = (fieldName) => {
-      if (!messageContainerElement) return;
-      messageContainerElement.textContent = '';
-      messageContainerElement.classList.remove(errorStyleClass);
-      messageContainerElement.classList.add('hidden');
+      this.clearError(messageContainerElement);
     };
 
     let consumers = this.getAttribute('consumers');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "10.3.0",
+  "version": "10.5.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -19,9 +19,9 @@
   "dependencies": {
     "ag-collection": "^6.0.0",
     "ag-model": "^4.0.0",
-    "capitalisk-auth-client": "^2.0.0",
-    "socketcluster-client": "^20.0.1",
-    "uuid": "^8.3.2"
+    "capitalisk-auth-client": "^2.1.0",
+    "socketcluster-client": "^21.0.0",
+    "uuid": "^14.0.2"
   },
   "bugs": {
     "url": "https://github.com/Saasufy/saasufy-components/issues"