saasufy-components 2.0.0 → 2.2.0

package/README.md

@@ -76,3 +76,12 @@ A general purpose modal component.
 ### render-group
 
 A component which can be used to guarantee that certain children components are always rendered at the same time (once they are loaded) to provide a smooth user experience.
+
+### conditional-group
+
+A modal component which exposes a `show-content` property which can be set to true or false to show or hide its content.
+It's intended to be placed inside a `model-viewer`, `collection-browser` or `collection-reducer` component such that the true/false value of the `show-content` attribute can be computed using a template `{{expression}}` placeholder.
+
+### collection-adder-group
+
+A component which can be used to group together multiple `collection-adder` components. It can be used to insert multiple records into a collection via a single button click.

package/collection-adder-group.js

@@ -0,0 +1,42 @@
+class CollectionAdderGroup extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        .hidden {
+          display: none;
+        }
+      </style>
+      <slot name="success" class="hidden"></slot>
+      <slot name="error-container" class="hidden"></slot>
+      <slot name="collection-adder"></slot>
+      <slot name="submit-button"></slot>
+    `;
+    this.shadowRoot.querySelector('slot[name="submit-button"]').addEventListener('click', async (event) => {
+      let collectionAdders = this.shadowRoot.querySelector('slot[name="collection-adder"]').assignedNodes();
+      try {
+        await Promise.all(
+          collectionAdders.map(async (adder) => adder.submit())
+        );
+      } catch (error) {
+        let errorContainerSlot = this.shadowRoot.querySelector('slot[name="error-container"]');
+        errorContainerSlot.classList.remove('hidden');
+        this.shadowRoot.querySelector('slot[name="success"]').classList.add('hidden');
+        let errorContainers = errorContainerSlot.assignedNodes();
+        for (let container of errorContainers) {
+          container.textContent = error.message;
+        }
+        return;
+      }
+      let successSlot = this.shadowRoot.querySelector('slot[name="success"]');
+      successSlot.classList.remove('hidden');
+      this.shadowRoot.querySelector('slot[name="error-container"]').classList.add('hidden');
+    });
+  }
+}
+
+window.customElements.define('collection-adder-group', CollectionAdderGroup);

package/collection-adder.js

@@ -32,8 +32,11 @@ class CollectionAdder extends SocketConsumer {
     return [
       'collection-type',
       'collection-fields',
+      'field-labels',
       'model-values',
-      'submit-button-label'
+      'submit-button-label',
+      'hide-submit-button',
+      'success-message'
     ];
   }
 
@@ -80,22 +83,96 @@ class CollectionAdder extends SocketConsumer {
     };
   }
 
+  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.querySelector('.collection-adder-message-container');
+
+    messageContainer.classList.remove('success');
+    messageContainer.classList.remove('error');
+    messageContainer.textContent = '';
+
+    let newModelData = {
+      ...this.modelFieldValues,
+      ...Object.fromEntries(
+        [...this.querySelectorAll('.collection-adder-input')]
+          .filter(input => input.value !== '')
+          .map((input) => {
+            let fieldType = this.fieldTypes[input.name];
+            let Type = this.getTypeCastFunction(fieldType);
+            let value;
+            if (fieldType === 'checkbox') {
+              value = input.checked;
+            } else {
+              value = input.value;
+            }
+            return [ input.name, Type(value) ];
+          })
+      )
+    };
+
+    try {
+      await this.collection.create(newModelData);
+      messageContainer.classList.add('success');
+      messageContainer.classList.remove('error');
+      this.dispatchEvent(
+        new CustomEvent('success', {
+          detail: newModelData
+        })
+      );
+      let form = this.querySelector('.collection-adder-form');
+      form.reset();
+      if (successMessage) {
+        messageContainer.textContent = successMessage;
+      } else {
+        messageContainer.textContent = '';
+      }
+    } catch (error) {
+      messageContainer.classList.add('error');
+      messageContainer.classList.remove('success');
+      messageContainer.textContent = error.message;
+      this.dispatchEvent(
+        new CustomEvent('error', {
+          detail: error
+        })
+      );
+    }
+  }
+
+  reset() {
+    let form = this.querySelector('.collection-adder-form');
+    if (form) {
+      form.reset();
+    }
+  }
+
   render() {
     let submitButtonLabel = this.getAttribute('submit-button-label');
     if (submitButtonLabel == null) {
       submitButtonLabel = 'Submit';
     }
+    let hideSubmitButton = this.hasAttribute('hide-submit-button');
     let collectionType = this.getAttribute('collection-type');
     let {
       fieldNames,
       fieldTypes
     } = this.getFieldDetails(this.getAttribute('collection-fields'));
 
+    this.fieldTypes = fieldTypes;
+
     let {
       fieldNames: modelFieldNames,
       fieldValues: modelFieldValues
     } = this.getFieldDetails(this.getAttribute('model-values'));
 
+    let {
+      fieldValues: modelFieldLabels
+    } = this.getFieldDetails(this.getAttribute('field-labels'));
+
+    this.modelFieldValues = modelFieldValues;
+
     if (this.collection) this.collection.destroy();
 
     this.collection = new AGCollection({
@@ -114,11 +191,12 @@ class CollectionAdder extends SocketConsumer {
         inputType = inputTypeParts[1];
         inputTypeParams = inputTypeParts[3] ? inputTypeParts[3].split(',') : [];
       }
+      let inputLabel = modelFieldLabels[field] == null ? field : modelFieldLabels[field];
       if (inputType === 'checkbox') {
         items.push(
           `<label>
             ${
-              field
+              inputLabel
             }
             <input class="collection-adder-input" type="${
               inputType
@@ -133,7 +211,7 @@ class CollectionAdder extends SocketConsumer {
             <input class="collection-adder-input" type="text" name="${
               field
             }" placeholder="${
-              field
+              inputLabel
             }" />
             <select class="collection-adder-select">
               <option value="" selected disabled hidden>Options</option>
@@ -146,7 +224,7 @@ class CollectionAdder extends SocketConsumer {
           `<textarea class="collection-adder-input" name="${
             field
           }" placeholder="${
-            field
+            inputLabel
           }"></textarea>`
         );
       } else {
@@ -156,7 +234,7 @@ class CollectionAdder extends SocketConsumer {
           }" name="${
             field
           }" placeholder="${
-            field
+            inputLabel
           }" />`
         );
       }
@@ -167,7 +245,7 @@ class CollectionAdder extends SocketConsumer {
         <div class="collection-adder-message-container"></div>
         <div class="collection-adder-form-content">
           ${items.join('')}
-          <input type="submit" value="${submitButtonLabel}" />
+          ${hideSubmitButton ? '' : `<input type="submit" value="${submitButtonLabel}" />`}
         </div>
       </form>
     `;
@@ -182,54 +260,10 @@ class CollectionAdder extends SocketConsumer {
       });
     }
 
-    let messageContainer = this.querySelector('.collection-adder-message-container');
-
     let form = this.querySelector('.collection-adder-form');
     form.addEventListener('submit', async (event) => {
       event.preventDefault();
-      messageContainer.classList.remove('success');
-      messageContainer.classList.remove('error');
-      messageContainer.textContent = '';
-
-      let newModelData = {
-        ...modelFieldValues,
-        ...Object.fromEntries(
-          [...event.target.querySelectorAll('.collection-adder-input')]
-            .filter(input => input.value !== '')
-            .map((input) => {
-              let fieldType = fieldTypes[input.name];
-              let Type = this.getTypeCastFunction(fieldType);
-              let value;
-              if (fieldType === 'checkbox') {
-                value = input.checked;
-              } else {
-                value = input.value;
-              }
-              return [ input.name, Type(value) ];
-            })
-        )
-      };
-
-      try {
-        await this.collection.create(newModelData);
-        messageContainer.classList.add('success');
-        messageContainer.classList.remove('error');
-        this.dispatchEvent(
-          new CustomEvent('success', {
-            detail: newModelData
-          })
-        );
-        form.reset();
-      } catch (error) {
-        messageContainer.classList.add('error');
-        messageContainer.classList.remove('success');
-        messageContainer.textContent = error.message;
-        this.dispatchEvent(
-          new CustomEvent('error', {
-            detail: error
-          })
-        );
-      }
+      await this.submit();
     });
   }
 }

package/conditional-group.js

@@ -0,0 +1,30 @@
+class ConditionalGroup extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.isReady = false;
+  }
+
+  static get observedAttributes() {
+    return [
+      'show-content',
+    ];
+  }
+
+  attributeChangedCallback() {
+    if (!this.isReady) return;
+    this.render();
+  }
+
+  connectedCallback() {
+    this.isReady = true;
+    this.render();
+  }
+
+  render() {
+    let showContent = this.getAttribute('show-content');
+    this.shadowRoot.innerHTML = showContent != null && showContent !== 'false' ? '<slot></slot>' : '';
+  }
+}
+
+window.customElements.define('conditional-group', ConditionalGroup);

package/model-viewer.js

@@ -21,7 +21,13 @@ class ModelViewer extends SocketConsumer {
   }
 
   disconnectedCallback() {
-    if (this.model) this.model.destroy();
+    if (this.model && this.isModelLocal) {
+      this.model.destroy();
+    } else {
+      if (this.modelLoadConsumer) this.modelLoadConsumer.kill();
+      if (this.modelChangeConsumer) this.modelChangeConsumer.kill();
+      if (this.modelErrorConsumer) this.modelErrorConsumer.kill();
+    }
     this.shadowRoot.removeEventListener('slotchange', this.handleSlotChangeEvent);
   }
 
@@ -85,16 +91,40 @@ class ModelViewer extends SocketConsumer {
     let modelType = this.getAttribute('model-type');
     let modelId = this.getAttribute('model-id');
     let modelFields = this.getAttribute('model-fields') || '';
+    let modelInstanceProperty = this.getAttribute('model-instance-property');
     let hideErrorLogs = this.hasAttribute('hide-error-logs');
 
-    if (this.model) this.model.destroy();
+    if (this.model && this.isModelLocal) this.model.destroy();
 
-    this.model = new AGModel({
-      socket: this.socket,
-      type: modelType,
-      id: modelId,
-      fields: modelFields.split(',').map(field => field.trim()).filter(field => field)
-    });
+    let currentNode = this.parentNode;
+    let model;
+    if (modelInstanceProperty) {
+      while (currentNode) {
+        model = currentNode[modelInstanceProperty];
+        if (model && modelType && (model.type !== modelType || !(model.fields || []).includes(modelField))) {
+          model = null;
+        }
+        if (model) break;
+        currentNode = currentNode.getRootNode().host || currentNode.parentNode;
+      }
+      if (!model) {
+        throw new Error(
+          `The ${
+            this.nodeName.toLowerCase()
+          } element failed to obtain a model via the specified model-instance-property - Ensure that the element is nested inside a parent element which exposes a model instance of the same type which has the relevant field`
+        );
+      };
+      this.model = model;
+      this.isModelLocal = false;
+    } else {
+      this.model = new AGModel({
+        socket: this.socket,
+        type: modelType,
+        id: modelId,
+        fields: modelFields.split(',').map(field => field.trim()).filter(field => field)
+      });
+      this.isModelLocal = true;
+    }
 
     this.shadowRoot.innerHTML = `
       <style>
@@ -109,7 +139,9 @@ class ModelViewer extends SocketConsumer {
     `;
 
     (async () => {
-      await this.model.listener('load').once();
+      this.modelLoadConsumer = this.model.listener('load').createConsumer();
+      let packet = await this.modelLoadConsumer.next();
+      if (packet.done) return;
       if (!this.modelValueExists(this.model.value)) {
         this.renderItem();
       }
@@ -117,15 +149,23 @@ class ModelViewer extends SocketConsumer {
       this.dispatchEvent(new CustomEvent('load', { bubbles: true }));
     })();
 
+    if (this.model.isLoaded) {
+      this.renderItem();
+      this.setAttribute('is-loaded', '');
+      this.dispatchEvent(new CustomEvent('load', { bubbles: true }));
+    }
+
     (async () => {
-      for await (let event of this.model.listener('change')) {
+      this.modelChangeConsumer = this.model.listener('change').createConsumer();
+      for await (let event of this.modelChangeConsumer) {
         this.renderItem();
       }
     })();
 
     if (!hideErrorLogs) {
       (async () => {
-        for await (let { error } of this.model.listener('error')) {
+        this.modelErrorConsumer = this.model.listener('error').createConsumer();
+        for await (let { error } of this.modelErrorConsumer) {
           console.error(
             `Model viewer encountered an error: ${error.message}`
           );

package/package.json

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