@schukai/monster 3.51.4 → 3.52.0

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

@@ -0,0 +1,268 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { Base } from "../../../types/base.mjs";
+import { equipWithInternal } from "../../../types/internal.mjs";
+import { instanceSymbol } from "../../../constants.mjs";
+import { Observer } from "../../../types/observer.mjs";
+import { ATTRIBUTE_DATATABLE_SORTABLE } from "../../constants.mjs";
+import {
+	validateIterable,
+	validateInstance,
+} from "../../../types/validate.mjs";
+
+export {
+	Header,
+	DIRECTION_ASC,
+	DIRECTION_DESC,
+	DIRECTION_NONE,
+	createOrderStatement,
+};
+
+/**
+ * small to large
+ * @private
+ * @type {string}
+ */
+const DIRECTION_ASC = "asc";
+
+/**
+ * large to small
+ * @private
+ * @type {string}
+ */
+const DIRECTION_DESC = "desc";
+
+/**
+ * no direction and no order  statement
+ *
+ * @private
+ * @type {string}
+ */
+const DIRECTION_NONE = "";
+
+/**
+ * The Header component is a basic class for the datatable component.
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable.Datatable
+ * @summary A datatable
+ */
+class Header extends Base {
+	constructor() {
+		super();;
+
+		/**
+		 * - attachInternalObserver
+		 * - detachInternalObserver
+		 * - containsInternalObserver
+		 * - setInternal
+		 * - setInternals
+		 * - getInternal
+		 */
+		equipWithInternal.call(this);
+
+		this.attachInternalObserver(
+			new Observer(() => {
+				updateStruct.call(this);
+			}),
+		);
+	}
+
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/datatable/header");
+	}
+
+	/**
+	 *
+	 * @returns {object}
+	 */
+	get internalDefaults() {
+		return {
+			field: undefined,
+			html: undefined,
+			order: undefined,
+			direction: undefined,
+			label: undefined,
+			labelKey: undefined,
+			classes: undefined,
+			index: undefined,
+			mode: undefined,
+			grid: undefined,
+		};
+	}
+
+	changeDirection() {;
+
+		let direction = this.getInternal("direction");
+		if (direction === DIRECTION_ASC) {
+			direction = DIRECTION_DESC;
+		} else if (direction === DIRECTION_DESC) {
+			direction = DIRECTION_NONE;
+		} else {
+			direction = DIRECTION_ASC;
+		}
+		this.setInternal("direction", direction);
+	}
+
+	/**
+	 * @param {string} field
+	 */
+	set field(field) {
+		this.setInternal("field", String(field));
+	}
+
+	/**
+	 * @param {string} direction
+	 */
+	set direction(direction) {
+		this.setInternal("direction", String(direction));
+	}
+
+	set labelKey(labelKey) {
+		this.setInternal("labelKey", String(labelKey));
+	}
+
+	/**
+	 * @param {string} label
+	 */
+	set label(label) {
+		this.setInternal("label", String(label));
+	}
+
+	/**
+	 * @param {string} classes
+	 */
+	set classes(classes) {
+		this.setInternal("classes", String(classes));
+	}
+
+	/**
+	 * @param {number} index
+	 */
+	set index(index) {
+		this.setInternal("index", String(index));
+	}
+
+	/**
+	 * @param {string} grid
+	 */
+	get grid() {
+		return this.getInternal("grid");
+	}
+
+	/**
+	 * @returns {string}
+	 */
+	get labelKey() {
+		return this.getInternal("labelKey");
+	}
+
+	/**
+	 * @returns {string}
+	 */
+	get html() {
+		return this.getInternal("html");
+	}
+
+	get order() {
+		return this.getInternal("order");
+	}
+
+	/**
+	 * @returns {string}
+	 */
+	get field() {
+		return this.getInternal("field");
+	}
+
+	/**
+	 * @returns {string}
+	 */
+	get index() {
+		return this.getInternal("index");
+	}
+
+	/**
+	 * @returns {string}
+	 */
+	get classes() {
+		return this.getInternal("classes");
+	}
+
+	/**
+	 * @returns {string}
+	 */
+	get label() {
+		return this.getInternal("label");
+	}
+
+	/**
+	 * @returns {string}
+	 */
+	get direction() {
+		return this.getInternal("direction");
+	}
+
+	/**
+	 * @returns {string}
+	 */
+	get mode() {
+		return this.getInternal("mode");
+	}
+}
+
+/**
+ * @private
+ * @param {Array<Header>} headers
+ * @returns {string}
+ */
+function createOrderStatement(headers) {
+	validateIterable(headers);
+
+	const oderStatement = [];
+	for (const header of headers) {
+		validateInstance(header, Header);
+		const order = header.getInternal("order");
+
+		if (!order) {
+			continue;
+		}
+		oderStatement.push(order);
+	}
+	return oderStatement.join(",");
+}
+
+/**
+ * @private
+ */
+function updateStruct() {;
+
+	const label = this.getInternal("label");
+	const direction = this.getInternal("direction");
+	const field = this.getInternal("field");
+
+	let order = "";
+
+	if (!field) {
+		this.setInternal("order", order);
+		this.setInternal("html", label);
+		return;
+	}
+
+	if (direction) {
+		order = `${field} ${direction}`.trim();
+	}
+
+	this.setInternal("order", order);
+	this.setInternal(
+		"html",
+		`<a href="#" ${ATTRIBUTE_DATATABLE_SORTABLE}="${order}">${label}</a>`,
+	);
+}

package/source/components/datatable/datatable/namespace.mjs

@@ -0,0 +1,13 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+/**
+ * Namespace for all datatable related functions.
+ *
+ * @namespace Monster.Components.Datatable.Datatable
+ * @memberOf Monster
+ * @author schukai GmbH
+ */
+const ns = {};