Add "helpers.js" for common functions

InvenTree/InvenTree/urls.py

@@ -111,6 +111,7 @@ translated_javascript_urls = [
     url(r'^company.js', DynamicJsView.as_view(template_name='js/translated/company.js'), name='company.js'),
     url(r'^filters.js', DynamicJsView.as_view(template_name='js/translated/filters.js'), name='filters.js'),
     url(r'^forms.js', DynamicJsView.as_view(template_name='js/translated/forms.js'), name='forms.js'),
+    url(r'^helpers.js', DynamicJsView.as_view(template_name='js/translated/helpers.js'), name='helpers.js'),
     url(r'^label.js', DynamicJsView.as_view(template_name='js/translated/label.js'), name='label.js'),
     url(r'^model_renderers.js', DynamicJsView.as_view(template_name='js/translated/model_renderers.js'), name='model_renderers.js'),
     url(r'^modals.js', DynamicJsView.as_view(template_name='js/translated/modals.js'), name='modals.js'),

InvenTree/templates/base.html

@@ -160,6 +160,7 @@
 <script type='text/javascript' src="{% i18n_static 'company.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'filters.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'forms.js' %}"></script>
+<script type='text/javascript' src="{% i18n_static 'helpers.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'label.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'modals.js' %}"></script>
 <script type='text/javascript' src="{% i18n_static 'model_renderers.js' %}"></script>

InvenTree/templates/js/dynamic/inventree.js

@@ -1,6 +1,6 @@
 {% load inventree_extras %}
 
-export function attachClipboard(selector, containerselector, textElement) {
+function attachClipboard(selector, containerselector, textElement) {
     // set container
     if (containerselector){
         containerselector = document.getElementById(containerselector);
@@ -28,7 +28,7 @@ export function attachClipboard(selector, containerselector, textElement) {
 }
 
 
-export function inventreeDocReady() {
+function inventreeDocReady() {
     /* Run this function when the HTML document is loaded.
      * This will be called for every page that extends "base.html"
      */
@@ -132,7 +132,7 @@ export function inventreeDocReady() {
     });
 }
 
-export function isFileTransfer(transfer) {
+function isFileTransfer(transfer) {
     /* Determine if a transfer (e.g. drag-and-drop) is a file transfer 
      */
 
@@ -140,106 +140,7 @@ export function isFileTransfer(transfer) {
 }
 
 
-export function makeIconBadge(icon, title) {
+function enableDragAndDrop(element, url, options) {
-    // Construct an 'icon badge' which floats to the right of an object
-
-    var html = `<span class='fas ${icon} label-right' title='${title}'></span>`;
-
-    return html;
-}
-
-
-export function makeIconButton(icon, cls, pk, title, options={}) {
-    // Construct an 'icon button' using the fontawesome set
-
-    var classes = `btn btn-default btn-glyph ${cls}`;
-
-    var id = `${cls}-${pk}`;
-
-    var html = '';
-
-    var extraProps = '';
-
-    if (options.disabled) {
-        extraProps += "disabled='true' ";
-    }
-
-    html += `<button pk='${pk}' id='${id}' class='${classes}' title='${title}' ${extraProps}>`;
-    html += `<span class='fas ${icon}'></span>`;
-    html += `</button>`;
-
-    return html;
-}
-
-export function makeProgressBar(value, maximum, opts={}) {
-    /*
-     * Render a progessbar!
-     * 
-     * @param value is the current value of the progress bar
-     * @param maximum is the maximum value of the progress bar
-     */
-
-    var options = opts || {};
-
-    value = parseFloat(value);
-
-    var percent = 100;
-
-    // Prevent div-by-zero or null value
-    if (maximum && maximum > 0) {
-        maximum = parseFloat(maximum);
-        percent = parseInt(value / maximum * 100);
-    }
-
-    if (percent > 100) {
-        percent = 100;
-    }
-
-    var extraclass = '';
-
-    if (value > maximum) {
-        extraclass='progress-bar-over';
-    } else if (value < maximum) {
-        extraclass = 'progress-bar-under';
-    }
-
-    var style = options.style || '';
-
-    var text = '';
-
-    if (style == 'percent') {
-        // Display e.g. "50%"
-
-        text = `${percent}%`;
-    } else if (style == 'max') {
-        // Display just the maximum value
-        text = `${maximum}`;
-    } else if (style == 'value') {
-        // Display just the current value
-        text = `${value}`;
-    } else if (style == 'blank') {
-        // No display!
-        text = '';
-    } else {
-        /* Default style
-        * Display e.g. "5 / 10"
-        */
-
-        text = `${value} / ${maximum}`;
-    }
-
-    var id = options.id || 'progress-bar';
-
-    return `
-    <div id='${id}' class='progress'>
-        <div class='progress-bar ${extraclass}' role='progressbar' aria-valuenow='${percent}' aria-valuemin='0' aria-valuemax='100' style='width:${percent}%'></div>
-        <div class='progress-value'>${text}</div>
-    </div>
-    `;
-}
-
-
-export function enableDragAndDrop(element, url, options) {
     /* Enable drag-and-drop file uploading for a given element.
     
     Params:
@@ -296,26 +197,8 @@ export function enableDragAndDrop(element, url, options) {
     });
 }
 
-export function imageHoverIcon(url) {
-    /* Render a small thumbnail icon for an image.
-     * On mouseover, display a full-size version of the image
-     */
 
-    if (!url) {
+function inventreeSave(name, value) {
-        url = '/static/img/blank_image.png';
-    }
-
-    var html = `
-        <a class='hover-icon'>
-            <img class='hover-img-thumb' src='` + url + `'>
-            <img class='hover-img-large' src='` + url + `'>
-        </a>
-        `;
-
-    return html;
-}
-
-export function inventreeSave(name, value) {
     /*
      * Save a key:value pair to local storage
      */
@@ -324,7 +207,7 @@ export function inventreeSave(name, value) {
     localStorage.setItem(key, value);
 }
 
-export function inventreeLoad(name, defaultValue) {
+function inventreeLoad(name, defaultValue) {
     /* 
      * Retrieve a key:value pair from local storage
      */

InvenTree/templates/js/dynamic/settings.js

@@ -2,16 +2,14 @@
 // InvenTree settings
 
 {% user_settings request.user as USER_SETTINGS %}
-
+const user_settings = {
-export const user_settings = {
     {% for key, value in USER_SETTINGS.items %}
     {{ key }}: {% primitive_to_javascript value %},
     {% endfor %}
 };
 
 {% global_settings as GLOBAL_SETTINGS %}
-
+const global_settings = {
-export const global_settings = {
     {% for key, value in GLOBAL_SETTINGS.items %}
     {{ key }}: {% primitive_to_javascript value %},
     {% endfor %}

InvenTree/templates/js/translated/helpers.js

@@ -0,0 +1,158 @@
+/*
+ * A set of simple helper functions 
+ */
+
+
+function blankImage() {
+    return `/static/img/blank_image.png`;
+}
+
+/* Render a small thumbnail icon for an image.
+ * On mouseover, display a full-size version of the image
+ */
+function imageHoverIcon(url) {
+
+    if (!url) {
+        url = blankImage();
+    }
+
+    var html = `
+        <a class='hover-icon'>
+            <img class='hover-img-thumb' src='{url}'>
+            <img class='hover-img-large' src='{url}'>
+        </a>
+        `;
+
+    return html;
+}
+
+
+// Render a select2 thumbnail image
+function select2Thumbnail(image) {
+    if (!image) {
+        image = blankImage();
+    }
+
+    return `<img src='${image}' class='select2-thumbnail'>`;
+}
+
+
+function makeIconBadge(icon, title) {
+    // Construct an 'icon badge' which floats to the right of an object
+
+    var html = `<span class='fas ${icon} label-right' title='${title}'></span>`;
+
+    return html;
+}
+
+
+function makeIconButton(icon, cls, pk, title, options={}) {
+    // Construct an 'icon button' using the fontawesome set
+
+    var classes = `btn btn-default btn-glyph ${cls}`;
+
+    var id = `${cls}-${pk}`;
+
+    var html = '';
+
+    var extraProps = '';
+
+    if (options.disabled) {
+        extraProps += "disabled='true' ";
+    }
+
+    html += `<button pk='${pk}' id='${id}' class='${classes}' title='${title}' ${extraProps}>`;
+    html += `<span class='fas ${icon}'></span>`;
+    html += `</button>`;
+
+    return html;
+}
+
+
+/*
+ * Render a progessbar!
+ * 
+ * @param value is the current value of the progress bar
+ * @param maximum is the maximum value of the progress bar
+ */
+function makeProgressBar(value, maximum, opts={}) {
+
+    var options = opts || {};
+
+    value = parseFloat(value);
+
+    var percent = 100;
+
+    // Prevent div-by-zero or null value
+    if (maximum && maximum > 0) {
+        maximum = parseFloat(maximum);
+        percent = parseInt(value / maximum * 100);
+    }
+
+    if (percent > 100) {
+        percent = 100;
+    }
+
+    var extraclass = '';
+
+    if (value > maximum) {
+        extraclass='progress-bar-over';
+    } else if (value < maximum) {
+        extraclass = 'progress-bar-under';
+    }
+
+    var style = options.style || '';
+
+    var text = '';
+
+    if (style == 'percent') {
+        // Display e.g. "50%"
+
+        text = `${percent}%`;
+    } else if (style == 'max') {
+        // Display just the maximum value
+        text = `${maximum}`;
+    } else if (style == 'value') {
+        // Display just the current value
+        text = `${value}`;
+    } else if (style == 'blank') {
+        // No display!
+        text = '';
+    } else {
+        /* Default style
+        * Display e.g. "5 / 10"
+        */
+
+        text = `${value} / ${maximum}`;
+    }
+
+    var id = options.id || 'progress-bar';
+
+    return `
+    <div id='${id}' class='progress'>
+        <div class='progress-bar ${extraclass}' role='progressbar' aria-valuenow='${percent}' aria-valuemin='0' aria-valuemax='100' style='width:${percent}%'></div>
+        <div class='progress-value'>${text}</div>
+    </div>
+    `;
+}
+
+
+function renderLink(text, url, options={}) {
+    if (url === null || url === undefined || url === '') {
+        return text;
+    }
+
+    var max_length = options.max_length || -1;
+
+    // Shorten the displayed length if required
+    if ((max_length > 0) && (text.length > max_length)) {
+        var slice_length = (max_length - 3) / 2;
+
+        var text_start = text.slice(0, slice_length);
+        var text_end = text.slice(-slice_length);
+
+        text = `${text_start}...${text_end}`;
+    }
+
+    return '<a href="' + url + '">' + text + '</a>';
+}

InvenTree/templates/js/translated/table_filters.js

@@ -11,7 +11,7 @@ import { global_settings } from '{% url "settings.js" %}';
 {% include "status_codes.html" with label='salesOrder' options=SalesOrderStatus.list %}
 
 
-export function getAvailableTableFilters(tableKey) {
+function getAvailableTableFilters(tableKey) {
 
     tableKey = tableKey.toLowerCase();
 

InvenTree/templates/js/translated/tables.js

@@ -3,22 +3,22 @@
 import { inventreeLoad, inventreeSave } from '{% url "inventree.js" %}';
 
 
-export function reloadtable(table) {
+function reloadtable(table) {
     $(table).bootstrapTable('refresh');
 }
 
 
-export function editButton(url, text='{% trans "Edit" %}') {
+function editButton(url, text='{% trans "Edit" %}') {
     return "<button class='btn btn-success edit-button btn-sm' type='button' url='" + url + "'>" + text + "</button>";
 }
 
 
-export function deleteButton(url, text='{% trans "Delete" %}') {
+function deleteButton(url, text='{% trans "Delete" %}') {
     return "<button class='btn btn-danger delete-button btn-sm' type='button' url='" + url + "'>" + text + "</button>";
 }
 
 
-export function renderLink(text, url, options={}) {
+function renderLink(text, url, options={}) {
     if (url === null || url === undefined || url === '') {
         return text;
     }
@@ -39,14 +39,14 @@ export function renderLink(text, url, options={}) {
 }
 
 
-export function enableButtons(elements, enabled) {
+function enableButtons(elements, enabled) {
     for (let item of elements) {
         $(item).prop('disabled', !enabled);
     }
 }
 
 
-export function linkButtonsToSelection(table, buttons) {
+function linkButtonsToSelection(table, buttons) {
     /* Link a bootstrap-table object to one or more buttons.
      * The buttons will only be enabled if there is at least one row selected
      */
@@ -74,7 +74,7 @@ function isNumeric(n) {
  * Reload a table which has already been made into a bootstrap table.
  * New filters can be optionally provided, to change the query params.
  */
-export function reloadTableFilters(table, filters) {
+function reloadTableFilters(table, filters) {
 
     // Simply perform a refresh
     if (filters == null) {
@@ -263,7 +263,7 @@ $.fn.inventreeTable = function(options) {
     }
 }
 
-export function customGroupSorter(sortName, sortOrder, sortData) {
+function customGroupSorter(sortName, sortOrder, sortData) {
 
     var order = sortOrder === 'desc' ? -1 : 1;