Skip to content
Snippets Groups Projects
Commit f1994b9a authored by Martin Massenberg's avatar Martin Massenberg
Browse files 

Merge branch '20240222' into 'master'

20240222

See merge request oss/libraries/javascript/monster!48
parents 72ddfbe8 c5061fb4
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
playground/bind-with-datasource/main.mjs
+ 11
− 0
View file @ f1994b9a
...@@ -43,6 +43,17 @@ import "./main.pcss"; ...@@ -43,6 +43,17 @@ import "./main.pcss";
import { findTargetElementFromEvent } from "../../source/dom/events.mjs"; import { findTargetElementFromEvent } from "../../source/dom/events.mjs";
let data = document.getElementById('data1'); let data = document.getElementById('data1');
/**
* die Daten können mit dem write.mapping.transformer umformatiert werden
*/
data.setOption('write.mapping.transformer', 'call:agenorFormater');
let callbacks = {
agenorFormater: function (data) {
return data.dataset;
}};
data.setOption('write.mapping.callbacks', callbacks);
let dataset1 = document.getElementById('dataset1'); let dataset1 = document.getElementById('dataset1');
//let dataset2 = document.getElementById('dataset2'); //let dataset2 = document.getElementById('dataset2');
......
playground/monster-bind-with-datasource/index.html 0 → 100644
+ 218
− 0
View file @ f1994b9a
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Monster-Bind mit Datasource</title>
<script src="main.mjs" type="module"></script>
</head>
<body>
<main>
<div>
<!--
Datasource mit fest definieren Daten
-->
<monster-datasource-dom id="data1">
<script id="data" type="application/json">
{
"dataset": [
{
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "2020-01-16T10:27:18",
"erpCreation": "2020-01-16T10:27:18",
"archived": false,
"oid": 1000,
"orderDate": "2019-01-16T10:27:18",
"orderState": 57,
"orderLastStatusChange": "2019-01-16T10:38:53",
"customerUID": 30,
"customerNotice": "",
"billingAddressAID": 16,
"deliveryAddressAID": 16,
"deliveryNotice": "",
"paymentPID": 101,
"assigndTickets": "",
"resubmissionDate": "1970-01-01T12:00:00",
"resubmissionInfo": "",
"acquisitionPartnerID": 0,
"acquisitionInfo": "",
"acquisitionRedirect": null,
"acquisitionDate": "1970-01-01T12:00:00",
"shippingNotice": "",
"shippingDCID": 2,
"retoureRID": 0,
"companySHID": 1,
"salesmanUID": 0,
"channelOrderID": "",
"channelOrderState": "0",
"channelOrderDate": null,
"channelOrderData": {}
},
{
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "2020-01-16T10:27:18",
"erpCreation": "2020-01-16T10:27:18",
"archived": false,
"oid": 1000,
"orderDate": "2019-01-16T10:27:18",
"orderState": 57,
"orderLastStatusChange": "2019-01-16T10:38:53",
"customerUID": 30,
"customerNotice": "",
"billingAddressAID": 16,
"deliveryAddressAID": 16,
"deliveryNotice": "",
"paymentPID": 101,
"assigndTickets": "",
"resubmissionDate": "1970-01-01T12:00:00",
"resubmissionInfo": "",
"acquisitionPartnerID": 0,
"acquisitionInfo": "",
"acquisitionRedirect": null,
"acquisitionDate": "1970-01-01T12:00:00",
"shippingNotice": "",
"shippingDCID": 2,
"retoureRID": 0,
"companySHID": 1,
"salesmanUID": 0,
"channelOrderID": "",
"channelOrderState": "0",
"channelOrderDate": null,
"channelOrderData": {}
},
{
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "2020-01-16T10:27:18",
"erpCreation": "2020-01-16T10:27:18",
"archived": false,
"oid": 1001,
"orderDate": "2019-01-16T10:27:18",
"orderState": 57,
"orderLastStatusChange": "2019-02-16T10:38:53",
"customerUID": 30,
"customerNotice": "",
"billingAddressAID": 16,
"deliveryAddressAID": 16,
"deliveryNotice": "",
"paymentPID": 101,
"assigndTickets": "",
"resubmissionDate": "1970-01-01T12:00:00",
"resubmissionInfo": "",
"acquisitionPartnerID": 0,
"acquisitionInfo": "",
"acquisitionRedirect": null,
"acquisitionDate": "1970-01-01T12:00:00",
"shippingNotice": "",
"shippingDCID": 2,
"retoureRID": 0,
"companySHID": 1,
"salesmanUID": 0,
"channelOrderID": "",
"channelOrderState": "0",
"channelOrderDate": null,
"channelOrderData": {}
},
{
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "2020-01-16T10:27:18",
"erpCreation": "2020-01-16T10:27:18",
"archived": false,
"oid": 1002,
"orderDate": "2019-01-16T10:27:18",
"orderState": 57,
"orderLastStatusChange": "2019-03-16T10:38:53",
"customerUID": 30,
"customerNotice": "",
"billingAddressAID": 16,
"deliveryAddressAID": 16,
"deliveryNotice": "",
"paymentPID": 101,
"assigndTickets": "",
"resubmissionDate": "1970-01-01T12:00:00",
"resubmissionInfo": "",
"acquisitionPartnerID": 0,
"acquisitionInfo": "",
"acquisitionRedirect": null,
"acquisitionDate": "1970-01-01T12:00:00",
"shippingNotice": "",
"shippingDCID": 2,
"retoureRID": 0,
"companySHID": 1,
"salesmanUID": 0,
"channelOrderID": "",
"channelOrderState": "0",
"channelOrderDate": null,
"channelOrderData": {}
}
],
"sys": {
"pagination": {
"currentPage": 1,
"nextOffset": 3,
"pages": 1,
"prevOffset": null,
"offset": 0,
"objectsPerPage": 20,
"total": 3
},
"message": "200 OK",
"code": 200
}
}
</script>
</monster-datasource-dom>
<h1>Bestellungen</h1>
<!--
Datatable stellt diese Daten dar
mit "data-monster-datasource-selector" wird die Datenquelle "#data1" definiert
-->
<monster-datatable id="test-datatable" data-monster-datasource-selector="#data1">
<template id="test-datatable-row">
<div data-monster-head="martin" data-monster-replace="path:test-datatable-row.martin "></div>
<div data-monster-head="OID" data-monster-mode="fixed" data-monster-sortable="oid" data-monster-replace="path:test-datatable-row.oid | tostring"></div>
<div data-monster-head="orderLastStatusChange" data-monster-replace="path:test-datatable-row.orderLastStatusChange"></div>
<div data-monster-head="customerUID" data-monster-replace="path:test-datatable-row.customerUID"></div>
<div data-monster-head="resubmissionDate" data-monster-replace="path:test-datatable-row.resubmissionDate"></div>
<div data-monster-head="billingAddressAID" data-monster-replace="path:test-datatable-row.billingAddressAID"></div>
<div data-monster-head="deliveryAddressAID" data-monster-replace="path:test-datatable-row.deliveryAddressAID"></div>
<div data-monster-head="aktion" data-alvine-role="actionHolder">
<monster-button data-alvine-role="changeButon" data-monster-attributes="data-alvine-oid path:test-datatable-row.index">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16">
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"></path>
<path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"></path>
</svg>
</monster-button>
</div>
</template>
</monster-datatable>
<h2>eine Bestellung im dataset</h2>
<monster-dataset id="test-dataset" data-monster-datasource-selector="#data1" >
<div data-monster-replace="path:data.oid ">xx</div>
<div data-monster-replace="path:data.orderState ">xx</div>
<div data-monster-replace="path:data.orderLastStatusChange ">xx</div>
<input data-monster-bind="path:data.customerUID" data-monster-attributes="value path:data.customerUID ">
</monster-dataset>
</div>
</main>
</body>
</html>
\ No newline at end of file
playground/monster-bind-with-datasource/main.mjs 0 → 100644
+ 60
− 0
View file @ f1994b9a
import "../../source/components/form/button.mjs";
import "../../source/components/datatable/datatable.mjs";
import "../../source/components/datatable/dataset.mjs";
import "../../source/components/datatable/datasource/dom.mjs";
import { findTargetElementFromEvent } from "../../source/dom/events.mjs";
document.addEventListener("monster-button-clicked", (event) => {
let changeButon = findTargetElementFromEvent(event, 'data-alvine-role', 'changeButon');
if (changeButon) {
//index des Datensatzes ermitteln
//aktuell 23.02.2024 nur über das attribute möglich
//der index steht immer hinten
let parent = changeButon.closest('[data-alvine-role="actionHolder"]')
let reference = parent.getAttribute("data-monster-insert-reference");
let index = reference.split("-")[3];
// Index sezten
dataset.setOption('mapping.index', index);
}
});
// let body = document.body;
// let updater = new Updater(
// body,
// {
// a: {
// b: "hello"
// }
// }
// );
// /**
// * Events an schalten
// */
// updater.enableEventProcessing();
// updater.run().then(() => {
// console.log('done');
// });
/**
* customElementUpdaterLinkSymbol
*
* datsource > datenquelle
*
* dataset
* const updaters = getLinkedObjects(self, customElementUpdaterLinkSymbol);
*
* proxyObserver > Updater
*
*
*
*/
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment