saasufy-components 9.0.4 → 9.1.0

package/README.md

@@ -404,7 +404,7 @@ In addition to the slots shown above, the `collection-viewer` also supports the
 **Attributes**
 
 - `collection-type` (required): Specifies the type of collection to display. This should match a `Model` available in your Saasufy service.
-- `collection-fields` (required): A comma-separated list of fields from the `Model` that you want to display or use. This lets you pick specific pieces of data from your collection to work with.
+- `collection-fields` (required): A comma-separated list of fields from the `Model` that you want to display or use. This lets you pick specific pieces of data from your collection to work with. Note that updates made to these fields can cause the `collection-viewer` to re-render itself so you should consider whether or not a field needs to be specified at this level in the component hierarchy or should be delegated to a child component (otherwise it could cause nested `model-input` components to lose focus).
 - `collection-view` (required): Determines the view of the collection. This should match one of the `Views` defined in your Saasufy service under that specific `Model`.
 - `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.
@@ -437,6 +437,7 @@ This component is a simplified version of the `collection-adder-form` component
   collection-fields="name,brand,qty"
   model-values="categoryName=electronics,isNew:boolean=true"
   submit-button-label="Create"
+  show-field-errors
   trim-spaces
 ></collection-adder>
 ```
@@ -453,6 +454,7 @@ This component is a simplified version of the `collection-adder-form` component
 - `success-message`: A message to show the user if the resource has been successfully added to the collection after submitting the form.
 - `autocapitalize`: Can be set to `off` to disable auto-capitalization of the first input character on mobile devices.
 - `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.
 - `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.
@@ -492,6 +494,7 @@ This component is similar to the `collection-adder` component except that it req
 - `model-values`: An optional list of key-value pairs in the format `field1=value1,field2=value2` to add to the newly created resource alongside the values collected from the user via the form. For non-string values, the type should be provided in the format `fieldName:type=value`; supported types are `string`, `number` and `boolean`. Unlike `collection-fields` which are rendered as input elements in the form, `model-values` are not shown to the user.
 - `computable-model-values`: If this attribute exists on the element, then the `model-values` attribute will be re-computed before the form is submitted; this may be useful if the `model-values` attribute contains expressions which need to be updated before submitting.
 - `success-message`: A message to show the user if the resource has been successfully added to the collection after submitting the form.
+- `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.
 - `disable-submit-on-enter-key`: If this attribute exists, then the form will not submit when the enter key is pressed.

package/collection-adder-form.js

@@ -58,6 +58,20 @@ class CollectionAdderForm extends SocketConsumer {
       messageContainer.textContent = '';
     }
 
+    // Clear any existing field errors
+    let inputSlot = this.shadowRoot.querySelector('.input-slot');
+    if (inputSlot) {
+      let slottedElements = inputSlot.assignedElements();
+      slottedElements.forEach(element => {
+        let existingFieldErrors = element.querySelectorAll('.collection-adder-field-error-container');
+        existingFieldErrors.forEach(el => el.textContent = '');
+
+        // Clear error classes from all inputs
+        let allInputs = element.querySelectorAll('input, textarea, select');
+        allInputs.forEach(input => input.classList.remove('error'));
+      });
+    }
+
     let trimSpaces = this.hasAttribute('trim-spaces');
 
     let inputElements = this.getAllInputElements();
@@ -158,8 +172,45 @@ class CollectionAdderForm extends SocketConsumer {
       if (messageContainer) {
         messageContainer.classList.add('error');
         messageContainer.classList.remove('success');
+      }
+
+      if (this.hasAttribute('show-field-errors') && error.fieldErrors) {
+        let inputElements = this.getAllInputElements();
+
+        for (let fieldName in error.fieldErrors) {
+          let fieldError = error.fieldErrors[fieldName];
+
+          // Find the input element by name
+          let input = inputElements.find(el => el.name === fieldName);
+
+          if (input) {
+            // Look for a parent field container
+            let fieldContainer = input.closest('.collection-adder-field-container');
+
+            if (fieldContainer) {
+              let errorDiv = fieldContainer.querySelector('.collection-adder-field-error-container');
+              let inputType = input.type || (input.nodeName === 'TEXTAREA' ? 'textarea' : 'select');
+
+              // For radio buttons and checkboxes, just add error class to input(s)
+              if (inputType === 'radio') {
+                let radioInputs = fieldContainer.querySelectorAll(`input[name="${fieldName}"][type="radio"]`);
+                radioInputs.forEach(radio => radio.classList.add('error'));
+              } else if (inputType === 'checkbox') {
+                input.classList.add('error');
+              } else {
+                // For other input types, populate the error message div
+                if (errorDiv) {
+                  let simpleFieldError = fieldError.replace(/^Invalid [^:]+:/i, '');
+                  errorDiv.textContent = simpleFieldError;
+                }
+              }
+            }
+          }
+        }
+      } else if (messageContainer) {
         messageContainer.textContent = formatError(error);
       }
+
       this.dispatchEvent(
         new CustomEvent('error', {
           detail: error

package/collection-adder.js

@@ -59,6 +59,14 @@ class CollectionAdder extends SocketConsumer {
     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'));
+
     let radioInputs = [ ...this.querySelectorAll('.collection-adder-radio') ];
     let radioData = {};
     for (let radio of radioInputs) {
@@ -150,7 +158,36 @@ class CollectionAdder extends SocketConsumer {
     } catch (error) {
       messageContainer.classList.add('error');
       messageContainer.classList.remove('success');
-      messageContainer.textContent = formatError(error);
+
+      if (this.hasAttribute('show-field-errors') && error.fieldErrors) {
+        for (let fieldName in error.fieldErrors) {
+          let fieldError = error.fieldErrors[fieldName];
+          let fieldContainer = this.querySelector(`.collection-adder-field-container[data-field="${fieldName}"]`);
+
+          if (fieldContainer) {
+            let fieldType = this.fieldTypes[fieldName];
+            let errorDiv = fieldContainer.querySelector('.collection-adder-field-error-container');
+
+            // For radio buttons and checkboxes, just add error class to input(s)
+            if (fieldType === 'radio') {
+              let radioInputs = fieldContainer.querySelectorAll('.collection-adder-radio');
+              radioInputs.forEach(radio => radio.classList.add('error'));
+            } else if (fieldType === 'checkbox') {
+              let input = fieldContainer.querySelector('.collection-adder-input');
+              input.classList.add('error');
+            } else {
+              // For other input types, populate the error message div
+              if (errorDiv) {
+                let simpleFieldError = fieldError.replace(/^Invalid [^:]+:/i, '');
+                errorDiv.textContent = simpleFieldError;
+              }
+            }
+          }
+        }
+      } else {
+        messageContainer.textContent = formatError(error);
+      }
+
       this.dispatchEvent(
         new CustomEvent('error', {
           detail: error
@@ -241,101 +278,126 @@ class CollectionAdder extends SocketConsumer {
       let optionLabel = optionLabels[field] == null ? 'Options' : optionLabels[field];
       if (inputType === 'checkbox') {
         items.push(
-          `<label>
-            ${
-              inputLabel
-            }
-            <input class="collection-adder-input" type="${
-              inputType
-            }" name="${
-              field
-            }" />
-          </label>`
+          `<div class="collection-adder-field-container" data-field="${field}">
+            <div class="collection-adder-field-error-container error"></div>
+            <label>
+              ${
+                inputLabel
+              }
+              <input class="collection-adder-input" type="${
+                inputType
+              }" name="${
+                field
+              }" />
+            </label>
+          </div>`
         );
       } else if (inputType === 'select') {
         items.push(
-          `<label>
-            ${
-              inputLabel
-            }
-            <select name="${field}" class="collection-adder-input collection-adder-select">
-              <option value="" selected disabled hidden>${optionLabel}</option>
-              ${inputTypeParams.map(param => `<option value="${param}">${param}</option>`).join('')}
-            </select>
-          </label>`
+          `<div class="collection-adder-field-container" data-field="${field}">
+            <div class="collection-adder-field-error-container error"></div>
+            <label>
+              ${
+                inputLabel
+              }
+              <select name="${field}" class="collection-adder-input collection-adder-select">
+                <option value="" selected disabled hidden>${optionLabel}</option>
+                ${inputTypeParams.map(param => `<option value="${param}">${param}</option>`).join('')}
+              </select>
+            </label>
+          </div>`
         );
       } else if (inputType === 'text-select') {
         items.push(
-          `<div class="collection-adder-select-text-row">
-            <input class="collection-adder-input" type="text" name="${
-              field
-            }" placeholder="${
-              inputLabel
-            }"${extraAttributesString} />
-            <select class="collection-adder-select">
-              <option value="" selected disabled hidden>${optionLabel}</option>
-              ${inputTypeParams.map(param => `<option value="${param}">${param}</option>`).join('')}
-            </select>
+          `<div class="collection-adder-field-container" data-field="${field}">
+            <div class="collection-adder-field-error-container error"></div>
+            <div class="collection-adder-select-text-row">
+              <input class="collection-adder-input" type="text" name="${
+                field
+              }" placeholder="${
+                inputLabel
+              }"${extraAttributesString} />
+              <select class="collection-adder-select">
+                <option value="" selected disabled hidden>${optionLabel}</option>
+                ${inputTypeParams.map(param => `<option value="${param}">${param}</option>`).join('')}
+              </select>
+            </div>
           </div>`
         );
       } else if (inputType === 'radio') {
         items.push(
-          `
-            ${
-              inputLabel
-            }
-            ${
-              inputTypeParams.map(
-                param => (
-                  `<label>
-                    <input class="collection-adder-radio" type="${
-                      inputType
-                    }" name="${
-                      field
-                    }" value=${
-                      param
-                    } />
-                    ${param}
-                  </label>`
-                )
-              ).join('')
-            }`
+          `<div class="collection-adder-field-container" data-field="${field}">
+            <div class="collection-adder-field-error-container error"></div>
+            <div>
+              ${
+                inputLabel
+              }
+              ${
+                inputTypeParams.map(
+                  param => (
+                    `<label>
+                      <input class="collection-adder-radio" type="${
+                        inputType
+                      }" name="${
+                        field
+                      }" value=${
+                        param
+                      } />
+                      ${param}
+                    </label>`
+                  )
+                ).join('')
+              }
+            </div>
+          </div>`
         );
       } else if (inputType === 'textarea') {
         items.push(
-          `<textarea class="collection-adder-input" name="${
-            field
-          }" placeholder="${
-            inputLabel
-          }"${extraAttributesString}></textarea>`
+          `<div class="collection-adder-field-container" data-field="${field}">
+            <div class="collection-adder-field-error-container error"></div>
+            <textarea class="collection-adder-input" name="${
+              field
+            }" placeholder="${
+              inputLabel
+            }"${extraAttributesString}></textarea>
+          </div>`
         );
       } else if (inputType === 'file') {
         items.push(
-          `<input class="collection-adder-input" type="${
-            inputType
-          }" name="${
-            field
-          }"${extraAttributesString} />`
+          `<div class="collection-adder-field-container" data-field="${field}">
+            <div class="collection-adder-field-error-container error"></div>
+            <input class="collection-adder-input" type="${
+              inputType
+            }" name="${
+              field
+            }"${extraAttributesString} />
+          </div>`
         );
       } else if (inputType === 'number') {
         items.push(
-          `<input class="collection-adder-input" type="${
-            inputType
-          }" name="${
-            field
-          }" placeholder="${
-            inputLabel
-          }" step="any"${extraAttributesString} />`
+          `<div class="collection-adder-field-container" data-field="${field}">
+            <div class="collection-adder-field-error-container error"></div>
+            <input class="collection-adder-input" type="${
+              inputType
+            }" name="${
+              field
+            }" placeholder="${
+              inputLabel
+            }" step="any"${extraAttributesString} />
+          </div>`
         );
       } else {
         items.push(
-          `<input class="collection-adder-input" type="${
-            inputType
-          }" name="${
-            field
-          }" placeholder="${
-            inputLabel
-          }"${extraAttributesString} />`
+          `<div class="collection-adder-field-container" data-field="${field}">
+            <div class="collection-adder-field-error-container error"></div>
+            <input class="collection-adder-input" type="${
+              inputType
+            }" name="${
+              field
+            }" placeholder="${
+              inputLabel
+            }"${extraAttributesString} />
+          </div>`
         );
       }
     }

package/package.json

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

package/styles.css

@@ -159,6 +159,11 @@ collection-adder .collection-adder-form-content > label {
   align-self: flex-start;
 }
 
+collection-adder .collection-adder-field-container {
+  display: flex;
+  flex-direction: column;
+}
+
 .label-container {
   display: flex;
   justify-content: flex-start;