mirror of
https://github.com/inventree/InvenTree
synced 2024-08-30 18:33:04 +00:00
Add subrow table to the "installed items" view
Ah, javascript...
This commit is contained in:
Oliver Walters
parent
9c27680202
commit
3c5968ef1a
@ -10,19 +10,7 @@
|
|||||||
<h4>{% trans "Installed Stock Items" %}</h4>
|
<h4>{% trans "Installed Stock Items" %}</h4>
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<div id='button-toolbar'>
|
<table class='table table-striped table-condensed' id='installed-table'></table>
|
||||||
<div class='button-toolbar container-fluid' style='float: right;'>
|
|
||||||
<div class="btn-group">
|
|
||||||
<button id='stock-options' class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{% trans "Options" %}<span class="caret"></span></button>
|
|
||||||
<ul class="dropdown-menu">
|
|
||||||
<li><a href="#" id='multi-item-uninstall' title='{% trans "Uninstall selected stock items" %}'>{% trans "Uninstall" %}</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<table class='table table-striped table-condensed' id='installed-table' data-toolbar='#button-toolbar'>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
@ -30,135 +18,14 @@
|
|||||||
|
|
||||||
{{ block.super }}
|
{{ block.super }}
|
||||||
|
|
||||||
$('#installed-table').inventreeTable({
|
loadInstalledInTable(
|
||||||
formatNoMatches: function() {
|
$('#installed-table'),
|
||||||
return '{% trans "No stock items installed" %}';
|
{
|
||||||
},
|
stock_item: {{ item.pk }},
|
||||||
url: "{% url 'api-stock-list' %}",
|
part: {{ item.part.pk }},
|
||||||
queryParams: {
|
quantity: {{ item.quantity }},
|
||||||
installed_in: {{ item.id }},
|
}
|
||||||
part_detail: true,
|
);
|
||||||
},
|
|
||||||
name: 'stock-item-installed',
|
|
||||||
url: "{% url 'api-stock-list' %}",
|
|
||||||
showColumns: true,
|
|
||||||
columns: [
|
|
||||||
{
|
|
||||||
checkbox: true,
|
|
||||||
title: '{% trans 'Select' %}',
|
|
||||||
searchable: false,
|
|
||||||
switchable: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'pk',
|
|
||||||
title: 'ID',
|
|
||||||
visible: false,
|
|
||||||
switchable: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'part_name',
|
|
||||||
title: '{% trans "Part" %}',
|
|
||||||
sortable: true,
|
|
||||||
formatter: function(value, row, index, field) {
|
|
||||||
|
|
||||||
var url = `/stock/item/${row.pk}/`;
|
|
||||||
var thumb = row.part_detail.thumbnail;
|
|
||||||
var name = row.part_detail.full_name;
|
|
||||||
|
|
||||||
html = imageHoverIcon(thumb) + renderLink(name, url);
|
|
||||||
|
|
||||||
return html;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'IPN',
|
|
||||||
title: 'IPN',
|
|
||||||
sortable: true,
|
|
||||||
formatter: function(value, row, index, field) {
|
|
||||||
return row.part_detail.IPN;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'part_description',
|
|
||||||
title: '{% trans "Description" %}',
|
|
||||||
sortable: true,
|
|
||||||
formatter: function(value, row, index, field) {
|
|
||||||
return row.part_detail.description;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'quantity',
|
|
||||||
title: '{% trans "Stock" %}',
|
|
||||||
sortable: true,
|
|
||||||
formatter: function(value, row, index, field) {
|
|
||||||
|
|
||||||
var val = parseFloat(value);
|
|
||||||
|
|
||||||
// If there is a single unit with a serial number, use the serial number
|
|
||||||
if (row.serial && row.quantity == 1) {
|
|
||||||
val = '# ' + row.serial;
|
|
||||||
} else {
|
|
||||||
val = +val.toFixed(5);
|
|
||||||
}
|
|
||||||
|
|
||||||
var html = renderLink(val, `/stock/item/${row.pk}/`);
|
|
||||||
|
|
||||||
return html;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'status',
|
|
||||||
title: '{% trans "Status" %}',
|
|
||||||
sortable: 'true',
|
|
||||||
formatter: function(value, row, index, field) {
|
|
||||||
return stockStatusDisplay(value);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'batch',
|
|
||||||
title: '{% trans "Batch" %}',
|
|
||||||
sortable: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
field: 'actions',
|
|
||||||
switchable: false,
|
|
||||||
title: '',
|
|
||||||
formatter: function(value, row) {
|
|
||||||
var pk = row.pk;
|
|
||||||
|
|
||||||
var html = `<div class='btn-group float-right' role='group'>`;
|
|
||||||
|
|
||||||
html += makeIconButton('fa-unlink', 'button-uninstall', pk, '{% trans "Uninstall item" %}');
|
|
||||||
|
|
||||||
html += `</div>`;
|
|
||||||
|
|
||||||
return html;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
onLoadSuccess: function() {
|
|
||||||
|
|
||||||
var table = $('#installed-table');
|
|
||||||
|
|
||||||
// Find buttons and associate actions
|
|
||||||
table.find('.button-uninstall').click(function() {
|
|
||||||
var pk = $(this).attr('pk');
|
|
||||||
|
|
||||||
launchModalForm(
|
|
||||||
"{% url 'stock-item-uninstall' %}",
|
|
||||||
{
|
|
||||||
data: {
|
|
||||||
'items[]': [pk],
|
|
||||||
},
|
|
||||||
reload: true,
|
|
||||||
}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
buttons: [
|
|
||||||
'#stock-options',
|
|
||||||
]
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#multi-item-uninstall').click(function() {
|
$('#multi-item-uninstall').click(function() {
|
||||||
|
|
||||||
|
|||||||
@ -830,8 +830,25 @@ function loadInstalledInTable(table, options) {
|
|||||||
*
|
*
|
||||||
* - stock_item: The PK of the master stock_item object
|
* - stock_item: The PK of the master stock_item object
|
||||||
* - part: The PK of the Part reference of the stock_item object
|
* - part: The PK of the Part reference of the stock_item object
|
||||||
|
* - quantity: The quantity of the stock item
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
function updateCallbacks() {
|
||||||
|
// Setup callback functions when buttons are pressed
|
||||||
|
table.find('.button-install').click(function() {
|
||||||
|
var pk = $(this).attr('pk');
|
||||||
|
|
||||||
|
launchModalForm(
|
||||||
|
`/stock/item/${options.stock_item}/install/`,
|
||||||
|
{
|
||||||
|
data: {
|
||||||
|
part: pk,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
table.inventreeTable(
|
table.inventreeTable(
|
||||||
{
|
{
|
||||||
url: "{% url 'api-bom-list' %}",
|
url: "{% url 'api-bom-list' %}",
|
||||||
@ -842,6 +859,92 @@ function loadInstalledInTable(table, options) {
|
|||||||
},
|
},
|
||||||
showColumns: false,
|
showColumns: false,
|
||||||
name: 'installed-in',
|
name: 'installed-in',
|
||||||
|
detailView: true,
|
||||||
|
detailViewByClick: true,
|
||||||
|
detailFilter: function(index, row) {
|
||||||
|
return row.installed_count && row.installed_count > 0;
|
||||||
|
},
|
||||||
|
detailFormatter: function(index, row, element) {
|
||||||
|
var subTableId = `installed-table-${row.sub_part}`;
|
||||||
|
|
||||||
|
var html = `<div class='sub-table'><table class='table table-condensed table-striped' id='${subTableId}'></table></div>`;
|
||||||
|
|
||||||
|
element.html(html);
|
||||||
|
|
||||||
|
var subTable = $(`#${subTableId}`);
|
||||||
|
|
||||||
|
// Display a "sub table" showing all the linked stock items
|
||||||
|
subTable.bootstrapTable({
|
||||||
|
data: row.installed_items,
|
||||||
|
showHeader: true,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
field: 'item',
|
||||||
|
title: '{% trans "Stock Item" %}',
|
||||||
|
formatter: function(value, subrow, index, field) {
|
||||||
|
|
||||||
|
var pk = subrow.pk;
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
html += row.sub_part_detail.full_name;
|
||||||
|
html += " | ";
|
||||||
|
|
||||||
|
if (subrow.serial && subrow.quantity == 1) {
|
||||||
|
html += `{% trans "Serial" %}: ${subrow.serial}`;
|
||||||
|
} else {
|
||||||
|
html += `{% trans "Quantity" %}: ${subrow.quantity}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return html;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'status',
|
||||||
|
title: '{% trans "Status" %}',
|
||||||
|
formatter: function(value, subrow, index, field) {
|
||||||
|
return stockStatusDisplay(value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'actions',
|
||||||
|
title: '',
|
||||||
|
formatter: function(value, subrow, index) {
|
||||||
|
|
||||||
|
var pk = subrow.pk;
|
||||||
|
var html = '';
|
||||||
|
|
||||||
|
// Add some buttons yo!
|
||||||
|
html += `<div class='btn-group float-right' role='group'>`;
|
||||||
|
|
||||||
|
html += makeIconButton('fa-unlink', 'button-uninstall', pk, "{% trans "Uninstall stock item" %}");
|
||||||
|
|
||||||
|
html += `</div>`;
|
||||||
|
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
onPostBody: function() {
|
||||||
|
// Setup button callbacks
|
||||||
|
subTable.find('.button-uninstall').click(function() {
|
||||||
|
var pk = $(this).attr('pk');
|
||||||
|
|
||||||
|
launchModalForm(
|
||||||
|
"{% url 'stock-item-uninstall' %}",
|
||||||
|
{
|
||||||
|
data: {
|
||||||
|
'items[]': [pk],
|
||||||
|
},
|
||||||
|
success: function() {
|
||||||
|
// Refresh entire table!
|
||||||
|
table.bootstrapTable('refresh');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
columns: [
|
columns: [
|
||||||
{
|
{
|
||||||
checkbox: true,
|
checkbox: true,
|
||||||
@ -861,7 +964,7 @@ function loadInstalledInTable(table, options) {
|
|||||||
sortable: true,
|
sortable: true,
|
||||||
formatter: function(value, row, index, field) {
|
formatter: function(value, row, index, field) {
|
||||||
|
|
||||||
var url = `/stock/item/${row.pk}/`;
|
var url = `/part/${row.sub_part}/`;
|
||||||
var thumb = row.sub_part_detail.thumbnail;
|
var thumb = row.sub_part_detail.thumbnail;
|
||||||
var name = row.sub_part_detail.full_name;
|
var name = row.sub_part_detail.full_name;
|
||||||
|
|
||||||
@ -877,9 +980,11 @@ function loadInstalledInTable(table, options) {
|
|||||||
formatter: function(value, row, index, field) {
|
formatter: function(value, row, index, field) {
|
||||||
// Construct a progress showing how many items have been installed
|
// Construct a progress showing how many items have been installed
|
||||||
|
|
||||||
var installed = row.installed || 0;
|
var installed = row.installed_count || 0;
|
||||||
var required = row.quantity || 0;
|
var required = row.quantity || 0;
|
||||||
|
|
||||||
|
required *= options.quantity;
|
||||||
|
|
||||||
var progress = makeProgressBar(installed, required, {
|
var progress = makeProgressBar(installed, required, {
|
||||||
id: row.sub_part.pk,
|
id: row.sub_part.pk,
|
||||||
});
|
});
|
||||||
@ -891,7 +996,7 @@ function loadInstalledInTable(table, options) {
|
|||||||
field: 'actions',
|
field: 'actions',
|
||||||
switchable: false,
|
switchable: false,
|
||||||
formatter: function(value, row) {
|
formatter: function(value, row) {
|
||||||
var pk = row.sub_part.pk;
|
var pk = row.sub_part;
|
||||||
|
|
||||||
var html = `<div class='btn-group float-right' role='group'>`;
|
var html = `<div class='btn-group float-right' role='group'>`;
|
||||||
|
|
||||||
@ -904,8 +1009,63 @@ function loadInstalledInTable(table, options) {
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
onLoadSuccess: function() {
|
onLoadSuccess: function() {
|
||||||
console.log('data loaded!');
|
// Grab a list of parts which are actually installed in this stock item
|
||||||
}
|
|
||||||
|
inventreeGet(
|
||||||
|
"{% url 'api-stock-list' %}",
|
||||||
|
{
|
||||||
|
installed_in: options.stock_item,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
success: function(stock_items) {
|
||||||
|
|
||||||
|
var table_data = table.bootstrapTable('getData');
|
||||||
|
|
||||||
|
stock_items.forEach(function(item) {
|
||||||
|
|
||||||
|
var match = false;
|
||||||
|
|
||||||
|
for (var idx = 0; idx < table_data.length; idx++) {
|
||||||
|
|
||||||
|
var row = table_data[idx];
|
||||||
|
|
||||||
|
// Check each row in the table to see if this stock item matches
|
||||||
|
table_data.forEach(function(row) {
|
||||||
|
|
||||||
|
// Match on "sub_part"
|
||||||
|
if (row.sub_part == item.part) {
|
||||||
|
|
||||||
|
// First time?
|
||||||
|
if (row.installed_count == null) {
|
||||||
|
row.installed_count = 0;
|
||||||
|
row.installed_items = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
row.installed_count += item.quantity;
|
||||||
|
row.installed_items.push(item);
|
||||||
|
|
||||||
|
// Push the row back into the table
|
||||||
|
table.bootstrapTable('updateRow', idx, row, true);
|
||||||
|
|
||||||
|
match = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
if (match) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update button callback links
|
||||||
|
updateCallbacks();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
updateCallbacks();
|
||||||
|
},
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user