saasufy-components 1.5.2 → 1.6.0

package/README.md

@@ -17,6 +17,11 @@ Used for rendering collections as lists, tables or other sequences based on a sp
 Supports pagination by allowing you to specify custom buttons or links to navigate between pages.
 Can also perform basic CRUD operations such as deleting or creating records.
 
+### collection-reducer
+
+Similar to the `collection-browser` component but designed to render collections in combined format. For example, to combine values from multiple records into a single item.
+A common use case is to extract and combine values from a specific field to pass to other child components via their attributes.
+
 ### model-input
 
 Used for displaying and editing a field of a model instance in real time.

package/collection-reducer.js

@@ -0,0 +1,227 @@
+import { SocketConsumer } from './socket.js';
+import AGCollection from '/node_modules/ag-collection/ag-collection.js';
+import { renderTemplate } from './utils.js';
+
+const DEFAULT_RELOAD_DELAY = 0;
+
+class CollectionReducer extends SocketConsumer {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    this.handleGoToPreviousPageEvent = () => {
+      this.goToPreviousPage();
+    };
+
+    this.handleGoToNextPageEvent = () => {
+      this.goToNextPage();
+    };
+
+    this.handleGoToPageEvent = (event) => {
+      this.goToPage((event.detail || {}).offset);
+    };
+
+    this.handleSlotChangeEvent = () => {
+      this.renderReduction();
+    };
+  }
+
+  connectedCallback() {
+    this.isReady = true;
+    this.socket = this.getSocket();
+    this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
+    this.addEventListener('goToPreviousPage', this.handleGoToPreviousPageEvent);
+    this.addEventListener('goToNextPage', this.handleGoToNextPageEvent);
+    this.addEventListener('goToPage', this.handleGoToPageEvent);
+    this.render();
+  }
+
+  disconnectedCallback() {
+    if (this.collection) this.collection.destroy();
+    this.shadowRoot.removeEventListener('slotchange', this.handleSlotChangeEvent);
+    this.removeEventListener('goToPreviousPage', this.handleGoToPreviousPageEvent);
+    this.removeEventListener('goToNextPage', this.handleGoToNextPageEvent);
+    this.removeEventListener('goToPage', this.handleGoToPageEvent);
+  }
+
+  goToPreviousPage() {
+    if (!this.collection) return;
+    this.collection.fetchPreviousPage();
+    this.setAttribute('collection-page-offset', this.collection.meta.pageOffset);
+  }
+
+  goToNextPage() {
+    if (!this.collection) return;
+    this.collection.fetchNextPage();
+    this.setAttribute('collection-page-offset', this.collection.meta.pageOffset);
+  }
+
+  goToPage(offset) {
+    this.setAttribute('collection-page-offset', offset);
+  }
+
+  static get observedAttributes() {
+    return [
+      'collection-type',
+      'collection-fields',
+      'collection-view',
+      'collection-view-params',
+      'collection-page-size',
+      'collection-page-offset',
+      'type-alias',
+      'hide-error-logs'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isReady) return;
+    if (this.collection && name === 'collection-page-offset') {
+      let newOffset = Number(newValue);
+      if (newOffset !== this.collection.meta.pageOffset) {
+        this.collection.fetchPage(newOffset);
+      }
+      this.updatePageNumberElements();
+      this.updatePageButtons();
+    } else {
+      this.render();
+    }
+  }
+
+  updatePageNumberElements() {
+    if (!this.collection) return;
+    let currentPageElements = this.shadowRoot.querySelector('slot[name="page-number"]').assignedElements();
+    let pageNumber = Math.floor(this.collection.meta.pageOffset / this.collection.meta.pageSize + 1);
+    for (let element of currentPageElements) {
+      if (element.nodeName === 'INPUT') {
+        element.value = pageNumber;
+      } else {
+        element.innerHTML = pageNumber;
+      }
+    }
+  }
+
+  updatePageButtons() {
+    if (this.collection) {
+      let previousPageElements = this.shadowRoot.querySelector('slot[name="previous-page"]').assignedElements();
+      let nextPageElements = this.shadowRoot.querySelector('slot[name="next-page"]').assignedElements();
+      if (this.collection.meta.pageOffset <= 0) {
+        for (let element of previousPageElements) {
+          element.setAttribute('disabled', '');
+        }
+      } else {
+        for (let element of previousPageElements) {
+          element.removeAttribute('disabled');
+        }
+      }
+      if (this.collection.meta.isLastPage) {
+        for (let element of nextPageElements) {
+          element.setAttribute('disabled', '');
+        }
+      } else {
+        for (let element of nextPageElements) {
+          element.removeAttribute('disabled');
+        }
+      }
+    }
+  }
+
+  renderReduction() {
+    if (!this.collection || !this.collection.isLoaded) return;
+    let viewportNode = this.shadowRoot.querySelector('slot[name="viewport"]').assignedNodes()[0];
+    if (!viewportNode) return;
+
+    let itemTemplate = this.shadowRoot.querySelector('slot[name="item"]').assignedNodes()[0];
+    let noItemTemplate = this.shadowRoot.querySelector('slot[name="no-item"]').assignedNodes()[0];
+
+    if (noItemTemplate && !this.collection.value.length) {
+      viewportNode.innerHTML = noItemTemplate.innerHTML;
+    } else if (itemTemplate) {
+      let type = this.getAttribute('type-alias') || this.collection.type;
+      let itemString = renderTemplate(
+        itemTemplate.innerHTML,
+        { [type]: this.collection.value }
+      );
+      viewportNode.innerHTML = itemString;
+    }
+  }
+
+  render() {
+    let collectionType = this.getAttribute('collection-type');
+    let collectionFields = this.getAttribute('collection-fields') || '';
+    let collectionView = this.getAttribute('collection-view');
+    let collectionPageSize = this.getAttribute('collection-page-size');
+    let collectionViewParams = this.getAttribute('collection-view-params') || '';
+    let collectionPageOffset = this.getAttribute('collection-page-offset');
+    let hideErrorLogs = this.hasAttribute('hide-error-logs');
+    let collectionReloadDelay = Number(
+      this.getAttribute('collection-reload-delay') || DEFAULT_RELOAD_DELAY
+    );
+    let viewParams = Object.fromEntries(
+      collectionViewParams.split(',')
+      .map(pair => pair.split('='))
+      .filter(([field]) => field)
+    );
+    if (this.collection) this.collection.destroy();
+
+    this.collection = new AGCollection({
+      socket: this.socket,
+      type: collectionType,
+      fields: collectionFields.split(',').map(field => field.trim()).filter(field => field),
+      view: collectionView,
+      viewParams,
+      pageSize: Number(collectionPageSize || 10),
+      pageOffset: Number(collectionPageOffset || 0),
+      changeReloadDelay: collectionReloadDelay
+    });
+
+    this.shadowRoot.innerHTML = `
+      <slot name="item"></slot>
+      <slot name="no-item"></slot>
+      <slot name="viewport"></slot>
+      <slot name="previous-page"></slot>
+      <slot name="page-number"></slot>
+      <slot name="next-page"></slot>
+    `;
+
+    let previousPageSlot = this.shadowRoot.querySelector('slot[name="previous-page"]');
+    previousPageSlot.addEventListener('click', () => {
+      this.goToPreviousPage();
+    });
+
+    let nextPageSlot = this.shadowRoot.querySelector('slot[name="next-page"]');
+    nextPageSlot.addEventListener('click', () => {
+      this.goToNextPage();
+    });
+
+    this.updatePageNumberElements();
+    this.updatePageButtons();
+
+    (async () => {
+      await this.collection.listener('load').once();
+      if (!this.collection.value.length) {
+        this.renderReduction();
+      }
+      this.setAttribute('is-loaded', '');
+      this.dispatchEvent(new CustomEvent('load', { bubbles: true }));
+    })();
+
+    (async () => {
+      for await (let event of this.collection.listener('change')) {
+        this.renderReduction();
+        this.updatePageButtons();
+      }
+    })();
+
+    if (!hideErrorLogs) {
+      (async () => {
+        for await (let { error } of this.collection.listener('error')) {
+          console.error(
+            `Collection reducer encountered an error: ${error.message}`
+          );
+        }
+      })();
+    }
+  }
+}
+
+window.customElements.define('collection-reducer', CollectionReducer);

package/package.json

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

package/socket.js

@@ -88,13 +88,14 @@ export class SocketProvider extends HTMLElement {
   getSocket() {
     if (this.saasufySocket) {
       let sanitizedURL = this.getSanitizedURL();
-      if (sanitizedURL && this.saasufySocket.uri() !== sanitizedURL) {
+      if (this.lastSaasufySocketURL !== sanitizedURL) {
         this.saasufySocket.connect(
           this.getSocketOptions()
         );
       } else {
         this.saasufySocket.connect();
       }
+      this.lastSaasufySocketURL = sanitizedURL;
       return this.saasufySocket;
     }
     return this.createSocket();
@@ -103,6 +104,7 @@ export class SocketProvider extends HTMLElement {
   createSocket() {
     let socketOptions = this.getSocketOptions();
     this.saasufySocket = create(socketOptions);
+    this.lastSaasufySocketURL = this.getSanitizedURL();
 
     return this.saasufySocket;
   }

package/utils.js

@@ -167,6 +167,9 @@ let templateFormatters = {
   trim: (value) => String(value).trim(),
   fallback: (...args) => {
     return args.filter(arg => arg)[0];
+  },
+  joinFields: (list, field, sep) => {
+    return list.map(item => item[field]).join(sep);
   }
 };