@contributte/datagrid 0.0.0-20250531-d4580b9

package/assets/plugins/features/checkboxes.ts

@@ -0,0 +1,92 @@
+import { DatagridPlugin } from "../../types";
+import { Datagrid } from "../..";
+
+export const CheckboxAttribute = "data-check";
+
+export class CheckboxPlugin implements DatagridPlugin {
+	onDatagridInit(datagrid: Datagrid): boolean {
+		let lastCheckbox = null;
+
+		datagrid.el.addEventListener("click", e => {
+			if (!(e.target instanceof HTMLElement)) return;
+
+			if (e.target.classList.contains("col-checkbox")) {
+				lastCheckbox = e.target;
+				if (e.shiftKey && lastCheckbox) {
+					const currentCheckboxRow = lastCheckbox.closest("tr");
+					if (!currentCheckboxRow) return;
+
+					const lastCheckboxRow = lastCheckbox.closest("tr");
+					if (!lastCheckboxRow) return;
+
+					const lastCheckboxTbody = lastCheckboxRow.closest("tbody");
+					if (!lastCheckboxTbody) return;
+
+					const checkboxesRows = Array.from(lastCheckboxTbody.querySelectorAll<HTMLElement>("tr"));
+					const [start, end] = [lastCheckboxRow.rowIndex, currentCheckboxRow.rowIndex].sort();
+					const rows = checkboxesRows.slice(start, end + 1);
+
+					rows.forEach(row => {
+						const input = row.querySelector<HTMLInputElement>('.col-checkbox input[type="checkbox"]');
+						if (input) {
+							input.checked = true;
+						}
+					});
+				}
+			}
+		});
+
+		let checkboxes = datagrid.el.querySelectorAll<HTMLInputElement>(`input[data-check='${datagrid.name}']`);
+		const select = datagrid.el.querySelector<HTMLSelectElement>("select[name='group_action[group_action]']");
+		const actionButtons = document.querySelectorAll<HTMLInputElement | HTMLButtonElement>(
+			".row-group-actions *[type='submit']"
+		);
+		const counter = document.querySelector<HTMLElement>(".datagrid-selected-rows-count");
+
+		// Handling a checkbox click + select all checkbox
+		checkboxes.forEach(checkEl => {
+			checkEl.addEventListener("change", () => {
+				// Select all
+				const isSelectAll = checkEl.hasAttribute("data-check-all");
+				if (isSelectAll) {
+					if (datagrid.name !== checkEl.getAttribute("data-check-all")) return;
+
+					checkboxes.forEach(checkbox => (checkbox.checked = checkEl.checked));
+
+					// todo: refactor not to repeat this code twice
+					actionButtons.forEach(button => (button.disabled = !checkEl.checked));
+
+					if (select) {
+						select.disabled = !checkEl.checked;
+					}
+
+					if (counter) {
+						const total = Array.from(checkboxes).filter(c => !c.hasAttribute("data-check-all")).length;
+						counter.innerText = `${checkEl.checked ? total : 0}/${total}`;
+					}
+					return;
+				} else {
+					const selectAll = datagrid.el.querySelector<HTMLInputElement>(`input[data-check='${datagrid.name}'][data-check-all]`);
+					if (selectAll) {
+						selectAll.checked = Array.from(checkboxes).filter(c => !c.hasAttribute("data-check-all")).every(c => c.checked);
+					}
+				}
+
+				const checkedBoxes = Array.from(checkboxes).filter(checkbox => checkbox.checked && !checkEl.hasAttribute("data-check-all"));
+				const hasChecked = checkedBoxes.length >= 1;
+
+				actionButtons.forEach(button => (button.disabled = !hasChecked));
+
+				if (select) {
+					select.disabled = !hasChecked;
+				}
+
+				if (counter) {
+					counter.innerText = `${checkedBoxes.length}/${checkboxes.length}`;
+				}
+			});
+		});
+
+		return true;
+	}
+}

package/assets/plugins/features/confirm.ts

@@ -0,0 +1,28 @@
+import { Datagrid } from "../../datagrid";
+import { DatagridPlugin } from "../../types";
+
+export const ConfirmAttribute = "data-datagrid-confirm";
+
+export class ConfirmPlugin implements DatagridPlugin {
+	onDatagridInit(datagrid: Datagrid): boolean {
+		datagrid.el
+			.querySelectorAll<HTMLElement>(`[${ConfirmAttribute}]:not(.ajax)`)
+			.forEach(confirmEl =>
+				confirmEl.addEventListener("click", e => this.confirmEventHandler.bind(datagrid)(e.target as HTMLElement, e))
+			);
+
+		datagrid.ajax.addEventListener("interact", e => this.confirmEventHandler.bind(datagrid)(e.detail.element, e));
+
+		return true;
+	}
+
+	confirmEventHandler(this: Datagrid, el: HTMLElement, e: Event) {
+		const message = el.closest('a')?.getAttribute(ConfirmAttribute)!;
+		if (!message) return;
+
+		if (!window.confirm.bind(window)(message)) {
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	}
+}

package/assets/plugins/features/editable.ts

@@ -0,0 +1,118 @@
+import { DatagridPlugin } from "../../types";
+import { calculateCellLines, isEnter, isEsc } from "../../utils";
+import { Datagrid } from "../..";
+
+export const EditableUrlAttribute = "data-datagrid-editable-url";
+
+export const EditableTypeAttribute = "data-datagrid-editable-type";
+
+export const EditableElementAttribute = "data-datagrid-editable-element";
+
+export const EditableValueAttribute = "data-datagrid-editable-value";
+
+export const EditableAttrsAttribute = "datagrid-editable-attrs";
+
+export class EditablePlugin implements DatagridPlugin {
+	onDatagridInit(datagrid: Datagrid): boolean {
+		datagrid.el.querySelectorAll<HTMLElement>(`[${EditableUrlAttribute}]`).forEach(cell => {
+			if (cell instanceof HTMLAnchorElement || cell.classList.contains("datagrid-inline-edit")) return;
+
+			if (!cell.classList.contains("editing")) {
+				cell.classList.add("editing");
+				const originalValue = cell.innerHTML.replace(/<\/?br>/g, "\n");
+				const valueToEdit = cell.getAttribute(EditableValueAttribute) ?? originalValue;
+
+				cell.setAttribute("originalValue", originalValue);
+				cell.setAttribute("valueToEdit", valueToEdit);
+
+				const type = cell.getAttribute(EditableTypeAttribute) ?? "text";
+
+				let input: HTMLElement;
+
+				switch (type) {
+					case "textarea":
+						cell.innerHTML = `<textarea rows="${calculateCellLines(cell)}">${valueToEdit}</textarea>`;
+						input = cell.querySelector("textarea")!;
+						break;
+					case "select":
+						input = cell.querySelector(cell.getAttribute(EditableElementAttribute) ?? "")!;
+						input
+							.querySelectorAll(`option[value='${valueToEdit}']`)
+							.forEach(input => input.setAttribute("selected", "true"));
+						break;
+					default:
+						cell.innerHTML = `<input type='${type}' />`;
+						input = cell.querySelector("input")!;
+				}
+
+				const attributes = JSON.parse(cell.getAttribute(EditableAttrsAttribute) ?? "{}");
+				for (const key in attributes) {
+					const value = attributes[key];
+					input.setAttribute(key, value);
+				}
+
+				cell.classList.remove("edited");
+
+				const submitCell = async (el: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) => {
+					let value = el.value;
+					if (value !== valueToEdit) {
+						try {
+							const response = await datagrid.ajax.request({
+								url: cell.getAttribute(EditableUrlAttribute) ?? "",
+								method: "POST",
+								data: {
+									value,
+								},
+							}) as any;
+
+							if (type === "select") {
+								cell.innerHTML = cell.querySelector(`option[value='${value}']`)?.innerHTML ?? "";
+							} else {
+								if (response._datagrid_editable_new_value) {
+									value = response._datagrid_editable_new_value;
+								}
+								cell.innerHTML = value;
+							}
+							cell.classList.add("edited");
+						} catch {
+							cell.innerHTML = originalValue;
+							cell.classList.add("edited-error");
+						}
+					} else {
+						cell.innerHTML = originalValue;
+					}
+
+					cell.classList.remove("editing");
+				};
+
+				cell
+					.querySelectorAll<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>(
+						"input, textarea, select"
+					)
+					.forEach(el => {
+						el.addEventListener("blur", () => submitCell(el));
+						el.addEventListener("keydown", e => {
+							if (isEnter(e as KeyboardEvent)) {
+								e.stopPropagation();
+								e.preventDefault();
+								return submitCell(el);
+							}
+
+							if (isEsc(e as KeyboardEvent)) {
+								e.stopPropagation();
+								e.preventDefault();
+								cell.classList.remove("editing");
+								cell.innerHTML = originalValue;
+							}
+						});
+
+						if (el instanceof HTMLSelectElement) {
+							el.addEventListener("change", () => submitCell(el));
+						}
+					});
+			}
+		});
+
+		return true;
+	}
+}

package/assets/plugins/features/inline.ts

@@ -0,0 +1,89 @@
+import { DatagridPlugin } from "../../types";
+import { isEnter } from "../../utils";
+import { Datagrid, Datagrids } from "../..";
+
+export class InlinePlugin implements DatagridPlugin {
+	onInit(datagrids: Datagrids) {
+	}
+
+	onDatagridInit(datagrid: Datagrid): boolean {
+		datagrid.ajax.addEventListener('success', ({ detail: { payload } }) => {
+			if (!payload._datagrid_name || payload._datagrid_name !== datagrid.name) return;
+
+			if (payload._datagrid_inline_edited || payload._datagrid_inline_edit_cancel) {
+				const trigger = datagrid.el.querySelector('.datagrid-inline-edit-trigger');
+
+				if (payload._datagrid_inline_edited) {
+					let rows = datagrid.el.querySelectorAll<HTMLTableCellElement>(
+						`tr[data-id='${payload._datagrid_inline_edited}'] > td`
+					);
+
+					rows.forEach(row => {
+						row.classList.add("edited");
+					})
+				}
+
+				trigger?.classList.remove("hidden");
+				return;
+			}
+
+			if (payload._datagrid_inline_adding) {
+				const row = datagrid.el.querySelector<HTMLElement>(".datagrid-row-inline-add");
+				if (row) {
+					row.classList.remove("datagrid-row-inline-add-hidden");
+					row.querySelector<HTMLInputElement | HTMLTextAreaElement>(
+						"input:not([readonly]), textarea:not([readonly])"
+					)?.focus();
+				}
+			}
+
+			if (payload._datagrid_inline_editing) {
+				datagrid.el.querySelector<HTMLElement>(".datagrid-inline-edit-trigger")
+					?.classList.add("hidden");
+			}
+
+			datagrid.el.querySelectorAll<HTMLElement>(".datagrid-inline-edit input").forEach(inputEl => {
+				inputEl.addEventListener("keydown", e => {
+					if (!isEnter(e)) return;
+
+					e.stopPropagation();
+					e.preventDefault();
+
+					return inputEl
+						.closest("tr")
+						?.querySelector<HTMLElement>(".col-action-inline-edit [name='inline_edit[submit]']")
+						?.click();
+				});
+			});
+
+			datagrid.el.querySelectorAll<HTMLElement>(".datagrid-inline-add input").forEach(inputEl => {
+				inputEl.addEventListener("keydown", e => {
+					if (!isEnter(e)) return;
+
+					e.stopPropagation();
+					e.preventDefault();
+
+					return inputEl
+						.closest("tr")
+						?.querySelector<HTMLElement>(".col-action-inline-edit [name='inline_add[submit]']")
+						?.click();
+				});
+			});
+
+			datagrid.el.querySelectorAll<HTMLElement>("[data-datagrid-cancel-inline-add]").forEach(cancel => {
+				cancel.addEventListener("mouseup", e => {
+					if (e.button === 0) {
+						e.stopPropagation();
+						e.preventDefault();
+						const inlineAdd = cancel.closest<HTMLElement>(".datagrid-row-inline-add");
+						if (inlineAdd) {
+							inlineAdd.classList.add("datagrid-row-inline-add-hidden");
+						}
+					}
+				});
+			});
+		})
+
+		return true;
+	}
+}

package/assets/plugins/features/item-detail.ts

@@ -0,0 +1,48 @@
+import { Datagrid } from "../..";
+import { DatagridPlugin } from "../../types";
+
+export class ItemDetailPlugin implements DatagridPlugin {
+	onDatagridInit(datagrid: Datagrid): boolean {
+		datagrid.el.querySelectorAll<HTMLElement>("[data-toggle-detail-grid]")
+			.forEach((el) => {
+				if (el.getAttribute("data-toggle-detail-grid") !== datagrid.name) return;
+				const toggleId = el.getAttribute("data-toggle-detail")!;
+
+
+				el.addEventListener("click", (e) => {
+					const contentRow = datagrid.el.querySelector<HTMLElement>(
+						`.item-detail-${datagrid.name}-id-${toggleId}`
+					);
+
+					const gridRow = el.closest('tr');
+
+					if (contentRow) {
+						// const div = contentRow.querySelector<HTMLDivElement>("td > div");
+						// if (div && !el.classList.contains("datagrid--slide-toggle")) {
+						// 	attachSlideToggle(div, el);
+						// } TODO: fix
+						contentRow.classList.add("datagrid--content-row")
+						contentRow.classList.toggle("is-active");
+
+					}
+
+					datagrid.ajax.addEventListener("before", (e) => {
+						if (e.detail.params.url.includes(`do=${datagrid.name}-getItemDetail`) && e.detail.params.url.includes(`grid-id=${toggleId}`)) {
+							e.stopPropagation();
+							e.preventDefault();
+						}
+					})
+				})
+			});
+
+		datagrid.ajax.addEventListener("success", ({detail: {payload}}) => {
+			if (payload._datagrid_redraw_item_id && payload._datagrid_redraw_item_class) {
+				datagrid.el.querySelector<HTMLTableRowElement>(
+					`tr[data-id='${payload._datagrid_redraw_item_id}']`
+				)?.setAttribute("class", payload._datagrid_redraw_item_class)
+			}
+		})
+
+		return true;
+	}
+}

package/assets/plugins/features/treeView.ts

@@ -0,0 +1,44 @@
+import { DatagridPlugin } from "../../types";
+import { Datagrid } from "../..";
+
+export class TreeViewPlugin implements DatagridPlugin {
+	onDatagridInit(datagrid: Datagrid): boolean {
+		datagrid.ajax.addEventListener("before", (e) => {
+		})
+
+		datagrid.ajax.addEventListener("success", ({detail: {payload}}) => {
+			if (payload._datagrid_tree) {
+				const id = payload._datagrid_tree;
+				const rowBlock = document.querySelector(`.datagrid-tree-item[data-id="${id}"]`);
+				const childrenBlock = document.querySelector(`.datagrid-tree-item[data-id="${id}"] .datagrid-tree-item-children`);
+				if (childrenBlock) {
+					if (childrenBlock.classList.contains('showed')) {
+						childrenBlock.innerHTML = '';
+						childrenBlock.classList.remove('showed');
+						rowBlock.querySelector(`a.chevron`).style.transform = "rotate(0deg)";
+						return;
+					}
+
+					childrenBlock.classList.add('showed');
+					rowBlock.querySelector(`a.chevron`).style.transform = "rotate(90deg)";
+					const snippets = payload.snippets;
+					for (const snippetName in snippets) {
+						const snippet = snippets[snippetName];
+						const snippetDocEl = new DOMParser().parseFromString(snippet, "text/html")
+							.querySelector("[data-id]");
+
+						const id = snippetDocEl?.getAttribute("data-id") ?? '';
+						const hasChildren = snippetDocEl?.hasAttribute("data-has-children") ?? false;
+
+						const template = `\n<div class="datagrid-tree-item" class='${hasChildren ? 'has-children' : ''}' id="${snippetName}" data-id="${id}">${snippet}</div>`;
+
+						childrenBlock.innerHTML = template;
+					}
+					//children_block.addClass('loaded');
+					//children_block.slideToggle('fast');
+				}
+			}
+		})
+		return true;
+	}
+}

package/assets/plugins/index.ts

@@ -0,0 +1,13 @@
+export * from "./integrations/datepicker";
+export * from "./integrations/happy";
+export * from "./integrations/nette-forms"
+export * from "./integrations/selectpicker";
+export * from "./integrations/sortable";
+
+export * from "./features/autosubmit";
+export * from "./features/checkboxes";
+export * from "./features/confirm";
+export * from "./features/editable";
+export * from "./features/inline";
+export * from "./features/item-detail";
+export * from "./features/treeView";

package/assets/plugins/integrations/datepicker.ts

@@ -0,0 +1,25 @@
+import { Datagrid } from "../..";
+import { DatagridPlugin, Datepicker } from "../../types";
+
+export class DatepickerPlugin implements DatagridPlugin {
+	constructor(private datepicker: Datepicker) {
+	}
+
+	onDatagridInit(datagrid: Datagrid): boolean {
+		datagrid.ajax.addEventListener('complete', (event) => {
+			this.initDatepicker(datagrid);
+		});
+
+		this.initDatepicker(datagrid);
+
+		return true;
+	}
+
+	private initDatepicker(datagrid: Datagrid): void {
+		const elements = datagrid.el.querySelectorAll<HTMLInputElement>("input[data-provide='datepicker']");
+
+		if (elements.length >= 1) {
+			this.datepicker.initDatepickers(Array.from(elements), datagrid);
+		}
+	}
+}

package/assets/plugins/integrations/happy.ts

@@ -0,0 +1,19 @@
+import { Datagrid } from "../..";
+import { DatagridPlugin } from "../../types";
+import { window } from "../../utils";
+import type { Happy } from "../../integrations";
+
+export class HappyPlugin implements DatagridPlugin {
+	constructor(private happy?: Happy) {
+	}
+
+	onDatagridInit(datagrid: Datagrid): boolean {
+		const happy = this.happy ?? window().happy ?? null;
+
+		if (happy) {
+			happy.init();
+		}
+
+		return true;
+	}
+}

package/assets/plugins/integrations/nette-forms.ts

@@ -0,0 +1,18 @@
+import { DatagridPlugin, Nette } from "../../types";
+import { Datagrid } from "../..";
+import { window } from "../../utils";
+
+export class NetteFormsPlugin implements DatagridPlugin {
+	constructor(private nette?: Nette) {
+	}
+
+	onDatagridInit(datagrid: Datagrid): boolean {
+		const nette = this.nette ?? window().Nette ?? null;
+
+		if (nette) {
+			datagrid.el.querySelectorAll<HTMLFormElement>("form").forEach(form => nette.initForm(form));
+		}
+
+		return true;
+	}
+}

package/assets/plugins/integrations/selectpicker.ts

@@ -0,0 +1,25 @@
+import { DatagridPlugin, Selectpicker } from "../../types";
+import { Datagrid } from "../..";
+
+export class SelectpickerPlugin implements DatagridPlugin {
+	constructor(private selectpicker: Selectpicker) {
+	}
+
+	onDatagridInit(datagrid: Datagrid): boolean {
+		datagrid.ajax.addEventListener('complete', (event) => {
+			this.initSelectpicker(datagrid);
+		});
+
+		this.initSelectpicker(datagrid);
+
+		return true;
+	}
+
+	private initSelectpicker(datagrid: Datagrid): void {
+		const elements = datagrid.el.querySelectorAll<HTMLElement>("select.selectpicker");
+
+		if (elements.length >= 1) {
+			this.selectpicker.initSelectpickers(Array.from(elements), datagrid);
+		}
+	}
+}

package/assets/plugins/integrations/sortable.ts

@@ -0,0 +1,61 @@
+import { Datagrid } from "../../datagrid";
+import { DatagridPlugin, Sortable } from "../../types";
+
+export class SortablePlugin implements DatagridPlugin {
+	constructor(private sortable: Sortable) {
+	}
+
+	onDatagridInit(datagrid: Datagrid): boolean {
+		datagrid.ajax.addEventListener('before', (event) => {
+			// TODO old ln 694... wtf?
+		})
+
+		this.sortable.initSortable(datagrid);
+
+		datagrid.ajax.addEventListener('success', ({detail: {payload}}) => {
+			if (payload._datagrid_sort) {
+				for (const key in payload._datagrid_sort) {
+					const href = payload._datagrid_sort[key];
+					const element = datagrid.el.querySelector(`#datagrid-sort-${key}`);
+
+					if (element) {
+						// TODO: Only for BC support, to be removed
+						element.setAttribute("href", href);
+
+						element.setAttribute("data-href", href);
+					}
+				}
+				this.sortable.initSortable(datagrid);
+			}
+
+			if (payload._datagrid_tree) {
+				const childrenContainer = datagrid.el.querySelector<HTMLElement>(
+					`.datagrid-tree-item[data-id='${payload._datagrid_tree}'] .datagrid-tree-item-children`
+				);
+				if (childrenContainer && payload.snippets) {
+					childrenContainer.classList.add("loaded");
+					for (const key in payload.snippets) {
+						const snippet = payload.snippets[key];
+
+						const doc = new DOMParser().parseFromString(snippet, 'text/html');
+						const element = doc.firstElementChild;
+						if (element) {
+							const treeItem = document.createElement("div");
+							treeItem.id = key;
+							treeItem.classList.add("datagrid-tree-item")
+							treeItem.setAttribute("data-id", key);
+							if (element.hasAttribute("has-children")) {
+								treeItem.classList.add("has-children");
+							}
+
+							childrenContainer.append(treeItem);
+							// attachSlideToggle(childrenContainer);
+						}
+					}
+				}
+				this.sortable.initSortableTree(datagrid);
+			}
+		})
+		return true;
+	}
+}