@schukai/monster 3.54.0 → 3.55.0

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

@@ -3,25 +3,25 @@
  * 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 {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 {
-	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
@@ -34,7 +34,7 @@ const intersectionObserverHandlerSymbol = Symbol("intersectionObserverHandler");
  * @type {symbol}
  */
 const intersectionObserverObserverSymbol = Symbol(
-	"intersectionObserverObserver",
+    "intersectionObserverObserver",
 );
 
 /**
@@ -63,322 +63,371 @@ 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");
-	}
-
-	/**
-	 * 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
-	 */
-	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: true,
-				filter: false,
-			},
-
-			autoInit: {
-				intersectionObserver: false,
-				oneTime: true,
-			},
-
-			filter: {
-				id: undefined,
-			},
-
-			response: {
-				errorMessagePath: "sys.message",
-			},
-		});
-	}
-
-	/**
-	 *
-	 * @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 {Monster.Components.Form.Form}
-	 */
-	[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 this[dataSourceSymbol].read();
-	}
-
-	/**
-	 *
-	 * @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);
-	}
+    /**
+     * 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}
+     *
+     * 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;
+
+        restOptions.read.parameters = {
+            filter: undefined,
+            oderBy: undefined,
+            page: "1",
+        };
+
+        return Object.assign({}, super.defaults, restOptions, {
+            templates: {
+                main: getTemplate(),
+            },
+
+            features: {
+                autoInit: true,
+                filter: false,
+            },
+
+            autoInit: {
+                intersectionObserver: false,
+                oneTime: true,
+            },
+
+            filter: {
+                id: undefined,
+            },
+            
+            datatable: {
+                id: undefined,
+            },
+
+            response: {
+                errorMessagePath: "sys.message",
+            },
+        });
+    }
+
+    /**
+     *
+     * @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 {Monster.Components.Form.Form}
+     */
+    [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 self = this;
+        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(self, "monster-datasource-fetch", {
+                datasource: self,
+            });
+
+            setTimeout(() => {
+            self[dataSourceSymbol].read().then((response) => {
+                    fireCustomEvent(self, "monster-datasource-fetched", {
+                        datasource: self,
+                    });
+
+                    resolve(response);
+                    
+                })
+                .catch((error) => {
+                    fireCustomEvent(self, "monster-datasource-error", {
+                        error: error,
+                    });
+
+                    addAttributeToken(self, 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);
+    }
 }
 
 /**
  * @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", undefined);
-		this.setParameters({ query: query });
-		this.fetch()
-			.then(() => {
-				this.dispatchEvent(new CustomEvent("reload", { bubbles: true }));
-				filterControl?.showSuccess();
-			})
-			.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);
-				}
-			});
-	});
-
-	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", undefined);
+        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();
+                }
+
+                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}),
+                );
+
+                if (!(e instanceof Error)) {
+                    e = new Error(e);
+                }
+
+                filterControl?.showFailureMessage(e.message);
+                return Promise.reject(e);
+
+            });
+    });
+
+    filterControl.attachObserver(this[filterObserverSymbol]);
 }
 
 /**
  * @private
  */
 function initAutoInit() {
-	const autoInit = this.getOption("features.autoInit");
-	validateBoolean(autoInit);
-
-	if (autoInit !== true) return;
-
-	if (this.getOption("autoInit.intersectionObserver") === true) {
-		initIntersectionObserver.call(this);
-		return;
-	}
-
-	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));
-			});
-	}, 0);
+    const autoInit = this.getOption("features.autoInit");
+    validateBoolean(autoInit);
+
+    if (autoInit !== true) return;
+
+    if (this.getOption("autoInit.intersectionObserver") === true) {
+        initIntersectionObserver.call(this);
+        return;
+    }
+
+    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);
 }
 
 /**
@@ -386,8 +435,8 @@ function initIntersectionObserver() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+    // language=HTML
+    return `
         <slot></slot>`;
 }