mirror of
https://github.com/inventree/InvenTree
synced 2024-08-30 18:33:04 +00:00
Enable 'tree view' for build order table (#3070)
* Enable 'tree view' for build order table * Ensure we pass locale code to the build table * Adjust button class based on current context * Fix display of 'child builds' table on build page * Force a rebuild of the entire table when the filters are refreshed * Refactor PurchaseOrder table also * Refactor existing SalesOrder table also * JS linting
This commit is contained in:
Oliver
GitHub
parent
2d1776a151
commit
643df4761d
@ -355,8 +355,9 @@ onPanelLoad('completed', function() {
|
||||
|
||||
onPanelLoad('children', function() {
|
||||
loadBuildTable($('#sub-build-table'), {
|
||||
url: '{% url "api-build-list" %}',
|
||||
locale: '{{ request.LANGUAGE_CODE }}',
|
||||
filterTarget: "#filter-list-sub-build",
|
||||
parentBuild: {{ build.pk }},
|
||||
params: {
|
||||
ancestor: {{ build.pk }},
|
||||
}
|
||||
|
||||
@ -40,13 +40,6 @@
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
<!-- Buttons to switch between list and calendar views -->
|
||||
<button class='btn btn-outline-secondary' type='button' id='view-calendar' title='{% trans "Display calendar view" %}'>
|
||||
<span class='fas fa-calendar-alt'></span>
|
||||
</button>
|
||||
<button class='btn btn-outline-secondary' type='button' id='view-list' title='{% trans "Display list view" %}'>
|
||||
<span class='fas fa-th-list'></span>
|
||||
</button>
|
||||
{% include "filter_list.html" with id="build" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -54,133 +47,19 @@
|
||||
|
||||
<table class='table table-striped table-condensed' id='build-table' data-toolbar='#button-toolbar'>
|
||||
</table>
|
||||
|
||||
<div id='build-order-calendar'></div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block js_load %}
|
||||
{{ block.super }}
|
||||
|
||||
<script type='text/javascript'>
|
||||
function loadOrderEvents(calendar) {
|
||||
|
||||
var start = startDate(calendar);
|
||||
var end = endDate(calendar);
|
||||
|
||||
clearEvents(calendar);
|
||||
|
||||
// Request build orders from the server within specified date range
|
||||
inventreeGet(
|
||||
'{% url "api-build-list" %}',
|
||||
{
|
||||
min_date: start,
|
||||
max_date: end,
|
||||
part_detail: true,
|
||||
},
|
||||
{
|
||||
success: function(response) {
|
||||
var prefix = global_settings.BUILDORDER_REFERENCE_PREFIX;
|
||||
|
||||
for (var idx = 0; idx < response.length; idx++) {
|
||||
|
||||
var order = response[idx];
|
||||
|
||||
var date = order.creation_date;
|
||||
|
||||
if (order.completion_date) {
|
||||
date = order.completion_date;
|
||||
} else if (order.target_date) {
|
||||
date = order.target_date;
|
||||
}
|
||||
|
||||
var title = `${prefix}${order.reference}`; //- ${order.quantity} x ${order.part_detail.name}`;
|
||||
|
||||
var color = '#4c68f5';
|
||||
|
||||
if (order.completed) {
|
||||
color = '#25c234';
|
||||
} else if (order.overdue) {
|
||||
color = '#c22525';
|
||||
}
|
||||
|
||||
var event = {
|
||||
title: title,
|
||||
start: date,
|
||||
end: date,
|
||||
url: `/build/${order.pk}/`,
|
||||
backgroundColor: color,
|
||||
};
|
||||
|
||||
calendar.addEvent(event);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
var calendar = null;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var el = document.getElementById('build-order-calendar');
|
||||
|
||||
calendar = new FullCalendar.Calendar(el, {
|
||||
initialView: 'dayGridMonth',
|
||||
nowIndicator: true,
|
||||
aspectRatio: 2.5,
|
||||
locale: '{{request.LANGUAGE_CODE}}',
|
||||
datesSet: function() {
|
||||
loadOrderEvents(calendar);
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
});
|
||||
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block js_ready %}
|
||||
{{ block.super }}
|
||||
|
||||
$('#build-order-calendar').hide();
|
||||
$('#view-list').hide();
|
||||
|
||||
$('#view-calendar').click(function() {
|
||||
// Hide the list view, show the calendar view
|
||||
$("#build-table").hide();
|
||||
$("#view-calendar").hide();
|
||||
$(".fixed-table-pagination").hide();
|
||||
$(".columns-right").hide();
|
||||
$(".search").hide();
|
||||
|
||||
$("#build-order-calendar").show();
|
||||
$("#view-list").show();
|
||||
|
||||
calendar.render();
|
||||
});
|
||||
|
||||
$("#view-list").click(function() {
|
||||
// Hide the calendar view, show the list view
|
||||
$("#build-order-calendar").hide();
|
||||
$("#view-list").hide();
|
||||
|
||||
$(".fixed-table-pagination").show();
|
||||
$(".columns-right").show();
|
||||
$(".search").show();
|
||||
$("#build-table").show();
|
||||
$("#view-calendar").show();
|
||||
});
|
||||
|
||||
$("#collapse-item-active").collapse().show();
|
||||
|
||||
$("#new-build").click(function() {
|
||||
newBuildOrder();
|
||||
});
|
||||
|
||||
loadBuildTable($("#build-table"), {
|
||||
url: "{% url 'api-build-list' %}",
|
||||
locale: '{{ request.LANGUAGE_CODE }}',
|
||||
});
|
||||
|
||||
{% if report_enabled %}
|
||||
|
||||
@ -31,12 +31,6 @@
|
||||
<span class='fas fa-print'></span>
|
||||
</button>
|
||||
{% endif %}
|
||||
<button class='btn btn-outline-secondary' type='button' id='view-calendar' title='{% trans "Display calendar view" %}'>
|
||||
<span class='fas fa-calendar-alt'></span>
|
||||
</button>
|
||||
<button class='btn btn-outline-secondary' type='button' id='view-list' title='{% trans "Display list view" %}'>
|
||||
<span class='fas fa-th-list'></span>
|
||||
</button>
|
||||
{% include "filter_list.html" with id="purchaseorder" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -54,122 +48,11 @@
|
||||
{% block js_load %}
|
||||
{{ block.super }}
|
||||
|
||||
<script type='text/javascript'>
|
||||
|
||||
function loadOrderEvents(calendar) {
|
||||
|
||||
var start = startDate(calendar);
|
||||
var end = endDate(calendar);
|
||||
|
||||
clearEvents(calendar);
|
||||
|
||||
// Request purchase orders from the server within specified date range
|
||||
inventreeGet(
|
||||
'{% url "api-po-list" %}',
|
||||
{
|
||||
supplier_detail: true,
|
||||
min_date: start,
|
||||
max_date: end,
|
||||
},
|
||||
{
|
||||
success: function(response) {
|
||||
var prefix = global_settings.PURCHASEORDER_REFERENCE_PREFIX;
|
||||
|
||||
for (var idx = 0; idx < response.length; idx++) {
|
||||
|
||||
var order = response[idx];
|
||||
|
||||
var date = order.creation_date;
|
||||
|
||||
if (order.complete_date) {
|
||||
date = order.complete_date;
|
||||
} else if (order.target_date) {
|
||||
date = order.target_date;
|
||||
}
|
||||
|
||||
var title = `${prefix}${order.reference} - ${order.supplier_detail.name}`;
|
||||
|
||||
var color = '#4c68f5';
|
||||
|
||||
if (order.complete_date) {
|
||||
color = '#25c235';
|
||||
} else if (order.overdue) {
|
||||
color = '#c22525';
|
||||
} else {
|
||||
color = '#4c68f5';
|
||||
}
|
||||
|
||||
var event = {
|
||||
title: title,
|
||||
start: date,
|
||||
end: date,
|
||||
url: `/order/purchase-order/${order.pk}/`,
|
||||
backgroundColor: color,
|
||||
};
|
||||
|
||||
calendar.addEvent(event);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
var calendar = null;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var el = document.getElementById('purchase-order-calendar');
|
||||
|
||||
calendar = new FullCalendar.Calendar(el, {
|
||||
initialView: 'dayGridMonth',
|
||||
nowIndicator: true,
|
||||
aspectRatio: 2.5,
|
||||
locale: '{{request.LANGUAGE_CODE}}',
|
||||
datesSet: function() {
|
||||
loadOrderEvents(calendar);
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block js_ready %}
|
||||
{{ block.super }}
|
||||
|
||||
$('#purchase-order-calendar').hide();
|
||||
$('#view-list').hide();
|
||||
|
||||
$('#view-calendar').click(function() {
|
||||
// Hide the list view, show the calendar view
|
||||
$("#purchase-order-table").hide();
|
||||
$("#view-calendar").hide();
|
||||
$(".fixed-table-pagination").hide();
|
||||
$(".columns-right").hide();
|
||||
$(".search").hide();
|
||||
$('#filter-list-salesorder').hide();
|
||||
|
||||
$("#purchase-order-calendar").show();
|
||||
$("#view-list").show();
|
||||
|
||||
calendar.render();
|
||||
});
|
||||
|
||||
$("#view-list").click(function() {
|
||||
// Hide the calendar view, show the list view
|
||||
$("#purchase-order-calendar").hide();
|
||||
$("#view-list").hide();
|
||||
|
||||
$(".fixed-table-pagination").show();
|
||||
$(".columns-right").show();
|
||||
$(".search").show();
|
||||
$("#purchase-order-table").show();
|
||||
$('#filter-list-salesorder').show();
|
||||
$("#view-calendar").show();
|
||||
});
|
||||
|
||||
{% if report_enabled %}
|
||||
$("#order-print").click(function() {
|
||||
var rows = getTableData('#purchase-order-table');
|
||||
|
||||
@ -231,7 +231,7 @@
|
||||
});
|
||||
|
||||
loadBuildTable($("#builds-table"), {
|
||||
url: "{% url 'api-build-list' %}",
|
||||
locale: '{{ request.LANGUAGE_CODE }}',
|
||||
params: {
|
||||
sales_order: {{ order.id }},
|
||||
},
|
||||
|
||||
@ -34,12 +34,6 @@
|
||||
<span class='fas fa-print'></span>
|
||||
</button>
|
||||
{% endif %}
|
||||
<button class='btn btn-outline-secondary' type='button' id='view-calendar' title='{% trans "Display calendar view" %}'>
|
||||
<span class='fas fa-calendar-alt'></span>
|
||||
</button>
|
||||
<button class='btn btn-outline-secondary' type='button' id='view-list' title='{% trans "Display list view" %}'>
|
||||
<span class='fas fa-th-list'></span>
|
||||
</button>
|
||||
{% include "filter_list.html" with id="salesorder" %}
|
||||
</div>
|
||||
</div>
|
||||
@ -53,123 +47,9 @@
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block js_load %}
|
||||
{{ block.super }}
|
||||
|
||||
<script type='text/javascript'>
|
||||
|
||||
function loadOrderEvents(calendar) {
|
||||
|
||||
var start = startDate(calendar);
|
||||
var end = endDate(calendar);
|
||||
|
||||
clearEvents(calendar);
|
||||
|
||||
// Request orders from the server within specified date range
|
||||
inventreeGet(
|
||||
'{% url "api-so-list" %}',
|
||||
{
|
||||
customer_detail: true,
|
||||
min_date: start,
|
||||
max_date: end,
|
||||
},
|
||||
{
|
||||
success: function(response) {
|
||||
|
||||
var prefix = global_settings.SALESORDER_REFERENCE_PREFIX;
|
||||
|
||||
for (var idx = 0; idx < response.length; idx++) {
|
||||
var order = response[idx];
|
||||
|
||||
var date = order.creation_date;
|
||||
|
||||
if (order.shipment_date) {
|
||||
date = order.shipment_date;
|
||||
} else if (order.target_date) {
|
||||
date = order.target_date;
|
||||
}
|
||||
|
||||
var title = `${prefix}${order.reference} - ${order.customer_detail.name}`;
|
||||
|
||||
// Default color is blue
|
||||
var color = '#4c68f5';
|
||||
|
||||
// Overdue orders are red
|
||||
if (order.overdue) {
|
||||
color = '#c22525';
|
||||
} else if (order.status == {{ SalesOrderStatus.SHIPPED }}) {
|
||||
color = '#25c235';
|
||||
}
|
||||
|
||||
var event = {
|
||||
title: title,
|
||||
start: date,
|
||||
end: date,
|
||||
url: `/order/sales-order/${order.pk}/`,
|
||||
backgroundColor: color,
|
||||
};
|
||||
|
||||
calendar.addEvent(event);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
var calendar = null;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var calendarEl = document.getElementById('sales-order-calendar');
|
||||
calendar = new FullCalendar.Calendar(calendarEl, {
|
||||
initialView: 'dayGridMonth',
|
||||
nowIndicator: true,
|
||||
aspectRatio: 2.5,
|
||||
locale: '{{request.LANGUAGE_CODE}}',
|
||||
datesSet: function() {
|
||||
loadOrderEvents(calendar);
|
||||
},
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
{% block js_ready %}
|
||||
{{ block.super }}
|
||||
|
||||
$("#sales-order-calendar").hide();
|
||||
$("#view-list").hide();
|
||||
|
||||
$('#view-calendar').click(function() {
|
||||
// Hide the list view, show the calendar view
|
||||
$("#sales-order-table").hide();
|
||||
$("#view-calendar").hide();
|
||||
$(".fixed-table-pagination").hide();
|
||||
$(".columns-right").hide();
|
||||
$(".search").hide();
|
||||
$('#filter-list-salesorder').hide();
|
||||
|
||||
$("#sales-order-calendar").show();
|
||||
$("#view-list").show();
|
||||
|
||||
calendar.render();
|
||||
});
|
||||
|
||||
$("#view-list").click(function() {
|
||||
// Hide the calendar view, show the list view
|
||||
$("#sales-order-calendar").hide();
|
||||
$("#view-list").hide();
|
||||
|
||||
$(".fixed-table-pagination").show();
|
||||
$(".columns-right").show();
|
||||
$(".search").show();
|
||||
$("#sales-order-table").show();
|
||||
$('#filter-list-salesorder').show();
|
||||
$("#view-calendar").show();
|
||||
});
|
||||
|
||||
loadSalesOrderTable("#sales-order-table", {
|
||||
url: "{% url 'api-so-list' %}",
|
||||
});
|
||||
|
||||
@ -514,7 +514,7 @@
|
||||
});
|
||||
|
||||
loadBuildTable($("#build-table"), {
|
||||
url: "{% url 'api-build-list' %}",
|
||||
locale: '{{ request.LANGUAGE_CODE }}',
|
||||
params: {
|
||||
part: {{ part.id }},
|
||||
}
|
||||
|
||||
@ -223,7 +223,7 @@ addHeaderTitle('{% trans "Build Orders" %}');
|
||||
{% if setting_build_pending %}
|
||||
addHeaderAction('build-pending', '{% trans "Build Orders In Progress" %}', 'fa-cogs');
|
||||
loadBuildTable("#table-build-pending", {
|
||||
url: "{% url 'api-build-list' %}",
|
||||
locale: '{{ request.LANGUAGE_CODE }}',
|
||||
params: {
|
||||
active: true,
|
||||
},
|
||||
@ -234,7 +234,7 @@ loadBuildTable("#table-build-pending", {
|
||||
{% if setting_build_overdue %}
|
||||
addHeaderAction('build-overdue', '{% trans "Overdue Build Orders" %}', 'fa-calendar-times');
|
||||
loadBuildTable("#table-build-overdue", {
|
||||
url: "{% url 'api-build-list' %}",
|
||||
locale: '{{ request.LANGUAGE_CODE }}',
|
||||
params: {
|
||||
overdue: true,
|
||||
},
|
||||
|
||||
@ -139,6 +139,7 @@
|
||||
addItem('build-order', '{% trans "Build Orders" %}', 'fa-tools');
|
||||
|
||||
loadBuildTable('#table-build-order', {
|
||||
locale: '{{ request.LANGUAGE_CODE }}',
|
||||
params: {
|
||||
original_search: '{{ query }}',
|
||||
}
|
||||
|
||||
@ -2320,6 +2320,9 @@ function autoAllocateStockToBuild(build_id, bom_items=[], options={}) {
|
||||
*/
|
||||
function loadBuildTable(table, options) {
|
||||
|
||||
// Ensure the table starts in a known state
|
||||
$(table).bootstrapTable('destroy');
|
||||
|
||||
var params = options.params || {};
|
||||
|
||||
var filters = {};
|
||||
@ -2334,23 +2337,105 @@ function loadBuildTable(table, options) {
|
||||
filters[key] = params[key];
|
||||
}
|
||||
|
||||
options.url = options.url || '{% url "api-build-list" %}';
|
||||
|
||||
var filterTarget = options.filterTarget || null;
|
||||
|
||||
setupFilterList('build', table, filterTarget, {download: true});
|
||||
|
||||
// Which display mode to use for the build table?
|
||||
var display_mode = inventreeLoad('build-table-display-mode', 'list');
|
||||
var tree_enable = display_mode == 'tree';
|
||||
|
||||
var loaded_calendar = false;
|
||||
|
||||
// Function for rendering BuildOrder calendar display
|
||||
function buildEvents(calendar) {
|
||||
var start = startDate(calendar);
|
||||
var end = endDate(calendar);
|
||||
|
||||
clearEvents(calendar);
|
||||
|
||||
// Extract current filters from table
|
||||
var table_options = $(table).bootstrapTable('getOptions');
|
||||
var filters = table_options.query_params || {};
|
||||
|
||||
filters.min_date = start;
|
||||
filters.max_date = end;
|
||||
filters.part_detail = true;
|
||||
|
||||
// Request build orders from the server within specified date range
|
||||
inventreeGet(
|
||||
'{% url "api-build-list" %}',
|
||||
filters,
|
||||
{
|
||||
success: function(response) {
|
||||
var prefix = global_settings.BUILDORDER_REFERENCE_PREFIX;
|
||||
|
||||
for (var idx = 0; idx < response.length; idx++) {
|
||||
|
||||
var order = response[idx];
|
||||
|
||||
var date = order.creation_date;
|
||||
|
||||
if (order.completion_date) {
|
||||
date = order.completion_date;
|
||||
} else if (order.target_date) {
|
||||
date = order.target_date;
|
||||
}
|
||||
|
||||
var title = `${prefix}${order.reference}`;
|
||||
|
||||
var color = '#4c68f5';
|
||||
|
||||
if (order.completed) {
|
||||
color = '#25c234';
|
||||
} else if (order.overdue) {
|
||||
color = '#c22525';
|
||||
}
|
||||
|
||||
var event = {
|
||||
title: title,
|
||||
start: date,
|
||||
end: date,
|
||||
url: `/build/${order.pk}/`,
|
||||
backgroundColor: color,
|
||||
};
|
||||
|
||||
calendar.addEvent(event);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
$(table).inventreeTable({
|
||||
method: 'get',
|
||||
formatNoMatches: function() {
|
||||
return '{% trans "No builds matching query" %}';
|
||||
},
|
||||
url: options.url,
|
||||
url: '{% url "api-build-list" %}',
|
||||
queryParams: filters,
|
||||
groupBy: false,
|
||||
sidePagination: 'server',
|
||||
name: 'builds',
|
||||
original: params,
|
||||
treeEnable: tree_enable,
|
||||
uniqueId: 'pk',
|
||||
rootParentId: options.parentBuild || null,
|
||||
idField: 'pk',
|
||||
parentIdField: 'parent',
|
||||
treeShowField: tree_enable ? 'reference' : null,
|
||||
showColumns: display_mode == 'list' || display_mode == 'tree',
|
||||
showCustomView: display_mode == 'calendar',
|
||||
showCustomViewButton: false,
|
||||
disablePagination: display_mode == 'calendar',
|
||||
search: display_mode != 'calendar',
|
||||
buttons: constructOrderTableButtons({
|
||||
prefix: 'build',
|
||||
callback: function() {
|
||||
// Force complete reload of the table
|
||||
loadBuildTable(table, options);
|
||||
}
|
||||
}),
|
||||
columns: [
|
||||
{
|
||||
field: 'pk',
|
||||
@ -2477,6 +2562,43 @@ function loadBuildTable(table, options) {
|
||||
}
|
||||
},
|
||||
],
|
||||
customView: function(data) {
|
||||
return `<div id='build-order-calendar'></div>`;
|
||||
},
|
||||
onRefresh: function() {
|
||||
loadBuildTable(table, options);
|
||||
},
|
||||
onLoadSuccess: function() {
|
||||
|
||||
if (tree_enable) {
|
||||
$(table).treegrid({
|
||||
treeColumn: 1,
|
||||
});
|
||||
|
||||
table.treegrid('expandAll');
|
||||
} else if (display_mode == 'calendar') {
|
||||
|
||||
if (!loaded_calendar) {
|
||||
loaded_calendar = true;
|
||||
|
||||
var el = document.getElementById('build-order-calendar');
|
||||
|
||||
calendar = new FullCalendar.Calendar(el, {
|
||||
initialView: 'dayGridMonth',
|
||||
nowIndicator: true,
|
||||
aspectRatio: 2.5,
|
||||
locale: options.locale,
|
||||
datesSet: function() {
|
||||
buildEvents(calendar);
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
} else {
|
||||
calendar.render();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
linkButtonsToSelection(
|
||||
|
||||
@ -1504,7 +1504,8 @@ function removePurchaseOrderLineItem(e) {
|
||||
* Load a table displaying list of purchase orders
|
||||
*/
|
||||
function loadPurchaseOrderTable(table, options) {
|
||||
/* Create a purchase-order table */
|
||||
// Ensure the table starts in a known state
|
||||
$(table).bootstrapTable('destroy');
|
||||
|
||||
options.params = options.params || {};
|
||||
|
||||
@ -1520,6 +1521,71 @@ function loadPurchaseOrderTable(table, options) {
|
||||
|
||||
setupFilterList('purchaseorder', $(table), target, {download: true});
|
||||
|
||||
var display_mode = inventreeLoad('purchaseorder-table-display-mode', 'list');
|
||||
|
||||
// Function for rendering PurchaseOrder calendar display
|
||||
function buildEvents(calendar) {
|
||||
|
||||
var start = startDate(calendar);
|
||||
var end = endDate(calendar);
|
||||
|
||||
clearEvents(calendar);
|
||||
|
||||
// Extract current filters from table
|
||||
var table_options = $(table).bootstrapTable('getOptions');
|
||||
var filters = table_options.query_params || {};
|
||||
|
||||
filters.supplier_detail = true;
|
||||
filters.min_date = start;
|
||||
filters.max_date = end;
|
||||
|
||||
// Request purchase orders from the server within specified date range
|
||||
inventreeGet(
|
||||
'{% url "api-po-list" %}',
|
||||
filters,
|
||||
{
|
||||
success: function(response) {
|
||||
var prefix = global_settings.PURCHASEORDER_REFERENCE_PREFIX;
|
||||
|
||||
for (var idx = 0; idx < response.length; idx++) {
|
||||
|
||||
var order = response[idx];
|
||||
|
||||
var date = order.creation_date;
|
||||
|
||||
if (order.complete_date) {
|
||||
date = order.complete_date;
|
||||
} else if (order.target_date) {
|
||||
date = order.target_date;
|
||||
}
|
||||
|
||||
var title = `${prefix}${order.reference} - ${order.supplier_detail.name}`;
|
||||
|
||||
var color = '#4c68f5';
|
||||
|
||||
if (order.complete_date) {
|
||||
color = '#25c235';
|
||||
} else if (order.overdue) {
|
||||
color = '#c22525';
|
||||
} else {
|
||||
color = '#4c68f5';
|
||||
}
|
||||
|
||||
var event = {
|
||||
title: title,
|
||||
start: date,
|
||||
end: date,
|
||||
url: `/order/purchase-order/${order.pk}/`,
|
||||
backgroundColor: color,
|
||||
};
|
||||
|
||||
calendar.addEvent(event);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
$(table).inventreeTable({
|
||||
url: '{% url "api-po-list" %}',
|
||||
queryParams: filters,
|
||||
@ -1527,9 +1593,22 @@ function loadPurchaseOrderTable(table, options) {
|
||||
groupBy: false,
|
||||
sidePagination: 'server',
|
||||
original: options.params,
|
||||
showColumns: display_mode == 'list',
|
||||
disablePagination: display_mode == 'calendar',
|
||||
showCustomViewButton: false,
|
||||
showCustomView: display_mode == 'calendar',
|
||||
search: display_mode != 'calendar',
|
||||
formatNoMatches: function() {
|
||||
return '{% trans "No purchase orders found" %}';
|
||||
},
|
||||
buttons: constructOrderTableButtons({
|
||||
prefix: 'purchaseorder',
|
||||
disableTreeView: true,
|
||||
callback: function() {
|
||||
// Reload the entire table
|
||||
loadPurchaseOrderTable(table, options);
|
||||
}
|
||||
}),
|
||||
columns: [
|
||||
{
|
||||
title: '',
|
||||
@ -1629,6 +1708,30 @@ function loadPurchaseOrderTable(table, options) {
|
||||
}
|
||||
},
|
||||
],
|
||||
customView: function(data) {
|
||||
return `<div id='purchase-order-calendar'></div>`;
|
||||
},
|
||||
onRefresh: function() {
|
||||
loadPurchaseOrderTable(table, options);
|
||||
},
|
||||
onLoadSuccess: function() {
|
||||
|
||||
if (display_mode == 'calendar') {
|
||||
var el = document.getElementById('purchase-order-calendar');
|
||||
|
||||
calendar = new FullCalendar.Calendar(el, {
|
||||
initialView: 'dayGridMonth',
|
||||
nowIndicator: true,
|
||||
aspectRatio: 2.5,
|
||||
locale: options.locale,
|
||||
datesSet: function() {
|
||||
buildEvents(calendar);
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -2191,6 +2294,9 @@ function loadPurchaseOrderExtraLineTable(table, options={}) {
|
||||
*/
|
||||
function loadSalesOrderTable(table, options) {
|
||||
|
||||
// Ensure the table starts in a known state
|
||||
$(table).bootstrapTable('destroy');
|
||||
|
||||
options.params = options.params || {};
|
||||
options.params['customer_detail'] = true;
|
||||
|
||||
@ -2206,6 +2312,70 @@ function loadSalesOrderTable(table, options) {
|
||||
|
||||
setupFilterList('salesorder', $(table), target, {download: true});
|
||||
|
||||
var display_mode = inventreeLoad('salesorder-table-display-mode', 'list');
|
||||
|
||||
function buildEvents(calendar) {
|
||||
|
||||
var start = startDate(calendar);
|
||||
var end = endDate(calendar);
|
||||
|
||||
clearEvents(calendar);
|
||||
|
||||
// Extract current filters from table
|
||||
var table_options = $(table).bootstrapTable('getOptions');
|
||||
var filters = table_options.query_params || {};
|
||||
|
||||
filters.customer_detail = true;
|
||||
filters.min_date = start;
|
||||
filters.max_date = end;
|
||||
|
||||
// Request orders from the server within specified date range
|
||||
inventreeGet(
|
||||
'{% url "api-so-list" %}',
|
||||
filters,
|
||||
{
|
||||
success: function(response) {
|
||||
|
||||
var prefix = global_settings.SALESORDER_REFERENCE_PREFIX;
|
||||
|
||||
for (var idx = 0; idx < response.length; idx++) {
|
||||
var order = response[idx];
|
||||
|
||||
var date = order.creation_date;
|
||||
|
||||
if (order.shipment_date) {
|
||||
date = order.shipment_date;
|
||||
} else if (order.target_date) {
|
||||
date = order.target_date;
|
||||
}
|
||||
|
||||
var title = `${prefix}${order.reference} - ${order.customer_detail.name}`;
|
||||
|
||||
// Default color is blue
|
||||
var color = '#4c68f5';
|
||||
|
||||
// Overdue orders are red
|
||||
if (order.overdue) {
|
||||
color = '#c22525';
|
||||
} else if (order.status == {{ SalesOrderStatus.SHIPPED }}) {
|
||||
color = '#25c235';
|
||||
}
|
||||
|
||||
var event = {
|
||||
title: title,
|
||||
start: date,
|
||||
end: date,
|
||||
url: `/order/sales-order/${order.pk}/`,
|
||||
backgroundColor: color,
|
||||
};
|
||||
|
||||
calendar.addEvent(event);
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
$(table).inventreeTable({
|
||||
url: options.url,
|
||||
queryParams: filters,
|
||||
@ -2213,9 +2383,46 @@ function loadSalesOrderTable(table, options) {
|
||||
groupBy: false,
|
||||
sidePagination: 'server',
|
||||
original: options.params,
|
||||
showColums: display_mode != 'calendar',
|
||||
search: display_mode != 'calendar',
|
||||
showCustomViewButton: false,
|
||||
showCustomView: display_mode == 'calendar',
|
||||
disablePagination: display_mode == 'calendar',
|
||||
formatNoMatches: function() {
|
||||
return '{% trans "No sales orders found" %}';
|
||||
},
|
||||
buttons: constructOrderTableButtons({
|
||||
prefix: 'salesorder',
|
||||
disableTreeView: true,
|
||||
callback: function() {
|
||||
// Reload the entire table
|
||||
loadSalesOrderTable(table, options);
|
||||
},
|
||||
}),
|
||||
customView: function(data) {
|
||||
return `<div id='purchase-order-calendar'></div>`;
|
||||
},
|
||||
onRefresh: function() {
|
||||
loadPurchaseOrderTable(table, options);
|
||||
},
|
||||
onLoadSuccess: function() {
|
||||
|
||||
if (display_mode == 'calendar') {
|
||||
var el = document.getElementById('purchase-order-calendar');
|
||||
|
||||
calendar = new FullCalendar.Calendar(el, {
|
||||
initialView: 'dayGridMonth',
|
||||
nowIndicator: true,
|
||||
aspectRatio: 2.5,
|
||||
locale: options.locale,
|
||||
datesSet: function() {
|
||||
buildEvents(calendar);
|
||||
}
|
||||
});
|
||||
|
||||
calendar.render();
|
||||
}
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
title: '',
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
reloadtable,
|
||||
renderLink,
|
||||
reloadTableFilters,
|
||||
constructOrderTableButtons,
|
||||
*/
|
||||
|
||||
/**
|
||||
@ -24,7 +25,80 @@ function reloadtable(table) {
|
||||
|
||||
|
||||
/*
|
||||
* Return the 'selected' data rows from a bootstrap table.
|
||||
* Construct a set of extra buttons to display against a list of orders,
|
||||
* allowing the orders to be displayed in various 'view' modes:
|
||||
*
|
||||
* - Calendar view
|
||||
* - List view
|
||||
* - Tree view
|
||||
*
|
||||
* Options:
|
||||
* - callback: Callback function to be called when one of the buttons is pressed
|
||||
* - prefix: The prefix to use when saving display data to user session
|
||||
* - display: Which button to set as 'active' by default
|
||||
*
|
||||
*/
|
||||
function constructOrderTableButtons(options={}) {
|
||||
|
||||
var display_mode = options.display;
|
||||
|
||||
var key = `${options.prefix || order}-table-display-mode`;
|
||||
|
||||
// If display mode is not provided, look up from session
|
||||
if (!display_mode) {
|
||||
display_mode = inventreeLoad(key, 'list');
|
||||
}
|
||||
|
||||
var idx = 0;
|
||||
var buttons = [];
|
||||
|
||||
function buttonCallback(view_mode) {
|
||||
inventreeSave(key, view_mode);
|
||||
|
||||
if (options.callback) {
|
||||
options.callback(view_mode);
|
||||
}
|
||||
}
|
||||
|
||||
var class_calendar = display_mode == 'calendar' ? 'btn-secondary' : 'btn-outline-secondary';
|
||||
var class_list = display_mode == 'list' ? 'btn-secondary' : 'btn-outline-secondary';
|
||||
var class_tree = display_mode == 'tree' ? 'btn-secondary' : 'btn-outline-secondary';
|
||||
|
||||
// Calendar view button
|
||||
if (!options.disableCalendarView) {
|
||||
buttons.push({
|
||||
html: `<button type='button' name='${idx++}' class='btn ${class_calendar}' title='{% trans "Display calendar view" %}'><span class='fas fa-calendar-alt'></span></button>`,
|
||||
event: function() {
|
||||
buttonCallback('calendar');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// List view button
|
||||
if (!options.disableListView) {
|
||||
buttons.push({
|
||||
html: `<button type='button' name='${idx++}' class='btn ${class_list}' title='{% trans "Display list view" %}'><span class='fas fa-th-list'></span></button>`,
|
||||
event: function() {
|
||||
buttonCallback('list');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Tree view button
|
||||
if (!options.disableTreeView) {
|
||||
buttons.push({
|
||||
html: `<button type='button' name='${idx++}' class='btn ${class_tree}' title='{% trans "Display tree view" %}'><span class='fas fa-sitemap'></span></button>`,
|
||||
event: function() {
|
||||
buttonCallback('tree');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return buttons;
|
||||
}
|
||||
|
||||
|
||||
/* Return the 'selected' data rows from a bootstrap table.
|
||||
* If allowEmpty = false, and the returned dataset is empty,
|
||||
* then instead try to return *all* the data
|
||||
*/
|
||||
|
||||
Loading…
Reference in New Issue
Block a user