saasufy-components 7.3.2 → 7.5.0

package/README.md

@@ -445,6 +445,7 @@ OR (with confirmation step)
 - `model-id` (required): Specifies the ID of the resource to delete from the parent collection when this component is activated. This can be achieved by invoking either the `deleteItem()` or `confirmDeleteItem()` function from inside an event handler. The example above shows how to achieve deletion via the `onclick` event. You can either invoke `deleteItem()` to delete the resource immediately or you can invoke `confirmDeleteItem()` to require additional confirmation prior to deletion.
 - `onclick` (required): The logic to execute to delete the item. Should be either `deleteItem()` or `confirmDeleteItem()`.
 - `confirm-message`: The confirmation message to show the user when this component's `confirmDeleteItem()` function is invoked.
+- `model-field`: If specified, this attribute can be used to delete a single field of a model instance, instead of the whole instance.
 
 If `confirmDeleteItem()` is used, then the parent `collection-viewer` must have a `confirm-modal` element slotted into it as shown here:
 

package/collection-deleter.js

@@ -38,6 +38,29 @@ class CollectionDeleter extends HTMLElement {
       })
     )
   }
+
+  deleteItemField() {
+    let modelId = this.getAttribute('model-id');
+    let modelField = this.getAttribute('model-field');
+    this.dispatchEvent(
+      new CustomEvent('crudDelete', { detail: { id: modelId, field: modelField }, bubbles: true })
+    );
+  }
+
+  confirmDeleteItemField() {
+    let confirmMessage = this.getAttribute('confirm-message');
+    this.dispatchEvent(
+      new CustomEvent('showModal', {
+        detail: {
+          message: confirmMessage,
+          callback: () => {
+            this.deleteItemField();
+          }
+        },
+        bubbles: true
+      })
+    )
+  }
 }
 
 window.customElements.define('collection-deleter', CollectionDeleter);

package/collection-viewer.js

@@ -37,10 +37,40 @@ class CollectionViewer extends SocketConsumer {
       }
     };
 
+    this.handleCRUDUpdateEvent = async (event) => {
+      event.stopPropagation();
+      if (this.collection) {
+        let detail = event.detail || {};
+        let modelId = detail.id;
+        let modelValue = detail.value;
+        await this.collection.update(modelId, modelValue);
+        this.dispatchEvent(
+          new CustomEvent('collectionUpdate', {
+            detail: {
+              type: this.collection.type,
+              id: modelId,
+              value: modelValue
+            },
+            bubbles: true
+          })
+        );
+        if (this.hasAttribute('collection-disable-realtime') && this.collection) {
+          this.collection.reloadCurrentPage();
+        }
+      }
+    };
+
     this.handleCRUDDeleteEvent = async (event) => {
       event.stopPropagation();
       if (this.collection) {
-        await this.collection.delete(event.detail);
+        let detail = event.detail || {};
+        let modelId = detail.id;
+        let modelField = detail.field;
+        if (modelId != null) {
+          await this.collection.delete(modelId, modelField);
+        } else {
+          await this.collection.delete(event.detail);
+        }
         this.dispatchEvent(
           new CustomEvent('collectionDelete', {
             detail: {
@@ -83,6 +113,7 @@ class CollectionViewer extends SocketConsumer {
     this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
     this.addEventListener('showModal', this.handleShowModalEvent);
     this.addEventListener('crudCreate', this.handleCRUDCreateEvent);
+    this.addEventListener('crudUpdate', this.handleCRUDUpdateEvent);
     this.addEventListener('crudDelete', this.handleCRUDDeleteEvent);
     this.addEventListener('goToPreviousPage', this.handleGoToPreviousPageEvent);
     this.addEventListener('goToNextPage', this.handleGoToNextPageEvent);
@@ -95,6 +126,7 @@ class CollectionViewer extends SocketConsumer {
     this.shadowRoot.removeEventListener('slotchange', this.handleSlotChangeEvent);
     this.removeEventListener('showModal', this.handleShowModalEvent);
     this.removeEventListener('crudCreate', this.handleCRUDCreateEvent);
+    this.removeEventListener('crudUpdate', this.handleCRUDUpdateEvent);
     this.removeEventListener('crudDelete', this.handleCRUDDeleteEvent);
     this.removeEventListener('goToPreviousPage', this.handleGoToPreviousPageEvent);
     this.removeEventListener('goToNextPage', this.handleGoToNextPageEvent);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "7.3.2",
+  "version": "7.5.0",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {
@@ -17,7 +17,7 @@
   "author": "Jonathan Gros-Dubois",
   "license": "MIT",
   "dependencies": {
-    "ag-collection": "^5.3.0",
+    "ag-collection": "^5.3.1",
     "ag-model": "^3.1.0",
     "capitalisk-auth-client": "^1.5.1",
     "socketcluster-client": "^19.2.1",