feat: add addRow, removeRow and copyRow #175 #176 #177

playground/bind-with-datasource/index.html

@@ -18,9 +18,17 @@
 
             <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>Bestellungen</h1>
-
+            <h1>Datasets</h1>
 
+            <div style="padding:2px; margin:5px;margin-bottom:20px">
+                <button id="new">+ NEW</button>
+            </div>
+            <div style="padding:2px; margin:5px;margin-bottom:20px">
+                <button id="remove">- REMOVE ROW 1</button>
+            </div>
+            <div style="padding:2px; margin:5px;margin-bottom:20px">
+                <button id="copy">- COPY ROW 1</button>
+            </div>
             <!--
             Datatable stellt diese Daten dar
             mit "data-monster-datasource-selector" wird die Datenquelle "#data1" definiert
@@ -138,13 +146,13 @@
         </monster-overlay>
         
         
-        <monster-overlay id="overlay2" data-monster-option-features-openbutton="false">
+        <monster-overlay id="overlay3" data-monster-option-features-openbutton="false">
 
 
             <monster-dataset id="dataset2" data-monster-datasource-selector="#data1">
 
                 <div class="form-container">
-                    <h2>OVERLAY 2</h2>
+                    <h2>OVERLAY 3</h2>
                     <div class="inner-form">
                         <label>test
                             <input data-monster-bind="path:data.oid" data-monster-bind-type="integer"

playground/bind-with-datasource/main.mjs

@@ -42,6 +42,7 @@ import "../../source/components/form/button.mjs";
 import "../../source/components/form/button-bar.mjs";
 import "../../source/components/form/popper-button.mjs";
 import "../../source/components/form/tabs.mjs";
+import {clone} from "../../source/util/clone.mjs";
 import "./main.pcss"; 
 
 
@@ -70,7 +71,11 @@ let readCallbacks = {
 data.setOption('read.mapping.callbacks', readCallbacks);
 
 
-let dataset1 = document.getElementById('dataset1');
+let data1 = document.getElementById('data1');
+
+
+
+let datatable = document.getElementById('test-datatable');
 //let dataset2 = document.getElementById('dataset2');
 
 //console.log(data);
@@ -86,6 +91,22 @@ document.addEventListener("monster-button-clicked", (event) => {
 
 
 
+const newButton = document.getElementById("new");
+newButton.addEventListener("click", () => {
+    datatable.addRow({id: 1, name: "test"});
+})
+
+
+const removeButton = document.getElementById("remove");
+removeButton.addEventListener("click", () => {
+    datatable.removeRow(0);
+})
+
+const copyButton = document.getElementById("copy");
+copyButton.addEventListener("click", () => {
+    datatable.copyRow(0,0);
+})
+
 /**
  * customElementUpdaterLinkSymbol
  * 

playground/datatable/index.html

@@ -58,6 +58,9 @@
             </form>
         </monster-dataset>
         
+        <div style="padding:2px; margin:5px;margin-bottom:20px">
+        <button id="new">+ NEW</button>
+        </div>
 
         <monster-datatable id="t12" data-monster-datasource-selector="#data1"
                            data-monster-responsive-breakpoint="1500">
@@ -65,7 +68,10 @@
 
             <monster-collapse id="my-collapse" data-monster-role="filter-collapse">
                 <div class="flex">
-                    <monster-tabs style="width: 100%"  data-monster-option-classes-button="monster-theme-primary-2" id="filtertabs">
+                    <monster-tabs style="width: 100%" 
+                                  data-monster-option-classes-navigation="monster-theme-primary-2" 
+                                  data-monster-option-classes-button="monster-theme-primary-2" 
+                                  id="filtertabs">
                         <div data-monster-button-label="Filter" data-monster-state="active" class="active">
                         <monster-datatable-filter id="listfilter1" slot="filter" data-monster-option-storedconfig-selector="#filtertabs">
                             <label data-monster-label="OID1" id="oid1"

playground/datatable/main.js

@@ -52,6 +52,12 @@ windowReady.then(() => {
     // })
 
     
+    const newbutton = document.getElementById("new");
+    newbutton.addEventListener("click", (event) => {
+        list.addRow();
+    })
+    
+
 })
 
 

playground/dialog/index.html

@@ -15,22 +15,17 @@
     <div id="dialog">
 
 
-        <monster-split-screen data-monster-option-splittype="vertical" data-monster-option-classes-button="monster-theme-primary-2">
+        <monster-form>
+        <monster-dialog>
  
-            <div slot="start">
-                <h1>Start Panel</h1>
-                <p>Some content</p>
-                <p>Some content</p>
-            </div>
-
-            <div slot="end">
-                <h1>End Panel</h1>
-                <p>Some content</p>
-                <p>Some content</p>
-            </div>
+            <label>
+                <span>First Name</span>
+                <input type="text" name="first_name">
+            </label>
 
 
-        </monster-split-screen>
+        </monster-dialog>
+        </monster-form>
 
 
     </div>

playground/mock/demo.js

@@ -5,7 +5,7 @@ const json =
                 {
                     "erpID": "",
                     "type": "order",
-                    "erpName": "mix up erp1",
+                    "erpName": "mix up erp9",
                     "erpNumber": "",
                     "erpLastUpdate": "2020-01-16T10:27:18",
                     "erpCreation": "2020-01-16T10:27:18",

playground/shadow-root/index.html

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Shadow DOM Beispiel</title>
+    <style>
+        
+        :root {
+            --color-1: #fc00c7;
+            --color-2: #45e309;
+        }
+        
+        /* Globales CSS, wirkt sich nicht auf Shadow DOM aus */
+        div {
+            color: var(--color-1);
+        }
+    </style>
+</head>
+<body>
+<div id="shadow-host">Dieser Text wird durch Shadow DOM ersetzt.</div>
+
+<script>
+    // Warte bis das Dokument vollständig geladen ist
+    document.addEventListener('DOMContentLoaded', (event) => {
+        // Wähle das Element aus, das als Shadow Root dienen soll
+        var shadowHost = document.getElementById('shadow-host');
+        // Erstelle ein Shadow Root für dieses Element
+        var shadowRoot = shadowHost.attachShadow({mode: 'open'});
+
+        // Füge HTML und CSS zum Shadow Root hinzu
+        shadowRoot.innerHTML = `
+                <style>
+                    p {
+                        color: var(--color-2);
+                    }
+                    
+                    :host {
+                       --color-2: #ff0000;
+                    }
+                </style>
+                <p>Dieser Text ist im Shadow DOM und sollte blau sein.</p>
+            `;
+    });
+</script>
+</body>
+</html>

playground/tab/index.html

@@ -10,18 +10,14 @@
 <body>
 
 
-<main style="width:98vw">
+<main style="width:200px">
 
     <h1>Tabs</h1>
     <ul>
         <li><a href="../">Back to overview</a></li>
     </ul>
 
-    <monster-tabs
-
-            data-monster-option-classes-button="monster-theme-secondary-1"
-            data-monster-option-classes-popper="monster-theme-secondary-1"
-    >
+    <monster-tabs>
         <div data-monster-name="tab1">Tab 1</div>
         <div data-monster-name="tab2">Tab 2</div>
         <div>Tab 3</div>

playground/tab/main.mjs

@@ -2,6 +2,7 @@ import "../../source/components/style/property.pcss";
 import "../../source/components/style/normalize.pcss";
 import "../../source/components/style/color.pcss";
 import "../../source/components/style/theme.pcss";
+import "../../source/components/style/border.pcss"; 
 import "../../source/components/style/typography.pcss";
 import "../../source/components/style/form.pcss";
 import "../../source/components/style/link.pcss";

source/components/datatable/datatable.mjs

@@ -11,6 +11,7 @@ import {
     getSlottedElements,
 } from "../../dom/customelement.mjs";
 import {findTargetElementFromEvent} from "../../dom/events.mjs";
+import {clone} from "../../util/clone.mjs";
 import {
     isString,
     isFunction,
@@ -18,6 +19,7 @@ import {
     isObject,
     isArray,
 } from "../../types/is.mjs";
+import {validateArray, validateInteger, validateObject} from "../../types/validate.mjs";
 import {Observer} from "../../types/observer.mjs";
 import {
     ATTRIBUTE_DATATABLE_HEAD,
@@ -322,6 +324,129 @@ class DataTable extends CustomElement {
     static getCSSStyleSheet() {
         return [DatatableStyleSheet];
     }
+
+    /**
+     * Copy a row from the datatable
+     * @param {number} fromIndex
+     * @param {number} toIndex
+     * @returns {Monster.Components.Datatable.DataTable}
+     */
+    copyRow(fromIndex, toIndex) {
+
+        const datasource = this[datasourceLinkedElementSymbol];
+        if (!datasource) {
+            return this;
+        }
+        let d = datasource.data;
+        let c = clone(d);
+
+        let rows = c
+        const mapping = this.getOption("mapping.data");
+
+        if (mapping) {
+            rows=c?.[mapping];
+        }
+
+        if (rows === undefined || rows === null) {
+            rows = [];
+        }
+
+        if (toIndex===undefined) {
+            toIndex = rows.length;
+        }
+
+        fromIndex = parseInt(fromIndex);
+        toIndex = parseInt(toIndex);
+        
+        if (toIndex < 0 || toIndex > rows.length) {
+            throw new RangeError("index out of bounds");
+        }
+
+        validateArray(rows);
+        validateInteger(fromIndex);
+        validateInteger(toIndex);
+
+        if (fromIndex < 0 || fromIndex >= rows.length) {
+            throw new RangeError("index out of bounds");
+        }
+        
+        rows.splice(toIndex, 0, clone(rows[fromIndex]));
+        datasource.data=c;
+        return this;
+    }
+
+    /**
+     * Remove a row from the datatable
+     * @param index
+     * @returns {Monster.Components.Datatable.DataTable}
+     */
+    removeRow(index) {
+        const datasource = this[datasourceLinkedElementSymbol];
+        if (!datasource) {
+            return this;
+        }
+        let d = datasource.data;
+        let c = clone(d);
+
+        let rows = c
+        const mapping = this.getOption("mapping.data");
+
+        if (mapping) {
+            rows=c?.[mapping];
+        }
+
+        if (rows === undefined || rows === null) {
+            rows = [];
+        }
+
+        index = parseInt(index);
+        
+        validateArray(rows);
+        validateInteger(index);
+        if (index < 0 || index >= rows.length) {
+            throw new RangeError("index out of bounds");
+        }
+        if (mapping) {
+            rows=c?.[mapping];
+        }
+
+        rows.splice(index, 1)
+        datasource.data=c;
+        return this;
+    }
+
+    /**
+     * Add a row to the datatable 
+     * @param {Object} data
+     * @returns {Monster.Components.Datatable.DataTable}
+     */
+    addRow(data) {
+        const datasource = this[datasourceLinkedElementSymbol];
+        if (!datasource) {
+            return this;
+        }
+        let d = datasource.data;
+        let c = clone(d);
+        
+        let rows = c
+        
+        const mapping = this.getOption("mapping.data");
+        if (mapping) {
+            rows=c?.[mapping];
+        }
+        
+        if (rows === undefined || rows === null) {
+            rows = [];
+        }
+
+        validateArray(rows);
+        validateObject(data);
+        
+        rows.push(data)
+        datasource.data=c;
+        return this;
+    }
+
 }
 
 /**
@@ -661,7 +786,6 @@ function storeOrderStatement(doFetch) {
     // statement explode with , and remove all empty
     const list = statement.split(",").filter((item) => item.trim() !== "");
     if (list.length === 0) {
-		//     host.deleteConfig(configKey);
         return;
     }