saasufy-components 7.4.0 → 7.6.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

@@ -4,13 +4,6 @@ class CollectionDeleter extends HTMLElement {
     this.attachShadow({ mode: 'open' });
   }
 
-  static get observedAttributes() {
-    return [
-      'model-id',
-      'confirm-message'
-    ];
-  }
-
   connectedCallback() {
     this.shadowRoot.innerHTML = `
       <slot></slot>
@@ -24,19 +17,45 @@ class CollectionDeleter extends HTMLElement {
     );
   }
 
-  confirmDeleteItem() {
-    let confirmMessage = this.getAttribute('confirm-message');
+  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 })
+    );
+  }
+
+  showConfirmModal(deleteField) {
+    let message = this.getAttribute('confirm-message');
+    let title = this.getAttribute('confirm-title');
+    let confirmButtonLabel = this.getAttribute('confirm-button-label');
+    let cancelButtonLabel = this.getAttribute('cancel-button-label');
     this.dispatchEvent(
       new CustomEvent('showModal', {
         detail: {
-          message: confirmMessage,
+          message,
+          title,
+          confirmButtonLabel,
+          cancelButtonLabel,
           callback: () => {
-            this.deleteItem();
+            if (deleteField) {
+              this.deleteItemField();
+            } else {
+              this.deleteItem();
+            }
           }
         },
         bubbles: true
       })
-    )
+    );
+  }
+
+  confirmDeleteItem() {
+    this.showConfirmModal();
+  }
+
+  confirmDeleteItemField() {
+    this.showConfirmModal(true);
   }
 }
 

package/collection-viewer.js

@@ -15,7 +15,8 @@ class CollectionViewer extends SocketConsumer {
     this.handleShowModalEvent = (event) => {
       event.stopPropagation();
       let modal = this.shadowRoot.querySelector('slot[name="modal"]').assignedNodes()[0];
-      modal.show(event.detail.message, event.detail.callback);
+      let { callback, ...confirmOptions } = event.detail;
+      modal.show(confirmOptions, callback);
     };
 
     this.handleCRUDCreateEvent = async (event) => {

package/confirm-modal.js

@@ -21,14 +21,29 @@ class ConfirmModal extends HTMLElement {
     this.render();
   }
 
-  show(message, confirmCallback) {
+  show(options, confirmCallback) {
     let overlayModal = this.querySelector('overlay-modal');
     if (overlayModal) {
       overlayModal.removeAttribute('style');
     }
     this.confirmCallback = confirmCallback;
     this.hidden = false;
-    this.setAttribute('message', message);
+    if (typeof options === 'string') {
+      this.setAttribute('message', options);
+    } else {
+      if (options.title != null) {
+        this.setAttribute('title', options.title);
+      }
+      if (options.confirmButtonLabel != null) {
+        this.setAttribute('confirm-button-label', options.confirmButtonLabel);
+      }
+      if (options.cancelButtonLabel != null) {
+        this.setAttribute('cancel-button-label', options.cancelButtonLabel);
+      }
+      if (options.message != null) {
+        this.setAttribute('message', options.message);
+      }
+    }
   }
 
   render() {

package/package.json

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