Something went wrong on our end
Select Git revision
Monster.I18n.Locale.html
-
Volker Schukai authoredVolker Schukai authored
232.html 8.07 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>revision of the list design including filters #232</title>
<script src="./232.mjs" type="module"></script>
</head>
<body>
<main style="padding: 20px">
<h1>revision of the list design including filters #232</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/232">Issue #232</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<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>
<monster-datatable id="test-datatable" data-monster-datasource-selector="#data1">
<monster-collapse id="my-collapse" data-monster-role="filter-collapse">
<div class="flex">
<monster-tabs style="width: 100%"
data-monster-option-features-opendelay="500"
data-monster-option-classes-navigation="monster-theme-background-inherit"
data-monster-option-classes-button="monster-theme-background-inherit" 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="customerUID"
data-monster-template="${value | call:range:customerUID}" id="customerUID">customerUID
3<monster-filter-input name="value5" type="search"></monster-filter-input></label>
<label data-monster-label="OID5" data-monster-template="${value | call:range:oid}"
id="gd">OID !!
4<monster-filter-input name="value5" type="search"></monster-filter-input></label>
<label data-monster-label="OID6" data-monster-template="${value | call:range:oid}"
id="dq">OID
5<monster-filter-input name="value5" type="search"></monster-filter-input></label>
<label data-monster-label="OID7" data-monster-template="${value | call:range:oid}"
id="xc">OID
6<monster-filter-input name="value5" type="search"></monster-filter-input></label>
</monster-datatable-filter>
</div>
<div data-monster-button-label="SDAFASDFDS"></div>
</monster-tabs>
</div> </monster-collapse>
<monster-datasource-save-button slot="bar" data-monster-option-datasource-selector="#data1">
</monster-datasource-save-button>
<monster-datasource-status slot="bar" data-monster-option-datasource-selector="#data1">
</monster-datasource-status>
<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="test-datatable-row">
<div data-monster-mode="fixed" data-monster-sortable="oid asc" 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="4fr" data-monster-head="i18n:key22">
<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-align="end" data-monster-head="i18n:key1"
data-monster-grid-template="1fr"><input
type="checkbox"></div>
<div data-monster-head="i18n:key2"
data-monster-replace="path:t12-row.erpCreation | date"></div>
<div data-monster-mode="fixed" data-monster-head="customerUID"
data-monster-replace="path:t12-row.customerUID"></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>
</monster-datatable>
</main>
</body>
</html>