@schukai/monster 3.51.4 → 3.52.0

package/source/components/datatable/filter.mjs

@@ -0,0 +1,929 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { findElementWithIdUpwards } from "../../dom/util.mjs";
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	getSlottedElements,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { ID } from "../../types/id.mjs";
+import { Settings } from "./filter/settings.mjs";
+import { FilterStyleSheet } from "./stylesheet/filter.mjs";
+import { getDocument, getWindow } from "../../dom/util.mjs";
+import { getGlobal } from "../../types/global.mjs";
+import { isInstance, isFunction, isObject, isArray } from "../../types/is.mjs";
+import { Host } from "../host/host.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+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 "./filter/select.mjs";
+
+export { Filter };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const filterSelectElementSymbol = Symbol("filterSelectElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const searchButtonElementSymbol = Symbol("searchButtonElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const resetButtonElementSymbol = Symbol("resetButtonElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const filterControlElementSymbol = Symbol("filterControlElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const locationChangeHandlerSymbol = Symbol("locationChangeHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const settingsSymbol = Symbol("settings");
+
+/**
+ * The Filter component is used to show and handle the filter values.
+ *
+ * <img src="./images/filter.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ *
+ * You can create this control either by specifying the HTML tag <monster-filter />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-filter');` method.
+ *
+ * ```html
+ * <monster-datatable-filter></monster-datatable-filter>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/component-datatable/source/filter.mjs';
+ * document.createElement('monster-datatable-filter');
+ * ```
+ *
+ * The Body should have a class "hidden" to ensure that the styles are applied correctly.
+ *
+ * ```css
+ * body.hidden {
+ *    visibility: hidden;
+ * }
+ * ```
+ *
+ * @startuml filter.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- Filter
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable
+ * @summary A data set
+ */
+class Filter extends CustomElement {
+	/**
+	 *
+	 */
+	constructor() {
+		super();;
+		this[settingsSymbol] = new Settings();
+	}
+
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/filter@@instance");
+	}
+
+	/**
+	 *
+	 * @param {string} message
+	 * @returns {Monster.Components.Datatable.Filter}
+	 */
+	showFailureMessage(message) {;
+		this[searchButtonElementSymbol].setState("failed", 10000);
+		this[searchButtonElementSymbol]
+			.setMessage(String(message))
+			.showMessage(10000);
+		return this;
+	}
+
+	/**
+	 *
+	 * @returns {Monster.Components.Datatable.Filter}
+	 */
+	resetFailureMessage() {;
+		this[searchButtonElementSymbol].hideMessage();
+		this[searchButtonElementSymbol].removeState();
+		return this;
+	}
+
+	/**
+	 *
+	 * @returns {Monster.Components.Datatable.Filter}
+	 */
+	showSuccess() {;
+		this[searchButtonElementSymbol].setState("successful", 5000);
+		return this;
+	}
+
+	/**
+	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * The individual configuration values can be found in the table.
+	 *
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {Object} labels Label definitions
+	 * @property {string} labels.search Search button label
+	 * @property {string} labels.reset Reset button label
+	 * @property {Object} queries Query definitions
+	 * @property {function} queries.wrap Wrap query
+	 * @property {function} queries.join Join queries
+	 * @property {string} defaultQuery Default query
+	 */
+	get defaults() {
+		const obj = Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			labels: {
+				search: "Search",
+				reset: "Reset",
+				"empty-query-and-no-default": "Please select a filter",
+				"query-not-changed": "The query has not changed",
+			},
+
+			queries: {
+				wrap: (value, definition) => {
+					return value;
+				},
+				join: (queries) => {
+					if (queries.length === 0) {
+						return "";
+					}
+					return queries.join(" AND ");
+				},
+			},
+
+			query: "",
+			defaultQuery: "",
+		});
+
+		return obj;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-datatable-filter";
+	}
+
+	/**
+	 * @return {FilterButton}
+	 */
+	[assembleMethodSymbol]() {;
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+
+		initFromConfig
+			.call(this)
+			.then(() => {
+				initFilter.call(this);
+			})
+			.catch((error) => {
+				console.error(error);
+			});
+	}
+
+	/**
+	 *
+	 */
+	connectedCallback() {;
+		super.connectedCallback();
+
+		getWindow().addEventListener(
+			"hashchange",
+			this[locationChangeHandlerSymbol],
+		);
+	}
+
+	/**
+	 *
+	 */
+	disconnectedCallback() {;
+		super.disconnectedCallback();
+
+		getWindow().removeEventListener(
+			"hashchange",
+			this[locationChangeHandlerSymbol],
+		);
+	}
+
+	/**
+	 * @return {Array<CSSStyleSheet>}
+	 */
+	static getCSSStyleSheet() {
+		return [FilterStyleSheet];
+	}
+}
+
+/**
+ * @private
+ * @return {FilterButton}
+ */
+function initControlReferences() {;
+
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[filterControlElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=control]",
+	);
+	this[filterSelectElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=filter-select]",
+	);
+	this[searchButtonElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=search-button]",
+	);
+	this[resetButtonElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=reset-button]",
+	);
+	return this;
+}
+
+/**
+ * @private
+ * @throws {Error} no filter label is defined
+ */
+function initFilter() {;
+
+	const storedConfig = this[settingsSymbol];
+	this[settingsSymbol] = new Settings();
+
+	const result = parseBracketedKeyValueHash(getGlobal().location.hash);
+	let valuesFromHash = {};
+	if (isObject(result) && result?.[this.id]) {
+		valuesFromHash = result[this.id];
+	}
+
+	getSlottedElements
+		.call(this, "label[data-monster-label]")
+		.forEach((element) => {
+			const label = element.getAttribute("data-monster-label");
+			if (!label) {
+				throw new Error("no filter label is defined");
+			}
+
+			let value = element.id;
+			if (!value) {
+				const prefix = label.replace(/\W/g, "-");
+				prefix.charAt(0).match(/[\d_]/g)?.length ? `f${prefix}` : prefix;
+
+				value = new ID(prefix + "-").toString();
+				element.id = value;
+			}
+
+			let setting = storedConfig.get(value);
+
+			if (setting) {
+				this[settingsSymbol].set(setting);
+			}
+
+			if (valuesFromHash?.[element.id]) {
+				const v = escapeAttributeValue(valuesFromHash[element.id]);
+				const searchInput = element.firstElementChild;
+				try {
+					searchInput.value = valuesFromHash[element.id];
+				} catch (error) {}
+			}
+
+			setting = this[settingsSymbol].get(value);
+			if (setting) {
+				setSlotAttribute(element, setting.visible);
+				//style.display = setting.visible ? "block" : "none";
+			}
+
+			//const visible = window.getComputedStyle(element).display !== "none";
+			const visible = getVisibilityFromSlotAttribute(element);
+
+			this[settingsSymbol].set({ value, label, visible });
+		});
+
+	this[filterSelectElementSymbol].setOption(
+		"options",
+		this[settingsSymbol].getOptions(),
+	);
+	setTimeout(() => {
+		this[filterSelectElementSymbol].value = this[settingsSymbol].getSelected();
+	}, 10);
+}
+
+/**
+ *
+ * @param {string} input
+ * @returns {*}
+ */
+function escapeAttributeValue(input) {
+	return input
+		.replace(/&/g, "&amp;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#x27;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;");
+}
+
+/**
+ *
+ * @param {HTMLElement} element
+ * @returns {boolean}
+ */
+function getVisibilityFromSlotAttribute(element) {
+	return element.hasAttribute("slot") &&
+		element.getAttribute("slot") === "hidden"
+		? false
+		: true;
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {boolean} visible
+ */
+function setSlotAttribute(element, visible) {
+	if (visible) {
+		element.removeAttribute("slot");
+		return;
+	}
+
+	element.setAttribute("slot", "hidden");
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {
+	const self = this;
+	/**
+	 * Monster.Components.Form.event:monster-selection-cleared
+	 */
+	if (self[filterSelectElementSymbol]) {
+		self[filterSelectElementSymbol].addEventListener(
+			"monster-selection-cleared",
+			function (event) {
+				const settings = self[settingsSymbol].getOptions();
+
+				for (const setting of settings) {
+					const filterElement = findElementWithIdUpwards(self, setting.value);
+					if (filterElement) {
+						setSlotAttribute(filterElement, false);
+
+						self[settingsSymbol].set({ value: setting.value, visible: false });
+					}
+				}
+
+				updateConfig.call(self);
+			},
+		);
+
+		self[filterSelectElementSymbol].addEventListener(
+			"monster-changed",
+			function (event) {
+				const filterElement = findElementWithIdUpwards(
+					self,
+					event.detail.value,
+				);
+				if (filterElement) {
+					//filterElement.style.display = event.detail.checked ? "block" : "none";
+					setSlotAttribute(filterElement, event.detail.checked);
+				}
+
+				self[settingsSymbol].set({
+					value: event.detail.value,
+					visible: event.detail.checked,
+				});
+
+				updateConfig.call(self);
+			},
+		);
+	}
+
+	self[searchButtonElementSymbol].setOption("actions.click", () => {
+		doSearch.call(self);
+	});
+
+	// the reset button should reset the filter and the search query
+	// all input elements should be reset to their default values
+	// which is the empty string. we search for all input elements
+	// in the filter and reset them to their default value
+	self[resetButtonElementSymbol].setOption("actions.click", () => {
+		getSlottedElements
+			.call(self, "label[data-monster-label]")
+			.forEach((element) => {
+				const label = element.getAttribute("data-monster-label");
+				if (!label) {
+					return;
+				}
+
+				const input = element.firstElementChild;
+
+				if (input) {
+					input.value = "";
+				}
+			});
+
+		doSearch.call(self, { showEffect: false });
+	});
+
+	self[locationChangeHandlerSymbol] = (event) => {
+		if (event instanceof HashChangeEvent) {
+			if (event.oldURL === event.newURL) {
+				return;
+			}
+		}
+	};
+
+	self.addEventListener("keyup", (event) => {
+		const path = event.composedPath();
+		if (path.length === 0) {
+			return;
+		}
+
+		if (!(path[0] instanceof HTMLInputElement)) {
+			return;
+		}
+
+		if (event.keyCode === 13) {
+			doSearch.call(self, { showEffect: false });
+		}
+	});
+}
+
+/**
+ * @private
+ */
+function doSearch({ showEffect } = { showEffect: true }) {;
+
+	this.resetFailureMessage();
+
+	if (showEffect) {
+		this[searchButtonElementSymbol].setState("activity", 10000);
+	}
+
+	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;
+			}
+
+			if (buildQuery === this.getOption("query")) {
+				this[searchButtonElementSymbol].removeState();
+				this[searchButtonElementSymbol]
+					.setMessage(this.getOption("labels.query-not-changed"))
+					.showMessage(5000);
+				return;
+			}
+
+			if (showEffect) {
+				this[searchButtonElementSymbol].setState("activity", 2000);
+			}
+
+			this.setOption("query", buildSearchQuery.call(this, query));
+		})
+		.catch((error) => {
+			console.error(error);
+			if (error instanceof Error) {
+				addAttributeToken(
+					this,
+					ATTRIBUTE_ERRORMESSAGE,
+					error.message + " " + error.stack,
+				);
+			} else {
+				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+			}
+
+			this[searchButtonElementSymbol].setState("failed", 10000);
+			this[searchButtonElementSymbol].setMessage(String(error)).showMessage();
+		});
+}
+
+/**
+ * @private
+ * @param queries
+ * @returns {string|undefind}
+ */
+function buildSearchQuery(queries) {;
+
+	if (!isArray(queries) || queries.length === 0) {
+		return this.getOption("defaultQuery");
+	}
+
+	const joinCallback = this.getOption("queries.join");
+	if (isFunction(joinCallback)) {
+		return joinCallback(queries);
+	}
+
+	const q = queries.join(" ").trim();
+	if (q.length === 0) {
+		return this.getOption("defaultQuery");
+	}
+
+	return q;
+}
+
+/**
+ * @private
+ * @returns {Promise<unknown>}
+ */
+function collectSearchQueries() {;
+
+	const currentHash = parseBracketedKeyValueHash(getGlobal().location.hash);
+
+	return new Promise((resolve, reject) => {
+		const query = [];
+		const wrapCallback = this.getOption("queries.wrap");
+
+		getSlottedElements
+			.call(this, "label[data-monster-label]")
+			.forEach((element) => {
+				const label = element.getAttribute("data-monster-label");
+				if (!label) {
+					throw new Error("no filter label is defined");
+				}
+
+				const id = element.id;
+				if (!id) {
+					reject(new Error("no filter id is defined"));
+					return;
+				}
+
+				//const visible = window.getComputedStyle(element).display !== "none";
+				const visible = getVisibilityFromSlotAttribute(element);
+				if (!visible) {
+					return;
+				}
+
+				let template = element.getAttribute("data-monster-template");
+				if (!template) {
+					template = "${id}=${value}";
+				}
+
+				const controlValue = getControlValuesFromLabel(element);
+				if (!controlValue) {
+					if (controlValue === "" && currentHash?.[this.id]?.[id]) {
+						delete currentHash[this.id][id];
+					}
+
+					return;
+				}
+
+				if (!isObject(currentHash[this.id])) {
+					currentHash[this.id] = {};
+				}
+				currentHash[this.id][id] = controlValue;
+
+				const mapping = {
+					id,
+					value: controlValue,
+					label,
+				};
+
+				const formatter = new Formatter(mapping, {
+					callbacks: {
+						range: (value, key) => {
+							return generateRangeComparisonExpression(value, key, {
+								urlEncode: true,
+								andOp: "AND",
+								orOp: "OR",
+								eqOp: "=",
+								gtOp: ">",
+								ltOp: "<",
+							});
+						},
+						"date-range": (value, key) => {
+							const query = parseDateInput(value, key);
+							if (!query || query === "false") {
+								return "";
+							}
+
+							// return query as url encoded
+							return encodeURIComponent(query);
+						},
+					},
+				});
+
+				let queryPart = formatter.format(template);
+				if (queryPart) {
+					if (isFunction(wrapCallback)) {
+						queryPart = wrapCallback(queryPart, mapping);
+					}
+					query.push(queryPart);
+				}
+			});
+
+		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
+ * @returns {null|Array|undefined|string}
+ */
+function getControlValuesFromLabel(label) {
+	const foundControl = label.firstElementChild;
+
+	if (foundControl) {
+		if (foundControl.tagName === "INPUT") {
+			if (foundControl.type === "checkbox") {
+				const checkedControls = label.querySelectorAll(`${control}:checked`);
+				const values = [];
+
+				checkedControls.forEach((checkedControl) => {
+					values.push(checkedControl.value);
+				});
+
+				return values;
+			} else if (foundControl.type === "radio") {
+				const checkedControl = label.querySelector(`${control}:checked`);
+
+				if (checkedControl) {
+					return checkedControl.value;
+				} else {
+					return null;
+				}
+			} else {
+				return foundControl.value;
+			}
+		} else {
+			return foundControl.value;
+		}
+	}
+
+	return null;
+}
+
+/**
+ * @private
+ * @returns {string}
+ */
+function getFilterConfigKey() {
+	return generateUniqueConfigKey("datatable", this?.id, "filter");
+}
+
+/**
+ * @private
+ * @returns {Promise<unknown>}
+ */
+function initFromConfig() {;
+
+	const document = getDocument();
+	const host = document.querySelector("monster-host");
+
+	if (!(isInstance(host, Host) && this.id)) {
+		return Promise.resolve();
+	}
+
+	const configKey = getFilterConfigKey.call(this);
+
+	return new Promise((resolve, reject) => {
+		host
+			.getConfig(configKey)
+			.then((config) => {
+				if (config) {
+					this[settingsSymbol].setOptions(config);
+				}
+				resolve();
+			})
+			.catch((error) => {
+				if (error === undefined) {
+					resolve();
+					return;
+				}
+
+				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+				reject(error);
+			});
+	});
+}
+
+/**
+ * @private
+ */
+function updateConfig() {;
+
+	const document = getDocument();
+	const host = document.querySelector("monster-host");
+	if (!(host && this.id)) {
+		return;
+	}
+	const configKey = getFilterConfigKey.call(this);
+
+	try {
+		host.setConfig(configKey, this[settingsSymbol].getOptions());
+	} catch (error) {
+		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+	}
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+            <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-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-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>
+    `;
+}
+
+registerCustomElement(Filter);