saasufy-components 3.39.0 → 4.1.0

package/README.md

@@ -8,6 +8,7 @@ Components for Saasufy
 ### Collections of resources
 - [collection-browser](#collection-browser)
 - [collection-adder](#collection-adder)
+- [collection-adder-form](#collection-adder-form)
 - [collection-deleter](#collection-deleter)
 - [collection-reducer](#collection-reducer)
 
@@ -314,7 +315,8 @@ Can also perform basic CRUD operations such as deleting or creating records by l
 
 ### collection-adder
 
-A form component for inserting data into collections.
+A basic form component for inserting data into collections.
+This component is a simplified version of the `collection-adder-form` component as it doesn't require input elements to be slotted into it.
 
 **Import**
 
@@ -347,6 +349,44 @@ A form component for inserting data into collections.
 - `autocorrect`: Can be set to `off` to disable auto-correction of input on mobile devices.
 - `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.
 
+### collection-adder-form
+
+A flexible form component for inserting data into collections.
+This component is similar to the `collection-adder` component except that it requires input elements (and others) to be slotted into it.
+
+**Import**
+
+```html
+<script src="https://saasufy.com/node_modules/saasufy-components/collection-adder-form.js" type="module" defer></script>
+```
+
+**Example usage**
+
+```html
+<collection-adder-form
+  collection-type="Product"
+  model-values="categoryName=electronics,isNew:boolean=true"
+  trim-spaces
+>
+  <div slot="message"></div>
+  <input type="text" name="name" placeholder="Name">
+  <input type="text" name="brand" placeholder="Brand">
+  <input type="number" name="qty" placeholder="Quantity">
+  <input type="submit" value="Add new product">
+</collection-adder-form>
+```
+
+**Attributes of collection-adder-form**
+
+- `collection-type` (required): Specifies the type of collection to add the resource to when the form is submitted. This should match a `Model` available in your Saasufy service.
+- `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.
+- `success-message`: A message to show the user if the resource has been successfully added to the collection after submitting the form.
+- `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.
+
+**Attributes of slotted input, select, textarea... elements**
+
+- `name` (required): This must correspond to a field name on the model specified via the `collection-type` attribute of the `collection-adder-form`.
+
 ### collection-deleter
 
 A component which can be placed anywhere inside a `collection-browser` component to delete a specific item from a collection as a result of a user action (e.g. on click).

package/collection-adder-form.js

@@ -0,0 +1,213 @@
+import { SocketConsumer } from './socket.js';
+import {
+  convertStringToFieldParams,
+  getTypeCastFunction,
+  formatError
+} from './utils.js';
+import AGCollection from '/node_modules/ag-collection/ag-collection.js';
+
+class CollectionAdderForm extends SocketConsumer {
+  constructor(options) {
+    super();
+    this.attachShadow({
+      mode: 'open'
+    });
+    this.options = options || {};
+    this.isReady = false;
+  }
+
+  connectedCallback() {
+    this.socket = this.getSocket();
+    this.isReady = true;
+    this.render();
+  }
+
+  disconnectedCallback() {
+    if (this.collection) this.collection.destroy();
+  }
+
+  static get observedAttributes() {
+    return [
+      'collection-type',
+      'model-values',
+      'success-message',
+      'trim-spaces'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isReady) return;
+    this.render();
+  }
+
+  async submit() {
+    if (!this.isReady) {
+      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];
+
+    if (messageContainer) {
+      messageContainer.classList.remove('success');
+      messageContainer.classList.remove('error');
+      messageContainer.textContent = '';
+    }
+
+    let trimSpaces = this.hasAttribute('trim-spaces');
+
+    let inputElements = this.getAllInputElements();
+
+    try {
+      let newModelData = {
+        ...this.modelFieldValues,
+        ...Object.fromEntries(
+          await Promise.all(
+            [ ...inputElements ].filter(
+              input => input.type === 'radio' ? input.checked : input.value !== ''
+            )
+            .map(
+              async (input) => {
+                let inputType;
+                if (input.nodeName === 'TEXTAREA' || input.nodeName === 'SELECT') {
+                  inputType = input.nodeName.toLowerCase();
+                } else {
+                  inputType = input.type;
+                }
+                let Type = getTypeCastFunction(inputType);
+                let value;
+                if (inputType === 'file' && input.files && input.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(input.files[0]);
+                  value = await readerLoadPromise;
+                } else if (inputType === 'checkbox') {
+                  value = input.checked;
+                } else {
+                  value = input.value;
+                }
+                let sanitizedValue = Type(value);
+                if (trimSpaces && typeof sanitizedValue === 'string') {
+                  sanitizedValue = sanitizedValue.trim();
+                }
+                return [ input.name, sanitizedValue ];
+              }
+            )
+          )
+        )
+      };
+
+      await this.collection.create(newModelData);
+      this.dispatchEvent(
+        new CustomEvent('success', {
+          detail: newModelData
+        })
+      );
+      this.reset();
+
+      messageContainer = this.shadowRoot.querySelector('slot[name="message"]').assignedElements()[0];
+      if (messageContainer) {
+        messageContainer.classList.add('success');
+        messageContainer.classList.remove('error');
+        if (successMessage) {
+          messageContainer.textContent = successMessage;
+        } else {
+          messageContainer.textContent = '';
+        }
+      }
+    } catch (error) {
+      messageContainer = this.shadowRoot.querySelector('slot[name="message"]').assignedElements()[0];
+      if (messageContainer) {
+        messageContainer.classList.add('error');
+        messageContainer.classList.remove('success');
+        messageContainer.textContent = formatError(error);
+      }
+      this.dispatchEvent(
+        new CustomEvent('error', {
+          detail: error
+        })
+      );
+    }
+  }
+
+  getAllInputElements() {
+    return this.shadowRoot.querySelector('.input-slot')
+      .assignedElements()
+      .filter(element => element)
+      .flatMap(element => [ element, ...element.querySelectorAll('input,textarea,select') ])
+      .filter(
+        (element) => {
+          return (element.nodeName === 'INPUT' && element.type !== 'submit' && element.type !== 'button') ||
+            element.nodeName === 'TEXTAREA' || element.nodeName === 'SELECT';
+        }
+      );
+  }
+
+  reset() {
+    let inputElements = this.getAllInputElements();
+    for (let element of inputElements) {
+      if (element.nodeName === 'INPUT') {
+        if (element.type === 'checkbox' || element.type === 'radio') {
+          element.checked = false;
+        } else {
+          element.value = '';
+        }
+      } else if (element.nodeName === 'TEXTAREA') {
+        element.value = '';
+      } else if (element.nodeName === 'SELECT') {
+        element.selectedIndex = 0;
+      }
+    }
+  }
+
+  render() {
+    let collectionType = this.getAttribute('collection-type');
+
+    let {
+      fieldTypes: modelFieldTypes,
+      fieldValues: modelFieldValues
+    } = convertStringToFieldParams(this.getAttribute('model-values'));
+
+    this.modelFieldValues = Object.fromEntries(
+      Object.entries(modelFieldValues).map(([key, value]) => {
+        if (modelFieldTypes[key] === 'boolean') {
+          return [ key, value !== 'false' && value !== '' ];
+        }
+        if (modelFieldTypes[key] === 'number') {
+          return [ key, Number(value) ];
+        }
+        return [ key, value ];
+      })
+    );
+
+    if (this.collection) this.collection.destroy();
+
+    this.collection = new AGCollection({
+      socket: this.socket,
+      type: collectionType,
+      fields: [],
+      writeOnly: true
+    });
+
+    this.shadowRoot.innerHTML = `
+      <slot name="message" class="collection-adder-message-container"></slot>
+      <slot class="input-slot"></slot>
+    `;
+
+    let inputSlot = this.shadowRoot.querySelector('.input-slot');
+    inputSlot.addEventListener('click', async (event) => {
+      let { target } = event;
+      if (target && target.nodeName === 'INPUT' && target.type === 'submit') {
+        await this.submit();
+      }
+    });
+  }
+}
+
+window.customElements.define('collection-adder-form', CollectionAdderForm);

package/collection-adder.js

@@ -1,5 +1,9 @@
 import { SocketConsumer } from './socket.js';
-import { convertStringToFieldParams, getTypeCastFunction } from './utils.js';
+import {
+  convertStringToFieldParams,
+  getTypeCastFunction,
+  formatError
+} from './utils.js';
 import AGCollection from '/node_modules/ag-collection/ag-collection.js';
 
 class CollectionAdder extends SocketConsumer {
@@ -53,7 +57,7 @@ class CollectionAdder extends SocketConsumer {
     messageContainer.classList.remove('error');
     messageContainer.textContent = '';
 
-    let radioInputs = [...this.querySelectorAll('.collection-adder-radio')];
+    let radioInputs = [ ...this.querySelectorAll('.collection-adder-radio') ];
     let radioData = {};
     for (let radio of radioInputs) {
       if (radio.checked) {
@@ -69,7 +73,7 @@ class CollectionAdder extends SocketConsumer {
         ...radioData,
         ...Object.fromEntries(
           await Promise.all(
-            [...this.querySelectorAll('.collection-adder-input')].filter(
+            [ ...this.querySelectorAll('.collection-adder-input') ].filter(
               input => input.value !== ''
             )
             .map(
@@ -122,7 +126,7 @@ class CollectionAdder extends SocketConsumer {
     } catch (error) {
       messageContainer.classList.add('error');
       messageContainer.classList.remove('success');
-      messageContainer.textContent = error.message;
+      messageContainer.textContent = formatError(error);
       this.dispatchEvent(
         new CustomEvent('error', {
           detail: error
@@ -192,7 +196,7 @@ class CollectionAdder extends SocketConsumer {
     this.collection = new AGCollection({
       socket: this.socket,
       type: collectionType,
-      fields: [...new Set([ ...fieldNames, ...modelFieldNames ])],
+      fields: [ ...new Set([ ...fieldNames, ...modelFieldNames ]) ],
       writeOnly: true
     });
 

package/model-input.js

@@ -1,5 +1,10 @@
 import { SocketConsumer } from './socket.js';
-import { debouncer, updateConsumerElements, convertStringToFieldParams } from './utils.js';
+import {
+  debouncer,
+  updateConsumerElements,
+  convertStringToFieldParams,
+  formatError
+} from './utils.js';
 import AGModel from '/node_modules/ag-model/ag-model.js';
 
 class ModelInput extends SocketConsumer {
@@ -379,7 +384,7 @@ class ModelInput extends SocketConsumer {
         } catch (error) {
           inputElement.classList.add(errorStyleClass);
           inputElement.classList.remove(successStyleClass);
-          showErrorMessage(fieldName, error.message);
+          showErrorMessage(fieldName, formatError(error));
         }
       }, debounceDelay);
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "3.39.0",
+  "version": "4.1.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -20,7 +20,7 @@
     "ag-collection": "^5.2.0",
     "ag-model": "^3.1.0",
     "capitalisk-auth-client": "^1.5.1",
-    "socketcluster-client": "^19.1.2",
+    "socketcluster-client": "^19.2.1",
     "uuid": "^8.3.2"
   },
   "bugs": {

package/utils.js

@@ -422,6 +422,10 @@ export function convertStringToFieldParams(string) {
   };
 }
 
+export function formatError(error) {
+  return error.code === 1009 ? 'Resource exceeded the maximum size' : error.message;
+}
+
 export function wait(duration) {
   return new Promise((resolve) => setTimeout(resolve, duration));
 }