saasufy-components 7.12.0 → 7.13.0

package/README.md

@@ -312,6 +312,7 @@ In addition to the slots shown above, the `collection-viewer` also supports the
 - `page-number`: This is typically a `div` element to display the current page number. Alternatively, it can be an `input-provider` element to allow the user to manually type in the page number.
 - `first-item`: This should be a `template` element. It can be used to inject an element just above the first record. This can be useful to render the `collection-viewer` as a table with a heading above table rows.
 - `last-item`: This should be a `template` element. It can be used to inject an element just after the last record.
+- `error`: This can be used to display an error message if the required data cannot be loaded. The `Error` object can be accessed inside the template via the syntax: `$CollectionName.error` (substitute `CollectionName` with your `collection-type` or, if set, your `type-alias` preceded by a dollar sign). For example, the error message for a `Chat` collection will be `$Chat.error.message`.
 
 **Attributes**
 

package/collection-reducer.js

@@ -76,8 +76,7 @@ class CollectionReducer extends SocketConsumer {
       'collection-page-offset',
       'collection-get-count',
       'max-show-loader',
-      'type-alias',
-      'hide-error-logs'
+      'type-alias'
     ];
   }
 
@@ -136,6 +135,27 @@ class CollectionReducer extends SocketConsumer {
     }
   }
 
+  renderError(error) {
+    let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
+    if (!viewportSlot) return;
+
+    let viewportNode = viewportSlot.assignedNodes()[0];
+    if (!viewportNode) return;
+
+    this.activeLoader = null;
+
+    let errorTemplate = this.shadowRoot.querySelector('slot[name="error"]').assignedNodes()[0];
+    if (errorTemplate) {
+      let type = this.getAttribute('type-alias') || this.getAttribute('collection-type');
+      let errorItemString = renderTemplate(
+        errorTemplate.innerHTML,
+        { [`$${type}`]: { error } },
+        this.socket
+      );
+      viewportNode.innerHTML = errorItemString;
+    }
+  }
+
   renderReduction() {
     let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
     if (!viewportSlot) return;
@@ -192,7 +212,7 @@ class CollectionReducer extends SocketConsumer {
     let collectionPageSize = this.getAttribute('collection-page-size');
     let collectionPageOffset = this.getAttribute('collection-page-offset');
     let collectionGetCount = this.hasAttribute('collection-get-count');
-    let hideErrorLogs = this.hasAttribute('hide-error-logs');
+
     let collectionReloadDelay = Number(
       this.getAttribute('collection-reload-delay') || DEFAULT_RELOAD_DELAY
     );
@@ -217,6 +237,7 @@ class CollectionReducer extends SocketConsumer {
       <slot name="loader"></slot>
       <slot name="item"></slot>
       <slot name="no-item"></slot>
+      <slot name="error"></slot>
       <slot name="viewport"></slot>
       <slot name="previous-page"></slot>
       <slot name="page-number"></slot>
@@ -252,15 +273,17 @@ class CollectionReducer extends SocketConsumer {
       }
     })();
 
-    if (!hideErrorLogs) {
-      (async () => {
-        for await (let { error } of this.collection.listener('error')) {
+    (async () => {
+      for await (let { error } of this.collection.listener('error')) {
+        let hideErrorLogs = this.hasAttribute('hide-error-logs');
+        if (!hideErrorLogs) {
           console.error(
             `Collection reducer encountered an error: ${error.message}`
           );
         }
-      })();
-    }
+        this.renderError(error);
+      }
+    })();
   }
 }
 

package/collection-viewer.js

@@ -165,8 +165,7 @@ class CollectionViewer extends SocketConsumer {
       'collection-disable-realtime',
       'auto-reset-page-offset',
       'max-show-loader',
-      'type-alias',
-      'hide-error-logs'
+      'type-alias'
     ];
   }
 
@@ -240,6 +239,27 @@ class CollectionViewer extends SocketConsumer {
     }
   }
 
+  renderError(error) {
+    let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
+    if (!viewportSlot) return;
+
+    let viewportNode = viewportSlot.assignedNodes()[0];
+    if (!viewportNode) return;
+
+    this.activeLoader = null;
+
+    let errorTemplate = this.shadowRoot.querySelector('slot[name="error"]').assignedNodes()[0];
+    if (errorTemplate) {
+      let type = this.getAttribute('type-alias') || this.getAttribute('collection-type');
+      let errorItemString = renderTemplate(
+        errorTemplate.innerHTML,
+        { [`$${type}`]: { error } },
+        this.socket
+      );
+      viewportNode.innerHTML = errorItemString;
+    }
+  }
+
   renderList() {
     let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
     if (!viewportSlot) return;
@@ -330,7 +350,6 @@ class CollectionViewer extends SocketConsumer {
     let collectionPageOffset = this.getAttribute('collection-page-offset');
     let collectionGetCount = this.hasAttribute('collection-get-count');
     let collectionDisableRealtime = this.hasAttribute('collection-disable-realtime');
-    let hideErrorLogs = this.hasAttribute('hide-error-logs');
     let collectionReloadDelay = Number(
       this.getAttribute('collection-reload-delay') || DEFAULT_RELOAD_DELAY
     );
@@ -361,6 +380,7 @@ class CollectionViewer extends SocketConsumer {
       <slot name="loader"></slot>
       <slot name="item"></slot>
       <slot name="no-item"></slot>
+      <slot name="error"></slot>
       <slot name="first-item"></slot>
       <slot name="last-item"></slot>
       <slot name="viewport"></slot>
@@ -399,15 +419,17 @@ class CollectionViewer extends SocketConsumer {
       }
     })();
 
-    if (!hideErrorLogs) {
-      (async () => {
-        for await (let { error } of this.collection.listener('error')) {
+    (async () => {
+      for await (let { error } of this.collection.listener('error')) {
+        let hideErrorLogs = this.hasAttribute('hide-error-logs');
+        if (!hideErrorLogs) {
           console.error(
             `Collection viewer encountered an error: ${error.message}`
           );
         }
-      })();
-    }
+        this.renderError(error);
+      }
+    })();
   }
 }
 

package/model-viewer.js

@@ -35,8 +35,7 @@ class ModelViewer extends SocketConsumer {
       'model-id',
       'model-fields',
       'fields-slice-to',
-      'type-alias',
-      'hide-error-logs'
+      'type-alias'
     ];
   }
 
@@ -52,6 +51,27 @@ class ModelViewer extends SocketConsumer {
     return !!Object.values(otherProps).filter(value => value != null).length;
   }
 
+  renderError(error) {
+    let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
+    if (!viewportSlot) return;
+
+    let viewportNode = viewportSlot.assignedNodes()[0];
+    if (!viewportNode) return;
+
+    this.activeLoader = null;
+
+    let errorTemplate = this.shadowRoot.querySelector('slot[name="error"]').assignedNodes()[0];
+    if (errorTemplate) {
+      let type = this.getAttribute('type-alias') || this.getAttribute('model-type');
+      let errorItemString = renderTemplate(
+        errorTemplate.innerHTML,
+        { [`$${type}`]: { error } },
+        this.socket
+      );
+      viewportNode.innerHTML = errorItemString;
+    }
+  }
+
   renderItem() {
     let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
     if (!viewportSlot) return;
@@ -102,7 +122,6 @@ class ModelViewer extends SocketConsumer {
     let modelId = this.getAttribute('model-id');
     let modelFields = this.getAttribute('model-fields') || '';
     let fieldsSliceTo = this.getAttribute('fields-slice-to') || '';
-    let hideErrorLogs = this.hasAttribute('hide-error-logs');
 
     let {
       fieldValues: sliceToMap
@@ -149,6 +168,7 @@ class ModelViewer extends SocketConsumer {
       <slot name="loader"></slot>
       <slot name="item"></slot>
       <slot name="no-item"></slot>
+      <slot name="error"></slot>
       <slot name="viewport"></slot>
     `;
 
@@ -176,16 +196,18 @@ class ModelViewer extends SocketConsumer {
       }
     })();
 
-    if (!hideErrorLogs) {
-      (async () => {
-        this.modelErrorConsumer = this.model.listener('error').createConsumer();
-        for await (let { error } of this.modelErrorConsumer) {
+    (async () => {
+      this.modelErrorConsumer = this.model.listener('error').createConsumer();
+      for await (let { error } of this.modelErrorConsumer) {
+        let hideErrorLogs = this.hasAttribute('hide-error-logs');
+        if (!hideErrorLogs) {
           console.error(
             `Model viewer encountered an error: ${error.message}`
           );
         }
-      })();
-    }
+        this.renderError(error);
+      }
+    })();
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "7.12.0",
+  "version": "7.13.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -17,8 +17,8 @@
   "author": "Jonathan Gros-Dubois",
   "license": "MIT",
   "dependencies": {
-    "ag-collection": "^5.3.1",
-    "ag-model": "^3.1.0",
+    "ag-collection": "^5.3.4",
+    "ag-model": "^3.1.3",
     "capitalisk-auth-client": "^1.5.1",
     "socketcluster-client": "^19.2.3",
     "uuid": "^8.3.2"

package/styles.css

@@ -215,6 +215,18 @@ collection-viewer > [slot=next-page] {
   gap: 5px;
 }
 
+.container-column {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+}
+
+.container-row {
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+}
+
 .container-vertical {
   display: flex;
   flex-direction: column;