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

fix: update selection after import #280

parent a75635a9
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
development/issues/open/280.html 0 → 100644
+ 23
− 0
View file @ bd40d296
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>select attribute=\"value\" from datasource doesn´t work #280</title>
<script src="./280.mjs" type="module"></script>
</head>
<body>
<h1>select attribute="value" from datasource doesn't work #280</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/280">Issue #280</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<monster-issue-280 id="i280"> </monster-issue-280>
</main>
</body>
</html>
development/issues/open/280.mjs 0 → 100644
+ 112
− 0
View file @ bd40d296
/**
* @file development/issues/open/280.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/280
* @description select attribute=\"value\" from datasource doesn´t work
* @issue 280
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/form/select.mjs";
import {assembleMethodSymbol, CustomElement, registerCustomElement} from "../../../source/dom/customelement.mjs";
const dataset = [
{
"name": "United Kingdom",
"alpha-2": "GB",
"country-code": "826",
},
{
"name": "Sweden",
"alpha-2": "SE",
"country-code": "752",
},
{
"name": "Germany",
"alpha-2": "DE",
"country-code": "276",
}
]
setTimeout(() => {
const select = document.getElementById("i280")
console.log(select);
select.setOption("test.value", ["826","752"]);
//if(true) return
//document.getElementById("i280").setOption("test.value", "a,b,c");
// the label template is a string that will be used to generate the label for each option
select.getSelect().setOption('mapping.labelTemplate', '${name} (${alpha-2})')
// the value template is a string that will be used to generate the value for each option
select.getSelect().setOption('mapping.valueTemplate', '${country-code}')
select.getSelect().importOptions(dataset);
//select.setOption("test.value", ["826","752"]);
},1000);
class Issue280 extends CustomElement {
[assembleMethodSymbol]() {
super[assembleMethodSymbol]();
}
get defaults() {
return Object.assign({}, super.defaults, {
templates: {
main: getTemplate(),
},
test : {
value : ["826"]
}
});
}
static getTag() {
return "monster-issue-280";
}
getSelect() {
return this.shadowRoot.querySelector("monster-select");
}
}
/**
* @private
* @return {string}
*/
function getTemplate() {
// language=HTML
return `
<div data-monster-role="control" part="control">
<monster-select data-monster-attributes="value path:test.value" data-monster-option-type="checkbox">
</monster-select>
</div>
`;
}
registerCustomElement(Issue280);
source/components/form/select.mjs
+ 2173
− 2150
View file @ bd40d296
...@@ -23,7 +23,6 @@ import { ...@@ -23,7 +23,6 @@ import {
removeAttributeToken, removeAttributeToken,
} from "../../dom/attributes.mjs"; } from "../../dom/attributes.mjs";
import { import {
ATTRIBUTE_ERRORMESSAGE,
ATTRIBUTE_PREFIX, ATTRIBUTE_PREFIX,
ATTRIBUTE_ROLE, ATTRIBUTE_ROLE,
} from "../../dom/constants.mjs"; } from "../../dom/constants.mjs";
...@@ -38,7 +37,7 @@ import { ...@@ -38,7 +37,7 @@ import {
fireCustomEvent, fireCustomEvent,
fireEvent, fireEvent,
} from "../../dom/events.mjs"; } from "../../dom/events.mjs";
import { getDocument, getWindow } from "../../dom/util.mjs"; import {getDocument} from "../../dom/util.mjs";
import {Formatter} from "../../text/formatter.mjs"; import {Formatter} from "../../text/formatter.mjs";
import {getGlobal} from "../../types/global.mjs"; import {getGlobal} from "../../types/global.mjs";
import {ID} from "../../types/id.mjs"; import {ID} from "../../types/id.mjs";
...@@ -62,6 +61,7 @@ import { ...@@ -62,6 +61,7 @@ import {
Translations, Translations,
} from "../../i18n/translations.mjs"; } from "../../i18n/translations.mjs";
import {getLocaleOfDocument} from "../../dom/locale.mjs"; import {getLocaleOfDocument} from "../../dom/locale.mjs";
import {addErrorAttribute} from "../../dom/error.mjs";
export { export {
Select, Select,
...@@ -339,9 +339,10 @@ class Select extends CustomControl { ...@@ -339,9 +339,10 @@ class Select extends CustomControl {
const result = convertValueToSelection.call(this, value); const result = convertValueToSelection.call(this, value);
setSelection setSelection
.call(this, result.selection) .call(this, result.selection)
.then(() => {}) .then(() => {
})
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message); addErrorAttribute(this, e);
}); });
} }
...@@ -497,9 +498,8 @@ class Select extends CustomControl { ...@@ -497,9 +498,8 @@ class Select extends CustomControl {
if (getFilterMode.call(this) === FILTER_MODE_REMOTE) { if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
self.getOption("features.lazyLoad", false); self.getOption("features.lazyLoad", false);
if (lazyLoadFlag === true) { if (lazyLoadFlag === true) {
addAttributeToken( addErrorAttribute(
this, this,
ATTRIBUTE_ERRORMESSAGE,
"lazyLoad is not supported with remote filter", "lazyLoad is not supported with remote filter",
); );
lazyLoadFlag = false; lazyLoadFlag = false;
...@@ -512,7 +512,7 @@ class Select extends CustomControl { ...@@ -512,7 +512,7 @@ class Select extends CustomControl {
}) })
.run() .run()
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message); addErrorAttribute(this, e);
}); });
} }
...@@ -521,7 +521,7 @@ class Select extends CustomControl { ...@@ -521,7 +521,7 @@ class Select extends CustomControl {
lookupSelection.call(self); lookupSelection.call(self);
} else { } else {
self.fetch().catch((e) => { self.fetch().catch((e) => {
addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `${e}`); addErrorAttribute(self, e);
}); });
} }
} }
...@@ -536,9 +536,10 @@ class Select extends CustomControl { ...@@ -536,9 +536,10 @@ class Select extends CustomControl {
lastValue = n; lastValue = n;
setSelection setSelection
.call(self, n) .call(self, n)
.then(() => {}) .then(() => {
})
.catch((e) => { .catch((e) => {
addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `${e}`); addErrorAttribute(self, e);
}); });
} }
} }
...@@ -595,7 +596,7 @@ class Select extends CustomControl { ...@@ -595,7 +596,7 @@ class Select extends CustomControl {
}) })
.run() .run()
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`); addErrorAttribute(this, e);
}); });
} }
...@@ -610,7 +611,7 @@ class Select extends CustomControl { ...@@ -610,7 +611,7 @@ class Select extends CustomControl {
}) })
.run() .run()
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`); addErrorAttribute(this, e);
}); });
} }
...@@ -646,7 +647,7 @@ class Select extends CustomControl { ...@@ -646,7 +647,7 @@ class Select extends CustomControl {
}) })
.run() .run()
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`); addErrorAttribute(this, e);
}); });
} }
...@@ -684,12 +685,12 @@ class Select extends CustomControl { ...@@ -684,12 +685,12 @@ class Select extends CustomControl {
let flag = false; let flag = false;
if (labelTemplate === "") { if (labelTemplate === "") {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "empty label template"); addErrorAttribute(this, "empty label template");
flag = true; flag = true;
} }
if (valueTemplate === "") { if (valueTemplate === "") {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "empty value template"); addErrorAttribute(this, "empty value template");
flag = true; flag = true;
} }
...@@ -723,6 +724,16 @@ class Select extends CustomControl { ...@@ -723,6 +724,16 @@ class Select extends CustomControl {
options, options,
}); });
setTimeout(() => {
setSelection.call(this, this.getOption("selection"))
.then(() => {
})
.catch((e) => {
addErrorAttribute(this, e);
});
}, 10)
return this; return this;
} }
...@@ -949,7 +960,7 @@ function lookupSelection() { ...@@ -949,7 +960,7 @@ function lookupSelection() {
selection.map((s) => s?.["value"]), selection.map((s) => s?.["value"]),
) )
.catch((e) => { .catch((e) => {
addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `${e}`); addErrorAttribute(self, e);
}); });
return; return;
} }
...@@ -957,7 +968,7 @@ function lookupSelection() { ...@@ -957,7 +968,7 @@ function lookupSelection() {
for (const s of selection) { for (const s of selection) {
if (s?.["value"]) { if (s?.["value"]) {
filterFromRemoteByValue.call(self, url, s?.["value"]).catch((e) => { filterFromRemoteByValue.call(self, url, s?.["value"]).catch((e) => {
addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `${e}`); addErrorAttribute(self, e);
}); });
} }
} }
...@@ -1032,7 +1043,7 @@ function fetchIt(url, controlOptions) { ...@@ -1032,7 +1043,7 @@ function fetchIt(url, controlOptions) {
.run() .run()
.catch((e) => { .catch((e) => {
setStatusOrRemoveBadges.call(this, "error"); setStatusOrRemoveBadges.call(this, "error");
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message); addErrorAttribute(this, e);
reject(e); reject(e);
}); });
}); });
...@@ -1065,9 +1076,8 @@ function initOptionsFromArguments() { ...@@ -1065,9 +1076,8 @@ function initOptionsFromArguments() {
options["templateMapping"]["selected"] = getSelectionTemplate(); options["templateMapping"]["selected"] = getSelectionTemplate();
break; break;
default: default:
addAttributeToken( addErrorAttribute(
this, this,
ATTRIBUTE_ERRORMESSAGE,
"invalid template, use summary or selected", "invalid template, use summary or selected",
); );
} }
...@@ -1100,12 +1110,19 @@ function attachResizeObserver() { ...@@ -1100,12 +1110,19 @@ function attachResizeObserver() {
this[resizeObserverSymbol].observe(this.parentElement); this[resizeObserverSymbol].observe(this.parentElement);
} }
/**
* @private
*/
function disconnectResizeObserver() { function disconnectResizeObserver() {
if (this[resizeObserverSymbol] instanceof ResizeObserver) { if (this[resizeObserverSymbol] instanceof ResizeObserver) {
this[resizeObserverSymbol].disconnect(); this[resizeObserverSymbol].disconnect();
} }
} }
/**
* @private
* @returns {string}
*/
function getSelectionTemplate() { function getSelectionTemplate() {
return `<div data-monster-role="selection" part="selection" return `<div data-monster-role="selection" part="selection"
data-monster-insert="selection path:selection" role="search" data-monster-insert="selection path:selection" role="search"
...@@ -1118,6 +1135,10 @@ function getSelectionTemplate() { ...@@ -1118,6 +1135,10 @@ function getSelectionTemplate() {
</div>`; </div>`;
} }
/**
* @private
* @returns {string}
*/
function getSummaryTemplate() { function getSummaryTemplate() {
return `<div data-monster-role="selection" role="search" part="summary"> return `<div data-monster-role="selection" role="search" part="summary">
<input type="text" role="searchbox" <input type="text" role="searchbox"
...@@ -1309,7 +1330,7 @@ function initOptionObserver() { ...@@ -1309,7 +1330,7 @@ function initOptionObserver() {
try { try {
self.updateI18n(); self.updateI18n();
} catch (e) { } catch (e) {
addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.message); addErrorAttribute(self, e);
requestAnimationFrame(() => { requestAnimationFrame(() => {
setStatusOrRemoveBadges.call(self, "error"); setStatusOrRemoveBadges.call(self, "error");
}); });
...@@ -1317,7 +1338,7 @@ function initOptionObserver() { ...@@ -1317,7 +1338,7 @@ function initOptionObserver() {
try { try {
areOptionsAvailableAndInit.call(self); areOptionsAvailableAndInit.call(self);
} catch (e) { } catch (e) {
addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.message); addErrorAttribute(self, e);
requestAnimationFrame(() => { requestAnimationFrame(() => {
setStatusOrRemoveBadges.call(self, "error"); setStatusOrRemoveBadges.call(self, "error");
}); });
...@@ -1341,7 +1362,8 @@ function getDefaultTranslation() { ...@@ -1341,7 +1362,8 @@ function getDefaultTranslation() {
try { try {
const doc = getDocumentTranslations(); const doc = getDocumentTranslations();
translation.locale = doc.locale; translation.locale = doc.locale;
} catch (e) {} } catch (e) {
}
return translation; return translation;
} }
...@@ -1559,7 +1581,7 @@ function activateCurrentOption(direction) { ...@@ -1559,7 +1581,7 @@ function activateCurrentOption(direction) {
}) })
.run() .run()
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message); addErrorAttribute(this, e);
}); });
} }
...@@ -1605,11 +1627,11 @@ function filterOptions() { ...@@ -1605,11 +1627,11 @@ function filterOptions() {
}) })
.run() .run()
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message); addErrorAttribute(this, e);
}); });
}) })
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message); addErrorAttribute(this, e);
}); });
} }
...@@ -1676,7 +1698,7 @@ function handleFilterKeyEvents() { ...@@ -1676,7 +1698,7 @@ function handleFilterKeyEvents() {
filterOptions.call(this); filterOptions.call(this);
} else { } else {
filterFromRemote.call(this).catch((e) => { filterFromRemote.call(this).catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message); addErrorAttribute(this, e);
}); });
} }
...@@ -1699,9 +1721,8 @@ function filterFromRemote() { ...@@ -1699,9 +1721,8 @@ function filterFromRemote() {
const url = this.getOption("url"); const url = this.getOption("url");
if (!url) { if (!url) {
addAttributeToken( addErrorAttribute(
this, this,
ATTRIBUTE_ERRORMESSAGE,
"Missing URL for Remote Filter.", "Missing URL for Remote Filter.",
); );
return; return;
...@@ -1875,9 +1896,8 @@ function focusPopperFilter(focusOptions) { ...@@ -1875,9 +1896,8 @@ function focusPopperFilter(focusOptions) {
this[inlineFilterElementSymbol].classList.add("d-none"); this[inlineFilterElementSymbol].classList.add("d-none");
if (!(this[popperFilterElementSymbol] instanceof HTMLElement)) { if (!(this[popperFilterElementSymbol] instanceof HTMLElement)) {
addAttributeToken( addErrorAttribute(
this, this,
ATTRIBUTE_ERRORMESSAGE,
"Missing Popper Filter Element.", "Missing Popper Filter Element.",
); );
return; return;
...@@ -1969,9 +1989,10 @@ function gatherState() { ...@@ -1969,9 +1989,10 @@ function gatherState() {
setSelection setSelection
.call(this, selection) .call(this, selection)
.then(() => {}) .then(() => {
})
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`); addErrorAttribute(this, e);
}); });
if (this.getOption("features.closeOnSelect") === true) { if (this.getOption("features.closeOnSelect") === true) {
...@@ -1998,9 +2019,10 @@ function clearSelection() { ...@@ -1998,9 +2019,10 @@ function clearSelection() {
setSelection setSelection
.call(this, []) .call(this, [])
.then(() => {}) .then(() => {
})
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`); addErrorAttribute(this, e);
}); });
} }
...@@ -2047,7 +2069,7 @@ function areOptionsAvailableAndInit() { ...@@ -2047,7 +2069,7 @@ function areOptionsAvailableAndInit() {
if (this.getOption("features.emptyValueIfNoOptions") === true) { if (this.getOption("features.emptyValueIfNoOptions") === true) {
this.value = ""; this.value = "";
} }
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "No options available."); addErrorAttribute(this, "No options available.");
return false; return false;
} }
...@@ -2099,7 +2121,7 @@ function areOptionsAvailableAndInit() { ...@@ -2099,7 +2121,7 @@ function areOptionsAvailableAndInit() {
setStatusOrRemoveBadges.call(this); setStatusOrRemoveBadges.call(this);
removeAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "No options available."); removeErrorAttribute(this, "No options available.");
return true; return true;
} }
...@@ -2151,6 +2173,7 @@ function convertValueToSelection(value) { ...@@ -2151,6 +2173,7 @@ function convertValueToSelection(value) {
.filter((a) => { .filter((a) => {
return a !== ""; return a !== "";
}); });
} }
if (isString(value) || isInteger(value)) { if (isString(value) || isInteger(value)) {
...@@ -2239,7 +2262,7 @@ function setSelection(selection) { ...@@ -2239,7 +2262,7 @@ function setSelection(selection) {
try { try {
this?.setFormValue(this.value); this?.setFormValue(this.value);
} catch (e) { } catch (e) {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message); addErrorAttribute(this, e);
} }
fireCustomEvent(this, "monster-selected", { fireCustomEvent(this, "monster-selected", {
...@@ -2279,7 +2302,7 @@ function setSelection(selection) { ...@@ -2279,7 +2302,7 @@ function setSelection(selection) {
}) })
.run() .run()
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message); addErrorAttribute(this, e);
}); });
} }
...@@ -2375,13 +2398,13 @@ function show() { ...@@ -2375,13 +2398,13 @@ function show() {
}); });
}) })
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message); addErrorAttribute(this, e);
setStatusOrRemoveBadges.call(this, "error"); setStatusOrRemoveBadges.call(this, "error");
}); });
}) })
.run() .run()
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message); addErrorAttribute(this, e);
setStatusOrRemoveBadges.call(this, "error"); setStatusOrRemoveBadges.call(this, "error");
}); });
...@@ -2411,7 +2434,7 @@ function show() { ...@@ -2411,7 +2434,7 @@ function show() {
}) })
.run() .run()
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message); addErrorAttribute(this, e);
}); });
} }
...@@ -2462,7 +2485,7 @@ function initEventHandler() { ...@@ -2462,7 +2485,7 @@ function initEventHandler() {
}); });
}) })
.catch((e) => { .catch((e) => {
addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.message); addErrorAttribute(self, e);
}); });
} }
} }
...@@ -2751,7 +2774,7 @@ function updatePopper() { ...@@ -2751,7 +2774,7 @@ function updatePopper() {
}) })
.run() .run()
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message); addErrorAttribute(this, e);
}); });
return this; return this;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment