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

feat: new flag features.storeFetchedData and function Select::getLastFetchedData #204

parent 64851733
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
development/mock/issue-200.js 0 → 100644
+ 118
− 0
View file @ a8bffdaf
const json1 =
`[
{
"id": 1000,
"name": "order 1",
"fieldA": "value A1",
"fieldB": "value B1"
},
{
"id": 1001,
"name": "order 2",
"fieldA": "value A2",
"fieldB": "value B2"
},
{
"id": 1002,
"name": "order 3",
"fieldA": "value A3",
"fieldB": "value B3"
},
{
"id": 1003,
"name": "order 4",
"fieldA": "value A4",
"fieldB": "value B4"
},
{
"id": 1004,
"name": "order 5",
"fieldA": "value A5",
"fieldB": "value B5"
},
{
"id": 1005,
"name": "order 6",
"fieldA": "value A6",
"fieldB": "value B6"
}
]`;
const json2 =
`[
{
"id": 2000,
"name": "order 21",
"fieldA": "value 2A1",
"fieldB": "value 2B1"
},
{
"id": 2001,
"name": "order 22",
"fieldA": "value 2A2",
"fieldB": "value 2B2"
},
{
"id": 2002,
"name": "order 23",
"fieldA": "value 2A3",
"fieldB": "value 2B3"
},
{
"id": 2003,
"name": "order 24",
"fieldA": "value 2A4",
"fieldB": "value 2B4"
},
{
"id": 2004,
"name": "order 25",
"fieldA": "value 2A5",
"fieldB": "value 2B5"
},
{
"id": 2005,
"name": "order 26",
"fieldA": "value 2A6",
"fieldB": "value 2B6"
}
]`;
// check if json is valid
JSON.parse(json1)
JSON.parse(json2)
const requestDelay = 1000
export default [
{
url: '/issue-200-1.json',
method: 'get',
rawResponse: async (req, res) => {
res.setHeader('Content-Type', 'application/json')
res.statusCode = 200
setTimeout(function() {
res.end(json1)
}, requestDelay);
},
},
{
url: '/issue-200-2.json',
method: 'get',
rawResponse: async (req, res) => {
res.setHeader('Content-Type', 'application/json')
res.statusCode = 200
setTimeout(function() {
res.end(json2)
}, requestDelay);
},
}
];
\ No newline at end of file
source/components/form/select.mjs
+ 1841
− 1800
View file @ a8bffdaf
...@@ -100,6 +100,12 @@ const keyFilterEventSymbol = Symbol("keyFilterEvent"); ...@@ -100,6 +100,12 @@ const keyFilterEventSymbol = Symbol("keyFilterEvent");
*/ */
const lazyLoadDoneSymbol = Symbol("lazyLoadDone"); const lazyLoadDoneSymbol = Symbol("lazyLoadDone");
/**
* @private
* @type {symbol}
*/
const isLoadingSymbol = Symbol("isLoading");
/** /**
* local symbol * local symbol
* @private * @private
...@@ -127,6 +133,13 @@ const resizeObserverSymbol = Symbol("resizeObserver"); ...@@ -127,6 +133,13 @@ const resizeObserverSymbol = Symbol("resizeObserver");
* @type {symbol} * @type {symbol}
*/ */
const keyEventHandler = Symbol("keyEventHandler"); const keyEventHandler = Symbol("keyEventHandler");
/**
* local symbol
* @private
* @type {symbol}
*/
const lastFetchedDataSymbol = Symbol("lastFetchedData");
/** /**
* local symbol * local symbol
* @private * @private
...@@ -380,7 +393,8 @@ class Select extends CustomControl { ...@@ -380,7 +393,8 @@ 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); addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
}); });
...@@ -420,6 +434,7 @@ class Select extends CustomControl { ...@@ -420,6 +434,7 @@ class Select extends CustomControl {
* @property {Boolean} features.lazyLoad=false Load options when first opening the dropdown * @property {Boolean} features.lazyLoad=false Load options when first opening the dropdown
* @property {Boolean} features.closeOnSelect=false Close the dropdown when an option is selected (since 3.54.0) * @property {Boolean} features.closeOnSelect=false Close the dropdown when an option is selected (since 3.54.0)
* @property {Boolean} features.emptyValueIfNoOptions=false If no options are available, the selection is set to an empty array * @property {Boolean} features.emptyValueIfNoOptions=false If no options are available, the selection is set to an empty array
* @property {Boolean} features.storeFetchedData=false Store fetched data in the object
* @property {Boolean} filter.defaultValue=* Default filter value, if the filter is empty * @property {Boolean} filter.defaultValue=* Default filter value, if the filter is empty
* @property {Boolean} filter.mode=options Filter mode, values: options, remote, disabled * @property {Boolean} filter.mode=options Filter mode, values: options, remote, disabled
* @property {Object} templates Template definitions * @property {Object} templates Template definitions
...@@ -455,6 +470,7 @@ class Select extends CustomControl { ...@@ -455,6 +470,7 @@ class Select extends CustomControl {
lazyLoad: false, lazyLoad: false,
closeOnSelect: false, closeOnSelect: false,
emptyValueIfNoOptions: false, emptyValueIfNoOptions: false,
storeFetchedData: false,
}, },
url: null, url: null,
labels: { labels: {
...@@ -545,39 +561,12 @@ class Select extends CustomControl { ...@@ -545,39 +561,12 @@ class Select extends CustomControl {
} }
if (self.getOption("url") !== null && !lazyLoadFlag) { if (self.getOption("url") !== null && !lazyLoadFlag) {
setStatusOrRemoveBadges.call(this, "loading"); self.fetch()
new Processing(200, () => {
this.fetch()
.then(() => {
setTimeout(() => {
let result;
if (self.hasAttribute("value")) {
result = setSelection.call(self, self.getAttribute("value"));
} else {
result = setSelection.call(self, []);
}
result
.then(() => {})
.catch((e) => {
addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `${e}`);
});
}, 100);
})
.catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
setStatusOrRemoveBadges.call(this, "error");
});
})
.run()
.catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
});
} }
let lastValue = self.value; let lastValue = self.value;
self[internalSymbol].attachObserver( self[internalSymbol].attachObserver(
new Observer(function () { new Observer(function () {
if (isObject(this) && this instanceof ProxyObserver) { if (isObject(this) && this instanceof ProxyObserver) {
const n = this.getSubject()?.options?.value; const n = this.getSubject()?.options?.value;
...@@ -586,7 +575,8 @@ class Select extends CustomControl { ...@@ -586,7 +575,8 @@ 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}`); addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `${e}`);
}); });
...@@ -600,6 +590,21 @@ class Select extends CustomControl { ...@@ -600,6 +590,21 @@ class Select extends CustomControl {
return this; return this;
} }
/**
*
* @returns {*}
* @throws {Error} storeFetchedData is not enabled
* @since 3.66.0
*/
getLastFetchedData() {
if (this.getOption("features.storeFetchedData") === false) {
throw new Error("storeFetchedData is not enabled");
}
return this?.[lastFetchedDataSymbol];
}
/** /**
* The Button.click() method simulates a click on the internal button element. * The Button.click() method simulates a click on the internal button element.
* *
...@@ -657,20 +662,31 @@ class Select extends CustomControl { ...@@ -657,20 +662,31 @@ class Select extends CustomControl {
* @return {Promise} * @return {Promise}
*/ */
fetch(url) { fetch(url) {
if (url instanceof URL) { if (url instanceof URL) {
url = url.toString(); url = url.toString();
} }
if (url !== undefined && url !== null) { if (url !== undefined && url !== null) {
url = validateString(url); url = validateString(url);
} else {
url = this.getOption("url");
if (url === null) {
return Promise.reject(new Error("No url defined"));
}
} }
hide.call(this); hide.call(this);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
setStatusOrRemoveBadges.call(this, "loading");
new Processing(10, () => {
fetchData fetchData
.call(this, url) .call(this, url)
.then((map) => { .then((map) => {
this[isLoadingSymbol] = false;
if ( if (
isObject(map) || isObject(map) ||
isArray(map) || isArray(map) ||
...@@ -678,6 +694,8 @@ class Select extends CustomControl { ...@@ -678,6 +694,8 @@ class Select extends CustomControl {
map instanceof Map map instanceof Map
) { ) {
this.importOptions(map); this.importOptions(map);
this[lastFetchedDataSymbol] = map;
setTimeout(() => { setTimeout(() => {
setStatusOrRemoveBadges.call(this, "closed"); setStatusOrRemoveBadges.call(this, "closed");
resolve(); resolve();
...@@ -689,9 +707,16 @@ class Select extends CustomControl { ...@@ -689,9 +707,16 @@ class Select extends CustomControl {
reject(new Error("invalid response")); reject(new Error("invalid response"));
}) })
.catch((e) => { .catch((e) => {
this[isLoadingSymbol] = false;
setStatusOrRemoveBadges.call(this, "error"); setStatusOrRemoveBadges.call(this, "error");
reject(e); reject(e);
}); });
}).run().catch((e) => {
setStatusOrRemoveBadges.call(this, "error");
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
});
}); });
} }
...@@ -778,6 +803,7 @@ class Select extends CustomControl { ...@@ -778,6 +803,7 @@ class Select extends CustomControl {
value, value,
label, label,
visibility, visibility,
data: map.get(value),
}); });
}); });
...@@ -793,7 +819,7 @@ class Select extends CustomControl { ...@@ -793,7 +819,7 @@ class Select extends CustomControl {
/** /**
* @private * @private
* @return {Monster.Components.Form.Select} * @return {Select}
*/ */
calcAndSetOptionsDimension() { calcAndSetOptionsDimension() {
calcAndSetOptionsDimension.call(this); calcAndSetOptionsDimension.call(this);
...@@ -1067,10 +1093,12 @@ function initOptionObserver() { ...@@ -1067,10 +1093,12 @@ function initOptionObserver() {
new Processing(() => { new Processing(() => {
try { try {
self.updateI18n(); self.updateI18n();
} catch (e) {} } catch (e) {
}
try { try {
areOptionsAvailableAndInit.call(self); areOptionsAvailableAndInit.call(self);
} catch (e) {} } catch (e) {
}
setSummaryAndControlText.call(self); setSummaryAndControlText.call(self);
}).run(); }).run();
...@@ -1086,7 +1114,8 @@ function getDefaultTranslation() { ...@@ -1086,7 +1114,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;
} }
...@@ -1666,7 +1695,8 @@ function gatherState() { ...@@ -1666,7 +1695,8 @@ function gatherState() {
setSelection setSelection
.call(this, selection) .call(this, selection)
.then(() => {}) .then(() => {
})
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`); addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`);
}); });
...@@ -1695,7 +1725,8 @@ function clearSelection() { ...@@ -1695,7 +1725,8 @@ function clearSelection() {
setSelection setSelection
.call(this, []) .call(this, [])
.then(() => {}) .then(() => {
})
.catch((e) => { .catch((e) => {
addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`); addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`);
}); });
...@@ -2303,7 +2334,9 @@ function initEventHandler() { ...@@ -2303,7 +2334,9 @@ function initEventHandler() {
*/ */
function setStatusOrRemoveBadges(suggestion) { function setStatusOrRemoveBadges(suggestion) {
setTimeout(() => { setTimeout(() => {
const selection = this.getOption("selection"); const selection = this.getOption("selection");
const clearAllFlag = const clearAllFlag =
isArray(selection) && isArray(selection) &&
selection.length > 0 && selection.length > 0 &&
...@@ -2311,20 +2344,28 @@ function setStatusOrRemoveBadges(suggestion) { ...@@ -2311,20 +2344,28 @@ function setStatusOrRemoveBadges(suggestion) {
const current = this.getOption("classes.statusOrRemoveBadge"); const current = this.getOption("classes.statusOrRemoveBadge");
if (clearAllFlag) { if (this[isLoadingSymbol] === true) {
if (current !== "clear") { if (current !== "loading") {
this.setOption("classes.statusOrRemoveBadge", "clear"); this.setOption("classes.statusOrRemoveBadge", "loading");
} }
return; return;
} }
if (suggestion === "loading") { if (suggestion === "loading") {
this[isLoadingSymbol] = true;
if (current !== "loading") { if (current !== "loading") {
this.setOption("classes.statusOrRemoveBadge", "loading"); this.setOption("classes.statusOrRemoveBadge", "loading");
} }
return; return;
} }
if (clearAllFlag) {
if (current !== "clear") {
this.setOption("classes.statusOrRemoveBadge", "clear");
}
return;
}
if (this[controlElementSymbol].classList.contains("open")) { if (this[controlElementSymbol].classList.contains("open")) {
if (current !== "open") { if (current !== "open") {
this.setOption("classes.statusOrRemoveBadge", "open"); this.setOption("classes.statusOrRemoveBadge", "open");
......
source/components/form/style/select.pcss
+ 1
− 1
View file @ a8bffdaf
...@@ -63,7 +63,7 @@ div[data-monster-role="control"] { ...@@ -63,7 +63,7 @@ div[data-monster-role="control"] {
border-color: var(--monster-bg-color-primary-2); border-color: var(--monster-bg-color-primary-2);
border-radius: var(--monster-border-radius); border-radius: var(--monster-border-radius);
border-style: var(--monster-border-style); border-style: var(--monster-border-style);
border-width: thin; border-width: var(--monster-border-width);
background-color: var(--monster-bg-color-primary-1); background-color: var(--monster-bg-color-primary-1);
color: var(--monster-color-primary-1); color: var(--monster-color-primary-1);
......
source/components/form/stylesheet/select.mjs
+ 8
− 17
View file @ a8bffdaf
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment