Adds ajax table for part sale price information

InvenTree/part/templates/part/sale_prices.html

@@ -9,7 +9,7 @@
 <h4>{% trans "Sale Price" %}</h4>
 <hr>
 
-<div id='price-break-bar' class='btn-group'>
+<div id='price-break-toolbar' class='btn-group'>
     <button class='btn btn-primary' id='new-price-break' type='button'>{% trans "Add Price Break" %}</button>
 </div>
 
@@ -21,14 +21,14 @@
 {% block js_ready %}
 {{ block.super }}
 
-function reloadTable() {
+function reloadPriceBreaks() {
     $("#price-break-table").bootstrapTable("refresh");
 }
 
 $('#new-price-break').click(function() {
     launchModalForm("{% url 'sale-price-break-create' %}",
         {
-            success: reloadTable,
+            success: reloadPriceBreaks,
             data: {
                 part: {{ part.id }},
             }
@@ -36,4 +36,75 @@ $('#new-price-break').click(function() {
     );
 });
 
+$('#price-break-table').inventreeTable({
+    name: 'saleprice',
+    formatNoMatches: function() { return "{% trans 'No price break information found' %}"; },
+    queryParams: {
+        part: {{ part.id }},
+    },
+    url: "{% url 'api-part-sale-price-list' %}",
+    onLoadSuccess: function() {
+        var table = $('#price-break-table');
+
+        table.find('.button-price-break-delete').click(function() {
+            var pk = $(this).attr('pk');
+
+            launchModalForm(
+                `/part/sale-price/${pk}/delete/`,
+                {
+                    success: reloadPriceBreaks
+                }
+            );
+        });
+
+        table.find('.button-price-break-edit').click(function() {
+            var pk = $(this).attr('pk');
+
+            launchModalForm(
+                `/part/sale-price/${pk}/edit/`,
+                {
+                    success: reloadPriceBreaks
+                }
+            );
+        });
+    },
+    columns: [
+        {
+            field: 'pk',
+            title: 'ID',
+            visible: false,
+            switchable: false,
+        },
+        {
+            field: 'quantity',
+            title: '{% trans "Quantity" %}',
+            sortable: true,
+        },
+        {
+            field: 'cost',
+            title: '{% trans "Price" %}',
+            sortable: true,
+            formatter: function(value, row, index) {
+                var html = '';
+
+                html += row.symbol || '';
+                html += value;
+
+                if (row.suffix) {
+                    html += ' ' + row.suffix || '';
+                }
+
+                html += `<div class='btn-group float-right' role='group'>`
+
+                html += makeIconButton('fa-edit icon-blue', 'button-price-break-edit', row.pk, '{% trans "Edit price break" %}');
+                html += makeIconButton('fa-trash-alt icon-red', 'button-price-break-delete', row.pk, '{% trans "Delete price break" %}');
+
+                html += `</div>`;
+
+                return html;
+            }
+        },
+    ]
+})
+
 {% endblock %}