@contributte/datagrid 0.0.0-20250531-d4580b9

package/assets/datagrid.ts

@@ -0,0 +1,228 @@
+import { defaultDatagridNameResolver, isEnter } from "./utils";
+import type { Ajax, DatagridEventMap, DatagridOptions, DatagridsOptions, EventDetail, EventListener, } from "./types";
+import Select from "tom-select";
+import {
+	AutosubmitPlugin,
+	CheckboxPlugin,
+	ConfirmPlugin,
+	HappyPlugin,
+	InlinePlugin,
+	NetteFormsPlugin,
+	SelectpickerPlugin,
+	SortablePlugin
+} from "./plugins";
+import { SortableJS } from "./integrations";
+import { DatepickerPlugin } from "./plugins";
+import { Happy, TomSelect, VanillaDatepicker } from "./integrations";
+
+export class Datagrid extends EventTarget {
+	private static readonly defaultOptions: DatagridOptions = {
+		confirm: confirm,
+		resolveDatagridName: defaultDatagridNameResolver,
+		plugins: [],
+	};
+
+	public readonly name: string;
+
+	public readonly ajax: Ajax;
+
+	private readonly options: DatagridOptions;
+
+	constructor(
+		public readonly el: HTMLElement,
+		ajax: Ajax | ((grid: Datagrid) => Ajax),
+		options: Partial<DatagridOptions>
+	) {
+		super();
+
+		this.options = {
+			...Datagrid.defaultOptions,
+			...options,
+		};
+
+		const name = this.resolveDatagridName();
+
+		if (!name) {
+			throw new Error("Cannot resolve name of a datagrid!");
+		}
+
+		this.name = name;
+
+		this.ajax = typeof ajax === "function" ? ajax(this) : ajax;
+
+		this.ajax.addEventListener("success", e => {
+			if (e.detail.payload?._datagrid_name === this.name && e.detail.payload?._datagrid_init) {
+				this.init();
+			}
+		});
+
+		this.init();
+	}
+
+	public init() {
+		let cancelled = !this.dispatch('beforeInit', { datagrid: this })
+		if (!cancelled) {
+			this.options.plugins.forEach((plugin) => {
+				plugin.onDatagridInit?.(this)
+			})
+		}
+
+		// Uncheck toggle-all
+		const checkedRows = this.el.querySelectorAll<HTMLInputElement>("input[data-check]:checked");
+		if (checkedRows.length === 1 && checkedRows[0].getAttribute("name") === "toggle-all") {
+			const input = checkedRows[0];
+			if (input) {
+				input.checked = false;
+			}
+		}
+
+		this.el.querySelectorAll<HTMLInputElement>("input[data-datagrid-manualsubmit]").forEach(inputEl => {
+			const form = inputEl.closest("form");
+			if (!form) return;
+
+			inputEl.addEventListener("keydown", e => {
+				if (!isEnter(e)) return;
+
+				e.stopPropagation();
+				e.preventDefault();
+				return this.ajax.submitForm(form);
+			});
+		});
+
+		this.ajax.addEventListener("success", ({ detail: { payload } }) => {
+			// todo: maybe move?
+			if (payload._datagrid_name && payload._datagrid_name === this.name) {
+				const getColumnName = (el: HTMLElement) => el.getAttribute(
+					"data-datagrid-reset-filter-by-column"
+				)
+
+				const resets = Array.from<HTMLElement>(this.el.querySelectorAll(
+					`[data-datagrid-reset-filter-by-column]`
+				));
+
+				const nonEmptyFilters = payload.non_empty_filters ? payload.non_empty_filters : [] as string[];
+
+				resets.forEach((el) => {
+					const columnName = getColumnName(el);
+
+					if (columnName && nonEmptyFilters.includes(columnName)) {
+						el.classList.remove("hidden");
+					} else {
+						el.classList.add("hidden");
+					}
+				});
+
+				if (nonEmptyFilters.length > 0) {
+					const href = this.el.querySelector(".reset-filter")
+						?.getAttribute("href");
+
+					if (href) {
+						resets.forEach((el) => {
+							const columnName = getColumnName(el);
+
+							const newHref = href.replace("-resetFilter", "-resetColumnFilter");
+							el.setAttribute("href", `${newHref}&${this.name}-key=${columnName}`);
+						})
+					}
+				}
+			}
+		})
+
+		this.dispatch('afterInit', { datagrid: this });
+	}
+
+	public confirm(message: string): boolean {
+		return this.options.confirm.bind(this)(message);
+	}
+
+	public resolveDatagridName(): string | null {
+		return this.options.resolveDatagridName.bind(this)(this.el);
+	}
+
+	dispatch<
+		K extends string, M extends DatagridEventMap = DatagridEventMap
+	>(type: K, detail: K extends keyof M ? EventDetail<M[K]> : any, options?: boolean): boolean {
+		return this.dispatchEvent(new CustomEvent(type, { detail }));
+	}
+
+	declare addEventListener: <K extends keyof M, M extends DatagridEventMap = DatagridEventMap>(
+		type: K,
+		listener: EventListener<this, M[K]>,
+		options?: boolean | AddEventListenerOptions
+	) => void;
+
+	declare removeEventListener: <K extends keyof M, M extends DatagridEventMap = DatagridEventMap>(
+		type: K,
+		listener: EventListener<this, M[K]>,
+		options?: boolean | AddEventListenerOptions
+	) => void;
+
+	declare dispatchEvent: <K extends string, M extends DatagridEventMap = DatagridEventMap>(
+		event: K extends keyof M ? M[K] : CustomEvent
+	) => boolean;
+}
+
+export class Datagrids {
+	private datagrids: Datagrid[] = [];
+
+	readonly options: DatagridsOptions;
+
+	readonly root: HTMLElement;
+
+	constructor(readonly ajax: Ajax, options: Partial<DatagridsOptions> = {}) {
+		this.options = {
+			selector: "div[data-datagrid-name]",
+			datagrid: {},
+			root: document.body,
+			...options,
+		};
+
+		const root = typeof this.options.root === "string"
+			? document.querySelector(this.options.root)
+			: this.options.root;
+
+		if (!root || !(root instanceof HTMLElement)) {
+			throw new Error("Root element not found or is not an HTMLElement");
+		}
+
+		this.root = root;
+
+		this.init();
+	}
+
+	init() {
+		this.ajax.onInit();
+		(this.options.datagrid?.plugins ?? []).forEach((plugin) => plugin.onInit?.(this));
+
+		this.initDatagrids();
+	}
+
+	initDatagrids() {
+		this.datagrids = Array.from(this.root.querySelectorAll<HTMLElement>(this.options.selector)).map(
+			datagrid => new Datagrid(datagrid, this.ajax, this.options.datagrid)
+		);
+	}
+}
+
+export const createDatagrids = (ajax: Ajax, _options: Partial<DatagridsOptions> = {}) => {
+	return new Datagrids(ajax, _options);
+};
+
+export const createFullDatagrids = (ajax: Ajax, _options: Partial<DatagridsOptions> = {}) => {
+	return createDatagrids(ajax, {
+		datagrid: {
+			plugins: [
+				new AutosubmitPlugin(),
+				new CheckboxPlugin(),
+				new ConfirmPlugin(),
+				new InlinePlugin(),
+				new NetteFormsPlugin(),
+				new HappyPlugin(new Happy()),
+				new SortablePlugin(new SortableJS()),
+				new DatepickerPlugin(new VanillaDatepicker()),
+				new SelectpickerPlugin(new TomSelect(Select))
+			],
+		},
+		..._options,
+	})
+};

package/assets/index.ts

@@ -0,0 +1,4 @@
+export * from "./datagrid";
+export * from "./plugins";
+export * from "./integrations";
+export * from "./datagrid";

package/assets/integrations/happy.ts

@@ -0,0 +1,217 @@
+/**
+ * Slightly cleaned up & typed version of happy-inputs by paveljanda.
+ */
+export class Happy {
+	private colors: string[] = ["primary", "success", "info", "warning", "danger", "white", "gray"];
+
+	private templates = {
+		radio: '<div class="happy-radio"><b></b></div>',
+		checkbox:
+			'<div class="happy-checkbox"><svg viewBox="0 0 30 30"><rect class="mark-storke" x="15" y="3" rx="1" ry="1" width="10" height="4"/><rect class="mark-storke" x="-7" y="21" rx="1" ry="1" width="19" height="4"/></svg></div>',
+		text: "",
+		textarea: "",
+	};
+
+	init() {
+		this.removeBySelector(".happy-radio");
+		this.removeBySelector(".happy-checkbox");
+
+		this.initRadio();
+		this.initCheckbox();
+	}
+
+	/**
+	 * @deprecated
+	 */
+	reset() {
+		this.init();
+	}
+
+	addColorToInput(input: HTMLElement, happyInput: HTMLElement, classString: string) {
+		if (input.classList.contains(classString)) {
+			happyInput.classList.add(classString);
+		}
+
+		classString = `${classString}-border`;
+
+		if (input.classList.contains(classString)) {
+			happyInput.classList.add(classString);
+		}
+	}
+
+	// i... you know what, no, let "thinkess" be "thinkess"
+	addThinkessToInput(input: HTMLElement, happyInput: HTMLElement) {
+		if (input.classList.contains("thin")) {
+			happyInput.classList.add("thin");
+		}
+	}
+
+	setNames(input: HTMLElement, happyInput: HTMLElement) {
+		happyInput.setAttribute("data-name", input.getAttribute("name") ?? "");
+
+		var value = input.getAttribute("value");
+
+		if (value !== "undefined" && value !== null) {
+			happyInput.setAttribute("data-value", input.getAttribute("value") ?? "");
+		}
+	}
+
+	removeBySelector(selector: string) {
+		document.querySelectorAll(selector).forEach(el => el.parentNode?.removeChild(el));
+	}
+
+	initRadio() {
+		document.querySelectorAll<HTMLInputElement>("input[type=radio].happy").forEach(input => {
+			/**
+			 * Paste happy component into html
+			 */
+			input.insertAdjacentHTML("afterend", this.templates.radio);
+
+			const happyInput = input.nextElementSibling;
+
+			if (happyInput instanceof HTMLElement) {
+				/**
+				 * Add optional colors
+				 */
+				this.colors.forEach(color => {
+					this.addColorToInput(input, happyInput, color);
+					this.setNames(input, happyInput);
+				});
+
+				this.addThinkessToInput(input, happyInput);
+			}
+
+			/**
+			 * Init state
+			 */
+			this.checkRadioState(input);
+
+			/**
+			 * Set aciton functionality for native change
+			 */
+			document.addEventListener("change", this.radioOnChange.bind(this));
+		});
+	}
+
+	initCheckbox() {
+		document.querySelectorAll<HTMLInputElement>("input[type=checkbox].happy").forEach(input => {
+			/**
+			 * Paste happy component into html
+			 */
+			input.insertAdjacentHTML("afterend", this.templates.checkbox);
+
+			const happyInput = input.nextElementSibling;
+
+			/**
+			 * Add optional colors
+			 */
+			if (happyInput instanceof HTMLElement) {
+				this.colors.forEach(color => {
+					this.addColorToInput(input, happyInput, color);
+					this.setNames(input, happyInput);
+				});
+
+				this.addThinkessToInput(input, happyInput);
+			}
+
+			/**
+			 * Init state
+			 */
+			this.checkCheckboxState(input);
+
+			/**
+			 * Set action functionality for click || native change
+			 */
+			document.addEventListener("click", this.checkCheckboxStateOnClick.bind(this));
+			document.addEventListener("change", this.checkCheckboxStateOnChange.bind(this));
+		});
+	}
+
+	checkCheckboxStateOnClick(event: Event) {
+		const target = event.target;
+
+		// When target is SVGSVGElement (<svg>), return parentNode,
+		// When target is a SVGGraphicsElement (<rect>,...), find <svg> and return it's parent node
+		// otherwise return target itself.
+		const happyInput =
+			target instanceof SVGSVGElement
+				? target.parentNode
+				: target instanceof SVGGraphicsElement
+					? target.closest("svg")?.parentNode
+					: target;
+
+		if (!(happyInput instanceof HTMLElement) || !happyInput.classList.contains("happy-checkbox")) {
+			return;
+		}
+
+		event.preventDefault();
+
+		const name = happyInput.getAttribute("data-name");
+		const value = happyInput.getAttribute("data-value");
+
+		const input = document.querySelector(
+			`.happy-checkbox[data-name="${name}"]` + (!!value ? `[value="${value}"]` : "")
+		);
+		if (!(input instanceof HTMLInputElement)) return;
+
+		const checked = happyInput.classList.contains("active");
+
+		input.checked = !checked;
+		checked ? happyInput.classList.remove("active") : happyInput.classList.add("active");
+	}
+
+	checkCheckboxStateOnChange({target}: Event) {
+		if (!(target instanceof HTMLInputElement)) return;
+
+		if (target.classList.contains("happy")) {
+			this.checkCheckboxState(target);
+		}
+	}
+
+	checkRadioState(input: HTMLInputElement) {
+		if (!input.checked || !input.hasAttribute("name")) return;
+
+		const name = input.getAttribute("name");
+		const value = input.getAttribute("value");
+
+		const element = document.querySelector(
+			`.happy-checkbox[data-name="${name}"]` + (!!value ? `[data-value="${value}"]` : "")
+		);
+
+		if (element) {
+			element.classList.add("active");
+		}
+	}
+
+	checkCheckboxState(input: HTMLInputElement) {
+		const name = input.getAttribute("name");
+		if (!name) return;
+
+		const value = input.getAttribute("value");
+		const element = document.querySelector(
+			`.happy-checkbox[data-name="${name}"]` + (!!value ? `[data-value="${value}"]` : "")
+		);
+
+		if (!element) return;
+
+		input.checked ? element.classList.add("active") : element.classList.remove("active");
+	}
+
+	radioOnChange({target}: Event) {
+		// Check whether target is <input>, is a happy input (.happy) & has the name attribute
+		if (
+			!(target instanceof HTMLInputElement) ||
+			!target.classList.contains("happy") ||
+			!target.hasAttribute("name")
+		)
+			return;
+
+		const name = target.getAttribute("name")!;
+
+		document
+			.querySelectorAll(`.happy-radio[data-name="${name}"]`)
+			.forEach(happyRadio => happyRadio.classList.remove("active"));
+
+		this.checkRadioState(target);
+	}
+}

package/assets/integrations/index.ts

@@ -0,0 +1,4 @@
+export * from "./happy";
+export * from "./sortable-js";
+export * from "./tom-select";
+export * from "./vanilla-datepicker";

package/assets/integrations/sortable-js.ts

@@ -0,0 +1,58 @@
+import { Datagrid } from "..";
+import { Sortable as SortableInterface } from "../types";
+import Sortable from "sortablejs"
+
+export class SortableJS implements SortableInterface {
+	initSortable(datagrid: Datagrid): void {
+		const sortable = datagrid.el.querySelector<HTMLElement>("[data-sortable]");
+		if (sortable) {
+			new Sortable(sortable, {
+				handle: '.handle-sort',
+				draggable: 'tr',
+				sort: true,
+				direction: 'vertical',
+				async onEnd({item}) {
+					const itemId = item.getAttribute("data-id");
+					if (itemId) {
+						const prevId = item.previousElementSibling?.getAttribute("data-id") ?? null;
+						const nextId = item.nextElementSibling?.getAttribute("data-id") ?? null;
+
+						const tbody = datagrid.el.querySelector("tbody");
+
+						if (tbody) {
+							let componentPrefix = tbody.getAttribute("data-sortable-parent-path") ?? '';
+							if (componentPrefix.length) componentPrefix = `${componentPrefix}-`;
+
+							const url = tbody.getAttribute("data-sortable-url") ?? "?do=sort";
+
+							const data = {
+								[`${componentPrefix}item_id`]: itemId,
+								...(prevId ? {[`${componentPrefix}prev_id`]: prevId} : {}),
+								...(nextId ? {[`${componentPrefix}next_id`]: nextId} : {}),
+							};
+
+							return await datagrid.ajax.request({
+								method: "GET",
+								url,
+								data,
+							})
+						}
+					}
+				},
+			})
+		}
+	}
+
+	initSortableTree(datagrid: Datagrid): void {
+		datagrid.el.querySelectorAll<HTMLElement>(".datagrid-tree-item-children").forEach((el) => {
+			new Sortable(el, {
+				handle: '.handle-sort',
+				draggable: '.datagrid-tree-item:not(.datagrid-tree-header)',
+				async onEnd({item}) {
+					// TODO
+				},
+			})
+		})
+	}
+
+}

package/assets/integrations/tom-select.ts

@@ -0,0 +1,30 @@
+import { Constructor, Selectpicker } from "../types";
+import { RecursivePartial, TomInput, TomSettings } from "tom-select/dist/types/types";
+import type TomSelectType from "tom-select";
+import { window } from "../utils";
+
+export class TomSelect implements Selectpicker {
+	constructor(
+		private select?: Constructor<TomSelectType>,
+		private opts: RecursivePartial<TomSettings> | ((input: HTMLElement | TomInput) => RecursivePartial<TomSettings>) = {}
+	) {
+	}
+
+	initSelectpickers(elements: HTMLElement[]): void {
+		const Select = this.select ?? window()?.TomSelect ?? null;
+
+		if (Select) {
+			for (const element of elements) {
+				// Check if TomSelect is already initialized on the element
+				if (element.tomselect) {
+					continue;
+				}
+
+				new Select(
+					element as TomInput,
+					typeof this.opts === "function" ? this.opts(element) : this.opts
+				)
+			}
+		}
+	}
+}

package/assets/integrations/vanilla-datepicker.ts

@@ -0,0 +1,25 @@
+import { Datepicker as DatepickerInterface } from "../types";
+import { Datepicker } from "vanillajs-datepicker";
+import { DatepickerOptions } from "vanillajs-datepicker/Datepicker";
+
+export class VanillaDatepicker implements DatepickerInterface {
+	constructor(private opts: DatepickerOptions | ((input: HTMLInputElement) => DatepickerOptions) = {}) {
+	}
+
+	initDatepickers(elements: HTMLInputElement[]): void {
+		elements.forEach((element) => {
+			const options = typeof this.opts === "function" ? this.opts(element) : this.opts;
+			const picker = new Datepicker(element, {
+				...options,
+				updateOnBlur: false
+			});
+
+			element.addEventListener('changeDate', () => {
+				const form = element.closest('form');
+				if (form) {
+					form.submit();
+				}
+			});
+		});
+	}
+}

package/assets/plugins/features/autosubmit.ts

@@ -0,0 +1,87 @@
+import { DatagridPlugin } from "../../types";
+import { debounce, isEnter, isFunctionKey, isInKeyRange } from "../../utils";
+import { Datagrid } from "../..";
+
+export const AutosubmitAttribute = "data-autosubmit";
+
+export const AutosubmitPerPageAttribute = "data-autosubmit-per-page";
+
+export const AutosubmitChangeAttribute = "data-autosubmit-change";
+
+export class AutosubmitPlugin implements DatagridPlugin {
+	onDatagridInit(datagrid: Datagrid): boolean {
+		datagrid.ajax.addEventListener('complete', (event) => {
+			this.initPerPage(datagrid);
+			this.initChange(datagrid);
+		});
+
+		this.initPerPage(datagrid);
+		this.initChange(datagrid);
+
+		return true;
+	};
+
+	// Auto-submit perPage
+	initPerPage(datagrid: Datagrid) {
+		datagrid.el.querySelectorAll<HTMLSelectElement>(`select[${AutosubmitPerPageAttribute}]`)
+			.forEach(pageSelectEl => {
+				pageSelectEl.addEventListener("change", () => {
+					let inputEl = pageSelectEl.parentElement?.querySelector("input[type=submit]");
+					if (!inputEl) {
+						inputEl = pageSelectEl.parentElement?.querySelector("button[type=submit]");
+					}
+					console.log({ inputEl });
+					if (!(inputEl instanceof HTMLElement)) return;
+					const form = inputEl.closest('form');
+					console.log({ form });
+					form && datagrid.ajax.submitForm(form);
+				});
+			});
+	}
+
+	// Auto-submit change
+	initChange(datagrid: Datagrid) {
+		datagrid.el.querySelectorAll<HTMLSelectElement | HTMLInputElement>(`[${AutosubmitAttribute}]`)
+			.forEach(submitEl => {
+				const form = submitEl.closest("form");
+				if (!form) return;
+
+				if (submitEl.dataset.listenersAttached === "true") {
+					return; // Skip if listeners are already attached
+				}
+				submitEl.dataset.listenersAttached = "true";
+
+				// Select auto-submit
+				if (submitEl instanceof HTMLSelectElement) {
+					submitEl.addEventListener("change", () => datagrid.ajax.submitForm(form));
+
+					return;
+				}
+
+				// Input auto-submit
+				if (submitEl instanceof HTMLInputElement) {
+					// Handle change events
+					if (submitEl.hasAttribute(AutosubmitChangeAttribute)) {
+						submitEl.addEventListener(
+							"change",
+							debounce(() => datagrid.ajax.submitForm(form))
+						);
+					}
+
+					submitEl.addEventListener(
+						"keyup",
+						debounce(e => {
+							// Ignore keys such as alt, ctrl, etc, F-keys... (when enter is not pressed)
+							if (!isEnter(e) && (isInKeyRange(e, 9, 40) || isFunctionKey(e))) {
+								return;
+							}
+
+							return datagrid.ajax.submitForm(form);
+						})
+					);
+				}
+			});
+	}
+}
+
+