@schukai/monster 3.54.0 → 3.55.1

package/source/components/datatable/filter.mjs

@@ -4,7 +4,11 @@
  */
 
 import { instanceSymbol } from "../../constants.mjs";
-import { findElementWithIdUpwards } from "../../dom/util.mjs";
+import { findTargetElementFromEvent } from "../../dom/events.mjs";
+import {
+	findElementWithIdUpwards,
+	findElementWithSelectorUpwards,
+} from "../../dom/util.mjs";
 import {
 	assembleMethodSymbol,
 	CustomElement,
@@ -23,11 +27,20 @@ import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
 import "../form/message-state-button.mjs";
 import { Formatter } from "../../text/formatter.mjs";
 import { generateRangeComparisonExpression } from "../../text/util.mjs";
-import { generateUniqueConfigKey } from "../host/util.mjs";
+
 import {
 	parseBracketedKeyValueHash,
 	createBracketedKeyValueHash,
 } from "../../text/bracketed-key-value-hash.mjs";
+import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
+import { SpaceStyleSheet } from "../stylesheet/space.mjs";
+import { FormStyleSheet } from "../stylesheet/form.mjs";
+
+import {
+	getStoredFilterConfigKey,
+	getFilterConfigKey,
+	parseDateInput,
+} from "./filter/util.mjs";
 
 import "./filter/select.mjs";
 
@@ -51,12 +64,32 @@ const searchButtonElementSymbol = Symbol("searchButtonElement");
  */
 const resetButtonElementSymbol = Symbol("resetButtonElement");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const saveButtonElementSymbol = Symbol("saveButtonElement");
+
 /**
  * @private
  * @type {symbol}
  */
 const filterControlElementSymbol = Symbol("filterControlElement");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const filterSaveActionButtonElementSymbol = Symbol(
+	"filterSaveActionButtonElement",
+);
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const filterTabElementSymbol = Symbol("filterTabElement");
+
 /**
  * @private
  * @type {symbol}
@@ -132,10 +165,13 @@ class Filter extends CustomElement {
 	 * @returns {Monster.Components.Datatable.Filter}
 	 */
 	showFailureMessage(message) {
-		this[searchButtonElementSymbol].setState("failed", 10000);
+		this[searchButtonElementSymbol].setState(
+			"failed",
+			this.getOption("timeouts.message", 4000),
+		);
 		this[searchButtonElementSymbol]
-			.setMessage(String(message))
-			.showMessage(10000);
+			.setMessage(message.toString())
+			.showMessage(this.getOption("timeouts.message", 4000));
 		return this;
 	}
 
@@ -154,7 +190,10 @@ class Filter extends CustomElement {
 	 * @returns {Monster.Components.Datatable.Filter}
 	 */
 	showSuccess() {
-		this[searchButtonElementSymbol].setState("successful", 5000);
+		this[searchButtonElementSymbol].setState(
+			"successful",
+			this.getOption("timeouts.message", 4000),
+		);
 		return this;
 	}
 
@@ -175,17 +214,34 @@ class Filter extends CustomElement {
 	 * @property {string} defaultQuery Default query
 	 */
 	get defaults() {
-		const obj = Object.assign({}, super.defaults, {
+		return Object.assign({}, super.defaults, {
 			templates: {
 				main: getTemplate(),
 			},
+
 			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",
 			},
 
+			templateMapping: {
+				"filter-save-label": null,
+				"filter-name-label": name,
+			},
+
+			storedConfig: {
+				enabled: true,
+				selector: "",
+			},
+
+			timeouts: {
+				message: 4000,
+			},
+
 			queries: {
 				wrap: (value, definition) => {
 					return value;
@@ -201,8 +257,6 @@ class Filter extends CustomElement {
 			query: "",
 			defaultQuery: "",
 		});
-
-		return obj;
 	}
 
 	/**
@@ -217,6 +271,15 @@ class Filter extends CustomElement {
 	 * @return {FilterButton}
 	 */
 	[assembleMethodSymbol]() {
+		this.setOption(
+			"templateMapping.filter-save-label",
+			this.getOption("labels.save"),
+		);
+		this.setOption(
+			"templateMapping.filter-name-label",
+			this.getOption("labels.filter-name"),
+		);
+
 		super[assembleMethodSymbol]();
 
 		initControlReferences.call(this);
@@ -226,9 +289,10 @@ class Filter extends CustomElement {
 			.call(this)
 			.then(() => {
 				initFilter.call(this);
+				updateFilterTabs.call(this);
 			})
 			.catch((error) => {
-				console.error(error);
+				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message);
 			});
 	}
 
@@ -260,7 +324,7 @@ class Filter extends CustomElement {
 	 * @return {Array<CSSStyleSheet>}
 	 */
 	static getCSSStyleSheet() {
-		return [FilterStyleSheet];
+		return [FilterStyleSheet, FormStyleSheet, ThemeStyleSheet, SpaceStyleSheet];
 	}
 }
 
@@ -285,6 +349,20 @@ function initControlReferences() {
 	this[resetButtonElementSymbol] = this.shadowRoot.querySelector(
 		"[data-monster-role=reset-button]",
 	);
+
+	this[saveButtonElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=save-button]",
+	);
+
+	this[filterSaveActionButtonElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=save-action-button]",
+	);
+
+	this[filterTabElementSymbol] = findElementWithSelectorUpwards(
+		this,
+		this.getOption("storedConfig.selector", ""),
+	);
+
 	return this;
 }
 
@@ -329,7 +407,8 @@ function initFilter() {
 				const v = escapeAttributeValue(valuesFromHash[element.id]);
 				const searchInput = element.firstElementChild;
 				try {
-					searchInput.value = valuesFromHash[element.id];
+					//    searchInput.value = valuesFromHash[element.id];
+					searchInput.value = v; //valuesFromHash[element.id];
 				} catch (error) {}
 			}
 
@@ -349,6 +428,7 @@ function initFilter() {
 		"options",
 		this[settingsSymbol].getOptions(),
 	);
+
 	setTimeout(() => {
 		this[filterSelectElementSymbol].value = this[settingsSymbol].getSelected();
 	}, 10);
@@ -360,6 +440,11 @@ function initFilter() {
  * @returns {*}
  */
 function escapeAttributeValue(input) {
+	if (input === undefined || input === null) {
+		debugger;
+		return input;
+	}
+
 	return input
 		.replace(/&/g, "&amp;")
 		.replace(/"/g, "&quot;")
@@ -374,10 +459,9 @@ function escapeAttributeValue(input) {
  * @returns {boolean}
  */
 function getVisibilityFromSlotAttribute(element) {
-	return element.hasAttribute("slot") &&
-		element.getAttribute("slot") === "hidden"
-		? false
-		: true;
+	return !(
+		element.hasAttribute("slot") && element.getAttribute("slot") === "hidden"
+	);
 }
 
 /**
@@ -405,7 +489,7 @@ function initEventHandler() {
 	if (self[filterSelectElementSymbol]) {
 		self[filterSelectElementSymbol].addEventListener(
 			"monster-selection-cleared",
-			function (event) {
+			function () {
 				const settings = self[settingsSymbol].getOptions();
 
 				for (const setting of settings) {
@@ -443,8 +527,109 @@ function initEventHandler() {
 		);
 	}
 
+	if (self[filterSaveActionButtonElementSymbol]) {
+		self[filterSaveActionButtonElementSymbol].setOption(
+			"actions.click",
+			function (event) {
+				const button = findTargetElementFromEvent(
+					event,
+					"data-monster-role",
+					"save-action-button",
+				);
+				const form = button.closest("[data-monster-role=form]");
+
+				if (!form) {
+					button.setState("failed", self.getOption("timeouts.message", 4000));
+					return;
+				}
+
+				const input = form.querySelector("input[name=filter-name]");
+				if (!input) {
+					button.setState("failed", self.getOption("timeouts.message", 4000));
+					return;
+				}
+
+				const name = input.value;
+				if (!name) {
+					button.setState("failed", self.getOption("timeouts.message", 4000));
+					button.setMessage("Please enter a name").showMessage();
+					return;
+				}
+
+				doSearch
+					.call(self, { showEffect: false })
+					.then(() => {
+						const configKey = getStoredFilterConfigKey.call(self);
+						const host = getDocument().querySelector("monster-host");
+						if (!host) {
+							return;
+						}
+
+						const query = self.getOption("query");
+						if (!query) {
+							button.setState(
+								"failed",
+								self.getOption(
+									"timeouts.message",
+									self.getOption("timeouts.message", 4000),
+								),
+							);
+							button
+								.setMessage("No query found")
+								.showMessage(self.getOption("timeouts.message", 4000));
+							return;
+						}
+
+						host
+							.hasConfig(configKey)
+							.then((hasConfig) => {
+								return new Promise((resolve, reject) => {
+									if (hasConfig) {
+										host.getConfig(configKey).then(resolve).catch(reject);
+										return;
+									}
+									return resolve({});
+								});
+							})
+							.then((config) => {
+								config[name] = query;
+								return host.setConfig(configKey, {
+									...config,
+								});
+							})
+							.then(() => {
+								button.setState(
+									"successful",
+									self.getOption("timeouts.message", 4000),
+								);
+								updateFilterTabs.call(self);
+							})
+							.catch((error) => {
+								button.setState(
+									"failed",
+									self.getOption("timeouts.message", 4000),
+								);
+								button
+									.setMessage(error.message)
+									.showMessage(self.getOption("timeouts.message", 4000));
+							});
+					})
+					.catch((error) => {
+						button.setState("failed", self.getOption("timeouts.message", 4000));
+						const msg = error.message || error;
+						button
+							.setMessage(msg)
+							.showMessage(self.getOption("timeouts.message", 4000));
+					});
+			},
+		);
+	}
+
 	self[searchButtonElementSymbol].setOption("actions.click", () => {
-		doSearch.call(self);
+		doSearch
+			.call(self)
+			.then(() => {})
+			.catch((error) => {});
 	});
 
 	// the reset button should reset the filter and the search query
@@ -492,46 +677,192 @@ function initEventHandler() {
 			doSearch.call(self, { showEffect: false });
 		}
 	});
+
+	// tabs
+	const element = this[filterTabElementSymbol];
+	if (element) {
+		initTabEvents.call(this);
+	}
+}
+
+function initTabEvents() {
+	this[filterTabElementSymbol].addEventListener(
+		"monster-tab-changed",
+		(event) => {
+			const query = event?.detail?.data?.["data-monster-query"];
+			this.setOption("query", query);
+		},
+	);
+
+	this[filterTabElementSymbol].addEventListener(
+		"monster-tab-remove",
+		(event) => {
+			const labels = [];
+			const buttons = this[filterTabElementSymbol].getOption("buttons");
+
+			const keys = ["popper", "standard"];
+			for (let i = 0; i < keys.length; i++) {
+				const key = keys[i];
+
+				for (const button of buttons[key]) {
+					if (button.label !== event.detail.label) {
+						labels.push(button.label);
+					}
+				}
+			}
+
+			const document = getDocument();
+			const host = document.querySelector("monster-host");
+			if (!(host && this.id)) {
+				return;
+			}
+
+			const configKey = getStoredFilterConfigKey.call(this);
+			host
+				.hasConfig(configKey)
+				.then((hasConfig) => {
+					if (!hasConfig) {
+						return;
+					}
+
+					return host.getConfig(configKey);
+				})
+				.then((config) => {
+					for (const [name, query] of Object.entries(config)) {
+						if (labels.includes(name)) {
+							continue;
+						}
+
+						delete config[name];
+					}
+
+					return host.setConfig(configKey, {
+						...config,
+					});
+				});
+		},
+	);
 }
 
 /**
  * @private
  */
-function doSearch({ showEffect } = { showEffect: true }) {
+function updateFilterTabs() {
+	const element = this[filterTabElementSymbol];
+	if (!element) {
+		return;
+	}
+
+	const document = getDocument();
+	const host = document.querySelector("monster-host");
+	if (!(host && this.id)) {
+		return;
+	}
+
+	const configKey = getStoredFilterConfigKey.call(this);
+	host
+		.hasConfig(configKey)
+		.then((hasConfig) => {
+			if (!hasConfig) {
+				return;
+			}
+
+			return host.getConfig(configKey);
+		})
+		.then((config) => {
+			for (const [name, query] of Object.entries(config)) {
+				const found = element.querySelector(
+					`[data-monster-button-label="${name}"]`,
+				);
+				if (found) {
+					continue;
+				}
+
+				if (query === undefined || query === null) {
+					continue;
+				}
+
+				const escapedQuery = escapeAttributeValue(query);
+
+				element.insertAdjacentHTML(
+					"beforeend",
+					`
+             <div data-monster-button-label="${name}"
+             data-monster-removable="true" 
+             data-monster-query="${escapedQuery}" data-monster-role="filter-tab" >
+             </div>`,
+				);
+			}
+		})
+		.catch((error) => {
+			if (error instanceof Error) {
+				addAttributeToken(
+					this,
+					ATTRIBUTE_ERRORMESSAGE,
+					error.message + " " + error.stack,
+				);
+			} else {
+				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error + "");
+			}
+		});
+}
+
+/**
+ * @private
+ * @param showEffect
+ * @returns {Promise<*>}
+ */
+function doSearch({ showEffect } = { showEffect: true }) {;
+
 	this.resetFailureMessage();
 
 	if (showEffect) {
-		this[searchButtonElementSymbol].setState("activity", 10000);
+		this[searchButtonElementSymbol].setState(
+			"activity",
+			this.getOption("timeouts.message", 4000),
+		);
 	}
 
-	collectSearchQueries
+	return collectSearchQueries
 		.call(this)
 		.then((query) => {
 			const buildQuery = buildSearchQuery.call(this, query);
 			if (buildQuery === "" && !this.getOption("defaultQuery")) {
-				this[searchButtonElementSymbol].removeState();
-				this[searchButtonElementSymbol]
-					.setMessage(this.getOption("labels.empty-query-and-no-default"))
-					.showMessage(5000);
-				return;
+				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));
+				}
+
+				throw new Error(msg);
 			}
 
 			if (buildQuery === this.getOption("query")) {
-				this[searchButtonElementSymbol].removeState();
-				this[searchButtonElementSymbol]
-					.setMessage(this.getOption("labels.query-not-changed"))
-					.showMessage(5000);
-				return;
+				const msg = this.getOption("labels.query-not-changed");
+
+				if (showEffect) {
+					this[searchButtonElementSymbol].removeState();
+					this[searchButtonElementSymbol]
+						.setMessage(msg)
+						.showMessage(this.getOption("timeouts.message", 4000));
+				}
+
+				throw new Error(msg);
 			}
 
 			if (showEffect) {
-				this[searchButtonElementSymbol].setState("activity", 2000);
+				this[searchButtonElementSymbol].setState(
+					"activity",
+					this.getOption("timeouts.message", 4000),
+				);
 			}
 
 			this.setOption("query", buildSearchQuery.call(this, query));
 		})
 		.catch((error) => {
-			console.error(error);
 			if (error instanceof Error) {
 				addAttributeToken(
 					this,
@@ -542,15 +873,22 @@ function doSearch({ showEffect } = { showEffect: true }) {
 				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
 			}
 
-			this[searchButtonElementSymbol].setState("failed", 10000);
-			this[searchButtonElementSymbol].setMessage(String(error)).showMessage();
+			if (showEffect) {
+				this[searchButtonElementSymbol].setState(
+					"failed",
+					this.getOption("timeouts.message", 4000),
+				);
+				this[searchButtonElementSymbol].setMessage(error.message).showMessage();
+			}
+
+			return Promise.reject(error);
 		});
 }
 
 /**
  * @private
  * @param queries
- * @returns {string|undefind}
+ * @returns {*|string}
  */
 function buildSearchQuery(queries) {
 	if (!isArray(queries) || queries.length === 0) {
@@ -581,6 +919,8 @@ function collectSearchQueries() {
 		const query = [];
 		const wrapCallback = this.getOption("queries.wrap");
 
+		let hasNoIdError = false;
+
 		getSlottedElements
 			.call(this, "label[data-monster-label]")
 			.forEach((element) => {
@@ -591,7 +931,7 @@ function collectSearchQueries() {
 
 				const id = element.id;
 				if (!id) {
-					reject(new Error("no filter id is defined"));
+					hasNoIdError = true;
 					return;
 				}
 
@@ -659,132 +999,16 @@ function collectSearchQueries() {
 				}
 			});
 
+		if (hasNoIdError) {
+			reject(new Error("some or all filter elements have no id"));
+			return;
+		}
+
 		getGlobal().location.hash = createBracketedKeyValueHash(currentHash);
 		resolve(query);
 	});
 }
 
-/**
- * @private
- * @param {String} str
- * @param {String} field
- * @returns {String}
- * @throws {Error} if no field is defined
- */
-function parseDateInput(str, field) {
-	if (!str) {
-		return "";
-	}
-
-	if (!field) {
-		throw new Error("no field is defined");
-	}
-
-	// Define the supported formats
-	//let formats = ['DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD', 'YYYY/MM/DD', 'DD.MM.YYYY'];
-	const formats = ["YYYY-MM-DD"];
-	// Determine the current date format of the localization
-	const currentDateFormat = new Intl.DateTimeFormat()
-		.format(new Date())
-		.replace(/\d/g, "D");
-	//  formats.push(currentDateFormat);
-
-	// Run through the supported formats and try to parse the date
-	for (let i = 0; i < formats.length; i++) {
-		const format = formats[i];
-		// Replace the corresponding placeholders in the format string with regular expressions
-
-		try {
-			const pattern = format
-				.replace("DD", "\\d{2}")
-				.replace("MM", "\\d{2}")
-				.replace("YYYY", "\\d{4}");
-			const rangePattern =
-				"(?<from>" + pattern + ")\\s*-\\s*(?<to>" + pattern + ")";
-
-			const rangeRegex = new RegExp("^" + rangePattern + "$", "g");
-
-			if (rangeRegex.test(str)) {
-				rangeRegex.lastIndex = 0;
-
-				const rangeResult = rangeRegex.exec(str);
-
-				if (!rangeResult) {
-					continue;
-				}
-
-				const from = rangeResult?.groups?.from;
-				const to = rangeResult?.groups?.to;
-
-				if (from && to) {
-					return (
-						"(" +
-						field +
-						">='" +
-						from +
-						" 00:00:00' AND " +
-						field +
-						"<='" +
-						to +
-						" 23:59:59')"
-					);
-				}
-
-				if (from) {
-					return "(" + field + ">='" + from + " 00:00:00')";
-				} else if (to) {
-					return "(" + field + "<='" + to + "' 23:59:59')";
-				}
-
-				return "false";
-			}
-
-			const prefix = str.substring(0, 1) === "-";
-			const suffix = str.substring(str.length - 1, str.length) === "-";
-
-			if (prefix) {
-				str = str.substring(1, str.length);
-			} else if (suffix) {
-				str = str.substring(0, str.length - 1);
-			}
-
-			const regex = new RegExp("^(?<date>" + pattern + ")$", "g");
-			if (regex.test(str)) {
-				regex.lastIndex = 0;
-				const result = regex.exec(str);
-
-				if (!result) {
-					continue;
-				}
-
-				const date = result?.groups?.date;
-				if (date) {
-					if (prefix) {
-						return "(" + field + "<='" + date + " 23:59:59')";
-					} else if (suffix) {
-						return "(" + field + ">='" + date + "' 00:00:00')";
-					}
-					return (
-						"(" +
-						field +
-						">='" +
-						date +
-						" 00:00:00' AND " +
-						field +
-						"<='" +
-						date +
-						" 23:59:59')"
-					);
-				} else {
-					return "false";
-				}
-			}
-		} catch (e) {}
-	}
-
-	return "false";
-}
-
 /**
  * @private
  * @param label
@@ -796,7 +1020,9 @@ function getControlValuesFromLabel(label) {
 	if (foundControl) {
 		if (foundControl.tagName === "INPUT") {
 			if (foundControl.type === "checkbox") {
-				const checkedControls = label.querySelectorAll(`${control}:checked`);
+				const checkedControls = label.querySelectorAll(
+					`${foundControl}:checked`,
+				);
 				const values = [];
 
 				checkedControls.forEach((checkedControl) => {
@@ -805,7 +1031,7 @@ function getControlValuesFromLabel(label) {
 
 				return values;
 			} else if (foundControl.type === "radio") {
-				const checkedControl = label.querySelector(`${control}:checked`);
+				const checkedControl = label.querySelector(`${foundControl}:checked`);
 
 				if (checkedControl) {
 					return checkedControl.value;
@@ -823,14 +1049,6 @@ function getControlValuesFromLabel(label) {
 	return null;
 }
 
-/**
- * @private
- * @returns {string}
- */
-function getFilterConfigKey() {
-	return generateUniqueConfigKey("datatable", this?.id, "filter");
-}
-
 /**
  * @private
  * @returns {Promise<unknown>}
@@ -849,7 +1067,7 @@ function initFromConfig() {
 		host
 			.getConfig(configKey)
 			.then((config) => {
-				if (config) {
+				if (config && isObject(config)) {
 					this[settingsSymbol].setOptions(config);
 				}
 				resolve();
@@ -860,7 +1078,17 @@ function initFromConfig() {
 					return;
 				}
 
-				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+				// config not written
+				if (error?.message?.match(/is not defined/)) {
+					resolve();
+					return;
+				}
+
+				addAttributeToken(
+					this,
+					ATTRIBUTE_ERRORMESSAGE,
+					error?.message || error,
+				);
 				reject(error);
 			});
 	});
@@ -880,7 +1108,7 @@ function updateConfig() {
 	try {
 		host.setConfig(configKey, this[settingsSymbol].getOptions());
 	} catch (error) {
-		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message || error);
 	}
 }
 
@@ -898,15 +1126,31 @@ function getTemplate() {
                     <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-message-state-button data-monster-role="search-button" class="stretched-control"
-                                                  data-monster-replace="path:labels.search">
-                    </monster-message-state-button>
+                    <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}">
+                            </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>