diff --git a/playground/bind-with-datasource/index.html b/playground/bind-with-datasource/index.html index 47879c97181359bb121515bfa0eb2c78ffd2a844..6e84afac6b312e77bcfb6bad34376bbada65cf4f 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 19bb21be603fa47e2d6071f81893053d3a66aabe..746e38924167e6a978a88d4557a5d1be3cd6dbae 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 203cf4ee1999b15b2c6dc464de9bef365fd09310..e526adb49dfe9a492e2414337a3b1e0bc23e463d 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 0000000000000000000000000000000000000000..de5128a00b5f846bedf01d0efd8a71a6660b6257 --- /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 + */