saasufy-components 10.0.0 → 10.0.1

package/README.md

@@ -458,6 +458,7 @@ This component is a simplified version of the `collection-adder-form` component
 - `autocorrect`: Can be set to `off` to disable auto-correction of input on mobile devices.
 - `show-field-errors`: If this attribute exists on the element, then granular error messages will be shown above each corresponding input element instead of a single form-level error message.
 - `trim-spaces`: If this attribute exists on the element, then leading and trailing spaces will be trimmed from each input element's value before submitting the form.
+- `reset-status-on-submit`: If this attribute exists, then the current message and any field errors will be cleared as soon as the form is submitted, instead of when the outcome of the submit is known. By default, the previous status is kept on screen until the insert either succeeds or fails and is then replaced within a single frame; this avoids the form flickering (shrinking and then growing again) when the same error occurs on consecutive submits.
 - `consumers`: This allows you to connect this `collection-adder` to other elements on your page. It should be used in conjunction with the `provider-template` attribute. The `consumers` attribute 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 output of the `collection-adder` component on submit. 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.
 - `success-consumers`: Same as the `consumers` attribute but the target elements are only updated if insertion was a success.
 - `error-consumers`: Same as the `consumers` attribute but the target elements are only updated if insertion was a failure.
@@ -499,6 +500,7 @@ This component is similar to the `collection-adder` component except that it req
 - `show-field-errors`: If this attribute exists on the element, then granular error messages will be shown above each corresponding input element instead of a single form-level error message.
 - `trim-spaces`: If this attribute exists on the element, then leading and trailing spaces will be trimmed from each input element's value before submitting the form.
 - `auto-reset-hidden-inputs`: If this attribute exists, then `hidden` input elements which are inside the `collection-adder-form` will be cleared along with other input fields. By default, `hidden` input elements are not cleared when the form is reset.
+- `reset-status-on-submit`: If this attribute exists, then the current message and any field errors will be cleared as soon as the form is submitted, instead of when the outcome of the submit is known. By default, the previous status is kept on screen until the insert either succeeds or fails and is then replaced within a single frame; this avoids the form flickering (shrinking and then growing again) when the same error occurs on consecutive submits.
 - `disable-submit-on-enter-key`: If this attribute exists, then the form will not submit when the enter key is pressed.
 - `greedy-refresh`: If this attribute exists, the component will refresh itself whenever an attribute is set, even if that attribute's value did not change.
 - `consumers`: This allows you to connect this `collection-adder-form` to other elements on your page. It should be used in conjunction with the `provider-template` attribute. The `consumers` attribute 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 output of the `collection-adder-form` component on submit. 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.

package/collection-adder-form.js

@@ -50,22 +50,15 @@ class CollectionAdderForm extends SocketConsumer {
       throw new Error('Collection adder form is not ready to be submitted');
     }
     let successMessage = this.getAttribute('success-message');
-    let messageContainer = this.shadowRoot.querySelector('slot[name="message"]').assignedElements()[0];
+    let messageContainer;
 
-    if (messageContainer) {
-      messageContainer.classList.remove('success');
-      messageContainer.classList.remove('error');
-      messageContainer.textContent = '';
+    // By default, the previous status is only cleared once the outcome of the
+    // submit is known so that the status is replaced within a single frame; this
+    // avoids the form flickering when the same error occurs twice in a row.
+    if (this.hasAttribute('reset-status-on-submit')) {
+      this.clearStatus();
     }
 
-    // Clear any existing field errors
-    let existingFieldErrors = this.querySelectorAll('.collection-adder-field-error-container');
-    existingFieldErrors.forEach(el => el.remove());
-
-    // Clear error classes from all inputs
-    let allInputs = this.querySelectorAll('input, textarea, select');
-    allInputs.forEach(input => input.classList.remove('error'));
-
     let trimSpaces = this.hasAttribute('trim-spaces');
 
     let inputElements = this.getAllInputElements();
@@ -133,6 +126,9 @@ class CollectionAdderForm extends SocketConsumer {
       };
 
       let resourceId = await this.collection.create(newModelData);
+
+      this.clearStatus();
+
       let insertedModelData = {
         ...newModelData,
         id: resourceId
@@ -162,6 +158,8 @@ class CollectionAdderForm extends SocketConsumer {
         }
       }
     } catch (error) {
+      this.clearStatus();
+
       messageContainer = this.shadowRoot.querySelector('slot[name="message"]').assignedElements()[0];
       if (messageContainer) {
         messageContainer.classList.add('error');
@@ -229,6 +227,24 @@ class CollectionAdderForm extends SocketConsumer {
     updateConsumerElements.call(this, oppositeOutcomeConsumers, '', null, selfName);
   }
 
+  clearStatus() {
+    let messageContainer = this.shadowRoot.querySelector('slot[name="message"]').assignedElements()[0];
+
+    if (messageContainer) {
+      messageContainer.classList.remove('success');
+      messageContainer.classList.remove('error');
+      messageContainer.textContent = '';
+    }
+
+    // Clear any existing field errors
+    let existingFieldErrors = this.querySelectorAll('.collection-adder-field-error-container');
+    existingFieldErrors.forEach(el => el.remove());
+
+    // Clear error classes from all inputs
+    let allInputs = this.querySelectorAll('input, textarea, select');
+    allInputs.forEach(input => input.classList.remove('error'));
+  }
+
   getAllInputElements() {
     return this.shadowRoot.querySelector('.input-slot')
       .assignedElements()

package/collection-adder.js

@@ -55,17 +55,12 @@ class CollectionAdder extends SocketConsumer {
     let successMessage = this.getAttribute('success-message');
     let messageContainer = this.querySelector('.collection-adder-message-container');
 
-    messageContainer.classList.remove('success');
-    messageContainer.classList.remove('error');
-    messageContainer.textContent = '';
-
-    // Clear any existing field errors
-    let existingFieldErrors = this.querySelectorAll('.collection-adder-field-error-container');
-    existingFieldErrors.forEach(el => el.textContent = '');
-
-    // Clear error classes from all inputs
-    let allInputs = this.querySelectorAll('.collection-adder-input, .collection-adder-radio');
-    allInputs.forEach(input => input.classList.remove('error'));
+    // By default, the previous status is only cleared once the outcome of the
+    // submit is known so that the status is replaced within a single frame; this
+    // avoids the form flickering when the same error occurs twice in a row.
+    if (this.hasAttribute('reset-status-on-submit')) {
+      this.clearStatus();
+    }
 
     let radioInputs = [ ...this.querySelectorAll('.collection-adder-radio') ];
     let radioData = {};
@@ -131,6 +126,9 @@ class CollectionAdder extends SocketConsumer {
         )
       };
       let resourceId = await this.collection.create(newModelData);
+
+      this.clearStatus();
+
       let insertedModelData = {
         ...newModelData,
         id: resourceId
@@ -156,6 +154,8 @@ class CollectionAdder extends SocketConsumer {
         messageContainer.textContent = '';
       }
     } catch (error) {
+      this.clearStatus();
+
       messageContainer.classList.add('error');
       messageContainer.classList.remove('success');
 
@@ -213,6 +213,24 @@ class CollectionAdder extends SocketConsumer {
     updateConsumerElements.call(this, oppositeOutcomeConsumers, '', null, selfName);
   }
 
+  clearStatus() {
+    let messageContainer = this.querySelector('.collection-adder-message-container');
+
+    if (messageContainer) {
+      messageContainer.classList.remove('success');
+      messageContainer.classList.remove('error');
+      messageContainer.textContent = '';
+    }
+
+    // Clear any existing field errors
+    let existingFieldErrors = this.querySelectorAll('.collection-adder-field-error-container');
+    existingFieldErrors.forEach(el => el.textContent = '');
+
+    // Clear error classes from all inputs
+    let allInputs = this.querySelectorAll('.collection-adder-input, .collection-adder-radio');
+    allInputs.forEach(input => input.classList.remove('error'));
+  }
+
   reset() {
     let form = this.querySelector('.collection-adder-form');
     if (form) {

package/package.json

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