Skip to content
Snippets Groups Projects
Verified Commit ca7ba73d authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix: store lists #139

parent a0e0b3e9
No related branches found
No related tags found
No related merge requests found
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Issues</title>
<script src="./139.js" type="module"></script>
<style>
monster-button-bar {
}
monster-button-bar button {
padding: 0;
margin-right: -2px;
}
monster-button-bar button:first-child {
}
</style>
</head>
<body>
<main>
<h1>Issues #139</h1>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/139" target="_blank">#139</a>
</li>
<li><a href="../../">Back to overview</a></li>
</ul>
<div style="width: 950px;margin: 0 auto;">
<monster-host>
<monster-config-manager></monster-config-manager>
</monster-host>
<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-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="companySHID" id="companySHID"
data-monster-template="${value | call:range:companySHID}">
RANGE companySHID
<monster-filter-range></monster-filter-range>
</label>
<label data-monster-label="paymentPID" id="paymentPID"
data-monster-template="${value | call:date-range:paymentPID}">paymentPID
<monster-filter-date-range></monster-filter-date-range>
</label>
<label data-monster-label="orderState" id="orderState"
data-monster-template="${value | call:date-range:orderState}">orderState
<monster-filter-date-range></monster-filter-date-range>
</label>
<label data-monster-label="OID" data-monster-template="${value | call:range:oid}"
id="OID">OID
<monster-filter-input name="OID" type="search"></monster-filter-input>
</label>
</monster-datatable-filter>
</div>
<div data-monster-button-label="BUTTON"></div>
</monster-tabs>
</div>
</monster-collapse>
<div slot="bar" class="monster-button-group">
<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>
<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="1fr" 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-head="i18n:key1" data-monster-grid-template="1fr"><input
type="checkbox"></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 style="overflow:visible">
<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>
</div>
</main>
</body>
</html>
\ No newline at end of file
import "../../source/components/host/overlay.mjs";
import "../../source/components/datatable/datatable.mjs";
import "../../source/components/datatable/dataset.mjs";
import "../../source/components/datatable/datasource/dom.mjs";
import "../../source/components/datatable/datasource/rest.mjs";
import "../../source/components/datatable/save-button.mjs";
import "../../source/components/form/button.mjs";
import "../../source/components/form/select.mjs";
import "../../source/components/form/toggle-switch.mjs";
import "../../source/components/style/common.pcss";
import "../../source/components/style/color.pcss";
import "../../source/components/style/theme.pcss";
import "../../source/components/style/table.pcss";
import "../../source/components/style/badge.pcss";
import "../../source/components/style/button.pcss";
import "../../source/components/style/link.pcss";
import "../../source/components/style/data-grid.pcss";
import "../../source/components/style/property.pcss";
import "../../source/components/style/typography.pcss";
import "../../source/components/style/display.pcss";
import "../../source/components/datatable/datasource/rest.mjs";
import "../../source/components/datatable/filter.mjs";
import "../../source/components/datatable/filter-button.mjs";
import "../../source/components/datatable/embedded-pagination.mjs";
import "../../source/components/datatable/datatable.mjs";
import "../../source/components/datatable/dataset.mjs";
import "../../source/components/datatable/status.mjs";
import "../../source/components/datatable/save-button.mjs";
import "../../source/components/datatable/change-button.mjs";
import "../../source/components/datatable/filter/range.mjs";
import "../../source/components/datatable/filter/select.mjs";
import "../../source/components/datatable/filter/input.mjs";
import "../../source/components/datatable/filter/date-range.mjs";
import {windowReady} from "../../source/dom/ready.mjs";
import "../../source/components/host/host.mjs";
import "../../source/components/host/config-manager.mjs";
import "../../source/components/form/button.mjs";
import "../../source/components/form/button-bar.mjs";
import "../../source/components/form/popper-button.mjs";
import "../../source/components/form/tabs.mjs";
import "./generic.pcss";
...@@ -137,7 +137,6 @@ class DataSet extends CustomElement { ...@@ -137,7 +137,6 @@ class DataSet extends CustomElement {
} }
write() { write() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (!this[datasourceLinkedElementSymbol]) { if (!this[datasourceLinkedElementSymbol]) {
reject(new Error("No datasource")); reject(new Error("No datasource"));
......
...@@ -40,7 +40,6 @@ import { ...@@ -40,7 +40,6 @@ import {
DIRECTION_DESC, DIRECTION_DESC,
DIRECTION_NONE, DIRECTION_NONE,
} from "./datatable/header.mjs"; } from "./datatable/header.mjs";
import { getStoredFilterConfigKey } from "./filter/util.mjs";
import { DatatableStyleSheet } from "./stylesheet/datatable.mjs"; import { DatatableStyleSheet } from "./stylesheet/datatable.mjs";
import { import {
handleDataSourceChanges, handleDataSourceChanges,
......
...@@ -366,12 +366,23 @@ function initControlReferences() { ...@@ -366,12 +366,23 @@ function initControlReferences() {
return this; return this;
} }
function updateFilterSelections() {
setTimeout(() => {
const options = this[settingsSymbol].getOptions();
this[filterSelectElementSymbol].setOption("options", options);
setTimeout(() => {
this[filterSelectElementSymbol].value =
this[settingsSymbol].getSelected();
}, 10);
}, 10);
}
/** /**
* @private * @private
* @throws {Error} no filter label is defined * @throws {Error} no filter label is defined
*/ */
function initFilter() { function initFilter() {
const storedConfig = this[settingsSymbol]; const storedSetting = this[settingsSymbol];
this[settingsSymbol] = new Settings(); this[settingsSymbol] = new Settings();
const result = parseBracketedKeyValueHash(getGlobal().location.hash); const result = parseBracketedKeyValueHash(getGlobal().location.hash);
...@@ -397,7 +408,7 @@ function initFilter() { ...@@ -397,7 +408,7 @@ function initFilter() {
element.id = value; element.id = value;
} }
let setting = storedConfig.get(value); let setting = storedSetting.get(value);
if (setting) { if (setting) {
this[settingsSymbol].set(setting); this[settingsSymbol].set(setting);
...@@ -407,31 +418,22 @@ function initFilter() { ...@@ -407,31 +418,22 @@ function initFilter() {
const v = escapeAttributeValue(valuesFromHash[element.id]); const v = escapeAttributeValue(valuesFromHash[element.id]);
const searchInput = element.firstElementChild; const searchInput = element.firstElementChild;
try { try {
// searchInput.value = valuesFromHash[element.id]; searchInput.value = v;
searchInput.value = v; //valuesFromHash[element.id];
} catch (error) {} } catch (error) {}
} }
setting = this[settingsSymbol].get(value); setting = this[settingsSymbol].get(value);
let visible = false;
if (setting) { if (setting) {
setSlotAttribute(element, setting.visible); setSlotAttribute(element, setting.visible);
//style.display = setting.visible ? "block" : "none"; visible = setting.visible;
} else {
visible = getVisibilityFromSlotAttribute(element);
} }
//const visible = window.getComputedStyle(element).display !== "none";
const visible = getVisibilityFromSlotAttribute(element);
this[settingsSymbol].set({ value, label, visible }); this[settingsSymbol].set({ value, label, visible });
}); });
updateFilterSelections.call(this);
this[filterSelectElementSymbol].setOption(
"options",
this[settingsSymbol].getOptions(),
);
setTimeout(() => {
this[filterSelectElementSymbol].value = this[settingsSymbol].getSelected();
}, 10);
} }
/** /**
...@@ -512,7 +514,6 @@ function initEventHandler() { ...@@ -512,7 +514,6 @@ function initEventHandler() {
event.detail.value, event.detail.value,
); );
if (filterElement) { if (filterElement) {
//filterElement.style.display = event.detail.checked ? "block" : "none";
setSlotAttribute(filterElement, event.detail.checked); setSlotAttribute(filterElement, event.detail.checked);
} }
...@@ -651,15 +652,18 @@ function initEventHandler() { ...@@ -651,15 +652,18 @@ function initEventHandler() {
} }
}); });
doSearch.call(self, { showEffect: false }); doSearch
.call(self, { showEffect: false })
.then(() => {})
.catch((e) => addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.message));
}); });
self[locationChangeHandlerSymbol] = (event) => { self[locationChangeHandlerSymbol] = (event) => {
if (event instanceof HashChangeEvent) { // if (event instanceof HashChangeEvent) {
if (event.oldURL === event.newURL) { // if (event.oldURL === event.newURL) {
return; // return;
} // }
} // }
}; };
self.addEventListener("keyup", (event) => { self.addEventListener("keyup", (event) => {
...@@ -788,8 +792,7 @@ function updateFilterTabs() { ...@@ -788,8 +792,7 @@ function updateFilterTabs() {
element.insertAdjacentHTML( element.insertAdjacentHTML(
"beforeend", "beforeend",
` `<div data-monster-button-label="${name}"
<div data-monster-button-label="${name}"
data-monster-removable="true" data-monster-removable="true"
data-monster-query="${escapedQuery}" data-monster-role="filter-tab" > data-monster-query="${escapedQuery}" data-monster-role="filter-tab" >
</div>`, </div>`,
...@@ -1054,7 +1057,8 @@ function getControlValuesFromLabel(label) { ...@@ -1054,7 +1057,8 @@ function getControlValuesFromLabel(label) {
* @private * @private
* @returns {Promise<unknown>} * @returns {Promise<unknown>}
*/ */
function initFromConfig() { function initFromConfig() {;
const document = getDocument(); const document = getDocument();
const host = document.querySelector("monster-host"); const host = document.querySelector("monster-host");
...@@ -1068,7 +1072,7 @@ function initFromConfig() { ...@@ -1068,7 +1072,7 @@ function initFromConfig() {
host host
.getConfig(configKey) .getConfig(configKey)
.then((config) => { .then((config) => {
if (config && isObject(config)) { if ((config && isObject(config)) || isArray(config)) {
this[settingsSymbol].setOptions(config); this[settingsSymbol].setOptions(config);
} }
resolve(); resolve();
......
...@@ -13,7 +13,6 @@ ...@@ -13,7 +13,6 @@
width: 100%; width: 100%;
} }
[data-monster-role=control] { [data-monster-role=control] {
& .hidden { & .hidden {
...@@ -33,7 +32,7 @@ ...@@ -33,7 +32,7 @@
align-items: flex-end; align-items: flex-end;
display: flex; display: flex;
justify-content: space-between; justify-content: flex-start;
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
...@@ -44,7 +43,7 @@ ...@@ -44,7 +43,7 @@
width: 100%; width: 100%;
column-gap: 1rem; column-gap: 1rem;
row-gap: 0.5rem; row-gap: 0.5rem;
justify-content: space-between; justify-content: flex-start;
& ::slotted(label) { & ::slotted(label) {
......
This diff is collapsed.
This diff is collapsed.
...@@ -335,7 +335,7 @@ function toggleClassOff() { ...@@ -335,7 +335,7 @@ function toggleClassOff() {
/** /**
* @private * @private
*/ */
function toggleClass() {; function toggleClass() {
if (this.getOption("value") === this.getOption("values.on")) { if (this.getOption("value") === this.getOption("values.on")) {
toggleClassOn.call(this); toggleClassOn.call(this);
} else { } else {
...@@ -346,7 +346,7 @@ function toggleClass() {; ...@@ -346,7 +346,7 @@ function toggleClass() {;
/** /**
* @private * @private
*/ */
function toggleValues() {; function toggleValues() {
if (this.getOption("disabled") === true) { if (this.getOption("disabled") === true) {
return; return;
...@@ -366,7 +366,7 @@ function toggleValues() {; ...@@ -366,7 +366,7 @@ function toggleValues() {;
/** /**
* @private * @private
*/ */
function validateAndSetValue() {; function validateAndSetValue() {
const value = this.getOption("value"); const value = this.getOption("value");
const validatedValues = []; const validatedValues = [];
......
...@@ -67,7 +67,6 @@ function fireEvent(element, type) { ...@@ -67,7 +67,6 @@ function fireEvent(element, type) {
* @summary Construct and send and event * @summary Construct and send and event
*/ */
function fireCustomEvent(element, type, detail) { function fireCustomEvent(element, type, detail) {
if (element instanceof HTMLElement) { if (element instanceof HTMLElement) {
if (!isObject(detail)) { if (!isObject(detail)) {
detail = { detail }; detail = { detail };
......
/** /**
* Copyright schukai GmbH and contributors 2023. All Rights Reserved. * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
* Node module: @schukai/monster * Node module: @schukai/monster
......
...@@ -24,7 +24,7 @@ function deepFreeze(object) { ...@@ -24,7 +24,7 @@ function deepFreeze(object) {
validateObject(object); validateObject(object);
// Retrieve the defined property names of the object // Retrieve the defined property names of the object
var propNames = Object.getOwnPropertyNames(object); let propNames = Object.getOwnPropertyNames(object);
// Freeze properties before freezing yourself // Freeze properties before freezing yourself
for (const name of propNames) { for (const name of propNames) {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment