@schukai/monster 3.54.0 → 3.55.1

package/CHANGELOG.md

@@ -1,9 +1,34 @@
 
+## [3.55.1] - 2024-01-22
+
+### Bug Fixes
+
+- catch errors  [#133](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/133)
+- catch errors  [#133](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/133)
+- check parameter  [#132](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/132)
+### Changes
+
+- doc
+- lint + formatt
+- update nixos to 23-11
+
+## [3.55.0] - 2023-11-29
+
+### Add Features
+
+- various changes [#131](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/131)
+### Changes
+
+- release and publish to npm new version 3.55.0
+
 ## [3.54.0] - 2023-11-23
 
 ### Add Features
 
 - new closeOnSelect feature
+### Changes
+
+- release and publish to npm new version 3.54.0
 
 ## [3.53.0] - 2023-11-11
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schukai/monster",
-  "version": "3.54.0",
+  "version": "3.55.1",
   "description": "Monster is a simple library for creating fast, robust and lightweight websites.",
   "keywords": [
     "framework",

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

@@ -80,24 +80,35 @@ class Rest extends Datasource {
 	}
 
 	/**
-	 * 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} features Feature definitions
-	 * @property {boolean} features.autoInit If true, the component is initialized automatically
-	 * @property {Object} read Read configuration
-	 * @property {string} read.url The url of the rest api
-	 * @property {string} read.method The method of the rest api
-	 * @property {Object} read.parameters The parameters of the rest api
-	 * @property {Object} read.parameters.filter The filter of the rest api
-	 * @property {Object} read.parameters.orderBy The order by of the rest api
-	 * @property {Object} read.parameters.page The page of the rest api
-	 * @property {Object} write Write configuration
-	 */
+     * 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} 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 {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
+     * @property {Object} filter Filter definitions
+     * @property {string} filter.id The id of the filter control
+     * @property {Object} datatable Datatable definitions
+     * @property {string} datatable.id The id of the datatable control
+     * @property {Object} response Response definitions
+     * @property {string} response.errorMessagePath The path to the error message in the response
+     * @property {Object} read Read configuration
+     * @property {string} read.url The url of the rest api
+     * @property {string} read.method The method of the rest api
+     * @property {Object} read.parameters The parameters of the rest api
+     * @property {Object} read.parameters.filter The filter of the rest api
+     * @property {Object} read.parameters.orderBy The order by of the rest api
+     * @property {Object} read.parameters.page The page of the rest api
+     * @property {Object} write Write configuration
+
+     */
 	get defaults() {
 		const restOptions = new RestAPI().defaults;
 
@@ -126,6 +137,10 @@ class Rest extends Datasource {
 				id: undefined,
 			},
 
+			datatable: {
+				id: undefined,
+			},
+
 			response: {
 				errorMessagePath: "sys.message",
 			},
@@ -176,7 +191,7 @@ class Rest extends Datasource {
 	 * Fetches the data from the rest api
 	 * @returns {Promise<never>|*}
 	 */
-	fetch() {
+	fetch() {;
 		const opt = clone(this.getOption("read"));
 		this[dataSourceSymbol].setOption("read", opt);
 
@@ -190,7 +205,32 @@ class Rest extends Datasource {
 		url = formatter.format(url);
 
 		this[dataSourceSymbol].setOption("read.url", url);
-		return this[dataSourceSymbol].read();
+
+		return new Promise((resolve, reject) => {
+			fireCustomEvent(this, "monster-datasource-fetch", {
+				datasource: this,
+			});
+
+			setTimeout(() => {
+				this[dataSourceSymbol]
+					.read()
+					.then((response) => {
+						fireCustomEvent(this, "monster-datasource-fetched", {
+							datasource: this,
+						});
+
+						resolve(response);
+					})
+					.catch((error) => {
+						fireCustomEvent(this, "monster-datasource-error", {
+							error: error,
+						});
+
+						addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
+						reject(error);
+					});
+			}, 0);
+		});
 	}
 
 	/**
@@ -277,37 +317,45 @@ function initFilter() {
 		const query = filterControl.getOption("query", undefined);
 		this.setParameters({ query: query });
 		this.fetch()
-			.then(() => {
-				this.dispatchEvent(new CustomEvent("reload", { bubbles: true }));
-				filterControl?.showSuccess();
+			.then((response) => {
+				if (!(response instanceof Response)) {
+					throw new Error("Response is not an instance of Response");
+				}
+
+				if (response?.ok === true) {
+					this.dispatchEvent(new CustomEvent("reload", { bubbles: true }));
+					filterControl?.showSuccess();
+				}
+
+				response
+					.json()
+					.then((json) => {
+						const path = new Pathfinder(json);
+						const error = path.getVia(
+							this.getOption("response.errorMessagePath"),
+						);
+						if (error) {
+							filterControl?.showFailureMessage(error);
+							return;
+						}
+
+						filterControl?.showFailureMessage(e.message);
+					})
+					.catch((e) => {
+						filterControl?.showFailureMessage(e.message);
+					});
 			})
 			.catch((e) => {
 				this.dispatchEvent(
 					new CustomEvent("error", { bubbles: true, detail: e }),
 				);
 
-				const response = e?.getResponse();
-				if (response && response.status === 400) {
-					response
-						.json()
-						.then((json) => {
-							const path = new Pathfinder(json);
-							const error = path.getVia(
-								this.getOption("response.errorMessagePath"),
-							);
-							if (error) {
-								filterControl?.showFailureMessage(error);
-								return;
-							}
-
-							filterControl?.showFailureMessage(e.message);
-						})
-						.catch((e) => {
-							filterControl?.showFailureMessage(e.message);
-						});
-				} else {
-					filterControl?.showFailureMessage(e.message);
+				if (!(e instanceof Error)) {
+					e = new Error(e);
 				}
+
+				filterControl?.showFailureMessage(e.message);
+				return Promise.reject(e);
 			});
 	});
 
@@ -329,19 +377,7 @@ function initAutoInit() {
 	}
 
 	setTimeout(() => {
-		this.fetch()
-			.then(() => {
-				fireCustomEvent(this, "monster-datasource-fetched", {
-					datasource: this,
-				});
-			})
-			.catch((error) => {
-				fireCustomEvent(this, "monster-datasource-error", {
-					error: error,
-				});
-
-				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
-			});
+		this.fetch().catch(() => {});
 	}, 0);
 }
 

package/source/components/datatable/datatable/header.mjs

@@ -110,6 +110,14 @@ class Header extends Base {
 		this.setInternal("direction", direction);
 	}
 
+	/**
+	 *
+	 * @param direction
+	 */
+	setDirection(direction) {
+		this.setInternal("direction", direction);
+	}
+
 	/**
 	 * @param {string} field
 	 */

package/source/components/datatable/datatable.mjs

@@ -40,6 +40,7 @@ import {
 	DIRECTION_DESC,
 	DIRECTION_NONE,
 } from "./datatable/header.mjs";
+import { getStoredFilterConfigKey } from "./filter/util.mjs";
 import { DatatableStyleSheet } from "./stylesheet/datatable.mjs";
 import {
 	handleDataSourceChanges,
@@ -270,31 +271,48 @@ class DataTable extends CustomElement {
 		getHostConfig
 			.call(this, getColumnVisibilityConfigKey)
 			.then((config) => {
-				try {
-					initGridAndStructs.call(this, config);
-				} catch (error) {
-					addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
-				}
-
-				updateColumnBar.call(this);
+				const headerOrderMap = new Map();
+
+				getHostConfig
+					.call(this, getStoredOrderConfigKey)
+					.then((orderConfig) => {
+						if (isArray(orderConfig) || orderConfig.length > 0) {
+							for (let i = 0; i < orderConfig.length; i++) {
+								const item = orderConfig[i];
+								const parts = item.split(" ");
+								const field = parts[0];
+								const direction = parts[1] || DIRECTION_ASC;
+								headerOrderMap.set(field, direction);
+							}
+						}
+					})
+					.then(() => {
+						try {
+							initGridAndStructs.call(this, config, headerOrderMap);
+						} catch (error) {
+							addAttributeToken(
+								this,
+								ATTRIBUTE_ERRORMESSAGE,
+								error?.message || error.toString(),
+							);
+						}
+
+						updateColumnBar.call(this);
+					})
+					.catch((error) => {
+						addAttributeToken(
+							this,
+							ATTRIBUTE_ERRORMESSAGE,
+							error?.message || error.toString(),
+						);
+					});
 			})
 			.catch((error) => {
-				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
-			});
-
-		getHostConfig
-			.call(this, getFilterConfigKey)
-			.then((config) => {
-				try {
-					// initGridAndStructs.call(self, config);
-				} catch (error) {
-					// addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, String(error));
-				}
-
-				//updateColumnBar.call(self);
-			})
-			.catch((error) => {
-				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+				addAttributeToken(
+					this,
+					ATTRIBUTE_ERRORMESSAGE,
+					error?.message || error.toString(),
+				);
 			});
 	}
 
@@ -340,14 +358,13 @@ function getHostConfig(callback) {
 	}
 
 	const configKey = callback.call(this);
-	return host
-		.getConfig(configKey)
-		.then((config) => {
-			return config;
-		})
-		.catch(() => {
+	return host.hasConfig(configKey).then((hasConfig) => {
+		if (hasConfig) {
+			return host.getConfig(configKey);
+		} else {
 			return {};
-		});
+		}
+	});
 }
 
 /**
@@ -367,7 +384,7 @@ function updateColumnBar() {
 		}
 
 		columns.push({
-			visible: mode === ATTRIBUTE_DATATABLE_MODE_HIDDEN ? false : true,
+			visible: mode !== ATTRIBUTE_DATATABLE_MODE_HIDDEN,
 			name: header.label,
 			index: header.index,
 		});
@@ -480,11 +497,8 @@ function initEventHandler() {
 					ATTRIBUTE_DATATABLE_SORTABLE,
 					`${headers[index].field} ${headers[index].direction}`,
 				);
-				setDataSource.call(
-					self,
-					{ orderBy: createOrderStatement(headers) },
-					true,
-				);
+
+				storeOrderStatement.call(self, true);
 			}, 0);
 		}
 	});
@@ -493,7 +507,7 @@ function initEventHandler() {
 /**
  * @private
  */
-function initGridAndStructs(hostConfig) {
+function initGridAndStructs(hostConfig, headerOrderMap) {
 	const rowID = this.getOption("templateMapping.row-key");
 
 	if (!this[gridElementSymbol]) {
@@ -597,18 +611,48 @@ function initGridAndStructs(hostConfig) {
 			mode: mode,
 			grid: grid,
 			labelKey: labelKey,
+			direction: headerOrderMap.get(field) || DIRECTION_NONE,
 		});
 
 		headers.push(header);
 	}
 
-	const statement = createOrderStatement(headers);
-	setDataSource.call(
-		this,
-		{ orderBy: statement },
-		this.getOption("features.autoInit"),
-	);
 	this.setOption("headers", headers);
+	storeOrderStatement.call(this, this.getOption("features.autoInit"));
+}
+
+/**
+ * @private
+ * @returns {string}
+ */
+export function getStoredOrderConfigKey() {
+	return generateUniqueConfigKey("datatable", this?.id, "stored-order");
+}
+
+/**
+ * @private
+ */
+function storeOrderStatement(doFetch) {
+	const headers = this.getOption("headers");
+	const statement = createOrderStatement(headers);
+	setDataSource.call(this, { orderBy: statement }, doFetch);
+
+	const document = getDocument();
+	const host = document.querySelector("monster-host");
+	if (!(host && this.id)) {
+		return;
+	}
+
+	const configKey = getStoredOrderConfigKey.call(this);
+
+	// statement explode with , and remove all empty
+	const list = statement.split(",").filter((item) => item.trim() !== "");
+	if (list.length === 0) {
+		//     host.deleteConfig(configKey);
+		return;
+	}
+
+	host.setConfig(configKey, list);
 }
 
 /**
@@ -736,7 +780,7 @@ function getEmptyTemplate() {
             <path d="m16.807 17h-9.614c-.622 0-1.186-.391-1.404-.973l-1.014-2.703c-.072-.194-.26-.324-.468-.324h-3.557c-.276 0-.5-.224-.5-.5s.224-.5.5-.5h3.557c.622 0 1.186.391 1.405.973l1.013 2.703c.073.194.261.324.468.324h9.613c.208 0 .396-.13.468-.324l1.013-2.703c.22-.582.784-.973 1.406-.973h3.807c.276 0 .5.224.5.5s-.224.5-.5.5h-3.807c-.208 0-.396.13-.468.324l-1.013 2.703c-.219.582-.784.973-1.405.973z"/>
         </svg>
     </div>
-    <div part="content" monster-replace="path:labels.theListContainsNoEntries">
+    <div part="content" data-monster-replace="path:labels.theListContainsNoEntries">
         The list contains no entries.
     </div>
 </monster-state>`;

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

@@ -3,9 +3,13 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { registerCustomElement } from "../../dom/customelement.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
 import { EmbeddedPaginationStyleSheet } from "./stylesheet/embedded-pagination.mjs";
 import { instanceSymbol } from "../../constants.mjs";
+
 import "../form/select.mjs";
 import { Pagination } from "./pagination.mjs";
 
@@ -55,6 +59,21 @@ class EmbeddedPagination extends Pagination {
 		return Symbol.for("@schukai/monster/components/embedded-pagination");
 	}
 
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+	}
+
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			classes: {
+				spinner: "monster-spinner monster-theme-primary-3",
+				spinnerContainer: "monster-theme-primary-2 ",
+				error: "monster-theme-error-2 monster-bg-color-primary-2",
+				errorContainer: "monster-theme-primary-2",
+			},
+		});
+	}
+
 	/**
 	 *
 	 * @return {string}
@@ -64,50 +83,12 @@ class EmbeddedPagination extends Pagination {
 	}
 
 	/**
-	 *
-	 * @return {CSSStyleSheet[]}
+	 * @private
+	 * @returns {CSSStyleSheet}
 	 */
-	static getCSSStyleSheet() {
-		return [EmbeddedPaginationStyleSheet];
+	static getControlCSSStyleSheet() {
+		return EmbeddedPaginationStyleSheet;
 	}
 }
 
-/**
- * @private
- * @return {string}
- */
-function getTemplate() {
-	// language=HTML
-	return `
-        <template id="items">
-            <li><a data-monster-attributes="class path:items.class,
-                                            href path:items.href,
-                                            aria-label path:items.description,
-                                            disabled path:items.disabled:?disabled:undefined,
-                                            data-page-no path:items.pageNo,
-                                            aria-current path:items.current"
-                   data-monster-role="pagination-item"
-                   data-monster-replace="path:items.label"></a></li>
-        </template>
-
-        <div data-monster-role="control">
-            <nav data-monster-role="pagination" role="navigation" aria-label="pagination">
-                <ul class="pagination-list" data-monster-insert="items path:pagination.items">
-                    <li part="pagination-prev"><a data-monster-role="pagination-prev"
-                                                  data-monster-attributes="
-            class path:pagination.prevClass | prefix: previous,
-            data-page-no path:pagination.prevNo,
-            href path:pagination.prevHref | prefix: #"
-                                                  data-monster-replace="path:labels.previous">Previous</a></li>
-                    <li part="pagination-next"><a data-monster-role="pagination-next"
-                                                  data-monster-attributes="class path:pagination.nextClass | prefix: next,
-            data-page-no path:pagination.nextNo,
-        href path:pagination.nextHref | prefix: #"
-                                                  data-monster-replace="path:labels.next">Next</a></li>
-                </ul>
-            </nav>
-        </div>
-    `;
-}
-
 registerCustomElement(EmbeddedPagination);

package/source/components/datatable/filter/util.mjs

@@ -0,0 +1,138 @@
+import { generateUniqueConfigKey } from "../../host/util.mjs";
+
+/**
+ * @private
+ * @returns {string}
+ */
+export function getFilterConfigKey() {
+	return generateUniqueConfigKey("datatable", this?.id, "filter");
+}
+
+/**
+ * @private
+ * @returns {string}
+ */
+export function getStoredFilterConfigKey() {
+	return generateUniqueConfigKey("datatable", this?.id, "stored-filter");
+}
+
+/**
+ * @private
+ * @param {String} str
+ * @param {String} field
+ * @returns {String}
+ * @throws {Error} if no field is defined
+ */
+export 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";
+}