From 8562362f0eac3e6fc023dbd6255bc4a3ff269c19 Mon Sep 17 00:00:00 2001 From: Volker Schukai <volker.schukai@schukai.com> Date: Mon, 25 Mar 2024 20:32:01 +0100 Subject: [PATCH] feat: add events to dataset methods #178 --- playground/bind-with-datasource/index.html | 9 ++++---- playground/datatable/index.html | 7 ++++++ source/components/datatable/datatable.mjs | 25 ++++++++++++++++++++-- source/components/datatable/events.mjs | 24 +++++++++++++++++++++ 4 files changed, 59 insertions(+), 6 deletions(-) create mode 100644 source/components/datatable/events.mjs diff --git a/playground/bind-with-datasource/index.html b/playground/bind-with-datasource/index.html index 47879c971..6e84afac6 100644 --- a/playground/bind-with-datasource/index.html +++ b/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> diff --git a/playground/datatable/index.html b/playground/datatable/index.html index 19bb21be6..746e38924 100644 --- a/playground/datatable/index.html +++ b/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"> diff --git a/source/components/datatable/datatable.mjs b/source/components/datatable/datatable.mjs index 203cf4ee1..e526adb49 100644 --- a/source/components/datatable/datatable.mjs +++ b/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; } diff --git a/source/components/datatable/events.mjs b/source/components/datatable/events.mjs new file mode 100644 index 000000000..de5128a00 --- /dev/null +++ b/source/components/datatable/events.mjs @@ -0,0 +1,24 @@ +/** + * 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 + */ -- GitLab