@contributte/datagrid 7.0.0 → 7.1.0

package/README.md

@@ -47,7 +47,7 @@ For details on how to use this package, check out our [documentation](.docs).
 
 | State  | Version   | Branch   | Nette  | PHP     |
 |--------|-----------|----------|--------|---------|
-| dev    | `^7.1.x`  | `master` | `3.2+` | `>=8.3` |
+| dev    | `^7.1.x`  | `master` | `3.2+` | `>=8.2` |
 | stable | `^7.0.0`  | `master` | `3.2+` | `>=8.1` |
 | stable | `^6.10.0` | `master` | `3.0+` | `>=7.2` |
 

package/assets/ajax/naja.ts

@@ -15,8 +15,7 @@ import type {
 	SuccessEventDetail as BaseSuccessEventDetail,
 } from "../types";
 import { Datagrid } from "../datagrid";
-import { BeforeEvent, ErrorEvent, Payload as NajaPayload, SuccessEvent } from "naja/dist/Naja";
-import { InteractionEvent } from "naja/dist/core/UIHandler";
+import { BeforeEvent, ErrorEvent, Payload as NajaPayload, SuccessEvent, InteractionEvent } from "naja";
 
 export interface BaseRequestParams extends AjaxBaseRequestParams, Request {
 	url: string;

package/assets/css/datagrid-full.css

@@ -1,7 +1,5 @@
-/*
- * Use bootstrap and fontawesome from the CDN.
- */
 @import 'vanillajs-datepicker/dist/css/datepicker-bs5.css';
 @import "tom-select/dist/css/tom-select.css";
-@import './happy.css';
+@import "tom-select/dist/css/tom-select.bootstrap5.css";
 @import './datagrid.css';
+@import './tom-select.css';

package/assets/css/datagrid.css

@@ -272,10 +272,6 @@
 	vertical-align: middle
 }
 
-[data-datagrid-name] table th.col-checkbox .happy-checkbox, [data-datagrid-name] table td.col-checkbox .happy-checkbox {
-	margin-right: 0
-}
-
 [data-datagrid-name] table th.col-checkbox.col-checkbox-first, [data-datagrid-name] table td.col-checkbox.col-checkbox-first {
 	border-top-color: transparent
 }
@@ -567,45 +563,41 @@
 	user-select: none
 }
 
-[data-datagrid-name] .col-checkbox .happy-checkbox {
-	margin-top: 2px
-}
-
 [data-datagrid-name] .datagrid-column-status-option-icon {
 	float: right
 }
 
 @media (min-width: 768px) {
-	[data-datagrid-name] .ublaboo-datagrid-th-form-inline .form-group {
+	[data-datagrid-name] .datagrid-th-form-inline .form-group {
 		display: inline-block;
 		margin-bottom: 0;
 		vertical-align: middle
 	}
 
-	[data-datagrid-name] .ublaboo-datagrid-th-form-inline .form-control {
+	[data-datagrid-name] .datagrid-th-form-inline .form-control {
 		display: inline-block;
 		width: auto;
 		vertical-align: middle
 	}
 
-	[data-datagrid-name] .ublaboo-datagrid-th-form-inline .form-control[hidden] {
+	[data-datagrid-name] .datagrid-th-form-inline .form-control[hidden] {
 		display: none;
 	}
 
-	.ublaboo-datagrid-th-form-inline .form-control[hidden] {
+	.datagrid-th-form-inline .form-control[hidden] {
 		display: none;
 	}
 
-	[data-datagrid-name] .ublaboo-datagrid-th-form-inline .input-group {
+	[data-datagrid-name] .datagrid-th-form-inline .input-group {
 		display: inline-table;
 		vertical-align: middle
 	}
 
-	[data-datagrid-name] .ublaboo-datagrid-th-form-inline .input-group .form-control {
+	[data-datagrid-name] .datagrid-th-form-inline .input-group .form-control {
 		width: auto
 	}
 
-	[data-datagrid-name] .ublaboo-datagrid-th-form-inline .input-group > .form-control {
+	[data-datagrid-name] .datagrid-th-form-inline .input-group > .form-control {
 		width: 100%
 	}
 
@@ -613,23 +605,23 @@
 		height: calc(1.5em + 0.5rem + 2px);
 	}
 
-	[data-datagrid-name] .ublaboo-datagrid-th-form-inline .control-label {
+	[data-datagrid-name] .datagrid-th-form-inline .control-label {
 		margin-bottom: 0;
 		vertical-align: middle
 	}
 
-	[data-datagrid-name] .ublaboo-datagrid-th-form-inline .radio, [data-datagrid-name] .ublaboo-datagrid-th-form-inline .checkbox {
+	[data-datagrid-name] .datagrid-th-form-inline .radio, [data-datagrid-name] .datagrid-th-form-inline .checkbox {
 		display: inline-block;
 		margin-top: 0;
 		margin-bottom: 0;
 		vertical-align: middle
 	}
 
-	[data-datagrid-name] .ublaboo-datagrid-th-form-inline .radio label, [data-datagrid-name] .ublaboo-datagrid-th-form-inline .checkbox label {
+	[data-datagrid-name] .datagrid-th-form-inline .radio label, [data-datagrid-name] .datagrid-th-form-inline .checkbox label {
 		padding-left: 0
 	}
 
-	[data-datagrid-name] .ublaboo-datagrid-th-form-inline .radio input[type="radio"], [data-datagrid-name] .ublaboo-datagrid-th-form-inline .checkbox input[type="checkbox"] {
+	[data-datagrid-name] .datagrid-th-form-inline .radio input[type="radio"], [data-datagrid-name] .datagrid-th-form-inline .checkbox input[type="checkbox"] {
 		position: relative;
 		margin-left: 0
 	}

package/assets/css/tom-select.css

@@ -0,0 +1,3 @@
+.datagrid .form-select-sm .ts-control {
+	padding: 0.25rem 0.5rem !important;
+}

package/assets/datagrid-full.ts

@@ -6,8 +6,7 @@ import {
 	ConfirmPlugin,
 	createDatagrids,
 	DatepickerPlugin,
-	Happy,
-	HappyPlugin,
+	EditablePlugin,
 	InlinePlugin,
 	ItemDetailPlugin,
 	NetteFormsPlugin,
@@ -39,10 +38,10 @@ document.addEventListener("DOMContentLoaded", () => {
 				new AutosubmitPlugin(),
 				new CheckboxPlugin(),
 				new ConfirmPlugin(),
+				new EditablePlugin(),
 				new InlinePlugin(),
 				new ItemDetailPlugin(),
 				new NetteFormsPlugin(netteForms),
-				new HappyPlugin(new Happy()),
 				new SortablePlugin(new SortableJS()),
 				new DatepickerPlugin(new VanillaDatepicker({ buttonClass: 'btn' })),
 				new SelectpickerPlugin(new TomSelect(Select)),

package/assets/datagrid.ts

@@ -5,7 +5,7 @@ import {
 	AutosubmitPlugin,
 	CheckboxPlugin,
 	ConfirmPlugin,
-	HappyPlugin,
+	EditablePlugin,
 	InlinePlugin,
 	NetteFormsPlugin,
 	SelectpickerPlugin,
@@ -13,7 +13,7 @@ import {
 } from "./plugins";
 import { SortableJS } from "./integrations";
 import { DatepickerPlugin } from "./plugins";
-import { Happy, TomSelect, VanillaDatepicker } from "./integrations";
+import { TomSelect, VanillaDatepicker } from "./integrations";
 
 export class Datagrid extends EventTarget {
 	private static readonly defaultOptions: DatagridOptions = {
@@ -215,9 +215,9 @@ export const createFullDatagrids = (ajax: Ajax, _options: Partial<DatagridsOptio
 				new AutosubmitPlugin(),
 				new CheckboxPlugin(),
 				new ConfirmPlugin(),
+				new EditablePlugin(),
 				new InlinePlugin(),
 				new NetteFormsPlugin(),
-				new HappyPlugin(new Happy()),
 				new SortablePlugin(new SortableJS()),
 				new DatepickerPlugin(new VanillaDatepicker()),
 				new SelectpickerPlugin(new TomSelect(Select))

package/assets/integrations/index.ts

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

package/assets/integrations/tom-select.ts

@@ -14,17 +14,16 @@ export class TomSelect implements Selectpicker {
 		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;
+			elements.forEach(element => {
+				if(element.hasAttribute('data-Tom-Initialised')){
+					return;
 				}
+				element.setAttribute('data-Tom-Initialised','true');
 
 				new Select(
 					element as TomInput,
-					typeof this.opts === "function" ? this.opts(element) : this.opts
-				)
-			}
+					typeof this.opts === "function" ? this.opts(element) : this.opts)
+			})
 		}
 	}
 }

package/assets/integrations/types/tom-select.d.ts

@@ -0,0 +1,7 @@
+declare module 'tom-select/dist/types/types' {
+	export type RecursivePartial<T> = {
+		[P in keyof T]?: RecursivePartial<T[P]>;
+	};
+	export type TomInput = HTMLInputElement | HTMLSelectElement;
+	export interface TomSettings { /* minimal needed interface */ }
+}

package/assets/plugins/features/autosubmit.ts

@@ -30,10 +30,8 @@ export class AutosubmitPlugin implements DatagridPlugin {
 					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);
 				});
 			});

package/assets/plugins/features/checkboxes.ts

@@ -5,6 +5,14 @@ export const CheckboxAttribute = "data-check";
 
 export class CheckboxPlugin implements DatagridPlugin {
 	onDatagridInit(datagrid: Datagrid): boolean {
+		datagrid.ajax.addEventListener('complete', (event) => {
+			this.init(datagrid);
+		});
+
+		return this.init(datagrid);
+	}
+
+	private init(datagrid: Datagrid): boolean {
 		let lastCheckbox = null;
 
 		datagrid.el.addEventListener("click", e => {
@@ -36,15 +44,18 @@ export class CheckboxPlugin implements DatagridPlugin {
 			}
 		});
 
-		let checkboxes = datagrid.el.querySelectorAll<HTMLInputElement>(`input[data-check='${datagrid.name}']`);
+		const checkboxes = Array.from(datagrid.el.querySelectorAll<HTMLInputElement>(`input[data-check='${datagrid.name}']:not([data-check-all])`));
+		const selectAll = datagrid.el.querySelector<HTMLInputElement>(`input[data-check='${datagrid.name}'][data-check-all]`);
+
 		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 => {
+		[...checkboxes, selectAll].forEach(checkEl => {
+			if (!checkEl) return;
+
 			checkEl.addEventListener("change", () => {
 				// Select all
 				const isSelectAll = checkEl.hasAttribute("data-check-all");
@@ -53,7 +64,6 @@ export class CheckboxPlugin implements DatagridPlugin {
 
 					checkboxes.forEach(checkbox => (checkbox.checked = checkEl.checked));
 
-					// todo: refactor not to repeat this code twice
 					actionButtons.forEach(button => (button.disabled = !checkEl.checked));
 
 					if (select) {
@@ -61,18 +71,17 @@ export class CheckboxPlugin implements DatagridPlugin {
 					}
 
 					if (counter) {
-						const total = Array.from(checkboxes).filter(c => !c.hasAttribute("data-check-all")).length;
+						const total = checkboxes.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);
+						selectAll.checked = checkboxes.every(c => c.checked);
 					}
 				}
 
-				const checkedBoxes = Array.from(checkboxes).filter(checkbox => checkbox.checked && !checkEl.hasAttribute("data-check-all"));
+				const checkedBoxes = checkboxes.filter(c => c.checked);
 				const hasChecked = checkedBoxes.length >= 1;
 
 				actionButtons.forEach(button => (button.disabled = !hasChecked));

package/assets/plugins/features/editable.ts

@@ -14,105 +14,119 @@ export const EditableAttrsAttribute = "datagrid-editable-attrs";
 
 export class EditablePlugin implements DatagridPlugin {
 	onDatagridInit(datagrid: Datagrid): boolean {
+		datagrid.ajax.addEventListener('success', (event) => {
+			this.initEditableCells(datagrid);
+		});
+
+		this.initEditableCells(datagrid);
+
+		return true;
+	}
+
+	initEditableCells(datagrid: Datagrid) {
+
 		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.addEventListener("click", e => {
+
+				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")!;
+							input.setAttribute("value", valueToEdit.trim());
+					}
+
+					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.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.innerHTML = value;
+								cell.classList.add("edited");
+							} catch {
+								cell.innerHTML = originalValue;
+								cell.classList.add("edited-error");
 							}
-							cell.classList.add("edited");
-						} catch {
+						} else {
 							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);
-							}
+						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 (isEsc(e as KeyboardEvent)) {
+									e.stopPropagation();
+									e.preventDefault();
+									cell.classList.remove("editing");
+									cell.innerHTML = originalValue;
+								}
+							});
+
+							if (el instanceof HTMLSelectElement) {
+								el.addEventListener("change", () => submitCell(el));
 							}
 						});
-
-						if (el instanceof HTMLSelectElement) {
-							el.addEventListener("change", () => submitCell(el));
-						}
-					});
-			}
+				}
+			});
 		});
-
-		return true;
 	}
 }

package/assets/plugins/features/treeView.ts

@@ -15,12 +15,22 @@ export class TreeViewPlugin implements DatagridPlugin {
 					if (childrenBlock.classList.contains('showed')) {
 						childrenBlock.innerHTML = '';
 						childrenBlock.classList.remove('showed');
-						rowBlock.querySelector(`a.chevron`).style.transform = "rotate(0deg)";
+						if (rowBlock) {
+							const chevron = rowBlock.querySelector<HTMLAnchorElement>(`a.chevron`);
+							if (chevron) {
+								chevron.style.transform = "rotate(0deg)";
+							}
+						}
 						return;
 					}
 
 					childrenBlock.classList.add('showed');
-					rowBlock.querySelector(`a.chevron`).style.transform = "rotate(90deg)";
+					if (rowBlock) {
+						const chevron = rowBlock.querySelector<HTMLAnchorElement>(`a.chevron`);
+						if (chevron) {
+							chevron.style.transform = "rotate(90deg)";
+						}
+					}
 					const snippets = payload.snippets;
 					for (const snippetName in snippets) {
 						const snippet = snippets[snippetName];

package/assets/plugins/index.ts

@@ -1,5 +1,4 @@
 export * from "./integrations/datepicker";
-export * from "./integrations/happy";
 export * from "./integrations/nette-forms"
 export * from "./integrations/selectpicker";
 export * from "./integrations/sortable";

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

@@ -7,12 +7,20 @@ export class NetteFormsPlugin implements DatagridPlugin {
 	}
 
 	onDatagridInit(datagrid: Datagrid): boolean {
+		datagrid.ajax.addEventListener('complete', (event) => {
+			this.initNetteForms(datagrid);
+		});
+
+		this.initNetteForms(datagrid);
+
+		return true;
+	}
+
+	private initNetteForms(datagrid: Datagrid): void {
 		const nette = this.nette ?? window().Nette ?? null;
 
 		if (nette) {
 			datagrid.el.querySelectorAll<HTMLFormElement>("form").forEach(form => nette.initForm(form));
 		}
-
-		return true;
 	}
 }

package/assets/types/index.d.ts

@@ -1,4 +1,3 @@
-import { Happy } from "../integrations";
 import TomSelect from "tom-select";
 
 export interface Nette {
@@ -13,7 +12,6 @@ export interface ExtendedWindow extends Window {
 	jQuery?: any;
 	Nette?: Nette;
 	TomSelect?: Constructor<TomSelect>;
-	happy?: Happy;
 }
 
 // https://github.com/naja-js/naja/blob/384d298a9199bf778985d1bcf5747fe8de305b22/src/utils.ts