From d44ad541ebf26a3d728bdeafb3d2425a727e4cd5 Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Wed, 26 Aug 2020 22:35:36 +1000
Subject: [PATCH] Add "callback" functionality for modal forms when a given
 field is changed

- Attach callback function
- Add a function to retrieve a field by name
---
 .../static/script/inventree/modals.js         | 45 +++++++++++++++++++
 InvenTree/stock/templates/stock/location.html |  8 ++++
 2 files changed, 53 insertions(+)

diff --git a/InvenTree/InvenTree/static/script/inventree/modals.js b/InvenTree/InvenTree/static/script/inventree/modals.js
index 5b76203927..83fdbd1bb1 100644
--- a/InvenTree/InvenTree/static/script/inventree/modals.js
+++ b/InvenTree/InvenTree/static/script/inventree/modals.js
@@ -397,6 +397,13 @@ function injectModalForm(modal, form_html) {
 }
 
 
+function getFieldByName(modal, name) {
+    /* Find the field (with the given name) within the modal */
+
+    return $(modal).find(`#id_${name}`);
+}
+
+
 function insertNewItemButton(modal, options) {
     /* Insert a button into a modal form, after a field label.
      * Looks for a <label> tag inside the form with the attribute "for='id_<field>'"
@@ -476,6 +483,39 @@ function attachSecondaries(modal, secondaries) {
 }
 
 
+function attachFieldCallback(modal, callback) {
+    /* Attach a 'callback' function to a given field in the modal form.
+     * When the value of that field is changed, the callback function is performed.
+     * 
+     * options:
+     * - field: The name of the field to attach to
+     * - action: A function to perform
+     */
+
+     // Find the field input in the form
+     var field = getFieldByName(modal, callback.field);
+
+    field.change(function() {
+
+        if (callback.action) {
+            // Run the callback function with the new value of the field!
+            callback.action(field.val(), field);
+        } else {
+            console.log(`Value changed for field ${callback.field} - ${field.val()}`);
+        }
+    });
+}
+
+
+function attachCallbacks(modal, callbacks) {
+    /* Attach a provided list of callback functions */
+
+    for (var i = 0; i < callbacks.length; i++) {
+        attachFieldCallback(modal, callbacks[i]);
+    }
+}
+
+
 function handleModalForm(url, options) {
     /* Update a modal form after data are received from the server.
      * Manages POST requests until the form is successfully submitted.
@@ -575,6 +615,7 @@ function launchModalForm(url, options = {}) {
      * no_post - If true, only display form data, hide submit button, and disallow POST
      * after_render - Callback function to run after form is rendered
      * secondary - List of secondary modals to attach
+     * callback - List of callback functions to attach to inputs
      */
 
     var modal = options.modal || '#modal-form';
@@ -615,6 +656,10 @@ function launchModalForm(url, options = {}) {
                     attachSecondaries(modal, options.secondary);
                 }
 
+                if (options.callback) {
+                    attachCallbacks(modal, options.callback);
+                }
+
                 if (options.no_post) {
                     modalShowSubmitButton(modal, false);
                 } else {
diff --git a/InvenTree/stock/templates/stock/location.html b/InvenTree/stock/templates/stock/location.html
index 7e6a4fab42..d55c8bd397 100644
--- a/InvenTree/stock/templates/stock/location.html
+++ b/InvenTree/stock/templates/stock/location.html
@@ -212,6 +212,14 @@
                                 location: {{ location.id }}
                                 {% endif %}
                             },
+                            callback: [
+                                {
+                                    field: 'part',
+                                    action: function(value) {
+                                        console.log('value: ' + value);
+                                    }
+                                },
+                            ],
                             secondary: [
                                 {
                                     field: 'part',