chore: check how current an issue is, nothing to do #228

49344506 · Volker Schukai · 90c28437 · 49344506 · 49344506 · 49344506
Verified Commit 49344506 authored 7 months ago by Volker Schukai
--- a/development/issues/open/228.html
+++ b/development/issues/open/228.html
@@ -7,7 +7,7 @@
    <script src="228.mjs" type="module"></script>
 </head>
 <body>
-<h1>optimize tree-menu #228</h1>
+<h1> lazy load show wrong label #228</h1>
 <p></p>
 <ul>
    <li class="monster-theme-primary-1"><a
@@ -16,9 +16,21 @@
 </ul>
 <main>
+    <script type="application/json" data-monster-role="translations">
+        {
+            "51": "xyz",
+            "52": "abc",
+            "53": "def"
+        }
+    </script>
+    <monster-select 
+            data-monster-option-features-lazyload="true" 
+            data-monster-option-mapping-labeltemplate="${name} (${value})"
+            data-monster-option-mapping-valuetemplate="${id}"
+            data-monster-option-url="/issue-223.json" >
-    <monster-select data-monster-option-labels-button="click me">
-        <p>Yeah, you opened me!</p>
    </monster-select>
 </main>

--- a/development/issues/open/228.mjs
+++ b/development/issues/open/228.mjs
--- a/development/mock/issue-223.js
+++ b/development/mock/issue-223.js
+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": 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)
+const requestDelay = 1000
+export default [
+    {
+        url: '/issue-223.json',
+        method: 'get',
+        rawResponse: async (req, res) => {
+            res.setHeader('Content-Type', 'application/json')
+            res.statusCode = 200
+            setTimeout(function() {
+                res.end(json1)
+            }, requestDelay);
+        },
+    },
+];
\ No newline at end of file
--- a/source/components/form/select.mjs
+++ b/source/components/form/select.mjs
@@ -285,8 +285,10 @@ const FILTER_POSITION_INLINE = "inline";
 * @fires monster-changed
 */
 class Select extends CustomControl {
 	/**
-	 * @extends CustomControl
+	 * 
 	 */
 	constructor() {
 		super();
@@ -311,7 +313,7 @@ class Select extends CustomControl {
 	 * // ↦ ['1','2']
 	 * ```
 	 *
-	 * @property {string|array}
+	 * @returns {string}
 	 */
 	get value() {
 		return convertSelectionToValue.call(this, this.getOption("selection"));
@@ -513,7 +515,9 @@ class Select extends CustomControl {
 		}
 		if (self.getOption("url") !== null && !lazyLoadFlag) {
-			self.fetch();
+			self.fetch().catch((e) => {
+				addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `${e}`);
+			});
 		}
 		let lastValue = self.value;
@@ -2006,11 +2010,11 @@ function fetchData(url) {
 	let delayWatch = false;
 	// if fetch short time, do not show loading badge, because of flickering
-	setTimeout(() => {
+	requestAnimationFrame(() => {
 		if (delayWatch === true) return;
 		setStatusOrRemoveBadges.call(this, "loading");
 		delayWatch = true;
-	}, 500);
+	});
 	url = new Formatter({ filter: this.getOption("filter.defaultValue") }).format(
 		url,
@@ -2032,7 +2036,7 @@ function fetchData(url) {
 			try {
 				return Promise.resolve(JSON.parse(String(text)));
 			} catch (e) {
-				throw new TypeError("the result cannot be parsed");
+				throw new TypeError("the result cannot be parsed, check the URL");
 			}
 		})
 		.catch((e) => {

--- a/source/i18n/translations.mjs
+++ b/source/i18n/translations.mjs
@@ -217,10 +217,9 @@ class Translations extends Base {
 * @param {HTMLElement|undefined} [element] - Element to search for translations. Default: element with objectlink @schukai/monster/i18n/translations@@link.
 * @returns {Translations}
 * @throws {Error} Element is not an HTMLElement.
- * @throws {Error} Cannot find element with translations. Add a translations object to the document.
+ * @throws {Error} Cannot find the element with translations. Add the translation object to the document.
 * @throws {Error} This element has no translations.
 * @throws {Error} Missing translations.
- * @memberOf Monster.I18n
 */
 function getDocumentTranslations(element) {
 	const d = getDocument();
@@ -231,7 +230,7 @@ function getDocumentTranslations(element) {
 		);
 		if (element === null) {
 			throw new Error(
-				"Cannot find element with translations. Add a translations object to the document.",
+				"Cannot find the element with translations. Add the translation object to the document.",
 			);
 		}
 	}