mirror of
https://github.com/inventree/InvenTree.git
synced 2025-04-29 20:16:44 +00:00
298 lines
8.5 KiB
JavaScript
298 lines
8.5 KiB
JavaScript
/* globals
|
|
*/
|
|
|
|
/* exported
|
|
activatePanel,
|
|
addSidebarHeader,
|
|
addSidebarItem,
|
|
addSidebarLink,
|
|
enableBreadcrumbTree,
|
|
enableSidebar,
|
|
onPanelLoad,
|
|
*/
|
|
|
|
/*
|
|
* Activate (display) the selected panel
|
|
*/
|
|
function activatePanel(label, panel_name, options={}) {
|
|
|
|
// First, cause any other panels to "fade out"
|
|
$('.panel-visible').hide();
|
|
$('.panel-visible').removeClass('panel-visible');
|
|
|
|
// Find the target panel
|
|
var panel = `#panel-${panel_name}`;
|
|
var select = `#select-${panel_name}`;
|
|
|
|
// Check that the selected panel (and select) exist
|
|
if ($(panel).length && $(select).length) {
|
|
// Yep, both are displayed
|
|
} else {
|
|
// Either the select or the panel are not displayed!
|
|
// Iterate through the available 'select' elements until one matches
|
|
panel_name = null;
|
|
|
|
$('.sidebar-selector').each(function() {
|
|
var name = $(this).attr('id').replace('select-', '');
|
|
|
|
if ($(`#panel-${name}`).length && (panel_name == null)) {
|
|
panel_name = name;
|
|
}
|
|
|
|
panel = `#panel-${panel_name}`;
|
|
select = `#select-${panel_name}`;
|
|
});
|
|
}
|
|
|
|
// Save the selected panel
|
|
localStorage.setItem(`inventree-selected-panel-${label}`, panel_name);
|
|
|
|
// Display the panel
|
|
$(panel).addClass('panel-visible');
|
|
|
|
// Load the data
|
|
$(panel).trigger('fadeInStarted');
|
|
|
|
$(panel).fadeIn(100, function() {
|
|
});
|
|
|
|
// Un-select all selectors
|
|
$('.list-group-item').removeClass('active');
|
|
|
|
// Find the associated selector
|
|
var selector = `#select-${panel_name}`;
|
|
|
|
$(selector).addClass('active');
|
|
}
|
|
|
|
|
|
function onPanelLoad(panel, callback) {
|
|
// One-time callback when a panel is first displayed
|
|
// Used to implement lazy-loading, rather than firing
|
|
// multiple AJAX queries when the page is first loaded.
|
|
|
|
var panelId = `#panel-${panel}`;
|
|
|
|
$(panelId).on('fadeInStarted', function() {
|
|
|
|
// Trigger the callback
|
|
callback();
|
|
|
|
// Turn off the event
|
|
$(panelId).off('fadeInStarted');
|
|
|
|
});
|
|
}
|
|
|
|
|
|
/**
|
|
* Enable support for sidebar on this page
|
|
*/
|
|
function enableSidebar(label, options={}) {
|
|
|
|
// Enable callbacks for sidebar buttons
|
|
$('.sidebar-selector').click(function() {
|
|
var el = $(this);
|
|
|
|
// Find the matching panel element to display
|
|
var panel_name = el.attr('id').replace('select-', '');
|
|
|
|
activatePanel(label, panel_name, options);
|
|
});
|
|
|
|
/* Look for a "default" panel to initialize for this page
|
|
*
|
|
* - First preference = URL parameter e.g. ?display=part-stock
|
|
* - Second preference = local storage
|
|
* - Third preference = default
|
|
*/
|
|
|
|
var selected_panel = $.urlParam('display') || localStorage.getItem(`inventree-selected-panel-${label}`) || options.default;
|
|
|
|
if (selected_panel) {
|
|
activatePanel(label, selected_panel);
|
|
} else {
|
|
// Find the "first" available panel (according to the sidebar)
|
|
var selector = $('.sidebar-selector').first();
|
|
|
|
if (selector.exists()) {
|
|
var panel_name = selector.attr('id').replace('select-', '');
|
|
activatePanel(label, panel_name);
|
|
}
|
|
}
|
|
|
|
if (options.hide_toggle) {
|
|
// Hide the toggle button if specified
|
|
$('#sidebar-toggle').remove();
|
|
} else {
|
|
$('#sidebar-toggle').click(function() {
|
|
// Add callback to "collapse" and "expand" the sidebar
|
|
|
|
// By default, the menu is "expanded"
|
|
var state = localStorage.getItem(`inventree-menu-state-${label}`) || 'expanded';
|
|
|
|
// We wish to "toggle" the state!
|
|
setSidebarState(label, state == 'expanded' ? 'collapsed' : 'expanded');
|
|
});
|
|
}
|
|
|
|
// Set the initial state (default = expanded)
|
|
var state = localStorage.getItem(`inventree-menu-state-${label}`) || 'expanded';
|
|
|
|
setSidebarState(label, state);
|
|
|
|
// Finally, show the sidebar
|
|
$('#sidebar').show();
|
|
|
|
}
|
|
|
|
/**
|
|
* Enable support for breadcrumb tree navigation on this page
|
|
*/
|
|
function enableBreadcrumbTree(options) {
|
|
|
|
var label = options.label;
|
|
|
|
if (!label) {
|
|
console.log('ERROR: enableBreadcrumbTree called without supplying label');
|
|
return;
|
|
}
|
|
|
|
var filters = options.filters || {};
|
|
|
|
inventreeGet(
|
|
options.url,
|
|
filters,
|
|
{
|
|
success: function(data) {
|
|
|
|
// Data are returned from the InvenTree server as a flattened list;
|
|
// We need to convert this into a tree structure
|
|
|
|
var nodes = {};
|
|
var roots = [];
|
|
var node = null;
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
node = data[i];
|
|
nodes[node.pk] = node;
|
|
node.selectable = false;
|
|
|
|
if (options.processNode) {
|
|
node = options.processNode(node);
|
|
}
|
|
|
|
node.state = {
|
|
expanded: node.pk == options.selected,
|
|
selected: node.pk == options.selected,
|
|
};
|
|
}
|
|
|
|
for (var i = 0; i < data.length; i++) {
|
|
node = data[i];
|
|
|
|
if (node.parent != null) {
|
|
if (nodes[node.parent].nodes) {
|
|
nodes[node.parent].nodes.push(node);
|
|
} else {
|
|
nodes[node.parent].nodes = [node];
|
|
}
|
|
|
|
if (node.state.expanded) {
|
|
while (node.parent != null) {
|
|
nodes[node.parent].state.expanded = true;
|
|
node = nodes[node.parent];
|
|
}
|
|
}
|
|
|
|
} else {
|
|
roots.push(node);
|
|
}
|
|
}
|
|
|
|
$('#breadcrumb-tree').treeview({
|
|
data: roots,
|
|
showTags: true,
|
|
enableLinks: true,
|
|
expandIcon: 'fas fa-chevron-right',
|
|
collapseIcon: 'fa fa-chevron-down',
|
|
});
|
|
|
|
}
|
|
}
|
|
);
|
|
|
|
$('#breadcrumb-tree-toggle').click(function() {
|
|
// Add callback to "collapse" and "expand" the sidebar
|
|
|
|
// Toggle treeview visibilty
|
|
$('#breadcrumb-tree-collapse').toggle();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
/*
|
|
* Set the "toggle" state of the sidebar
|
|
*/
|
|
function setSidebarState(label, state) {
|
|
|
|
if (state == 'collapsed') {
|
|
$('.sidebar-item-text').animate({
|
|
'opacity': 0.0,
|
|
'font-size': '0%',
|
|
}, 100, function() {
|
|
$('.sidebar-item-text').hide();
|
|
$('#sidebar-toggle-icon').removeClass('fa-chevron-left').addClass('fa-chevron-right');
|
|
});
|
|
} else {
|
|
$('.sidebar-item-text').show();
|
|
$('#sidebar-toggle-icon').removeClass('fa-chevron-right').addClass('fa-chevron-left');
|
|
$('.sidebar-item-text').animate({
|
|
'opacity': 1.0,
|
|
'font-size': '100%',
|
|
}, 100);
|
|
}
|
|
|
|
// Save the state of this sidebar
|
|
localStorage.setItem(`inventree-menu-state-${label}`, state);
|
|
}
|
|
|
|
|
|
/*
|
|
* Dynamically construct and insert a sidebar item into the sidebar at runtime.
|
|
* This mirrors the templated code in "sidebar_item.html"
|
|
*/
|
|
function addSidebarItem(options={}) {
|
|
|
|
var html = `
|
|
<a href='#' id='select-${options.label}' title='${options.text}' class='list-group-item sidebar-list-group-item border-end d-inline-block text-truncate sidebar-selector' data-bs-parent='#sidebar'>
|
|
<i class='bi bi-bootstrap'></i>
|
|
${options.content_before || ''}
|
|
<span class='sidebar-item-icon fas ${options.icon}'></span>
|
|
<span class='sidebar-item-text' style='display: none;'>${options.text}</span>
|
|
${options.content_after || ''}
|
|
</a>
|
|
`;
|
|
|
|
$('#sidebar-list-group').append(html);
|
|
}
|
|
|
|
/*
|
|
* Dynamicall construct and insert a sidebar header into the sidebar at runtime
|
|
* This mirrors the templated code in "sidebar_header.html"
|
|
*/
|
|
function addSidebarHeader(options={}) {
|
|
|
|
var html = `
|
|
<span title='${options.text}' class="list-group-item sidebar-list-group-item border-end d-inline-block text-truncate" data-bs-parent="#sidebar">
|
|
<h6>
|
|
<i class="bi bi-bootstrap"></i>
|
|
<span class='sidebar-item-text' style='display: none;'>${options.text}</span>
|
|
</h6>
|
|
</span>
|
|
`;
|
|
|
|
$('#sidebar-list-group').append(html);
|
|
}
|