@contributte/datagrid 0.0.0-20251103-e63c020 → 0.0.0-20251104-3ac07f3

package/assets/plugins/features/confirm.ts

@@ -1,32 +1,145 @@
+/**
+ * Datagrid plugin that asks for confirmation before deleting.
+ * If there is a modal in the DOM, use it, otherwise use a native confirm window.
+ */
 import { Datagrid } from "../../datagrid";
 import { DatagridPlugin } from "../../types";
 
+interface NajaInteractDetail {
+	method: string;
+	url: string;
+	payload: any;
+	options: Record<string, any>;
+}
+
 export const ConfirmAttribute = "data-datagrid-confirm";
 
 export class ConfirmPlugin implements DatagridPlugin {
+	private datagrid!: Datagrid;
+
+	private modalId = 'datagridConfirmModal';
+	private messageBoxId = 'datagridConfirmMessage';
+	private confirmButtonId = 'datagridConfirmOk';
+
+	/**
+	 * Initializes the plugin and registers event handlers.
+	 * @param datagrid The datagrid instance that the plugin is connected to.
+	 * @returns true if initialization was successful.
+	 */
+
 	onDatagridInit(datagrid: Datagrid): boolean {
-		datagrid.el
-			.querySelectorAll<HTMLElement>(`[${ConfirmAttribute}]:not(.ajax)`)
-			.forEach(confirmEl =>
-				confirmEl.addEventListener("click", e => this.confirmEventHandler.call(datagrid, e.target as HTMLElement, e))
-			);
+		this.datagrid = datagrid;
+
+		const confirmElements = datagrid.el.querySelectorAll<HTMLElement>(`[${ConfirmAttribute}]:not(.ajax)`);
+		confirmElements.forEach(el => el.addEventListener("click", e => this.handleClick(el, e)));
 
 		datagrid.ajax.addEventListener("interact", e => {
-			if (datagrid.el.contains(e.detail.element)) {
-				this.confirmEventHandler.call(datagrid, e.detail.element, e);
+			const target = e.detail.element;
+			if (datagrid.el.contains(target)) {
+				this.handleClick(target, e);
 			}
 		});
 
 		return true;
 	}
 
-	confirmEventHandler(this: Datagrid, el: HTMLElement, e: Event) {
-		const message = el.closest('a')?.getAttribute(ConfirmAttribute)!;
+	private handleClick(el: HTMLElement, e: Event): void {
+		const message = this.getConfirmationMessage(el);
 		if (!message) return;
 
-		if (!window.confirm.bind(window)(message)) {
-			e.stopPropagation();
-			e.preventDefault();
+		e.preventDefault();
+		e.stopPropagation();
+
+		const modal = this.getElement(this.modalId);
+		if (modal) {
+			this.showModalConfirm(modal, message, el, e);
+		} else {
+			if (window.confirm(message)) {
+				this.executeConfirmedAction(el, e);
+			}
+		}
+	}
+
+	private getConfirmationMessage(el: HTMLElement): string | null {
+		return el.getAttribute(ConfirmAttribute) ?? el.closest('a')?.getAttribute(ConfirmAttribute) ?? null;
+	}
+
+	private showModalConfirm(modal: HTMLElement, message: string, el: HTMLElement, e: Event): void {
+		if (typeof bootstrap === 'undefined') {
+			if (window.confirm(message)) {
+				this.executeConfirmedAction(el, e);
+			}
+			return;
+		}
+
+		const messageBox = this.getElement(this.messageBoxId);
+		const confirmButton = this.getElement(this.confirmButtonId);
+
+		if (!messageBox || !confirmButton) {
+			if (window.confirm(message)) {
+				this.executeConfirmedAction(el, e);
+			}
+			return;
+		}
+
+		messageBox.textContent = message;
+
+		const newButton = confirmButton.cloneNode(true) as HTMLElement;
+		confirmButton.parentNode!.replaceChild(newButton, confirmButton);
+
+		newButton.addEventListener("click", () => {
+			bootstrap.Modal.getInstance(modal)?.hide();
+			this.executeConfirmedAction(el, e);
+		}, { once: true });
+
+		const modalInstance = bootstrap.Modal.getInstance(modal) || new bootstrap.Modal(modal);
+		modalInstance.show();
+	}
+
+	private executeConfirmedAction(el: HTMLElement, e?: Event): void {
+		//const detail: NajaInteractDetail | null = (e instanceof CustomEvent ? (e.detail as NajaInteractDetail) : null);
+		const detail: NajaInteractDetail | null = (
+			e instanceof CustomEvent &&
+			e.detail &&
+			typeof e.detail === 'object'
+		) ? e.detail as NajaInteractDetail : null;
+		const isAjax = el.classList.contains('ajax');
+
+		if (el instanceof HTMLAnchorElement && el.href && isAjax) {
+			if (typeof naja === 'undefined') {
+				return;
+			}
+
+			if (detail && typeof detail.method === 'string' && typeof detail.url === 'string') {
+				const options = { ...detail.options, history: false };
+				naja.makeRequest(detail.method, detail.url, detail.payload ?? null, options);
+			} else {
+				const method = el.getAttribute('data-naja-method') ?? 'GET';
+				naja.makeRequest(method, el.href, null, { history: false });
+			}
+			return;
+		}
+
+		this.triggerNativeInteraction(el);
+	}
+
+	private getElement(id: string): HTMLElement | null {
+		return document.getElementById(id);
+	}
+
+	private triggerNativeInteraction(el: HTMLElement): void {
+		const confirmValue = el.getAttribute(ConfirmAttribute);
+
+		if (confirmValue !== null) {
+			el.removeAttribute(ConfirmAttribute);
+		}
+
+		try {
+			el.click();
+		} finally {
+			if (confirmValue !== null) {
+				el.setAttribute(ConfirmAttribute, confirmValue);
+			}
 		}
 	}
 }

package/assets/plugins/features/editable.ts

@@ -110,7 +110,10 @@ export class EditablePlugin implements DatagridPlugin {
 							"input, textarea, select"
 						)
 						.forEach(el => {
-							el.addEventListener("blur", () => submitCell(el));
+							if (!(el instanceof HTMLSelectElement)) {
+								el.addEventListener("blur", () => submitCell(el));
+							}
+							
 							el.addEventListener("keydown", e => {
 								if (isEnter(e as KeyboardEvent)) {
 									e.stopPropagation();