mirror of
https://github.com/inventree/InvenTree
synced 2024-08-30 18:33:04 +00:00
Move table functionality to external script
This commit is contained in:
Oliver Walters
parent
b522ca5b29
commit
a5e3af97ed
@ -45,88 +45,11 @@
|
||||
|
||||
{% block js_ready %}
|
||||
{{ block.super }}
|
||||
function reloadBom() {
|
||||
$("#bom-table").bootstrapTable('refresh');
|
||||
}
|
||||
|
||||
// Load the BOM data
|
||||
$("#bom-table").bootstrapTable({
|
||||
sortable: true,
|
||||
search: true,
|
||||
queryParams: function(p) {
|
||||
return {
|
||||
part: {{ part.id }}
|
||||
}
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
field: 'pk',
|
||||
title: 'ID',
|
||||
visible: false,
|
||||
},
|
||||
{
|
||||
field: 'sub_part',
|
||||
title: 'Part',
|
||||
sortable: true,
|
||||
formatter: function(value, row, index, field) {
|
||||
return renderLink(value.name, value.url);
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'sub_part.description',
|
||||
title: 'Description',
|
||||
},
|
||||
{
|
||||
field: 'quantity',
|
||||
title: 'Required',
|
||||
searchable: false,
|
||||
sortable: true,
|
||||
formatter: function(value, row, index, field) {
|
||||
return renderEditable(value,
|
||||
{
|
||||
_pk: row.pk,
|
||||
_title: 'Quantity',
|
||||
enabled: {{ editing_enabled }},
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'note',
|
||||
title: 'Note',
|
||||
searchable: true,
|
||||
sortable: false,
|
||||
formatter: function(value, row, index, field) {
|
||||
return renderEditable(value,
|
||||
{
|
||||
_pk: row.pk,
|
||||
_title: 'Note',
|
||||
_empty: 'Enter note',
|
||||
enabled: {{ editing_enabled }},
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'sub_part.available_stock',
|
||||
title: 'Available',
|
||||
searchable: false,
|
||||
sortable: true,
|
||||
formatter: function(value, row, index, field) {
|
||||
var text = "";
|
||||
if (row.quantity < row.sub_part.available_stock)
|
||||
{
|
||||
text = "<span class='label label-success'>" + value + "</span>";
|
||||
}
|
||||
else
|
||||
{
|
||||
text = "<span class='label label-warning'>" + value + "</span>";
|
||||
}
|
||||
|
||||
return renderLink(text, row.sub_part.url + "stock/");
|
||||
}
|
||||
},
|
||||
],
|
||||
url: "{% url 'api-bom-list' %}"
|
||||
loadBomTable($("#bom-table"), {
|
||||
editable: {{ editing_enabled }},
|
||||
bom_url: "{% url 'api-bom-list' %}",
|
||||
parent_id: {{ part.id }}
|
||||
});
|
||||
|
||||
{% if editing_enabled %}
|
||||
@ -140,45 +63,15 @@
|
||||
location.href = "{% url 'part-bom' part.id %}";
|
||||
});
|
||||
|
||||
$("#bom-table").on('load-success.bs.table', function() {
|
||||
// Make the table elements editable
|
||||
$("#bom-table").find('.editable-item').editable();
|
||||
});
|
||||
|
||||
{% else %}
|
||||
|
||||
$("#edit-bom").click(function () {
|
||||
|
||||
location.href = "{% url 'part-bom' part.id %}?edit=1";
|
||||
|
||||
/*
|
||||
editBOM(
|
||||
{
|
||||
url: "{% url 'api-bom-list' %}",
|
||||
part_name: "{{ part.name }}",
|
||||
part_id: "{{ part.id }}",
|
||||
}
|
||||
);
|
||||
*/
|
||||
/*
|
||||
launchModalForm(
|
||||
"{% url 'bom-item-create' %}",
|
||||
{
|
||||
reload: true,
|
||||
data: {
|
||||
parent: {{ part.id }}
|
||||
}
|
||||
});
|
||||
*/
|
||||
});
|
||||
|
||||
$("#export-bom").click(function () {
|
||||
/*
|
||||
launchModalForm(
|
||||
"{% url 'bom-export' part.id %}",
|
||||
{
|
||||
});
|
||||
*/
|
||||
//TODO - Select format of the data
|
||||
location.href = "{% url 'bom-export' part.id %}";
|
||||
});
|
||||
|
||||
@ -6,77 +6,167 @@
|
||||
*/
|
||||
|
||||
|
||||
function refreshBOM(){
|
||||
// TODO - Update the BOM data once the data are read from the server
|
||||
function reloadBomTable(table, options) {
|
||||
|
||||
table.bootstrapTable('refresh');
|
||||
}
|
||||
|
||||
|
||||
function editBOM(options){
|
||||
|
||||
/* Launch a modal window to edit the BOM options.
|
||||
* The caller should pass the following key:value data in 'options':
|
||||
* part_name: The name of the part being edited
|
||||
* part_id: The pk of the part (for AJAX lookup)
|
||||
* url: The JSON API URL to get BOM data
|
||||
function loadBomTable(table, options) {
|
||||
/* Load a BOM table with some configurable options.
|
||||
*
|
||||
* Following options are available:
|
||||
* editable - Should the BOM table be editable?
|
||||
* bom_url - Address to request BOM data from
|
||||
* parent_id - Parent ID of the owning part
|
||||
*
|
||||
* BOM data are retrieved from the server via AJAX query
|
||||
*/
|
||||
|
||||
// Default modal target if none is supplied
|
||||
var modal = options.modal || '#modal-form';
|
||||
// Construct the table columns
|
||||
|
||||
var title = 'Edit BOM for ' + options.part_name;
|
||||
|
||||
var body = `
|
||||
<table class='table table-striped table-condensed' id='modal-bom-table'></table>
|
||||
<div style='float: right;'>
|
||||
<button class='btn btn-basic' type='button' id='new-bom-item'>Add BOM Item</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
openModal(
|
||||
{
|
||||
modal: modal,
|
||||
content: body,
|
||||
title: title,
|
||||
submit_text: 'Save',
|
||||
close_text: 'Cancel',
|
||||
}
|
||||
);
|
||||
|
||||
$('#new-bom-item').click(function() {
|
||||
alert("New BOM item!");
|
||||
});
|
||||
|
||||
$('#modal-bom-table').bootstrapTable({
|
||||
sortable: true,
|
||||
search: true,
|
||||
queryParams: function(p) {
|
||||
return {
|
||||
part: options.part_id,
|
||||
}
|
||||
},
|
||||
//data: {},
|
||||
columns: [
|
||||
var cols = [
|
||||
{
|
||||
field: 'pk',
|
||||
title: 'ID',
|
||||
visible: false
|
||||
},
|
||||
visible: false,
|
||||
}
|
||||
];
|
||||
|
||||
if (options.editable) {
|
||||
// TODO - Add checkbox column
|
||||
}
|
||||
|
||||
// Part column
|
||||
cols.push(
|
||||
{
|
||||
field: 'sub_part.name',
|
||||
field: 'sub_part',
|
||||
title: 'Part',
|
||||
sortable: true,
|
||||
},
|
||||
formatter: function(value, row, index, field) {
|
||||
if (options.editable) {
|
||||
return renderEditable(value.name,
|
||||
{
|
||||
_pk: row.pk,
|
||||
_type: 'select',
|
||||
_title: 'Part',
|
||||
_class: 'editable-part',
|
||||
_value: 1,
|
||||
});
|
||||
}
|
||||
else {
|
||||
return renderLink(value.name, value.url);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Part description
|
||||
cols.push(
|
||||
{
|
||||
field: 'sub_part.description',
|
||||
title: 'Description',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
// Part quantity
|
||||
cols.push(
|
||||
{
|
||||
field: 'quantity',
|
||||
title: 'Required',
|
||||
searchable: false,
|
||||
sortable: true,
|
||||
}
|
||||
],
|
||||
url: options.url,
|
||||
formatter: function(value, row, index, field) {
|
||||
if (options.editable) {
|
||||
return renderEditable(value,
|
||||
{
|
||||
_pk: row.pk,
|
||||
_title: 'Quantity',
|
||||
});
|
||||
}
|
||||
else {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// Part notes
|
||||
cols.push(
|
||||
{
|
||||
field: 'note',
|
||||
title: 'Notes',
|
||||
searchable: true,
|
||||
sortable: false,
|
||||
formatter: function(value, row, index, field) {
|
||||
if (options.editable) {
|
||||
return renderEditable(value,
|
||||
{
|
||||
_pk: row.pk,
|
||||
_title: 'Note',
|
||||
_empty: 'Enter note',
|
||||
});
|
||||
}
|
||||
else {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// If we are NOT editing, display the available stock
|
||||
if (!options.editable) {
|
||||
cols.push(
|
||||
{
|
||||
field: 'sub_part.available_stock',
|
||||
title: 'Available',
|
||||
searchable: false,
|
||||
sortable: true,
|
||||
formatter: function(value, row, index, field) {
|
||||
var text = "";
|
||||
|
||||
if (row.quantity < row.sub_part.available_stock)
|
||||
{
|
||||
text = "<span class='label label-success'>" + value + "</span>";
|
||||
}
|
||||
else
|
||||
{
|
||||
text = "<span class='label label-warning'>" + value + "</span>";
|
||||
}
|
||||
|
||||
return renderLink(text, row.sub_part.url + "stock/");
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Configure the table (bootstrap-table)
|
||||
|
||||
table.bootstrapTable({
|
||||
sortable: true,
|
||||
search: true,
|
||||
queryParams: function(p) {
|
||||
return {
|
||||
part: options.parent_id,
|
||||
}
|
||||
},
|
||||
columns: cols,
|
||||
url: options.bom_url
|
||||
});
|
||||
|
||||
if (options.editable) {
|
||||
// Callback when the BOM data are successfully loaded
|
||||
table.on('load-success.bs.table', function() {
|
||||
table.find('.editable-item').editable();
|
||||
$("#bom-table").find('.editable-part').editable({
|
||||
source: [
|
||||
// Dummy data (for now)
|
||||
{value: 1, text: 'Apple'},
|
||||
{value: 2, text: 'Banana'},
|
||||
{value: 3, text: 'Carrot'},
|
||||
]
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@ -25,16 +25,9 @@ function renderEditable(text, options) {
|
||||
* _empty - placeholder text to show when field is empty
|
||||
* _class - html class (default = 'editable-item')
|
||||
* _id - id
|
||||
*
|
||||
* And some further parameters:
|
||||
* enabled - if 1 or true, render the editable.
|
||||
* otherwise, just return the supplied text
|
||||
* _value - Initial value of the editable (default = blank)
|
||||
*/
|
||||
|
||||
if (!options.enabled) {
|
||||
return text;
|
||||
}
|
||||
|
||||
// Default values (if not supplied)
|
||||
var _type = options._type || 'text';
|
||||
var _class = options._class || 'editable-item';
|
||||
@ -53,6 +46,10 @@ function renderEditable(text, options) {
|
||||
html = html + " data-title='" + options._title + "'";
|
||||
}
|
||||
|
||||
if (options._value) {
|
||||
html = html + " data-value='" + options._value + "'";
|
||||
}
|
||||
|
||||
if (options._empty) {
|
||||
html = html + " data-placeholder='" + options._empty + "'";
|
||||
html = html + " data-emptytext='" + options._empty + "'";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user