@schukai/monster 3.51.4 → 3.52.0

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

@@ -0,0 +1,400 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * 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 {
+	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";
+
+export { Rest };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const intersectionObserverHandlerSymbol = Symbol("intersectionObserverHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const intersectionObserverObserverSymbol = Symbol(
+	"intersectionObserverObserver",
+);
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const filterObserverSymbol = Symbol("filterObserver");
+
+/**
+ * The Datasource component is a basic class for the datatable component.
+ *
+ * <img src="./images/rest.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ *
+ * @startuml rest.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- Datasource
+ * Datasource <|-- Rest
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable.Datasource
+ * @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);
+	}
+}
+
+/**
+ * @private
+ */
+function removeFilter() {;
+	const filterID = this.getOption("filter.id", undefined);
+	if (!filterID) return;
+
+	const filterControl = findElementWithIdUpwards(this, filterID);
+
+	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]);
+}
+
+/**
+ * @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);
+}
+
+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);
+				}
+			}
+		});
+	};
+}
+
+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);
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <slot></slot>`;
+}
+
+registerCustomElement(Rest);

package/source/components/datatable/datasource.mjs

@@ -0,0 +1,102 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import {
+	CustomElement,
+	assembleMethodSymbol,
+} from "../../dom/customelement.mjs";
+import { Datasource as DatasourceBase } from "../../data/datasource.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+
+export { Datasource, dataSourceSymbol };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dataSourceSymbol = Symbol.for(
+	"@schukai/monster/components/datasource@@datasource",
+);
+
+/**
+ * The Datasource component is a basic class for the datatable component.
+ *
+ * <img src="./images/datasource.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ *
+ * @startuml datasource.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- Datasource
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable
+ * @summary A abstract datasource
+ */
+class Datasource extends CustomElement {
+	/**
+	 * the constructor of the class
+	 */
+	constructor() {
+		super();
+		this[dataSourceSymbol] = new DatasourceBase();
+	}
+
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/datasource@@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
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {});
+	}
+
+	/**
+	 *
+	 * @return {Monster.Components.Form.Form}
+	 */
+	[assembleMethodSymbol]() {;
+		super[assembleMethodSymbol]();
+	}
+
+	/**
+	 * Get the data, without proxy
+	 * @returns {Object}
+	 */
+	get data() {
+		return this[dataSourceSymbol].get();
+	}
+
+	/**
+	 * set the data
+	 * @param {Object} data
+	 */
+	set data(data) {
+		this[dataSourceSymbol].set(data);
+	}
+
+	/**
+	 * Get the datasource
+	 * @returns {Monster.Data.Datasource}
+	 */
+	get datasource() {
+		return this[dataSourceSymbol];
+	}
+}