Skip to content
Snippets Groups Projects
Verified Commit 8562362f authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

feat: add events to dataset methods #178

parent 80afe6d3
No related branches found
No related tags found
No related merge requests found
...@@ -16,9 +16,12 @@ ...@@ -16,9 +16,12 @@
Datasource mit fest definieren Daten 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"> <div style="padding:2px; margin:5px;margin-bottom:20px">
<button id="new">+ NEW</button> <button id="new">+ NEW</button>
...@@ -115,7 +118,6 @@ ...@@ -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> <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> </label>
<!-- Ckeckbox wird ausgewählt wenn archived den Wert TRUE hat -->
<label>Checkbox <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> <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 @@ ...@@ -140,7 +142,6 @@
<div data-monster-replace="path:data.archived ">xx</div> <div data-monster-replace="path:data.archived ">xx</div>
</div> </div>
</div>
</monster-dataset> </monster-dataset>
</monster-overlay> </monster-overlay>
......
...@@ -11,6 +11,13 @@ ...@@ -11,6 +11,13 @@
<div style="padding:2px; margin:5px;margin-bottom:20px"><a href="/">Back</a></div> <div style="padding:2px; margin:5px;margin-bottom:20px"><a href="/">Back</a></div>
<main> <main>
<h1>Data Table</h1>
<ul>
<li><a href="../">Back to overview</a></li>
</ul>
<monster-host> <monster-host>
<script type="application/json" data-monster-role="translations"> <script type="application/json" data-monster-role="translations">
......
...@@ -10,7 +10,7 @@ import { ...@@ -10,7 +10,7 @@ import {
registerCustomElement, registerCustomElement,
getSlottedElements, getSlottedElements,
} from "../../dom/customelement.mjs"; } from "../../dom/customelement.mjs";
import {findTargetElementFromEvent} from "../../dom/events.mjs"; import {findTargetElementFromEvent, fireCustomEvent} from "../../dom/events.mjs";
import {clone} from "../../util/clone.mjs"; import {clone} from "../../util/clone.mjs";
import { import {
isString, isString,
...@@ -119,6 +119,9 @@ const columnBarElementSymbol = Symbol("columnBarElement"); ...@@ -119,6 +119,9 @@ const columnBarElementSymbol = Symbol("columnBarElement");
* @copyright schukai GmbH * @copyright schukai GmbH
* @memberOf Monster.Components.Datatable * @memberOf Monster.Components.Datatable
* @summary A data table * @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 { class DataTable extends CustomElement {
/** /**
...@@ -330,6 +333,7 @@ class DataTable extends CustomElement { ...@@ -330,6 +333,7 @@ class DataTable extends CustomElement {
* @param {number} fromIndex * @param {number} fromIndex
* @param {number} toIndex * @param {number} toIndex
* @returns {Monster.Components.Datatable.DataTable} * @returns {Monster.Components.Datatable.DataTable}
* @fire Monster.Components.Datatable.event:monster-datatable-row-copied
*/ */
copyRow(fromIndex, toIndex) { copyRow(fromIndex, toIndex) {
...@@ -372,6 +376,11 @@ class DataTable extends CustomElement { ...@@ -372,6 +376,11 @@ class DataTable extends CustomElement {
rows.splice(toIndex, 0, clone(rows[fromIndex])); rows.splice(toIndex, 0, clone(rows[fromIndex]));
datasource.data=c; datasource.data=c;
fireCustomEvent(this, "monster-datatable-row-copied", {
index: toIndex,
});
return this; return this;
} }
...@@ -379,6 +388,7 @@ class DataTable extends CustomElement { ...@@ -379,6 +388,7 @@ class DataTable extends CustomElement {
* Remove a row from the datatable * Remove a row from the datatable
* @param index * @param index
* @returns {Monster.Components.Datatable.DataTable} * @returns {Monster.Components.Datatable.DataTable}
* @fire Monster.Components.Datatable.event:monster-datatable-row-removed
*/ */
removeRow(index) { removeRow(index) {
const datasource = this[datasourceLinkedElementSymbol]; const datasource = this[datasourceLinkedElementSymbol];
...@@ -412,6 +422,11 @@ class DataTable extends CustomElement { ...@@ -412,6 +422,11 @@ class DataTable extends CustomElement {
rows.splice(index, 1) rows.splice(index, 1)
datasource.data=c; datasource.data=c;
fireCustomEvent(this, "monster-datatable-row-removed", {
index: index,
});
return this; return this;
} }
...@@ -419,7 +434,8 @@ class DataTable extends CustomElement { ...@@ -419,7 +434,8 @@ class DataTable extends CustomElement {
* Add a row to the datatable * Add a row to the datatable
* @param {Object} data * @param {Object} data
* @returns {Monster.Components.Datatable.DataTable} * @returns {Monster.Components.Datatable.DataTable}
*/ * @fire Monster.Components.Datatable.event:monster-datatable-row-added
**/
addRow(data) { addRow(data) {
const datasource = this[datasourceLinkedElementSymbol]; const datasource = this[datasourceLinkedElementSymbol];
if (!datasource) { if (!datasource) {
...@@ -444,6 +460,11 @@ class DataTable extends CustomElement { ...@@ -444,6 +460,11 @@ class DataTable extends CustomElement {
rows.push(data) rows.push(data)
datasource.data=c; datasource.data=c;
fireCustomEvent(this, "monster-datatable-row-added", {
index: rows.length - 1,
});
return this; return this;
} }
......
/**
* 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
*/
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment