@schukai/monster 3.70.0 → 3.71.1

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

@@ -12,25 +12,27 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { addAttributeToken } from "../../../dom/attributes.mjs";
-import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
-import { Datasource, dataSourceSymbol } from "../datasource.mjs";
-import { DatasourceStyleSheet } from "../stylesheet/datasource.mjs";
-import { instanceSymbol } from "../../../constants.mjs";
+import {diff} from "../../../data/diff.mjs";
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+import {isArray} from "../../../types/is.mjs";
+import {Datasource, dataSourceSymbol} from "../datasource.mjs";
+import {DatasourceStyleSheet} from "../stylesheet/datasource.mjs";
+import {instanceSymbol} from "../../../constants.mjs";
 import {
-	assembleMethodSymbol,
-	registerCustomElement,
+    assembleMethodSymbol,
+    registerCustomElement,
 } from "../../../dom/customelement.mjs";
-import { RestAPI } from "../../../data/datasource/server/restapi.mjs";
-import { Formatter } from "../../../text/formatter.mjs";
-import { clone } from "../../../util/clone.mjs";
-import { validateBoolean } from "../../../types/validate.mjs";
-import { findElementWithIdUpwards } from "../../../dom/util.mjs";
-import { Observer } from "../../../types/observer.mjs";
-import { Pathfinder } from "../../../data/pathfinder.mjs";
-import { fireCustomEvent } from "../../../dom/events.mjs";
+import {RestAPI} from "../../../data/datasource/server/restapi.mjs";
+import {Formatter} from "../../../text/formatter.mjs";
+import {clone} from "../../../util/clone.mjs";
+import {validateBoolean} from "../../../types/validate.mjs";
+import {findElementWithIdUpwards} from "../../../dom/util.mjs";
+import {Observer} from "../../../types/observer.mjs";
+import {Pathfinder} from "../../../data/pathfinder.mjs";
+import {fireCustomEvent} from "../../../dom/events.mjs";
 
-export { Rest };
+export {Rest};
 
 /**
  * @private
@@ -44,7 +46,7 @@ const intersectionObserverHandlerSymbol = Symbol("intersectionObserverHandler");
  * @type {symbol}
  */
 const rawDataSymbol = Symbol.for(
-	"@schukai/monster/data/datasource/server/restapi/rawdata",
+    "@schukai/monster/data/datasource/server/restapi/rawdata",
 );
 
 /**
@@ -52,7 +54,7 @@ const rawDataSymbol = Symbol.for(
  * @type {symbol}
  */
 const intersectionObserverObserverSymbol = Symbol(
-	"intersectionObserverObserver",
+    "intersectionObserverObserver",
 );
 
 /**
@@ -81,23 +83,23 @@ const filterObserverSymbol = Symbol("filterObserver");
  * @summary A rest api datasource
  */
 class Rest extends Datasource {
-	/**
-	 * the constructor of the class
-	 */
-	constructor() {
-		super();
-		this[dataSourceSymbol] = new RestAPI();
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/datasource/rest@@instance");
-	}
-
-	/**
+    /**
+     * the constructor of the class
+     */
+    constructor() {
+        super();
+        this[dataSourceSymbol] = new RestAPI();
+    }
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/datasource/rest@@instance");
+    }
+
+    /**
      * 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}
      *
@@ -128,405 +130,409 @@ class Rest extends Datasource {
      * @property {Object} write Write configuration
 
      */
-	get defaults() {
-		const restOptions = new RestAPI().defaults;
-
-		restOptions.read.parameters = {
-			filter: undefined,
-			oderBy: undefined,
-			page: "1",
-		};
-
-		return Object.assign({}, super.defaults, restOptions, {
-			templates: {
-				main: getTemplate(),
-			},
-
-			features: {
-				autoInit: false,
-				filter: false,
-			},
-
-			autoInit: {
-				intersectionObserver: false,
-				oneTime: true,
-			},
-
-			filter: {
-				id: undefined,
-			},
-
-			datatable: {
-				id: undefined,
-			},
-
-			response: {
-				path: {
-					message: "sys.message",
-					code: "sys.code",
-				},
-			},
-		});
-	}
-
-	/**
-	 *
-	 * @param {string} page
-	 * @param {string} query
-	 * @param {string} orderBy
-	 * @returns {Monster.Components.Datatable.Datasource.Rest}
-	 */
-	setParameters({ page, query, orderBy }) {
-		const parameters = this.getOption("read.parameters");
-		if (query !== undefined) {
-			parameters.query = `${query}`;
-			parameters.page = "1";
-		}
-
-		// after a query the page is set to 1, so if the page is not set, it is set to 1
-		if (page !== undefined) parameters.page = `${page}`;
-		if (orderBy !== undefined) parameters.order = `${orderBy}`;
-		this.setOption("read.parameters", parameters);
-		return this;
-	}
-
-	/**
-	 * @return {void}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-
-		initEventHandler.call(this);
-		initAutoInit.call(this);
-	}
-
-	/**
-	 * @deprecated 2023-06-25
-	 * @returns {Promise<never>|*}
-	 */
-	reload() {
-		return this.fetch();
-	}
-
-	/**
-	 * Fetches the data from the rest api
-	 * @returns {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,
-			});
-
-			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);
-		});
-	}
-
-	/**
-	 *
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		return [DatasourceStyleSheet];
-	}
-
-	/**
-	 * @private
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-datasource-rest";
-	}
-
-	/**
-	 * This method activates the intersection observer manually.
-	 * For this purpose, the option `autoInit.intersectionObserver` must be set to `false`.
-	 *
-	 * @returns {Monster.Components.Datatable.Datasource.Rest}
-	 */
-	initIntersectionObserver() {
-		initIntersectionObserver.call(this);
-		return this;
-	}
-
-	/**
-	 * @private
-	 */
-	connectedCallback() {
-		super.connectedCallback();
-
-		setTimeout(() => {
-			if (this.getOption("features.filter", false) === true) {
-				initFilter.call(this);
-			}
-		}, 0);
-	}
-
-	/**
-	 * @private
-	 */
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		removeFilter.call(this);
-	}
-
-	read() {
-		return this.fetch();
-	}
-
-	/**
-	 * Fetches the data from the rest api
-	 * @returns {Promise<never>|*}
-	 */
-	write() {
-		const opt = clone(this.getOption("write"));
-		this[dataSourceSymbol].setOption("write", opt);
-
-		let url = this.getOption("write.url");
-		const formatter = new Formatter(this.getOption("write.parameters"));
-
-		if (!url) {
-			return Promise.reject(new Error("No url defined"));
-		}
-
-		url = formatter.format(url);
-
-		this[dataSourceSymbol].setOption("write.url", url);
-
-		return new Promise((resolve, reject) => {
-			fireCustomEvent(this, "monster-datasource-fetch", {
-				datasource: this,
-			});
-
-			setTimeout(() => {
-				this[dataSourceSymbol]
-					.write()
-					.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);
-		});
-	}
+    get defaults() {
+        const restOptions = new RestAPI().defaults;
+
+        restOptions.read.parameters = {
+            filter: undefined,
+            oderBy: undefined,
+            page: "1",
+        };
+
+        return Object.assign({}, super.defaults, restOptions, {
+            templates: {
+                main: getTemplate(),
+            },
+
+            features: {
+                autoInit: false,
+                filter: false,
+            },
+
+            autoInit: {
+                intersectionObserver: false,
+                oneTime: true,
+            },
+
+            filter: {
+                id: undefined,
+            },
+
+            datatable: {
+                id: undefined,
+            },
+
+            response: {
+                path: {
+                    message: "sys.message",
+                    code: "sys.code",
+                },
+            },
+        });
+    }
+
+    /**
+     *
+     * @param {string} page
+     * @param {string} query
+     * @param {string} orderBy
+     * @returns {Monster.Components.Datatable.Datasource.Rest}
+     */
+    setParameters({page, query, orderBy}) {
+        const parameters = this.getOption("read.parameters");
+        if (query !== undefined) {
+            parameters.query = `${query}`;
+            parameters.page = "1";
+        }
+
+        // after a query the page is set to 1, so if the page is not set, it is set to 1
+        if (page !== undefined) parameters.page = `${page}`;
+        if (orderBy !== undefined) parameters.order = `${orderBy}`;
+        this.setOption("read.parameters", parameters);
+        return this;
+    }
+
+    /**
+     * @return {void}
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+
+        initEventHandler.call(this);
+        initAutoInit.call(this);
+    }
+
+    /**
+     * @deprecated 2023-06-25
+     * @returns {Promise<never>|*}
+     */
+    reload() {
+        return this.fetch();
+    }
+
+    /**
+     * Fetches the data from the rest api
+     * @returns {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,
+            });
+
+            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);
+        });
+    }
+
+    /**
+     *
+     * @return {CSSStyleSheet[]}
+     */
+    static getCSSStyleSheet() {
+        return [DatasourceStyleSheet];
+    }
+
+    /**
+     * @private
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-datasource-rest";
+    }
+
+    /**
+     * This method activates the intersection observer manually.
+     * For this purpose, the option `autoInit.intersectionObserver` must be set to `false`.
+     *
+     * @returns {Monster.Components.Datatable.Datasource.Rest}
+     */
+    initIntersectionObserver() {
+        initIntersectionObserver.call(this);
+        return this;
+    }
+
+    /**
+     * @private
+     */
+    connectedCallback() {
+        super.connectedCallback();
+
+        setTimeout(() => {
+            if (this.getOption("features.filter", false) === true) {
+                initFilter.call(this);
+            }
+        }, 0);
+    }
+
+    /**
+     * @private
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        removeFilter.call(this);
+    }
+
+    /**
+     * @returns {Promise<never>|*}
+     */
+    read() {
+        return this.fetch();
+    }
+
+    /**
+     * Fetches the data from the rest api
+     * @returns {Promise<never>|*}
+     */
+    write() {
+        const opt = clone(this.getOption("write"));
+        this[dataSourceSymbol].setOption("write", opt);
+
+        let url = this.getOption("write.url");
+        const formatter = new Formatter(this.getOption("write.parameters"));
+
+        if (!url) {
+            return Promise.reject(new Error("No url defined"));
+        }
+
+        url = formatter.format(url);
+
+        this[dataSourceSymbol].setOption("write.url", url);
+
+        return new Promise((resolve, reject) => {
+            fireCustomEvent(this, "monster-datasource-fetch", {
+                datasource: this,
+            });
+            
+            setTimeout(() => {
+                this[dataSourceSymbol]
+                    .write()
+                    .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);
+        });
+    }
 }
 
 /**
  * @private
  */
 function removeFilter() {
-	const filterID = this.getOption("filter.id", undefined);
-	if (!filterID) return;
+    const filterID = this.getOption("filter.id", undefined);
+    if (!filterID) return;
 
-	const filterControl = findElementWithIdUpwards(this, filterID);
+    const filterControl = findElementWithIdUpwards(this, filterID);
 
-	if (filterControl && this[filterObserverSymbol]) {
-		filterControl?.detachObserver(this[filterObserverSymbol]);
-	}
+    if (filterControl && this[filterObserverSymbol]) {
+        filterControl?.detachObserver(this[filterObserverSymbol]);
+    }
 }
 
 /**
  * @private
  */
 function initFilter() {
-	const filterID = this.getOption("filter.id", undefined);
-
-	if (!filterID)
-		throw new Error("filter feature is enabled but no filter id is defined");
-
-	const filterControl = findElementWithIdUpwards(this, filterID);
-	if (!filterControl)
-		throw new Error(
-			"filter feature is enabled but no filter control with id " +
-				filterID +
-				" is found",
-		);
-
-	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");
-				}
-
-				if (response?.ok === true) {
-					this.dispatchEvent(new CustomEvent("reload", { bubbles: true }));
-					filterControl?.showSuccess();
-				}
-
-				if (response.bodyUsed === true) {
-					return handleIntersectionObserver.call(
-						this,
-						response[rawDataSymbol],
-						response,
-						filterControl,
-					);
-				}
-
-				response
-					.text()
-					.then((jsonAsText) => {
-						let json;
-						try {
-							json = JSON.parse(jsonAsText);
-						} catch (e) {
-							const message = e instanceof Error ? e.message : `${e}`;
-							filterControl?.showFailureMessage(message);
-							return Promise.reject(e);
-						}
-
-						return handleIntersectionObserver.call(
-							this,
-							json,
-							response,
-							filterControl,
-						);
-					})
-					.catch((e) => {
-						filterControl?.showFailureMessage(e.message);
-					});
-			})
-			.catch((e) => {
-				this.dispatchEvent(
-					new CustomEvent("error", { bubbles: true, detail: e }),
-				);
-
-				if (!(e instanceof Error)) {
-					e = new Error(e);
-				}
-
-				filterControl?.showFailureMessage(e.message);
-				return Promise.reject(e);
-			});
-	});
-
-	filterControl.attachObserver(this[filterObserverSymbol]);
+    const filterID = this.getOption("filter.id", undefined);
+
+    if (!filterID)
+        throw new Error("filter feature is enabled but no filter id is defined");
+
+    const filterControl = findElementWithIdUpwards(this, filterID);
+    if (!filterControl)
+        throw new Error(
+            "filter feature is enabled but no filter control with id " +
+            filterID +
+            " is found",
+        );
+
+    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");
+                }
+
+                if (response?.ok === true) {
+                    this.dispatchEvent(new CustomEvent("reload", {bubbles: true}));
+                    filterControl?.showSuccess();
+                }
+
+                if (response.bodyUsed === true) {
+                    return handleIntersectionObserver.call(
+                        this,
+                        response[rawDataSymbol],
+                        response,
+                        filterControl,
+                    );
+                }
+
+                response
+                    .text()
+                    .then((jsonAsText) => {
+                        let json;
+                        try {
+                            json = JSON.parse(jsonAsText);
+                        } catch (e) {
+                            const message = e instanceof Error ? e.message : `${e}`;
+                            filterControl?.showFailureMessage(message);
+                            return Promise.reject(e);
+                        }
+
+                        return handleIntersectionObserver.call(
+                            this,
+                            json,
+                            response,
+                            filterControl,
+                        );
+                    })
+                    .catch((e) => {
+                        filterControl?.showFailureMessage(e.message);
+                    });
+            })
+            .catch((e) => {
+                this.dispatchEvent(
+                    new CustomEvent("error", {bubbles: true, detail: e}),
+                );
+
+                if (!(e instanceof Error)) {
+                    e = new Error(e);
+                }
+
+                filterControl?.showFailureMessage(e.message);
+                return Promise.reject(e);
+            });
+    });
+
+    filterControl.attachObserver(this[filterObserverSymbol]);
 }
 
 function handleIntersectionObserver(json, response, filterControl) {
-	const path = new Pathfinder(json);
-
-	const codePath = this.getOption("response.path.code");
-
-	if (path.exists(codePath)) {
-		const code = `${path.getVia(codePath)}`;
-		if (code && code === "200") {
-			filterControl?.showSuccess();
-			return Promise.resolve(response);
-		}
-
-		const messagePath = this.getOption("response.path.message");
-		if (path.exists(messagePath)) {
-			const message = path.getVia(messagePath);
-			filterControl?.showFailureMessage(message);
-			return Promise.reject(new Error(message));
-		}
-
-		return Promise.reject(new Error("Response code is not 200"));
-	}
+    const path = new Pathfinder(json);
+
+    const codePath = this.getOption("response.path.code");
+
+    if (path.exists(codePath)) {
+        const code = `${path.getVia(codePath)}`;
+        if (code && code === "200") {
+            filterControl?.showSuccess();
+            return Promise.resolve(response);
+        }
+
+        const messagePath = this.getOption("response.path.message");
+        if (path.exists(messagePath)) {
+            const message = path.getVia(messagePath);
+            filterControl?.showFailureMessage(message);
+            return Promise.reject(new Error(message));
+        }
+
+        return Promise.reject(new Error("Response code is not 200"));
+    }
 }
 
 /**
  * @private
  */
 function initAutoInit() {
-	
-	const autoInit = this.getOption("features.autoInit");
-	validateBoolean(autoInit);
 
-	if (autoInit !== true) return;
+    const autoInit = this.getOption("features.autoInit");
+    validateBoolean(autoInit);
+
+    if (autoInit !== true) return;
 
-	if (this.getOption("autoInit.intersectionObserver") === true) {
-		initIntersectionObserver.call(this);
-		return;
-	}
+    if (this.getOption("autoInit.intersectionObserver") === true) {
+        initIntersectionObserver.call(this);
+        return;
+    }
 
-	setTimeout(() => {
-		this.fetch().catch(() => {});
-	}, 0);
+    setTimeout(() => {
+        this.fetch().catch(() => {
+        });
+    }, 0);
 }
 
 function initEventHandler() {
-	this[intersectionObserverHandlerSymbol] = (entries) => {
-		entries.forEach((entry) => {
-			if (entry.isIntersecting) {
-				if (entry.intersectionRatio > 0) {
-					this.fetch();
-				}
-
-				// only load once
-				if (
-					this.getOption("autoInit.oneTime") === true &&
-					this[intersectionObserverObserverSymbol] !== undefined
-				) {
-					this[intersectionObserverObserverSymbol].unobserve(this);
-				}
-			}
-		});
-	};
+    this[intersectionObserverHandlerSymbol] = (entries) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                if (entry.intersectionRatio > 0) {
+                    this.fetch();
+                }
+
+                // only load once
+                if (
+                    this.getOption("autoInit.oneTime") === true &&
+                    this[intersectionObserverObserverSymbol] !== undefined
+                ) {
+                    this[intersectionObserverObserverSymbol].unobserve(this);
+                }
+            }
+        });
+    };
 }
 
 function initIntersectionObserver() {
-	this.classList.add("intersection-observer");
-
-	const options = {
-		root: null,
-		rootMargin: "0px",
-		threshold: 0.1,
-	};
-
-	this[intersectionObserverObserverSymbol] = new IntersectionObserver(
-		this[intersectionObserverHandlerSymbol],
-		options,
-	);
-	this[intersectionObserverObserverSymbol].observe(this);
+    this.classList.add("intersection-observer");
+
+    const options = {
+        root: null,
+        rootMargin: "0px",
+        threshold: 0.1,
+    };
+
+    this[intersectionObserverObserverSymbol] = new IntersectionObserver(
+        this[intersectionObserverHandlerSymbol],
+        options,
+    );
+    this[intersectionObserverObserverSymbol].observe(this);
 }
 
 /**
@@ -534,8 +540,8 @@ function initIntersectionObserver() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+    // language=HTML
+    return `
         <slot></slot>`;
 }