saasufy-components 1.0.2 → 1.0.4

package/README.md

@@ -1,2 +1,38 @@
-# components
+# Saasufy Components
 Components for Saasufy
+
+## How to use
+
+Coming soon.
+
+## Components
+
+### 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.
+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.
+
+### model-input
+
+Used for displaying and editing a field of a model instance in real time.
+
+### confirm-modal
+
+A modal component to prompt the user for confirmation before performing sensitive operations.
+
+### model-text
+
+Used to displaying a field of a model instance in real time.
+
+### overlay-modal
+
+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.

package/collection-browser.js

@@ -9,19 +9,78 @@ class CollectionBrowser extends HTMLElement {
     super();
     this.attachShadow({ mode: 'open' });
     this.socket = getSocket();
+
+    this.handleShowModalEvent = (event) => {
+      let modal = this.shadowRoot.querySelector('slot[name="modal"]').assignedNodes()[0];
+      modal.show(event.detail.message, event.detail.callback);
+    };
+
+    this.handleCRUDCreateEvent = (event) => {
+      if (this.collection) {
+        this.collection.create(event.detail);
+      }
+    };
+
+    this.handleCRUDDeleteEvent = (event) => {
+      if (this.collection) {
+        this.collection.delete(event.detail);
+      }
+    };
+
+    this.handleGoToPreviousPageEvent = () => {
+      this.goToPreviousPage();
+    };
+
+    this.handleGoToNextPageEvent = () => {
+      this.goToNextPage();
+    };
+
+    this.handleGoToPageEvent = (event) => {
+      this.goToPage((event.detail || {}).offset);
+    };
+
+    this.handleSlotChangeEvent = () => {
+      this.renderTable();
+    };
   }
 
   connectedCallback() {
     this.isReady = true;
-    this.shadowRoot.addEventListener('slotchange', () => this.renderTable());
-    this.addEventListener('showModal', (event) => this.handleShowModalEvent(event));
-    this.addEventListener('crudCreate', (event) => this.handleCRUDCreateEvent(event));
-    this.addEventListener('crudDelete', (event) => this.handleCRUDDeleteEvent(event));
+    this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
+    this.addEventListener('showModal', this.handleShowModalEvent);
+    this.addEventListener('crudCreate', this.handleCRUDCreateEvent);
+    this.addEventListener('crudDelete', this.handleCRUDDeleteEvent);
+    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('showModal', this.handleShowModalEvent);
+    this.removeEventListener('crudCreate', this.handleCRUDCreateEvent);
+    this.removeEventListener('crudDelete', this.handleCRUDDeleteEvent);
+    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() {
@@ -30,13 +89,61 @@ class CollectionBrowser extends HTMLElement {
       'collection-fields',
       'collection-view',
       'collection-view-params',
-      'collection-page-size'
+      'collection-page-size',
+      'collection-page-offset'
     ];
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
     if (!this.isReady) return;
-    this.render();
+    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');
+        }
+      }
+    }
   }
 
   renderTable() {
@@ -64,29 +171,13 @@ class CollectionBrowser extends HTMLElement {
     }
   }
 
-  handleShowModalEvent(event) {
-    let modal = this.shadowRoot.querySelector('slot[name="modal"]').assignedNodes()[0];
-    modal.show(event.detail.message, event.detail.callback);
-  }
-
-  handleCRUDCreateEvent(event) {
-    if (this.collection) {
-      this.collection.create(event.detail);
-    }
-  }
-
-  handleCRUDDeleteEvent(event) {
-    if (this.collection) {
-      this.collection.delete(event.detail);
-    }
-  }
-
   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 collectionReloadDelay = Number(
       this.getAttribute('collection-reload-delay') || DEFAULT_RELOAD_DELAY
     );
@@ -100,10 +191,32 @@ class CollectionBrowser extends HTMLElement {
       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="list"></slot><slot name="modal"></slot>';
+    this.shadowRoot.innerHTML = `
+      <slot name="item"></slot>
+      <slot name="no-item"></slot>
+      <slot name="list"></slot>
+      <slot name="previous-page"></slot>
+      <slot name="page-number"></slot>
+      <slot name="next-page"></slot>
+      <slot name="modal"></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();
@@ -117,6 +230,7 @@ class CollectionBrowser extends HTMLElement {
     (async () => {
       for await (let event of this.collection.listener('change')) {
         this.renderTable();
+        this.updatePageButtons();
       }
     })();
   }

package/model-input.js

@@ -1,5 +1,5 @@
 import { getSocket } from './socket.js';
-import { getSafeHTML } from './utils.js';
+import { getSafeHTML, debouncer } from './utils.js';
 import AGModel from '/node_modules/ag-model/ag-model.js';
 
 class ModelInput extends HTMLElement {
@@ -30,6 +30,7 @@ class ModelInput extends HTMLElement {
       'model-type',
       'model-id',
       'model-field',
+      'debounce-delay',
       'options',
       'height'
     ];
@@ -199,38 +200,21 @@ class ModelInput extends HTMLElement {
       messageContainerElement.classList.add('hidden');
     };
 
-    let onInputChange = async (event) => {
-      if (event.target.value === String(model.value[fieldName])) return;
-      try {
-        if (inputElement.type === 'checkbox') {
-          await model.update(fieldName, !!inputElement.checked);
-          inputElement.classList.remove(errorStyleClass);
-          inputElement.classList.add(successStyleClass);
-          hideErrorMessage(fieldName);
-          return;
-        }
-        if (event.target.value === '') {
-          await model.delete(fieldName);
-        } else {
-          let targetValue = inputElement.type === 'number' ?
-            Number(event.target.value) : event.target.value;
-          await model.update(fieldName, targetValue);
-        }
-        inputElement.classList.remove(errorStyleClass);
-        inputElement.classList.add(successStyleClass);
-        hideErrorMessage(fieldName);
-      } catch (error) {
-        inputElement.classList.add(errorStyleClass);
-        inputElement.classList.remove(successStyleClass);
-        showErrorMessage(fieldName, error.message);
-      }
-    };
-    inputElement.addEventListener('change', onInputChange);
+    let debounceDelay = this.getAttribute('debounce-delay');
+    debounceDelay = debounceDelay ? Number(debounceDelay) : null;
+    let debounce = debouncer();
 
-    let onInputKeyUp;
-    if (inputElement.type !== 'checkbox') {
-      onInputKeyUp = async (event) => {
+    let onInputChange = (event) => {
+      if (event.target.value === String(model.value[fieldName])) return;
+      debounce(async () => {
         try {
+          if (inputElement.type === 'checkbox') {
+            await model.update(fieldName, !!inputElement.checked);
+            inputElement.classList.remove(errorStyleClass);
+            inputElement.classList.add(successStyleClass);
+            hideErrorMessage(fieldName);
+            return;
+          }
           if (event.target.value === '') {
             await model.delete(fieldName);
           } else {
@@ -246,6 +230,31 @@ class ModelInput extends HTMLElement {
           inputElement.classList.remove(successStyleClass);
           showErrorMessage(fieldName, error.message);
         }
+      }, debounceDelay);
+    };
+    inputElement.addEventListener('change', onInputChange);
+
+    let onInputKeyUp;
+    if (inputElement.type !== 'checkbox') {
+      onInputKeyUp = async (event) => {
+        debounce(async () => {
+          try {
+            if (event.target.value === '') {
+              await model.delete(fieldName);
+            } else {
+              let targetValue = inputElement.type === 'number' ?
+              Number(event.target.value) : event.target.value;
+              await model.update(fieldName, targetValue);
+            }
+            inputElement.classList.remove(errorStyleClass);
+            inputElement.classList.add(successStyleClass);
+            hideErrorMessage(fieldName);
+          } catch (error) {
+            inputElement.classList.add(errorStyleClass);
+            inputElement.classList.remove(successStyleClass);
+            showErrorMessage(fieldName, error.message);
+          }
+        }, debounceDelay);
       };
       inputElement.addEventListener('keyup', onInputKeyUp);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
   "author": "Jonathan Gros-Dubois",
   "license": "MIT",
   "dependencies": {
-    "ag-collection": "^3.1.0",
+    "ag-collection": "^3.2.0",
     "ag-model": "^1.3.5",
     "socketcluster-client": "^18.3.0"
   },