feat: add events to dataset methods #178

playground/bind-with-datasource/index.html

@@ -16,9 +16,12 @@
             Datasource mit fest definieren Daten
         -->
 
-            <monster-datasource-rest id="data1" data-monster-option-write-url="/demo/bind-with-datasource/data.json" data-monster-option-read-url="/demo/bind-with-datasource/data.json"></monster-datasource-rest>
+            <h1>Data Table with datasource</h1>
+            <ul>
+                <li><a href="../">Back to overview</a></li>
+            </ul>
 
-            <h1>Datasets</h1>
+            <monster-datasource-rest id="data1" data-monster-option-write-url="/demo/bind-with-datasource/data.json" data-monster-option-read-url="/demo/bind-with-datasource/data.json"></monster-datasource-rest>
 
             <div style="padding:2px; margin:5px;margin-bottom:20px">
                 <button id="new">+ NEW</button>
@@ -115,7 +118,6 @@
                                 <monster-toggle-switch data-monster-bind="path:data.archived" data-monster-option-values-on="true" data-monster-option-values-off="false"  data-monster-bind-type="boolean" data-monster-attributes="value path:data.archived | ?:true:false "></monster-toggle-switch>
                             </label>
 
-                            <!-- Ckeckbox wird ausgewählt wenn archived den Wert TRUE hat -->
                             <label>Checkbox
                                 <input type="checkbox" value="true" data-monster-bind="path:data.archived" data-monster-bind-type="boolean" data-monster-defaultvalue="false" data-monster-attributes="checked path:data.archived | ?:true: "></label>
 
@@ -140,7 +142,6 @@
                         <div data-monster-replace="path:data.archived ">xx</div>
 
                     </div>
-                </div>
 
             </monster-dataset>
         </monster-overlay>

playground/datatable/index.html

@@ -11,6 +11,13 @@
 <div style="padding:2px; margin:5px;margin-bottom:20px"><a href="/">Back</a></div>
 
 <main>
+
+
+    <h1>Data Table</h1>
+    <ul>
+        <li><a href="../">Back to overview</a></li>
+    </ul>
+
     <monster-host>
 
         <script type="application/json" data-monster-role="translations">

source/components/datatable/datatable.mjs

@@ -10,7 +10,7 @@ import {
     registerCustomElement,
     getSlottedElements,
 } from "../../dom/customelement.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
+import {findTargetElementFromEvent, fireCustomEvent} from "../../dom/events.mjs";
 import {clone} from "../../util/clone.mjs";
 import {
     isString,
@@ -119,6 +119,9 @@ const columnBarElementSymbol = Symbol("columnBarElement");
  * @copyright schukai GmbH
  * @memberOf Monster.Components.Datatable
  * @summary A data table
+ * @fire Monster.Components.Datatable.event:monster-datatable-row-copied
+ * @fire Monster.Components.Datatable.event:monster-datatable-row-removed
+ * @fire Monster.Components.Datatable.event:monster-datatable-row-added
  */
 class DataTable extends CustomElement {
     /**
@@ -330,6 +333,7 @@ class DataTable extends CustomElement {
      * @param {number} fromIndex
      * @param {number} toIndex
      * @returns {Monster.Components.Datatable.DataTable}
+     * @fire Monster.Components.Datatable.event:monster-datatable-row-copied
      */
     copyRow(fromIndex, toIndex) {
 
@@ -372,6 +376,11 @@ class DataTable extends CustomElement {
         
         rows.splice(toIndex, 0, clone(rows[fromIndex]));
         datasource.data=c;
+
+        fireCustomEvent(this, "monster-datatable-row-copied", {
+            index: toIndex,
+        });        
+        
         return this;
     }
 
@@ -379,6 +388,7 @@ class DataTable extends CustomElement {
      * Remove a row from the datatable
      * @param index
      * @returns {Monster.Components.Datatable.DataTable}
+     * @fire Monster.Components.Datatable.event:monster-datatable-row-removed
      */
     removeRow(index) {
         const datasource = this[datasourceLinkedElementSymbol];
@@ -412,6 +422,11 @@ class DataTable extends CustomElement {
 
         rows.splice(index, 1)
         datasource.data=c;
+
+        fireCustomEvent(this, "monster-datatable-row-removed", {
+            index: index,
+        });        
+        
         return this;
     }
 
@@ -419,7 +434,8 @@ class DataTable extends CustomElement {
      * Add a row to the datatable 
      * @param {Object} data
      * @returns {Monster.Components.Datatable.DataTable}
-     */
+     * @fire Monster.Components.Datatable.event:monster-datatable-row-added
+     **/
     addRow(data) {
         const datasource = this[datasourceLinkedElementSymbol];
         if (!datasource) {
@@ -444,6 +460,11 @@ class DataTable extends CustomElement {
         
         rows.push(data)
         datasource.data=c;
+
+        fireCustomEvent(this, "monster-datatable-row-added", {
+            index: rows.length - 1,
+        });
+        
         return this;
     }
 

source/components/datatable/events.mjs

+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+/**
+ * @memberOf Monster.Components.Form
+ * @event event:monster-datatable-row-added
+ * @type {number} index
+ */
+
+/**
+ * @memberOf Monster.Components.Form
+ * @event event:monster-datatable-row-copied
+ * @type {number} index
+ */
+
+/**
+ * @memberOf Monster.Components.Form
+ * @event event:monster-datatable-row-removed
+ * @type {number} index
+ */