feat: new dataset feature refreshOnMutation #215

source/components/datatable/dataset.mjs

@@ -129,6 +129,22 @@ class DataSet extends CustomElement {
                 index: 0,
             },
 
+            features: {
+                /**
+                 * @since 3.70.0
+                 * @type {boolean}
+                 */
+                refreshOnMutation: true,
+            },
+
+            /**
+             * @since 3.70.0
+             * @type {boolean}
+             */
+            refreshOnMutation: {
+                selector: "input, select, textarea"
+            },
+
             data: {},
         });
 
@@ -144,6 +160,21 @@ class DataSet extends CustomElement {
         return "monster-dataset";
     }
 
+    /**
+     * This method is called when the component is created.
+     * @since 3.70.0
+     * @returns {DataSet}
+     */
+    refresh() {
+        // makes sure that handleDataSourceChanges is called
+        this.setOption("data", {});
+        return this;
+    }
+
+    /**
+     *
+     * @returns {Promise<unknown>}
+     */
     write() {
         return new Promise((resolve, reject) => {
             if (!this[datasourceLinkedElementSymbol]) {
@@ -176,7 +207,7 @@ class DataSet extends CustomElement {
                 if (isString(path) && path !== "") {
                     pathWithIndex = path + "." + index;
                 } else {
-					pathWithIndex = index;
+                    pathWithIndex = String(index);
                 }
 
                 const data = this[datasourceLinkedElementSymbol].data;
@@ -211,7 +242,6 @@ class DataSet extends CustomElement {
     [assembleMethodSymbol]() {
         super[assembleMethodSymbol]();
 
-		// initControlReferences.call(self);
         initEventHandler.call(this);
 
         const selector = this.getOption("datasource.selector");
@@ -237,6 +267,11 @@ class DataSet extends CustomElement {
                 handleDataSourceChanges.call(this);
             }),
         );
+        
+        if (this.getOption("features.refreshOnMutation")&&this.getOption("refreshOnMutation.selector")) {
+            initMutationObserver.call(this);
+        }
+		
     }
 
     /**
@@ -277,6 +312,47 @@ function updateOptionsFromArguments(options) {
     }
 }
 
+/**
+ * @private
+ */
+function initMutationObserver() {
+
+    const config = {attributes: false, childList: true, subtree: true};
+
+    const callback = (mutationList, observer) => {
+
+        if (mutationList.length === 0) {
+            return;
+        }
+
+        let doneFlag = false;
+        for (const mutation of mutationList) {
+
+            if (mutation.type === "childList") {
+                for (const node of mutation.addedNodes) {
+                    if(node instanceof HTMLElement && node.matches(this.getOption("refreshOnMutation.selector"))) {
+                        doneFlag = true;
+                        break;
+                    }
+                }
+                
+                if (doneFlag) {
+                    break;
+                }
+            }
+        }
+
+        if (doneFlag) {
+            this.refresh();
+        }
+    };
+
+    const observer = new MutationObserver(callback);
+    observer.observe(this, config);
+
+}
+
+
 /**
  * @private
  * @return {string}