Merge pull request #1778 from SchrodingersGat/build-forms

Refactor BuildOrderEdit form

InvenTree/templates/InvenTree/settings/part.html

@@ -75,7 +75,7 @@
 {{ block.super }}
 
     $("#param-table").inventreeTable({
-        url: "{% url 'api-part-param-template-list' %}",
+        url: "{% url 'api-part-parameter-template-list' %}",
         queryParams: {
             ordering: 'name',
         },

InvenTree/templates/js/build.js

@@ -1,34 +1,72 @@
 {% load i18n %}
 {% load inventree_extras %}
 
+
+function buildFormFields() {
+    return {
+        reference: {
+            prefix: "{% settings_value 'BUILDORDER_REFERENCE_PREFIX' %}",
+        },
+        title: {},
+        part: {},
+        quantity: {},
+        parent: {
+            filters: {
+                part_detail: true,
+            }
+        },
+        batch: {},
+        target_date: {},
+        take_from: {},
+        destination: {},
+        link: {
+            icon: 'fa-link',
+        },
+        issued_by: {
+            icon: 'fa-user',
+        },
+        responsible: {
+            icon: 'fa-users',
+        },
+    };
+}
+
+
+function editBuildOrder(pk, options={}) {
+
+    var fields = buildFormFields();
+
+    constructForm(`/api/build/${pk}/`, {
+        fields: fields,
+        reload: true,
+        title: '{% trans "Edit Build Order" %}',
+    });
+}
+
 function newBuildOrder(options={}) {
     /* Launch modal form to create a new BuildOrder.
      */
 
-    launchModalForm(
-        "{% url 'build-create' %}",
-        {
-            follow: true,
-            data: options.data || {},
-            callback: [
-                {
-                    field: 'part',
-                    action: function(value) {
-                        inventreeGet(
-                            `/api/part/${value}/`, {},
-                            {
-                                success: function(response) {
+    var fields = buildFormFields();
 
-                                    //enableField('serial_numbers', response.trackable);
-                                    //clearField('serial_numbers');
-                                }
-                            }
-                        );
-                    },
-                }
-            ],
-        }
-    )
+    if (options.part) {
+        fields.part.value = options.part;
+    }
+
+    if (options.quantity) {
+        fields.quantity.value = options.quantity;
+    }
+
+    if (options.parent) {
+        fields.parent.value = options.parent;
+    }
+
+    constructForm(`/api/build/`, {
+        fields: fields,
+        follow: true,
+        method: 'POST',
+        title: '{% trans "Create Build Order" %}'
+    });
 }
 
 
@@ -384,14 +422,10 @@ function loadBuildOutputAllocationTable(buildInfo, output, options={}) {
             var idx = $(this).closest('tr').attr('data-index');
             var row = $(table).bootstrapTable('getData')[idx];
 
-            // Launch form to create a new build order
-            launchModalForm('{% url "build-create" %}', {
-                follow: true,
-                data: {
-                    part: pk,
-                    parent: buildId,
-                    quantity: requiredQuantity(row) - sumAllocations(row),
-                }
+            newBuildOrder({
+                part: pk,
+                parent: buildId,
+                quantity: requiredQuantity(row) - sumAllocations(row),
             });
         });
 
@@ -1092,13 +1126,9 @@ function loadBuildPartsTable(table, options={}) {
             var idx = $(this).closest('tr').attr('data-index');
             var row = $(table).bootstrapTable('getData')[idx];
 
-            // Launch form to create a new build order
-            launchModalForm('{% url "build-create" %}', {
-                follow: true,
-                data: {
-                    part: pk,
-                    parent: options.build,
-                }
+            newBuildOrder({
+                part: pk,
+                parent: options.build,
             });
         });
     }

InvenTree/templates/js/forms.js

@@ -511,6 +511,10 @@ function insertConfirmButton(options) {
  */
 function submitFormData(fields, options) {
 
+    // Immediately disable the "submit" button,
+    // to prevent the form being submitted multiple times!
+    $(options.modal).find('#modal-form-submit').prop('disabled', true);
+
     // Form data to be uploaded to the server
     // Only used if file / image upload is required
     var form_data = new FormData();
@@ -728,11 +732,31 @@ function handleFormSuccess(response, options) {
 
     // Close the modal
     if (!options.preventClose) {
-        // TODO: Actually just *delete* the modal,
-        // rather than hiding it!!
+        // Note: The modal will be deleted automatically after closing
         $(options.modal).modal('hide');
     }
 
+    // Display any required messages
+    // Should we show alerts immediately or cache them?
+    var cache = (options.follow && response.url) || options.redirect || options.reload;
+
+    // Display any messages
+    if (response && response.success) {
+        showAlertOrCache("alert-success", response.success, cache);
+    }
+    
+    if (response && response.info) {
+        showAlertOrCache("alert-info", response.info, cache);
+    }
+
+    if (response && response.warning) {
+        showAlertOrCache("alert-warning", response.warning, cache);
+    }
+
+    if (response && response.danger) {
+        showAlertOrCache("alert-danger", response.danger, cache);
+    }
+
     if (options.onSuccess) {
         // Callback function
         options.onSuccess(response, options);
@@ -778,6 +802,9 @@ function clearFormErrors(options) {
  */
 function handleFormErrors(errors, fields, options) {
 
+    // Reset the status of the "submit" button
+    $(options.modal).find('#modal-form-submit').prop('disabled', false);
+
     // Remove any existing error messages from the form
     clearFormErrors(options);
 
@@ -1201,11 +1228,21 @@ function renderModelData(name, model, data, parameters, options) {
         case 'partcategory':
             renderer = renderPartCategory;
             break;
+        case 'partparametertemplate':
+            renderer = renderPartParameterTemplate;
+            break;
         case 'supplierpart':
             renderer = renderSupplierPart;
             break;
+        case 'build':
+            renderer = renderBuild;
+            break;
         case 'owner':
             renderer = renderOwner;
+            break;
+        case 'user':
+            renderer = renderUser;
+            break;
         default:
             break;
     }

InvenTree/templates/js/modals.js

@@ -83,8 +83,6 @@ function createNewModal(options={}) {
 
     // Capture "enter" key input
     $(modal_name).on('keydown', 'input', function(event) {
-
-        
         if (event.keyCode == 13) {
             event.preventDefault();
             // Simulate a click on the 'Submit' button

InvenTree/templates/js/model_renderers.js

@@ -70,6 +70,27 @@ function renderStockLocation(name, data, parameters, options) {
 }
 
 
+function renderBuild(name, data, parameters, options) {
+    
+    var image = '';
+
+    if (data.part_detail && data.part_detail.thumbnail) {
+        image = data.part_detail.thumbnail;
+    } else {
+        image = `/static/img/blank_image.png`;
+    }
+
+    var html = `<img src='${image}' class='select2-thumbnail'>`;
+
+    html += `<span><b>${data.reference}</b></span> - ${data.quantity} x ${data.part_detail.full_name}`;
+    html += `<span class='float-right'>{% trans "Build ID" %}: ${data.pk}</span>`;
+
+    html += `<p><i>${data.title}</i></p>`;
+
+    return html;
+}
+
+
 // Renderer for "Part" model
 function renderPart(name, data, parameters, options) {
 
@@ -92,6 +113,18 @@ function renderPart(name, data, parameters, options) {
     return html;
 }
 
+// Renderer for "User" model
+function renderUser(name, data, parameters, options) {
+
+    var html = `<span>${data.username}</span>`;
+
+    if (data.first_name && data.last_name) {
+        html += ` - <i>${data.first_name} ${data.last_name}</i>`;
+    }
+
+    return html;
+}
+
 
 // Renderer for "Owner" model
 function renderOwner(name, data, parameters, options) {
@@ -133,6 +166,14 @@ function renderPartCategory(name, data, parameters, options) {
 }
 
 
+function renderPartParameterTemplate(name, data, parameters, options) {
+
+    var html = `<span>${data.name} - [${data.units}]</span>`;
+
+    return html;
+}
+
+
 // Rendered for "SupplierPart" model
 function renderSupplierPart(name, data, parameters, options) {
 

InvenTree/templates/js/part.js

@@ -220,6 +220,107 @@ function loadSimplePartTable(table, url, options={}) {
 }
 
 
+function loadPartParameterTable(table, url, options) {
+
+    var params = options.params || {};
+
+    // Load filters
+    var filters = loadTableFilters("part-parameters");
+
+    for (var key in params) {
+        filters[key] = params[key];
+    }
+
+    // setupFilterLsit("#part-parameters", $(table));
+
+    $(table).inventreeTable({
+        url: url,
+        original: params,
+        queryParams: filters,
+        name: 'partparameters',
+        groupBy: false,
+        formatNoMatches: function() { return '{% trans "No parameters found" %}'; },
+        columns: [
+            {
+                checkbox: true,
+                switchable: false,
+                visible: true,
+            },
+            {
+                field: 'name',
+                title: '{% trans "Name" %}',
+                switchable: false,
+                sortable: true,
+                formatter: function(value, row) {
+                    return row.template_detail.name;
+                }
+            },
+            {
+                field: 'data',
+                title: '{% trans "Value" %}',
+                switchable: false,
+                sortable: true,
+            },
+            {
+                field: 'units',
+                title: '{% trans "Units" %}',
+                switchable: true,
+                sortable: true,
+                formatter: function(value, row) {
+                    return row.template_detail.units;
+                }
+            },
+            {
+                field: 'actions',
+                title: '',
+                switchable: false,
+                sortable: false,
+                formatter: function(value, row) {
+                    var pk = row.pk;
+
+                    var html = `<div class='btn-group float-right' role='group'>`;
+
+                    html += makeIconButton('fa-edit icon-blue', 'button-parameter-edit', pk, '{% trans "Edit parameter" %}');
+                    html += makeIconButton('fa-trash-alt icon-red', 'button-parameter-delete', pk, '{% trans "Delete parameter" %}');
+
+                    html += `</div>`;
+
+                    return html;
+                }
+            }
+        ],
+        onPostBody: function() {
+            // Setup button callbacks
+            $(table).find('.button-parameter-edit').click(function() {
+                var pk = $(this).attr('pk');
+
+                constructForm(`/api/part/parameter/${pk}/`, {
+                    fields: {
+                        data: {},
+                    },
+                    title: '{% trans "Edit Parameter" %}',
+                    onSuccess: function() {
+                        $(table).bootstrapTable('refresh');
+                    }
+                });
+            });
+
+            $(table).find('.button-parameter-delete').click(function() {
+                var pk = $(this).attr('pk');
+
+                constructForm(`/api/part/parameter/${pk}/`, {
+                    method: 'DELETE',
+                    title: '{% trans "Delete Parameter" %}',
+                    onSuccess: function() {
+                        $(table).bootstrapTable('refresh');
+                    }
+                });
+            });
+        }
+    });
+}
+
+
 function loadParametricPartTable(table, options={}) {
     /* Load parametric table for part parameters
      *