saasufy-components 1.13.0 → 1.14.1

package/README.md

@@ -12,16 +12,21 @@ Coming soon.
 A top level component which connects to your Saasufy service and inside which you can place other components which depends on Saasufy data.
 A Saasufy component which integrates with data from Saasufy is known as a `socket-consumer` and must always be placed inside a `socket-provider` element (although it does not have to be a direct child).
 
-### collection-adder
-
-A form component for inserting data into collections.
-
 ### collection-browser
 
 Used for rendering collections as lists, tables or other sequences based on a specific view using a template.
 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 by listening for events from child components.
 
+### collection-adder
+
+A form component for inserting data into collections.
+
+### 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).
+It supports either immediate deletion or deletion upon confirmation; in the latter case, the parent `collection-browser` must have a `confirm-modal` component slotted into its `modal` slot.
+
 ### 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.
@@ -54,6 +59,12 @@ Once a user is authenticated, they will be able to access restricted data (as sp
 It's also possible to specify a `success-location-hash` attribute to trigger a client-side redirect upon successful authentication.
 The change in the location hash can then be detected by an `app-router` to switch to a different page upon successful login.
 
+### log-out
+
+A component which can be placed inside a `socket-provider` to deauthenticate the socket (e.g. on click).
+
+Example usage: `<log-out onclick="logOut()"><a href="javascript:void(0)">Log out</a></log-out>`
+
 ### confirm-modal
 
 A modal component to prompt the user for confirmation before performing sensitive operations.

package/app-router.js

@@ -8,6 +8,7 @@ export class AppRouter extends SocketConsumer {
     super();
     this.attachShadow({ mode: 'open' });
 
+    this.isReady = false;
     this.pages = {};
     this.pageRouteInfos = [];
     this.debounce = debouncer();

package/collection-adder.js

@@ -15,6 +15,7 @@ class CollectionAdder extends SocketConsumer {
     this.fieldPartsRegExp = /("[^"]*"|'[^']*'|\([^)]*\)|[^,()"']+)+/g;
     this.inputTypeWithParamsRegExp = /^([^()]*)(\(([^)]*)\))?/;
     this.quotedContentRegExp = /^\s*["']?(.*?)["']?\s*$/;
+    this.isReady = false;
   }
 
   connectedCallback() {

package/collection-browser.js

@@ -7,34 +7,42 @@ const DEFAULT_RELOAD_DELAY = 0;
 class CollectionBrowser extends SocketConsumer {
   constructor() {
     super();
+    this.isReady = false;
+    this.isStale = true;
     this.attachShadow({ mode: 'open' });
 
     this.handleShowModalEvent = (event) => {
+      event.stopPropagation();
       let modal = this.shadowRoot.querySelector('slot[name="modal"]').assignedNodes()[0];
       modal.show(event.detail.message, event.detail.callback);
     };
 
     this.handleCRUDCreateEvent = (event) => {
+      event.stopPropagation();
       if (this.collection) {
         this.collection.create(event.detail);
       }
     };
 
     this.handleCRUDDeleteEvent = (event) => {
+      event.stopPropagation();
       if (this.collection) {
         this.collection.delete(event.detail);
       }
     };
 
-    this.handleGoToPreviousPageEvent = () => {
+    this.handleGoToPreviousPageEvent = (event) => {
+      event.stopPropagation();
       this.goToPreviousPage();
     };
 
-    this.handleGoToNextPageEvent = () => {
+    this.handleGoToNextPageEvent = (event) => {
+      event.stopPropagation();
       this.goToNextPage();
     };
 
     this.handleGoToPageEvent = (event) => {
+      event.stopPropagation();
       this.goToPage((event.detail || {}).offset);
     };
 
@@ -69,12 +77,14 @@ class CollectionBrowser extends SocketConsumer {
 
   goToPreviousPage() {
     if (!this.collection) return;
+    this.isStale = true;
     this.collection.fetchPreviousPage();
     this.setAttribute('collection-page-offset', this.collection.meta.pageOffset);
   }
 
   goToNextPage() {
     if (!this.collection) return;
+    this.isStale = true;
     this.collection.fetchNextPage();
     this.setAttribute('collection-page-offset', this.collection.meta.pageOffset);
   }
@@ -91,6 +101,7 @@ class CollectionBrowser extends SocketConsumer {
       'collection-view-params',
       'collection-page-size',
       'collection-page-offset',
+      'max-show-loader',
       'type-alias',
       'hide-error-logs'
     ];
@@ -101,6 +112,7 @@ class CollectionBrowser extends SocketConsumer {
     if (this.collection && name === 'collection-page-offset') {
       let newOffset = Number(newValue);
       if (newOffset !== this.collection.meta.pageOffset) {
+        this.isStale = true;
         this.collection.fetchPage(newOffset);
       }
       this.updatePageNumberElements();
@@ -149,8 +161,23 @@ class CollectionBrowser extends SocketConsumer {
   }
 
   renderList() {
-    if (!this.collection || !this.collection.isLoaded) return;
-    let viewportNode = this.shadowRoot.querySelector('slot[name="viewport"]').assignedNodes()[0];
+    let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
+    let loaderSlot = this.shadowRoot.querySelector('slot[name="loader"]');
+    let hasLoaders = !!loaderSlot.assignedNodes().length;
+
+    if (!this.collection || !this.collection.isLoaded) {
+      if (hasLoaders && (this.isStale || this.hasAttribute('max-show-loader'))) {
+        viewportSlot.classList.add('hidden');
+        loaderSlot.classList.remove('hidden');
+      }
+      return;
+    }
+    this.isStale = false;
+
+    loaderSlot.classList.add('hidden');
+    viewportSlot.classList.remove('hidden');
+
+    let viewportNode = viewportSlot.assignedNodes()[0];
     if (!viewportNode) return;
 
     let itemTemplate = this.shadowRoot.querySelector('slot[name="item"]').assignedNodes()[0];
@@ -200,6 +227,7 @@ class CollectionBrowser extends SocketConsumer {
       .filter(([field]) => field)
     );
     if (this.collection) this.collection.destroy();
+    this.isStale = true;
 
     this.collection = new AGCollection({
       socket: this.socket,
@@ -213,6 +241,12 @@ class CollectionBrowser extends SocketConsumer {
     });
 
     this.shadowRoot.innerHTML = `
+      <style>
+        .hidden {
+          display: none;
+        }
+      </style>
+      <slot name="loader"></slot>
       <slot name="item"></slot>
       <slot name="no-item"></slot>
       <slot name="first-item"></slot>

package/collection-deleter.js

@@ -0,0 +1,43 @@
+class CollectionDeleter extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  static get observedAttributes() {
+    return [
+      'model-id',
+      'confirm-message'
+    ];
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <slot></slot>
+    `;
+  }
+
+  deleteItem() {
+    let modelId = this.getAttribute('model-id');
+    this.dispatchEvent(
+      new CustomEvent('crudDelete', { detail: modelId, bubbles: true })
+    );
+  }
+
+  confirmDeleteItem() {
+    let confirmMessage = this.getAttribute('confirm-message');
+    this.dispatchEvent(
+      new CustomEvent('showModal', {
+        detail: {
+          message: confirmMessage,
+          callback: () => {
+            this.deleteItem();
+          }
+        },
+        bubbles: true
+      })
+    )
+  }
+}
+
+window.customElements.define('collection-deleter', CollectionDeleter);

package/collection-reducer.js

@@ -24,6 +24,7 @@ class CollectionReducer extends SocketConsumer {
     this.handleSlotChangeEvent = () => {
       this.renderReduction();
     };
+    this.isReady = false;
   }
 
   connectedCallback() {
@@ -126,8 +127,22 @@ class CollectionReducer extends SocketConsumer {
   }
 
   renderReduction() {
-    if (!this.collection || !this.collection.isLoaded) return;
-    let viewportNode = this.shadowRoot.querySelector('slot[name="viewport"]').assignedNodes()[0];
+    let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
+    let loaderSlot = this.shadowRoot.querySelector('slot[name="loader"]');
+    let hasLoaders = !!loaderSlot.assignedNodes().length;
+
+    if (!this.collection || !this.collection.isLoaded) {
+      if (hasLoaders) {
+        viewportSlot.classList.add('hidden');
+        loaderSlot.classList.remove('hidden');
+      }
+      return;
+    }
+
+    loaderSlot.classList.add('hidden');
+    viewportSlot.classList.remove('hidden');
+
+    let viewportNode = viewportSlot.assignedNodes()[0];
     if (!viewportNode) return;
 
     let itemTemplate = this.shadowRoot.querySelector('slot[name="item"]').assignedNodes()[0];
@@ -176,6 +191,12 @@ class CollectionReducer extends SocketConsumer {
     });
 
     this.shadowRoot.innerHTML = `
+      <style>
+        .hidden {
+          display: none;
+        }
+      </style>
+      <slot name="loader"></slot>
       <slot name="item"></slot>
       <slot name="no-item"></slot>
       <slot name="viewport"></slot>

package/confirm-modal.js

@@ -4,6 +4,7 @@ class ConfirmModal extends HTMLElement {
   constructor() {
     super();
     this.hidden = true;
+    this.isReady = false;
   }
 
   connectedCallback() {

package/log-in-form.js

@@ -6,6 +6,7 @@ const DEFAULT_AUTH_TIMEOUT = 10000;
 class LogInForm extends SocketConsumer {
   constructor() {
     super();
+    this.isReady = false;
   }
 
   connectedCallback() {

package/log-out.js

@@ -0,0 +1,9 @@
+import { SocketConsumer } from './socket.js';
+
+class LogOut extends SocketConsumer {
+  logOut() {
+    this.getSocket().deauthenticate();
+  }
+}
+
+window.customElements.define('log-out', LogOut);

package/model-input.js

@@ -139,12 +139,12 @@ class ModelInput extends SocketConsumer {
     if (type === 'select') {
       if (options) {
         let optionElements = options
-        .split(',')
-        .map((option) => {
-          return `<option value="${option}">${option}</option>`;
-        })
-        .join('');
-        this.inputElement.innerHTML = optionElements;
+          .split(',')
+          .map((option) => {
+            return `<option value="${option}">${option}</option>`;
+          })
+          .join('');
+          this.inputElement.innerHTML = optionElements;
       }
     } else if (elementType === 'input') {
       if (inputList) {

package/model-text.js

@@ -3,6 +3,11 @@ import { toSafeHTML } from './utils.js';
 import AGModel from '/node_modules/ag-model/ag-model.js';
 
 class ModelText extends SocketConsumer {
+  constructor() {
+    super();
+    this.isReady = false;
+  }
+
   connectedCallback() {
     this.isReady = true;
     this.destroy = () => {};

package/model-viewer.js

@@ -10,6 +10,7 @@ class ModelViewer extends SocketConsumer {
     this.handleSlotChangeEvent = () => {
       this.renderItem();
     };
+    this.isReady = false;
   }
 
   connectedCallback() {
@@ -45,8 +46,22 @@ class ModelViewer extends SocketConsumer {
   }
 
   renderItem() {
-    if (!this.model || !this.model.isLoaded) return;
-    let viewportNode = this.shadowRoot.querySelector('slot[name="viewport"]').assignedNodes()[0];
+    let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
+    let loaderSlot = this.shadowRoot.querySelector('slot[name="loader"]');
+    let hasLoaders = !!loaderSlot.assignedNodes().length;
+
+    if (!this.model || !this.model.isLoaded) {
+      if (hasLoaders) {
+        viewportSlot.classList.add('hidden');
+        loaderSlot.classList.remove('hidden');
+      }
+      return;
+    }
+
+    loaderSlot.classList.add('hidden');
+    viewportSlot.classList.remove('hidden');
+
+    let viewportNode = viewportSlot.assignedNodes()[0];
     if (!viewportNode) return;
 
     let itemTemplate = this.shadowRoot.querySelector('slot[name="item"]').assignedNodes()[0];
@@ -82,6 +97,12 @@ class ModelViewer extends SocketConsumer {
     });
 
     this.shadowRoot.innerHTML = `
+      <style>
+        .hidden {
+          display: none;
+        }
+      </style>
+      <slot name="loader"></slot>
       <slot name="item"></slot>
       <slot name="no-item"></slot>
       <slot name="viewport"></slot>

package/package.json

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

package/render-group.js

@@ -16,12 +16,7 @@ class RenderGroup extends HTMLElement {
     };
   }
 
-  disconnectedCallback() {
-    this.removeEventListener('load', this.loadHandler);
-  }
-
   connectedCallback() {
-    this.isReady = true;
     this.loadedElements = {};
     let hasPending = !!this.getWaitFor().length;
     this.shadowRoot.innerHTML = `
@@ -30,16 +25,23 @@ class RenderGroup extends HTMLElement {
           display: none;
         }
       </style>
-      <slot${hasPending ? ' class="hidden"': ''}></slot>
+      <slot name="loader"></slot>
+      <slot id="main-slot"${hasPending ? ' class="hidden"': ''}></slot>
     `;
     if (hasPending) {
       this.addEventListener('load', this.loadHandler);
     }
   }
 
+  disconnectedCallback() {
+    this.removeEventListener('load', this.loadHandler);
+  }
+
   showSlottedElements() {
-    let slot = this.shadowRoot.querySelector('slot');
-    slot.classList.remove('hidden');
+    let loaderSlot = this.shadowRoot.querySelector('slot[name="loader"]');
+    loaderSlot.classList.add('hidden');
+    let mainSlot = this.shadowRoot.querySelector('#main-slot');
+    mainSlot.classList.remove('hidden');
   }
 
   getWaitFor() {
@@ -49,10 +51,6 @@ class RenderGroup extends HTMLElement {
     }
     return waitForString.split(',').map(id => id.trim());
   }
-
-  attributeChangedCallback(name, oldValue, newValue) {
-    if (!this.isReady) return;
-  }
 }
 
 window.customElements.define('render-group', RenderGroup);