@schukai/monster 3.95.1 → 3.96.0

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

@@ -53,6 +53,8 @@ class Dom extends Datasource {
 	 *
 	 * @property {Object} templates Template definitions
 	 * @property {string} templates.main Main template
+	 * @property {Object} features Feature definitions
+	 * @property {boolean} features.autoInit Automatically initializes the component
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -63,11 +65,19 @@ class Dom extends Datasource {
 			features: {
 				autoInit: true,
 			},
+
+			/** @private */
+			sys: {
+				pagination: {
+					pages: 1,
+					objectsPerPage: 10,
+					currentPage: 1,
+				},
+			},
 		});
 	}
 
 	/**
-	 *
 	 * @return {void}
 	 */
 	[assembleMethodSymbol]() {
@@ -76,6 +86,17 @@ class Dom extends Datasource {
 		updateDataSource.call(this);
 	}
 
+	/**
+	 * This method set the current page of the pagination
+	 *
+	 * @param {string} page
+	 * @return {Dom}
+	 */
+	setParameters({ page }) {
+		this.setOption("sys.pagination.currentPage", page);
+		return this;
+	}
+
 	/**
 	 *
 	 * @return {CSSStyleSheet[]}
@@ -108,6 +129,13 @@ class Dom extends Datasource {
 			updateDataSource.call(this);
 		}
 	}
+
+	/**
+	 * @return {int}
+	 */
+	currentPage() {
+		return this.getOption("sys.pagination.currentPage");
+	}
 }
 
 /**
@@ -170,6 +198,12 @@ function updateDataSource() {
 		data = [];
 	}
 
+	// set pagination
+	this.setOption("sys.pagination.objectsPerPage", 1);
+	this.setOption("sys.pagination.pages", data.length);
+	this.setOption("sys.pagination.currentPage", 1);
+
+	/** call setter */
 	this.data = data;
 }
 

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

@@ -64,26 +64,19 @@ const intersectionObserverObserverSymbol = Symbol(
 const filterObserverSymbol = Symbol("filterObserver");
 
 /**
- * The Datasource component is a basic class for the datatable component.
+ * A rest api datasource
  *
- * <img src="./images/rest.png">
+ * @fragments /fragments/components/datatable/datasource/rest
  *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ * @example /examples/components/datatable/datasource-rest-simple
+ * @example /examples/components/datatable/datasource-rest-auto-init
+ * @example /examples/components/datatable/datasource-rest-do-fetch
  *
- * @startuml rest.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- Datasource
- * Datasource <|-- Rest
- * @enduml
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/272.html
  *
  * @copyright schukai GmbH
- * @summary A rest api datasource
+ * @summary A rest api datasource for the datatable or other components
  */
-
-
-
 class Rest extends Datasource {
 	/**
 	 * the constructor of the class
@@ -117,8 +110,6 @@ class Rest extends Datasource {
 	 * @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 {Object} response.path Path definitions (changed in 3.56.0)
 	 * @property {string} response.path.message Path to the message (changed in 3.56.0)
@@ -129,17 +120,23 @@ class Rest extends Datasource {
 	 * @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 {string} read.mapping.currentPage The current page
+	 * @property {Object} write Write configuration
+	 * @property {string} write.url The url of the rest api
+	 * @property {string} write.method The method of the rest api
 	 * @property {Object} write Write configuration
 	 */
 	get defaults() {
 		const restOptions = new RestAPI().defaults;
 
 		restOptions.read.parameters = {
-			filter: undefined,
-			oderBy: undefined,
+			filter: null,
+			oderBy: null,
 			page: "1",
 		};
 
+		restOptions.read.mapping.currentPage = "sys.pagination.currentPage";
+
 		return Object.assign({}, super.defaults, restOptions, {
 			templates: {
 				main: getTemplate(),
@@ -156,12 +153,12 @@ class Rest extends Datasource {
 			},
 
 			filter: {
-				id: undefined,
+				id: null,
 			},
 
-			datatable: {
-				id: undefined,
-			},
+			/*datatable: {
+                id: undefined,  // not used?
+            },    */
 
 			response: {
 				path: {
@@ -173,6 +170,8 @@ class Rest extends Datasource {
 	}
 
 	/**
+	 * With this method, you can set the parameters for the rest api. The parameters are
+	 * used for building the url.
 	 *
 	 * @param {string} page
 	 * @param {string} query
@@ -194,67 +193,35 @@ class Rest extends Datasource {
 	}
 
 	/**
+	 * @private
 	 * @return {void}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
-
 		initEventHandler.call(this);
 		initAutoInit.call(this);
 	}
 
 	/**
+	 * This method reloads the data from the rest api, this method is deprecated.
+	 * You should use the method `read` instead.
+	 *
 	 * @deprecated 2023-06-25
 	 * @return {Promise<never>|*}
 	 */
 	reload() {
-		return this.fetch();
+		return this.read();
 	}
 
 	/**
-	 * Fetches the data from the rest api
+	 * Fetches the data from the rest api, this method is deprecated.
+	 * You should use the method `read` instead.
+	 *
+	 * @deprecated 2024-12-24
 	 * @return {Promise<never>|*}
 	 */
 	fetch() {
-		const opt = clone(this.getOption("read"));
-		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"));
-		}
-
-		url = formatter.format(url);
-
-		this[dataSourceSymbol].setOption("read.url", url);
-
-		return new Promise((resolve, reject) => {
-			fireCustomEvent(this, "monster-datasource-fetch", {
-				datasource: this,
-			});
-
-			queueMicrotask(() => {
-				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);
-					});
-			});
-		});
+		return this.read();
 	}
 
 	/**
@@ -277,7 +244,7 @@ class Rest extends Datasource {
 	 * This method activates the intersection observer manually.
 	 * For this purpose, the option `autoInit.intersectionObserver` must be set to `false`.
 	 *
-	 * @return {Monster.Components.Datatable.Datasource.Rest}
+	 * @return {Rest}
 	 */
 	initIntersectionObserver() {
 		initIntersectionObserver.call(this);
@@ -306,15 +273,59 @@ class Rest extends Datasource {
 	}
 
 	/**
-	 * @return {Promise<never>|*}
+	 * This method reads the data from the rest api.
+	 * The data is stored in the internal dataset object.
+	 *
+	 * @return {Promise}
+	 * @fires monster-datasource-fetch
+	 * @fires monster-datasource-fetched
+	 * @fires monster-datasource-error
 	 */
 	read() {
-		return this.fetch();
+		const opt = clone(this.getOption("read"));
+		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"));
+		}
+
+		url = formatter.format(url);
+
+		this[dataSourceSymbol].setOption("read.url", url);
+
+		return new Promise((resolve, reject) => {
+			fireCustomEvent(this, "monster-datasource-fetch", {
+				datasource: this,
+			});
+
+			queueMicrotask(() => {
+				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);
+					});
+			});
+		});
 	}
 
 	/**
-	 * Fetches the data from the rest api
-	 * @return {Promise<never>|*}
+	 * Fetches the data from the rest api.
+	 * @return {Promise}
 	 */
 	write() {
 		const opt = clone(this.getOption("write"));
@@ -357,6 +368,25 @@ 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;
+	//
+	// }
 }
 
 /**

package/source/components/datatable/datasource.mjs

@@ -30,21 +30,16 @@ const dataSourceSymbol = Symbol.for(
 );
 
 /**
- * The Datasource component is a basic class for the datatable component.
+ * A datasource
  *
- * <img src="./images/datasource.png">
+ * @fragments /fragments/components/datatable/datasource
  *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ * @example /examples/components/datatable/datasource
  *
- * @startuml datasource.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- Datasource
- * @enduml
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/272.html
  *
  * @copyright schukai GmbH
- * @summary A abstract datasource
+ * @summary A generic datasource
  */
 class Datasource extends CustomElement {
 	/**
@@ -77,8 +72,7 @@ class Datasource extends CustomElement {
 	}
 
 	/**
-	 *
-	 * @return {Monster.Components.Form.Form}
+	 * @return {void}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
@@ -93,7 +87,7 @@ class Datasource extends CustomElement {
 	}
 
 	/**
-	 * set the data
+	 * set the data with proxy
 	 * @param {Object} data
 	 */
 	set data(data) {
@@ -101,17 +95,23 @@ class Datasource extends CustomElement {
 	}
 
 	/**
-	 * Get the datasource
-	 * @return {Monster.Data.Datasource}
+	 * Get the base datasource
+	 * @return {Datasource}
 	 */
 	get datasource() {
 		return this[dataSourceSymbol];
 	}
 
+	/**
+	 * Wrapper for the write method of the datasource
+	 */
 	write() {
 		this[dataSourceSymbol].write();
 	}
 
+	/**
+	 * Wrapper for the read method of the datasource
+	 */
 	read() {
 		this[dataSourceSymbol].read();
 	}

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

@@ -42,10 +42,21 @@ class EmbeddedPagination extends Pagination {
 		return Symbol.for("@schukai/monster/components/embedded-pagination");
 	}
 
+	/**
+	 * @private
+	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 	}
 
+	/**
+	 *
+	 * @property {Object} classes Class definitions
+	 * @property {string} classes.spinner Spinner class
+	 * @property {string} classes.spinnerContainer Spinner container class
+	 * @property {string} classes.error Error class
+	 * @property {string} classes.errorContainer Error container class
+	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
 			classes: {

package/source/components/datatable/pagination.mjs

@@ -71,7 +71,11 @@ const sizeDataSymbol = Symbol("sizeData");
 const debounceSizeSymbol = Symbol("debounceSize");
 
 /**
- * The Pagination component
+ * A Pagination component
+ *
+ * @fragments /fragments/components/datatable/pagination
+ *
+ * @example /examples/components/datatable/pagination-simple
  *
  * @copyright schukai GmbH
  * @summary The Pagination component is used to show the current page and the total number of pages.
@@ -116,7 +120,6 @@ class Pagination extends CustomElement {
 	 * @property {string} mapping.pages Pages mapping
 	 * @property {string} mapping.objectsPerPage Objects per page mapping
 	 * @property {string} mapping.currentPage Current page mapping
-	 * @property {Object} pagination Pagination
 	 */
 	get defaults() {
 		return Object.assign(
@@ -141,9 +144,9 @@ class Pagination extends CustomElement {
 
 				href: "page-${page}",
 
-				currentPage: undefined,
-				pages: undefined,
+				pages: null,
 				objectsPerPage: 20,
+				currentPage: null,
 
 				mapping: {
 					pages: "sys.pagination.pages",
@@ -151,6 +154,7 @@ class Pagination extends CustomElement {
 					currentPage: "sys.pagination.currentPage",
 				},
 
+				/* @private */
 				pagination: {
 					items: [],
 				},
@@ -188,21 +192,25 @@ class Pagination extends CustomElement {
 			return;
 		}
 
-		const parentParentNode = parentNode?.parentNode || parentNode;
+		try {
+			handleDataSourceChanges.call(this);
+		} catch (e) {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e?.message || `${e}`);
+		}
 
-		const parentWidth = parentParentNode.offsetWidth;
-		const ownWidth = this.offsetWidth;
+		requestAnimationFrame(() => {
+			const parentParentNode = parentNode?.parentNode || parentNode;
 
-		this[sizeDataSymbol] = {
-			last: {
-				parentWidth: parentParentNode.offsetWidth || 0,
-			},
-			showNumbers: ownWidth < parentWidth,
-		};
+			const parentWidth = parentParentNode.offsetWidth;
+			const ownWidth = this.offsetWidth;
 
-		handleDataSourceChanges.call(this);
+			this[sizeDataSymbol] = {
+				last: {
+					parentWidth: 0,
+				},
+				showNumbers: ownWidth < parentWidth,
+			};
 
-		setTimeout(() => {
 			this[resizeObserverSymbol] = new ResizeObserver((entries) => {
 				if (this[debounceSizeSymbol] instanceof DeadMansSwitch) {
 					try {
@@ -226,14 +234,14 @@ class Pagination extends CustomElement {
 							parentWidth: parentWidth,
 						};
 
-						this[sizeDataSymbol].showNumbers = ownWidth < parentWidth;
+						this[sizeDataSymbol].showNumbers = ownWidth <= parentWidth;
 						handleDataSourceChanges.call(this);
 					});
 				});
 			});
 
 			this[resizeObserverSymbol].observe(this?.parentNode?.parentNode);
-		}, 500);
+		});
 	}
 
 	/**
@@ -262,6 +270,8 @@ class Pagination extends CustomElement {
 				new Observer(handleDataSourceChanges.bind(this)),
 			);
 
+			element.attachObserver(new Observer(handleDataSourceChanges.bind(this)));
+
 			handleDataSourceChanges.call(this);
 		}
 	}
@@ -315,6 +325,7 @@ function initEventHandler() {
 			ATTRIBUTE_ROLE,
 			"pagination-item",
 		);
+
 		if (!element) {
 			element = findTargetElementFromEvent(
 				event,
@@ -344,7 +355,6 @@ function initEventHandler() {
 		}
 
 		page = element.getAttribute("data-page-no");
-		event.preventDefault();
 
 		if (
 			!page ||
@@ -361,6 +371,7 @@ function initEventHandler() {
 			return;
 		}
 
+		event.preventDefault();
 		datasource.setParameters({ page });
 
 		if (typeof datasource.reload !== "function") {
@@ -404,17 +415,19 @@ function handleDataSourceChanges() {
 	}
 
 	const mapping = this.getOption("mapping");
+	const pf = new Pathfinder(this[datasourceLinkedElementSymbol].data);
+
 	for (const key in mapping) {
 		const path = mapping[key];
 
-		let value;
-		try {
-			value = new Pathfinder(this[datasourceLinkedElementSymbol].data).getVia(
-				path,
-			);
+		if (pf.exists(path)) {
+			const value = pf.getVia(path);
 			this.setOption(key, value);
-		} catch (e) {
-			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+		}
+
+		const o = this[datasourceLinkedElementSymbol].getOption(path);
+		if (o !== undefined && o !== null) {
+			this.setOption(key, o);
 		}
 	}
 
@@ -440,6 +453,9 @@ function handleDataSourceChanges() {
  * @return  {object}
  */
 function buildPagination(current, max) {
+	current = parseInt(current, 10);
+	max = parseInt(max, 10);
+
 	let prev = current === 1 ? null : current - 1;
 	let next = current === max ? null : current + 1;
 	const itemList = [1];

package/source/components/datatable/status.mjs

@@ -88,9 +88,7 @@ class DatasourceStatus extends CustomElement {
 	 * @return {symbol}
 	 */
 	static get [instanceSymbol]() {
-		return Symbol.for(
-			"@schukai/monster/components/datatables/status@@instance",
-		);
+		return Symbol.for("@schukai/monster/components/datatable/status@@instance");
 	}
 
 	/**

package/source/components/datatable/style/pagination.pcss

@@ -33,9 +33,9 @@
 
     & ul li a {
         @mixin button;
-        background-color: var(--monster-theme-control-bg-color);
+        background-color: var(--monster-bg-color-primary-1);
         color: var(--monster-theme-control-color);
-        border-color: var(--monster-theme-control-bg-color);
+        border-color: var(--monster-bg-color-primary-1);
         width: max-content;
 
         &.current {