From 4b9141f66d08db5cd473519ccb5aa94e54e3f431 Mon Sep 17 00:00:00 2001 From: Ahmed Ejaz Date: Thu, 20 Jun 2024 12:44:55 +0500 Subject: [PATCH] 11987 - add products table mutation listner --- .../controllers/bulk_form_controller.js | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/app/webpacker/controllers/bulk_form_controller.js b/app/webpacker/controllers/bulk_form_controller.js index bd1ab3b854..5558b6d52a 100644 --- a/app/webpacker/controllers/bulk_form_controller.js +++ b/app/webpacker/controllers/bulk_form_controller.js @@ -33,12 +33,14 @@ export default class BulkFormController extends Controller { this.form.addEventListener("submit", this.#registerSubmit.bind(this)); window.addEventListener("beforeunload", this.preventLeavingChangedForm.bind(this)); + this.#observeProductsTableRows(); } disconnect() { // Make sure to clean up anything that happened outside this.#disableOtherElements(false); window.removeEventListener("beforeunload", this.preventLeavingChangedForm.bind(this)); + this.productsTableObserver.disconnect(); } // Register any new elements (may be called by another controller after dynamically adding fields) @@ -161,4 +163,34 @@ export default class BulkFormController extends Controller { return element.defaultValue !== undefined && element.value != element.defaultValue; } } + + #removeAnimationClasses(productRowElement) { + productRowElement.classList.remove('slide-in'); + productRowElement.removeEventListener('animationend', this.#removeAnimationClasses.bind(this, productRowElement)); + } + + #observeProductsTableRows() { + this.productsTableObserver = new MutationObserver((mutationList, _observer) => { + const mutationRecord = mutationList[0]; + + if(mutationRecord) { + // Right now we are only using it for product clone, so it's always first + const productRowElement = mutationRecord.addedNodes[0]; + + if (productRowElement) { + productRowElement.addEventListener('animationend', this.#removeAnimationClasses.bind(this, productRowElement)); + // This is equivalent to form.elements. + const productRowFormElements = productRowElement.querySelectorAll('input, select, textarea, button'); + this.#registerElements(productRowFormElements); + this.toggleFormChanged(); + } + } + }); + + const productsTable = document.querySelector('.products'); + // Above mutation function will trigger, + // whenever +products+ table rows (first level children) are mutated i.e. added or removed + // right now we are using this for product clone + this.productsTableObserver.observe(productsTable, { childList: true }); + } }