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

20240222

parent 56631c53
Branches
Tags
No related merge requests found
Show whitespace changes
Inline Side-by-side
playground/monster-bind-with-datasource/index.html 0 → 100644
+ 218
− 0
View file @ 6224ce5a
<!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 @ 6224ce5a
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