@schukai/monster 3.96.1 → 3.96.3

package/source/components/datatable/datasource/rest.mjs

@@ -104,7 +104,7 @@ class Rest extends Datasource {
 	 * @property {string} templates.main Main template
 	 * @property {Object} features Feature definitions
 	 * @property {boolean} features.autoInit If true, the component is initialized automatically
-	 * @property {boolean} features.filter If true, the component is initialized automatically
+	 * @property {boolean} features.filter If true, the filter.id is used to attach a filter control
 	 * @property {Object} autoInit Auto init definitions
 	 * @property {boolean} autoInit.intersectionObserver If true, the intersection observer is initialized automatically
 	 * @property {boolean} autoInit.oneTime If true, the intersection observer is initialized only once
@@ -131,7 +131,7 @@ class Rest extends Datasource {
 
 		restOptions.read.parameters = {
 			filter: null,
-			oderBy: null,
+			orderBy: null,
 			page: "1",
 		};
 
@@ -199,7 +199,6 @@ class Rest extends Datasource {
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 		initEventHandler.call(this);
-		initAutoInit.call(this);
 	}
 
 	/**
@@ -260,6 +259,12 @@ class Rest extends Datasource {
 		queueMicrotask(() => {
 			if (this.getOption("features.filter", false) === true) {
 				initFilter.call(this);
+
+				if (!this[filterObserverSymbol]) {
+					initAutoInit.call(this);
+				}
+			} else {
+				initAutoInit.call(this);
 			}
 		});
 	}
@@ -286,12 +291,26 @@ class Rest extends Datasource {
 		this[dataSourceSymbol].setOption("read", opt);
 
 		let url = this.getOption("read.url");
-		const formatter = new Formatter(this.getOption("read.parameters"));
-
 		if (!url) {
 			return Promise.reject(new Error("No url defined"));
 		}
 
+		const param = this.getOption("read.parameters", {});
+
+		if (param.query === null || param.query === undefined) {
+			param.query = "";
+		}
+
+		if (param.page === null || param.page === undefined) {
+			param.page = "1";
+		}
+
+		if (param.orderBy === null || param.orderBy === undefined) {
+			param.orderBy = "";
+		}
+
+		const formatter = new Formatter(param);
+
 		url = formatter.format(url);
 
 		this[dataSourceSymbol].setOption("read.url", url);
@@ -368,25 +387,6 @@ class Rest extends Datasource {
 			});
 		});
 	}
-
-	// /**
-	//  * @return {int}
-	//  */
-	// currentPage() {
-	//
-	//     const key = this.getOption("read.mapping.currentPage")
-	//     if (key === undefined) {
-	//         return 1;
-	//     }
-	//
-	//     const pf = new Pathfinder(this.data);
-	//     if (pf.exists(key)) {
-	//         return parseInt(pf.getVia(key), 10);
-	//     }
-	//
-	//     return 1;
-	//
-	// }
 }
 
 /**
@@ -413,23 +413,28 @@ function initFilter() {
 		throw new Error("filter feature is enabled but no filter id is defined");
 
 	const filterControl = findElementWithIdUpwards(this, filterID);
-	if (!filterControl)
-		throw new Error(
+	if (!filterControl) {
+		addAttributeToken(
+			this,
+			ATTRIBUTE_ERRORMESSAGE,
 			"filter feature is enabled but no filter control with id " +
 				filterID +
 				" is found",
 		);
+		return;
+	}
 
 	this[filterObserverSymbol] = new Observer(() => {
 		const query = filterControl.getOption("query");
 		if (query === undefined) {
 			return;
 		}
+
 		this.setParameters({ query: query });
 		this.fetch()
 			.then((response) => {
 				if (!(response instanceof Response)) {
-					throw new Error("Response is not an instance of Response");
+					return Promise.reject(new Error("response is not a Response object"));
 				}
 
 				if (response?.ok === true) {
@@ -584,8 +589,7 @@ function initIntersectionObserver() {
  */
 function getTemplate() {
 	// language=HTML
-	return `
-        <slot></slot>`;
+	return `<slot></slot>`;
 }
 
 registerCustomElement(Rest);

package/source/components/datatable/embedded-pagination.mjs

@@ -39,7 +39,9 @@ class EmbeddedPagination extends Pagination {
 	 * @return {symbol}
 	 */
 	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/embedded-pagination");
+		return Symbol.for(
+			"@schukai/monster/components/datatable/embedded-pagination",
+		);
 	}
 
 	/**

package/source/components/datatable/filter.mjs

@@ -13,7 +13,10 @@
  */
 
 import { instanceSymbol } from "../../constants.mjs";
-import { findTargetElementFromEvent } from "../../dom/events.mjs";
+import {
+	findTargetElementFromEvent,
+	fireCustomEvent,
+} from "../../dom/events.mjs";
 import {
 	findElementWithIdUpwards,
 	findElementWithSelectorUpwards,
@@ -25,7 +28,6 @@ import {
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { ID } from "../../types/id.mjs";
-import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { Settings } from "./filter/settings.mjs";
 import { FilterStyleSheet } from "./stylesheet/filter.mjs";
 import { getDocument, getWindow } from "../../dom/util.mjs";
@@ -54,6 +56,14 @@ import {
 
 import "./filter/select.mjs";
 
+import "../form/button.mjs";
+import "../form/select.mjs";
+import "../form/popper-button.mjs";
+import "../form/toggle-switch.mjs";
+import "../form/context-help.mjs";
+import "../form/context-error.mjs";
+import "../form/message-state-button.mjs";
+
 export { Filter };
 
 /**
@@ -130,9 +140,23 @@ const sizeDataSymbol = Symbol("sizeData");
  */
 const debounceSizeSymbol = Symbol("debounceSize");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const hashChangeSymbol = Symbol("hashChange");
+
 /**
  * The Filter component is used to show and handle the filter values.
  *
+ * @fragments /fragments/components/datatable/filter
+ *
+ * @example /examples/components/datatable/filter-simple First filter
+ * @example /examples/components/datatable/filter-advanced Advanced filter
+ * @example /examples/components/datatable/filter-store Store filter
+ *
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/272.html
+ *
  * @copyright schukai GmbH
  * @summary The Filter component is used to show and handle the filter values.
  */
@@ -143,6 +167,9 @@ class Filter extends CustomElement {
 	constructor() {
 		super();
 		this[settingsSymbol] = new Settings();
+
+		// debounce the hash change event if doSearch is called by click the search button
+		this[hashChangeSymbol] = 0;
 	}
 
 	/**
@@ -171,7 +198,7 @@ class Filter extends CustomElement {
 
 	/**
 	 *
-	 * @return {{Filter}}
+	 * @return {Filter}
 	 */
 	resetFailureMessage() {
 		this[searchButtonElementSymbol].hideMessage();
@@ -181,7 +208,7 @@ class Filter extends CustomElement {
 
 	/**
 	 *
-	 * @return {{Filter}}
+	 * @return {Filter}
 	 */
 	showSuccess() {
 		this[searchButtonElementSymbol].setState(
@@ -210,8 +237,10 @@ class Filter extends CustomElement {
 	 * @property {Object} formatter.marker Marker definitions
 	 * @property {Object} formatter.marker.open Marker open
 	 * @property {Object} formatter.marker.close Marker close
+	 * @property {Object} features Feature definitions
+	 * @property {boolean} features.storedConfig Stored configuration, this replaces the setting `storedConfig.enabled` @since 3.97.0
 	 * @property {Object} storedConfig Stored configuration
-	 * @property {boolean} storedConfig.enabled Enabled
+	 * @property {boolean} storedConfig.enabled The store has been enabled, this option will no longer have any effect. @deprecated 20250101
 	 * @property {string} storedConfig.selector Selector
 	 * @property {Object} timeouts Timeout definitions
 	 * @property {number} timeouts.message Message timeout
@@ -227,19 +256,23 @@ class Filter extends CustomElement {
 			templates: {
 				main: getTemplate(),
 			},
+
 			formatter: {
 				marker: {
 					open: null,
 					close: null,
 				},
 			},
+
 			labels: {
 				search: "Search",
 				reset: "Reset",
 				save: "Save",
 				"filter-name": "Filter name",
-				"empty-query-and-no-default": "Please select a filter",
-				"query-not-changed": "The query has not changed",
+				"empty-query-and-no-default":
+					"The query is empty and there is no default query.",
+				"query-not-changed":
+					"The search request has not changed, so no search is required.",
 			},
 
 			templateMapping: {
@@ -247,6 +280,10 @@ class Filter extends CustomElement {
 				"filter-name-label": name,
 			},
 
+			features: {
+				storedConfig: false,
+			},
+
 			storedConfig: {
 				enabled: true,
 				selector: "",
@@ -268,8 +305,8 @@ class Filter extends CustomElement {
 				},
 			},
 
-			query: undefined,
-			defaultQuery: "",
+			query: null,
+			defaultQuery: null,
 			eventProcessing: true,
 		});
 	}
@@ -284,12 +321,14 @@ class Filter extends CustomElement {
 
 	/**
 	 * @return {FilterButton}
+	 * @fires monster-filter-initialized
 	 */
 	[assembleMethodSymbol]() {
 		this.setOption(
 			"templateMapping.filter-save-label",
 			this.getOption("labels.save"),
 		);
+
 		this.setOption(
 			"templateMapping.filter-name-label",
 			this.getOption("labels.filter-name"),
@@ -302,12 +341,19 @@ class Filter extends CustomElement {
 
 		initFromConfig
 			.call(this)
-			.then(() => {
-				initFilter.call(this);
-				updateFilterTabs.call(this);
-			})
+			.then(() => {})
 			.catch((error) => {
 				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message);
+			})
+			.finally(() => {
+				initFilter.call(this);
+				updateFilterTabs.call(this);
+				doSearch
+					.call(this, { showEffect: false })
+					.then(() => {
+						fireCustomEvent(this, "monster-filter-initialized");
+					})
+					.catch(() => {});
 			});
 	}
 
@@ -316,7 +362,6 @@ class Filter extends CustomElement {
 	 */
 	connectedCallback() {
 		super.connectedCallback();
-
 		getWindow().addEventListener(
 			"hashchange",
 			this[locationChangeHandlerSymbol],
@@ -385,10 +430,13 @@ function updateFilterSelections() {
 	queueMicrotask(() => {
 		const options = this[settingsSymbol].getOptions();
 		this[filterSelectElementSymbol].setOption("options", options);
-		queueMicrotask(() => {
-			this[filterSelectElementSymbol].value =
-				this[settingsSymbol].getSelected();
-		});
+
+		setTimeout(() => {
+			window.requestAnimationFrame(() => {
+				this[filterSelectElementSymbol].value =
+					this[settingsSymbol].getSelected();
+			});
+		}, 0);
 	});
 }
 
@@ -411,7 +459,12 @@ function initFilter() {
 		.forEach((element) => {
 			const label = element.getAttribute("data-monster-label");
 			if (!label) {
-				throw new Error("no filter label is defined");
+				addAttributeToken(
+					this,
+					ATTRIBUTE_ERRORMESSAGE,
+					"no filter label is defined",
+				);
+				return;
 			}
 
 			let value = element.id;
@@ -448,6 +501,7 @@ function initFilter() {
 
 			this[settingsSymbol].set({ value, label, visible });
 		});
+
 	updateFilterSelections.call(this);
 }
 
@@ -499,6 +553,33 @@ function setSlotAttribute(element, visible) {
  */
 function initEventHandler() {
 	const self = this;
+
+	let lastHash = getGlobal().location.hash;
+	self[locationChangeHandlerSymbol] = () => {
+		if (lastHash === getGlobal().location.hash) {
+			return;
+		}
+
+		/**
+		 * debounce the hash change event if doSearch
+		 * is called by click the search button
+		 */
+		if (self[hashChangeSymbol] > 0) {
+			self[hashChangeSymbol]--;
+			return;
+		}
+
+		initFilter.call(this);
+
+		doSearch
+			.call(self)
+			.then(() => {})
+			.catch((error) => {})
+			.finally(() => {
+				lastHash = getGlobal().location.hash;
+			});
+	};
+
 	/**
 	 * Monster.Components.Form.event:monster-selection-cleared
 	 */
@@ -542,6 +623,7 @@ function initEventHandler() {
 		);
 	}
 
+	/** save the current filter */
 	if (self[filterSaveActionButtonElementSymbol]) {
 		self[filterSaveActionButtonElementSymbol].setOption(
 			"actions.click",
@@ -641,6 +723,8 @@ function initEventHandler() {
 	}
 
 	self[searchButtonElementSymbol].setOption("actions.click", () => {
+		self[hashChangeSymbol] = 1;
+
 		doSearch
 			.call(self)
 			.then(() => {})
@@ -684,7 +768,10 @@ function initEventHandler() {
 		}
 
 		if (event.keyCode === 13) {
-			doSearch.call(self, { showEffect: false });
+			doSearch
+				.call(self, { showEffect: false })
+				.then(() => {})
+				.catch((error) => {});
 		}
 	});
 
@@ -696,6 +783,7 @@ function initEventHandler() {
 }
 
 function initTabEvents() {
+	const self = this;
 	this[filterTabElementSymbol].addEventListener(
 		"monster-tab-changed",
 		(event) => {
@@ -836,7 +924,18 @@ function doSearch({ showEffect } = { showEffect: true }) {
 		.call(this)
 		.then((query) => {
 			const buildQuery = buildSearchQuery.call(this, query);
-			if (buildQuery === "" && !this.getOption("defaultQuery")) {
+			if (buildQuery === null) {
+				const msg = this.getOption("labels.empty-query-and-no-default");
+				if (showEffect) {
+					this[searchButtonElementSymbol].removeState();
+					this[searchButtonElementSymbol]
+						.setMessage(msg)
+						.showMessage(this.getOption("timeouts.message", 4000));
+				}
+				return Promise.reject(new Error(msg));
+			}
+
+			if (buildQuery === "" && this.getOption("defaultQuery") === null) {
 				const msg = this.getOption("labels.empty-query-and-no-default");
 
 				if (showEffect) {
@@ -846,7 +945,7 @@ function doSearch({ showEffect } = { showEffect: true }) {
 						.showMessage(this.getOption("timeouts.message", 4000));
 				}
 
-				throw new Error(msg);
+				return Promise.reject(new Error(msg));
 			}
 
 			if (buildQuery === this.getOption("query")) {
@@ -859,7 +958,7 @@ function doSearch({ showEffect } = { showEffect: true }) {
 						.showMessage(this.getOption("timeouts.message", 4000));
 				}
 
-				throw new Error(msg);
+				return Promise.reject(new Error(msg));
 			}
 
 			if (showEffect) {
@@ -870,6 +969,8 @@ function doSearch({ showEffect } = { showEffect: true }) {
 			}
 
 			this.setOption("query", buildSearchQuery.call(this, query));
+
+			return Promise.resolve();
 		})
 		.catch((error) => {
 			if (error instanceof Error) {
@@ -945,7 +1046,6 @@ function collectSearchQueries() {
 					return;
 				}
 
-				//const visible = window.getComputedStyle(element).display !== "none";
 				const visible = getVisibilityFromSlotAttribute(element);
 				if (!visible) {
 					return;
@@ -1136,49 +1236,50 @@ function updateConfig() {
  */
 function getTemplate() {
 	// language=HTML
-	return `<div data-monster-role="control" part="control">
-    <div data-monster-role="container">
-        <div data-monster-role="layout">
-            <div data-monster-role="filter">
-                <slot></slot>
-                <slot name="hidden"></slot>
-            </div>
-            <div data-monster-role="select-and-search">
-                <monster-message-state-button data-monster-role="search-button" class="stretched-control"
-                                              data-monster-replace="path:labels.search">
-                </monster-message-state-button>
-                <monster-select class="stretched-control"
-                                data-monster-selected-template="summary"
-                                data-monster-option-type="checkbox"
-                                data-monster-option-filter-mode="options"
-                                data-monster-option-filter-position="popper"
-                                data-monster-role="filter-select"></monster-select>
-                <monster-popper-button data-monster-role="save-button" class="stretched-control"
-                                       data-monster-attributes="data-monster-visible path:storedConfig.enabled">
-                    <div slot="button">\${filter-save-label}</div>
-                    <div class="monster-form" data-monster-role="form">
-
-                        <label for="filter-name">\${filter-name-label}
-                            <input name="filter-name"
-                                   type="search"
-                                   class="monster-margin-bottom-5"></label>
-                        <monster-message-state-button
-                                data-monster-role="save-action-button"
-                                data-monster-option-labels-button="\${filter-save-label}">
+	return `
+        <div data-monster-role="control" part="control">
+            <div data-monster-role="container">
+                <div data-monster-role="layout">
+                    <div data-monster-role="filter">
+                        <slot></slot>
+                        <slot name="hidden"></slot>
+                    </div>
+                    <div data-monster-role="select-and-search">
+                        <monster-message-state-button data-monster-role="search-button" class="stretched-control"
+                                                      data-monster-replace="path:labels.search">
                         </monster-message-state-button>
-
+                        <monster-select class="stretched-control"
+                                        data-monster-selected-template="summary"
+                                        data-monster-option-type="checkbox"
+                                        data-monster-option-filter-mode="options"
+                                        data-monster-option-filter-position="popper"
+                                        data-monster-role="filter-select"></monster-select>
+                        <monster-popper-button data-monster-role="save-button" class="stretched-control"
+                                               data-monster-attributes="data-monster-visible path:features.storedConfig">
+                            <div slot="button">\${filter-save-label}</div>
+                            <div class="monster-form" data-monster-role="form">
+
+                                <label for="filter-name">\${filter-name-label}
+                                    <input name="filter-name"
+                                           type="search"
+                                           class="monster-margin-bottom-5"></label>
+                                <monster-message-state-button
+                                        data-monster-role="save-action-button"
+                                        data-monster-option-labels-button="\${filter-save-label}">
+                                </monster-message-state-button>
+
+                            </div>
+                        </monster-popper-button>
+                        <monster-button data-monster-role="reset-button" class="stretched-control"
+                                        data-monster-replace="path:labels.reset">
+                        </monster-button>
                     </div>
-                </monster-popper-button>
-                <monster-button data-monster-role="reset-button" class="stretched-control"
-                                data-monster-replace="path:labels.reset">
-                </monster-button>
-            </div>
 
+                </div>
+                <input class="hidden" name="query" data-monster-role="query"
+                       data-monster-attributes="value path:query">
+            </div>
         </div>
-        <input class="hidden" name="query" data-monster-role="query"
-               data-monster-attributes="value path:query">
-    </div>
-</div>
     `;
 }
 

package/source/components/datatable/pagination.mjs

@@ -211,7 +211,7 @@ class Pagination extends CustomElement {
 				showNumbers: ownWidth < parentWidth,
 			};
 
-			this[resizeObserverSymbol] = new ResizeObserver((entries) => {
+			this[resizeObserverSymbol] = new ResizeObserver(() => {
 				if (this[debounceSizeSymbol] instanceof DeadMansSwitch) {
 					try {
 						this[debounceSizeSymbol].touch();
@@ -359,6 +359,7 @@ function initEventHandler() {
 		if (
 			!page ||
 			page === "" ||
+			page === "…" ||
 			page === null ||
 			page === undefined ||
 			page === "undefined" ||
@@ -460,7 +461,7 @@ function buildPagination(current, max) {
 	let next = current === max ? null : current + 1;
 	const itemList = [1];
 
-	if (current > 4) itemList.push("…");
+	if (current > 4) itemList.push(-1);
 
 	const r = 2;
 	const r1 = current - r;
@@ -468,7 +469,7 @@ function buildPagination(current, max) {
 
 	for (let i = r1 > 2 ? r1 : 2; i <= Math.min(max, r2); i++) itemList.push(i);
 
-	if (r2 + 1 < max) itemList.push("…");
+	if (r2 + 1 < max) itemList.push(-1);
 	if (r2 < max) itemList.push(max);
 
 	let prevClass = "";
@@ -483,7 +484,13 @@ function buildPagination(current, max) {
 	}
 
 	const items = itemList.map((item) => {
-		const p = `${item}`;
+		let p = `${item}`;
+
+		if (item === -1) {
+			item = null;
+			p = "…";
+		}
+
 		const c = `${current}`;
 
 		const obj = {
@@ -493,7 +500,7 @@ function buildPagination(current, max) {
 			class: (p === c ? "current" : "").trim(),
 		};
 
-		if (p === "…") {
+		if (item === null) {
 			obj.class += " disabled".trim();
 		}
 
@@ -502,7 +509,7 @@ function buildPagination(current, max) {
 		obj.description = formatter.format(this.getOption("labels.description"));
 		obj.label = formatter.format(this.getOption("labels.page"));
 		obj.href =
-			p === "…"
+			item === null
 				? "#"
 				: p === c
 					? "#"