From 92e44349a43827d9e0eeeb0cb822da38602c2a93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milan=20Felix=20=C5=A0ulc?= <rkfelix@gmail.com>
Date: Fri, 3 May 2024 23:01:13 +0200
Subject: [PATCH] Assets: re-init autosubmit

---
 assets/ajax/naja.ts                   |  8 +++++++
 assets/plugins/features/autosubmit.ts | 33 +++++++++++++++++++--------
 assets/types/ajax.d.ts                |  7 ++++++
 3 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/assets/ajax/naja.ts b/assets/ajax/naja.ts
index fbe0658f..859fe5ed 100644
--- a/assets/ajax/naja.ts
+++ b/assets/ajax/naja.ts
@@ -100,6 +100,14 @@ export class NajaAjax<C extends Naja = Naja, G extends Datagrid = Datagrid> exte
 			});
 		})
 
+		this.client.addEventListener('complete', (e) => {
+			return this.dispatch('complete', {
+				...e.detail,
+				params: e.detail.request,
+				response: e.detail.response,
+			});
+		})
+
 		return this;
 	}
 
diff --git a/assets/plugins/features/autosubmit.ts b/assets/plugins/features/autosubmit.ts
index b2ceca27..2a9dfacd 100644
--- a/assets/plugins/features/autosubmit.ts
+++ b/assets/plugins/features/autosubmit.ts
@@ -10,25 +10,38 @@ export const AutosubmitChangeAttribute = "data-autosubmit-change";
 
 export class AutosubmitPlugin implements DatagridPlugin {
 	onDatagridInit(datagrid: Datagrid): boolean {
-		// Auto-submit perPage
-		datagrid.el
-			.querySelectorAll<HTMLSelectElement>(`select[${AutosubmitPerPageAttribute}]`)
+		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);
 				});
 			});
+	}
 
-		datagrid.el
-			.querySelectorAll<HTMLSelectElement | HTMLInputElement>(`[${AutosubmitAttribute}]`)
+	// Auto-submit change
+	initChange(datagrid: Datagrid) {
+		datagrid.el.querySelectorAll<HTMLSelectElement | HTMLInputElement>(`[${AutosubmitAttribute}]`)
 			.forEach(submitEl => {
 				const form = submitEl.closest("form");
 				if (!form) return;
@@ -63,7 +76,7 @@ export class AutosubmitPlugin implements DatagridPlugin {
 					);
 				}
 			});
-
-		return true;
-	};
+	}
 }
+
+
diff --git a/assets/types/ajax.d.ts b/assets/types/ajax.d.ts
index c4ae8963..452f4d77 100644
--- a/assets/types/ajax.d.ts
+++ b/assets/types/ajax.d.ts
@@ -60,6 +60,12 @@ export interface SuccessEventDetail<P = DatagridPayload, R extends Response = Re
 	response: Response;
 }
 
+export interface CompleteEventDetail<P = DatagridPayload, R extends Response = Response> {
+	params: BaseRequestParams;
+	payload: Payload<P>;
+	response: Response;
+}
+
 export interface ErrorEventDetail<E extends Error = Error, R extends Response = Response> {
 	params: BaseRequestParams;
 	response?: Response;
@@ -71,6 +77,7 @@ export interface AjaxEventMap extends EventMap {
 	interact: CustomEvent<InteractEventDetail>;
 	snippetUpdate: CustomEvent<InteractEventDetail>;
 	success: CustomEvent<SuccessEventDetail>;
+	complete: CustomEvent<CompleteEventDetail>;
 	error: CustomEvent<ErrorEventDetail>;
 }