Select Git revision
index.html 9.22 KiB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pagination Playground</title>
<script src="./main.js" type="module"></script>
</head>
<body class="monster-color-primary-1">
<a href="../">Back</a>
<main>
<monster-host>
<script type="application/json" data-monster-role="translations">
{
"Failed to fetch": "Das hat nicht geklappt",
"key2": "k1 - ERP"
}
</script>
<monster-config-manager></monster-config-manager>
<h1>Datatable with Pagination </h1>
<script id="id-for-this-config" type="application/json">
{
"read": {
"url": "http://localhost:8070/api/commerce/orders/search?q=${path:query | default:order.customerUID>0}&page=${page}&orderby=${path:order | default:oid}",
"init": {
"method": "GET",
"headers": {
"Content-Type": "application/json",
"Authorization": "Basic YWRtaW5pc3RyYXRvcjpsYW5kc2JlcmllZA==",
"Accept": "application/json"
}
},
"credentials": "include",
"body": null
},
"features": {
"filter": true
},
"filter": {
"id": "listfilter1"
}
}
</script>
<monster-datasource-rest id="data1"
data-monster-options-selector="#id-for-this-config"></monster-datasource-rest>
<monster-dataset data-monster-datasource-selector="#data1" data-monster-index="0">
<div data-monster-replace="path:data.oid | tostring">xx</div>
<div data-monster-replace="path:data.orderState | tostring">xx</div>
<div data-monster-replace="path:data.erpCreation | tostring">xx</div>
</monster-dataset>
<monster-datatable id="t12" data-monster-datasource-selector="#data1"
data-monster-responsive-breakpoint="1500">
<monster-collapse id="my-collapse" data-monster-role="filter-collapse">
<div class="flex">
<monster-tabs style="width: 100%" data-monster-option-classes-button="monster-theme-primary-2" id="filtertabs">
<div data-monster-button-label="Filter" data-monster-state="active" class="active">
<monster-datatable-filter id="listfilter1" slot="filter" data-monster-option-storedconfig-selector="#filtertabs">
<label data-monster-label="OID1" id="oid1"
data-monster-template="${value | call:range:oid}">
RANGE OID
<monster-filter-range></monster-filter-range> </label>
<label data-monster-label="date" id="date2"
data-monster-template="${value | call:date-range:orderDate}">Date
<monster-filter-date-range></monster-filter-date-range>
</label>
<label data-monster-label="OID2" data-monster-template="${value}" id="sdfsdf">
The label
<monster-filter-select data-monster-selected-template="selected">
<div>sdfsd</div>
</monster-filter-select>
</label>
<label data-monster-label="OID3" data-monster-template="${value | call:range:oid}" id="qq">OID
2
<monster-filter-input name="value3" type="search"></monster-filter-input>
</label>
<label data-monster-label="OID4" data-monster-template="${value | call:range:oid}" id="cc">OID
3<input name="value4" type="search"></label>
<label data-monster-label="OID5" data-monster-template="${value | call:range:oid}" id="gd">OID
4<input name="value5" type="search"></label>
<label data-monster-label="OID6" data-monster-template="${value | call:range:oid}" id="dq">OID
5<input name="value6" type="search"></label>
<label data-monster-label="OID7" data-monster-template="${value | call:range:oid}" id="xc">OID
6<input name="value7" type="search"></label>
</monster-datatable-filter>
</div>
<div data-monster-button-label="SDAFASDFDS"></div>
</monster-tabs>
</div>
</monster-collapse>
<div slot="bar" class="monster-button-group">
<monster-datasource-status data-monster-option-datasource-selector="#data1"></monster-datasource-status>
<monster-embedded-pagination
data-monster-datasource-selector="#data1"></monster-embedded-pagination>
<!-- <monster-embedded-state-->
<!-- data-monster-datasource-selector="#data1"></monster-embedded-state>-->
<monster-datatable-filter-button data-monster-reference="#my-collapse"
data-monster-role="filter-button">Filter
</monster-datatable-filter-button>
</div>
<template id="t12-row">
<div data-monster-mode="fixed" data-monster-sortable="oid" data-monster-head="OID">
<a data-monster-attributes="href path:t12-row.oid | tostring | prefix:#"
data-monster-replace="path:t12-row.oid | tostring">Link</a>
</div>
<div data-monster-grid-template="1fr">
<ul>
<li><input type="date"></li>
<li data-monster-replace="path:t12-row.oid">test 1</li>
<li>asdfjasdkfjk</li>
</ul>
</div>
<div data-monster-mode="fixed" data-monster-head="i18n:key2"
data-monster-replace="path:t12-row.erpCreation"></div>
<div data-monster-mode="fixed" data-monster-head="i18n:key1" data-monster-grid-template="1fr"><input
type="checkbox"></div>
<div data-monster-mode="fixed" data-monster-head="i18n:key2"
data-monster-replace="path:t12-row.erpCreation | date"></div>
<div data-monster-mode="fixed" data-monster-head="i18n:key2"
data-monster-replace="path:t12-row.erpCreation | time"></div>
<div data-monster-mode="fixed" data-monster-head="i18n:key2"
data-monster-replace="path:t12-row.erpCreation | time"></div>
<div data-monster-mode="fixed" data-monster-head="i18n:key2"
data-monster-replace="path:t12-row.erpCreation | time"></div>
<div data-monster-mode="fixed" data-monster-head="i18n:key2" data-monster-replace="path:t12-row.erpCreation | time"></div>
<div data-monster-mode="fixed"
data-monster-replace="path:t12-row.erpCreation | time"></div>
<div data-monster-head="orderState 2" class="center" data-monster-align="center"
data-monster-replace="path:t12-row.orderState"></div>
<div class="end" data-monster-align="end"
data-monster-replace="path:t12-row.orderState | tostring | prefix:<span class=monster-badge-secondary-pill>|suffix:</span>"></div>
<div data-monster-mode="hidden" data-monster-head="OS2" data-monster-replace="static:OXXXXX"></div>
<div data-monster-sortable="orderState" data-monster-head="State"
data-monster-replace="path:t12-row.orderState | tostring | prefix:____"></div>
<div data-monster-head="xxx" data-monster-replace="static:wwwww"></div>
<div>
<button data-monster-replace="static:doit">Click</button>
<monster-popper-button>
<form class="monster-form">
<label><input>test 1</label>
<label>test 2<input></label>
<button>OK</button>
</form>
</monster-popper-button>
</div>
</template>
<div slot="footer" class="monster-button-group">
<monster-button>Aktion 1</monster-button>
<monster-button>Aktion 2</monster-button>
<monster-button>Aktion 3</monster-button>
</div>
</monster-datatable>
<monster-pagination data-monster-datasource-selector="#data1"></monster-pagination>
</monster-host>
</main>
</body>
</html>