ajax implementation for part import

InvenTree/part/templates/part/import_wizard/ajax_match_fields.html

@@ -0,0 +1,89 @@
+{% extends "part/import_wizard/ajax_part_upload.html" %}
+{% load inventree_extras %}
+{% load i18n %}
+{% load static %}
+
+{% block form_alert %}
+{% if missing_columns and missing_columns|length > 0 %}
+<div class='alert alert-danger alert-block' role='alert'>
+    {% trans "Missing selections for the following required columns" %}:
+    <br>
+    <ul>
+        {% for col in missing_columns %}
+        <li>{{ col }}</li>
+        {% endfor %}
+    </ul>
+</div>
+{% endif %}
+{% if duplicates and duplicates|length > 0 %}
+<div class='alert alert-danger alert-block' role='alert'>
+    {% trans "Duplicate selections found, see below. Fix them then retry submitting." %}
+</div>
+{% endif %}
+{% endblock form_alert %}
+
+{% block form_content %}
+    <thead>
+        <tr>
+            <th>{% trans "File Fields" %}</th>
+            <th></th>
+            {% for col in form %}
+            <th>
+                <div>
+                    <input type='hidden' name='col_name_{{ forloop.counter0 }}' value='{{ col.name }}'/>
+                    {{ col.name }}
+                    <button class='btn btn-default btn-remove' onClick='removeColFromBomWizard()' id='del_col_{{ forloop.counter0 }}' style='display: inline; float: right;' title='{% trans "Remove column" %}'>
+                        <span col_id='{{ forloop.counter0 }}' class='fas fa-trash-alt icon-red'></span>
+                    </button>
+                </div>
+            </th>
+            {% endfor %}
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>{% trans "Match Fields" %}</td>
+            <td></td>
+            {% for col in form %}
+            <td>
+                {{ col }}
+                {% for duplicate in duplicates %}
+                    {% if duplicate == col.value %}
+                    <div class='alert alert-danger alert-block text-center' role='alert' style='padding:2px; margin-top:6px; margin-bottom:2px'>
+                        <b>{% trans "Duplicate selection" %}</b>
+                    </div>
+                    {% endif %}
+                {% endfor %}
+            </td>
+            {% endfor %}
+        </tr>
+        {% for row in rows %}
+        {% with forloop.counter as row_index %}
+        <tr>
+            <td style='width: 32px;'>
+                <button class='btn btn-default btn-remove' onClick='removeRowFromBomWizard()' id='del_row_{{ row_index }}' style='display: inline; float: left;' title='{% trans "Remove row" %}'>
+                    <span row_id='{{ row_index }}' class='fas fa-trash-alt icon-red'></span>
+                </button>
+            </td>
+            <td style='text-align: left;'>{{ row_index }}</td>
+            {% for item in row.data %}
+            <td>
+                <input type='hidden' name='row_{{ row_index }}_col_{{ forloop.counter0 }}' value='{{ item }}'/>
+                {{ item }}
+            </td>
+            {% endfor %}
+        </tr>
+        {% endwith %}
+        {% endfor %}
+    </tbody>
+{% endblock form_content %}
+
+{% block js_ready %}
+{{ block.super }}
+
+$('.fieldselect').select2({
+    width: '100%',
+    matcher: partialMatcher,
+});
+
+{% endblock %}

InvenTree/part/templates/part/import_wizard/ajax_match_references.html

@@ -0,0 +1,84 @@
+{% extends "part/import_wizard/ajax_part_upload.html" %}
+{% load inventree_extras %}
+{% load i18n %}
+{% load static %}
+{% load crispy_forms_tags %}
+
+{% block form_alert %}
+{% if form.errors %}
+{% endif %}
+{% if form_errors %}
+<div class='alert alert-danger alert-block' role='alert'>
+    {% trans "Errors exist in the submitted data" %}
+</div>
+{% endif %}
+{% endblock form_alert %}
+
+{% block form_content %}
+        <thead>
+            <tr>
+                <th></th>
+                <th>{% trans "Row" %}</th>
+                {% for col in columns %}
+
+                <th>
+                    <input type='hidden' name='col_name_{{ forloop.counter0 }}' value='{{ col.name }}'/>
+                    <input type='hidden' name='col_guess_{{ forloop.counter0 }}' value='{{ col.guess }}'/>
+                    {% if col.guess %}
+                    {{ col.guess }}
+                    {% else %}
+                    {{ col.name }}
+                    {% endif %}
+                </th>
+                {% endfor %}
+            </tr>
+        </thead>
+        <tbody>
+             <tr></tr> {% comment %} Dummy row for javascript del_row method {% endcomment %}
+            {% for row in rows %}
+            <tr {% if row.errors %} style='background: #ffeaea;'{% endif %} part-select='#select_part_{{ row.index }}'>
+                <td>
+                    <button class='btn btn-default btn-remove' onClick='removeRowFromBomWizard()' id='del_row_{{ row.index }}' style='display: inline; float: right;' title='{% trans "Remove row" %}'>
+                            <span row_id='{{ row.index }}' class='fas fa-trash-alt icon-red'></span>
+                    </button>
+                </td>
+                <td>
+                {% add row.index 1 %}
+                </td>
+                {% for item in row.data %}
+                <td>
+                    {% if item.column.guess %}
+                        {% with row_name=item.column.guess|lower %}
+                        {% for field in form.visible_fields %}
+                            {% if field.name == row|keyvalue:row_name %}
+                                {{ field|as_crispy_field }}
+                            {% endif %}
+                        {% endfor %}
+                        {% endwith %}
+                    {% else %}
+                        {{ item.cell }}
+                    {% endif %}
+                    <input type='hidden' name='row_{{ row.index }}_col_{{ forloop.counter0 }}' value='{{ item.cell }}'/>
+                </td>
+                {% endfor %}
+            </tr>
+            {% endfor %}
+        </tbody>
+{% endblock form_content %}
+
+{% block form_buttons_bottom %}
+{% endblock form_buttons_bottom %}
+
+{% block js_ready %}
+{{ block.super }}
+
+$('.bomselect').select2({
+    dropdownAutoWidth: true,
+    matcher: partialMatcher,
+});
+
+$('.currencyselect').select2({
+    dropdownAutoWidth: true,
+});
+
+{% endblock %}

InvenTree/part/templates/part/import_wizard/ajax_part_upload.html

@@ -0,0 +1,33 @@
+{% extends "modal_form.html" %}
+
+{% load inventree_extras %}
+{% load i18n %}
+
+{% block form %}
+
+{% if roles.part.change %}
+
+    <p>{% blocktrans with step=wizard.steps.step1 count=wizard.steps.count %}Step {{step}} of {{count}}{% endblocktrans %}
+    {% if description %}- {{ description }}{% endif %}</p>
+
+    {% block form_alert %}
+    {% endblock form_alert %}
+
+    <form action="" method="post" class='js-modal-form' enctype="multipart/form-data">
+    {% csrf_token %}
+    {% load crispy_forms_tags %}
+
+    <table class='table table-striped' style='margin-top: 12px; margin-bottom: 0px'>
+    {{ wizard.management_form }}
+    {% block form_content %}
+    {% crispy wizard.form %}
+    {% endblock form_content %}
+    </table>
+
+{% else %}
+    <div class='alert alert-danger alert-block' role='alert'>
+        {% trans "Unsuffitient privileges." %}
+    </div>
+{% endif %}
+</div>
+{% endblock %}

InvenTree/part/urls.py

@@ -122,6 +122,7 @@ part_urls = [
 
     # Upload a part
     url(r'^import/', views.PartImport.as_view(), name='part-import'),
+    url(r'^import-api/', views.PartImportAjax.as_view(), name='api-part-import'),
 
     # Create a new BOM item
     url(r'^bom/new/?', views.BomItemCreate.as_view(), name='bom-item-create'),

InvenTree/part/views.py

@@ -41,7 +41,7 @@ from .models import PartSellPriceBreak
 from common.models import InvenTreeSetting
 from company.models import SupplierPart
 from common.files import FileManager
-from common.views import FileManagementFormView
+from common.views import FileManagementFormView, FileManagementAjaxView
 
 from stock.models import StockLocation
 
@@ -874,6 +874,17 @@ class PartImport(FileManagementFormView):
         return HttpResponseRedirect(reverse('part-index'))
 
 
+class PartImportAjax(FileManagementAjaxView, PartImport):
+    ajax_form_steps_template = [
+        'part/import_wizard/ajax_part_upload.html',
+        'part/import_wizard/ajax_match_fields.html',
+        'part/import_wizard/ajax_match_references.html',
+    ]
+
+    def validate(self, obj, form, **kwargs):
+        return PartImport.validate(self, self.steps.current, form, **kwargs)
+
+
 class PartNotes(UpdateView):
     """ View for editing the 'notes' field of a Part object.
     Presents a live markdown editor.

InvenTree/templates/InvenTree/settings/part.html

@@ -138,7 +138,7 @@
     });
 
     $("#import-part").click(function() {
-        launchModalForm("{% url 'part-import' %}", {});
+        launchModalForm("{% url 'api-part-import' %}", {});
     });
 
 {% endblock %}