Assets: re-init autosubmit

Author: f3l1x

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;
 	}
 

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;
-	};
+	}
 }
+
+

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>;
 }