From 9e7d1710dbd3005c9f889f9b269c1592f8c711a8 Mon Sep 17 00:00:00 2001 From: Oliver Date: Fri, 25 Jun 2021 13:23:29 +1000 Subject: [PATCH] Fixes for select2 rendering issues --- InvenTree/InvenTree/static/css/inventree.css | 12 ++++ InvenTree/templates/js/forms.js | 74 +++++++++++--------- InvenTree/templates/modals.html | 8 +-- 3 files changed, 55 insertions(+), 39 deletions(-) diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css index eed6c6ad21..573f966a41 100644 --- a/InvenTree/InvenTree/static/css/inventree.css +++ b/InvenTree/InvenTree/static/css/inventree.css @@ -960,4 +960,16 @@ input[type="date"].form-control, input[type="time"].form-control, input[type="da .sidebar-icon { min-width: 19px; +} + +.select2-close-mask { + z-index: 99999; +} + +.select2-dropdown { + z-index: 99998; +} + +.select2-container { + width: 100%; } \ No newline at end of file diff --git a/InvenTree/templates/js/forms.js b/InvenTree/templates/js/forms.js index 8f1b04241a..036928616c 100644 --- a/InvenTree/templates/js/forms.js +++ b/InvenTree/templates/js/forms.js @@ -316,6 +316,11 @@ function constructFormBody(url, fields, options={}) { attachToggle(modal); // attachSelect(modal); + //$(modal + ' .select').select2(); + + $(modal + ' .select2-container').addClass('select-full-width'); + $(modal + ' .select2-container').css('width', '100%'); + modalShowSubmitButton(modal, true); } @@ -341,22 +346,23 @@ function initializeRelatedFields(modal, url, fields, options) { // Find the select element and attach a select2 to it var select = $(modal).find(`#id_${name}`); + console.log('modal:', modal); + select.select2({ ajax: { url: field.api_url, dataType: 'json', dropdownParent: $(modal), dropdownAutoWidth: false, - matcher: partialMatcher, + // matcher: partialMatcher, data: function(params) { // Re-format search term into InvenTree API style - console.log('params;', params); return { search: params.term, }; }, processResults: function(data) { - + // Convert the returned InvenTree data into select2-friendly format var rows = []; // Only ever show the first x items @@ -367,53 +373,51 @@ function initializeRelatedFields(modal, url, fields, options) { row.id = row.id || row.pk; // TODO: Fix me? - row.text = `This is ${url}/${row.id}/`; + row.text = `This is ${field.api_url}${row.id}/`; rows.push(row); } - console.log(rows); - // Ref: https://select2.org/data-sources/formats var results = { results: rows, }; return results; + }, + templateResult: function(item, container) { + // Custom formatting for the item + console.log("templateResult:", item); + if (field.model) { + // If the 'model' is specified, hand it off to the custom model render + return renderModelData(field.model, item, field, options); + } else { + // Simply render the 'text' parameter + return item.text; + } } } }); - - - - //console.log('select:', select); - - /* - $.ajax({ - url: url, - type: 'GET', - contentType: 'application/json', - dataType: 'json', - success: function(response) { - - // Create a new ' - response.forEach(function(item) { - - }) - - }, - error: function(request, status, error) { - // TODO: Handle error - console.log(`ERROR in initializeRelatedFields at URL '${url}'`); - } - }) - */ } +} - // Fix some styling issues - // TODO: Push this off to CSS! - $(modal + ' .select2-container').addClass('select-full-width'); - $(modal + ' .select2-container').css('width', '100%'); + +/* + * Render a "foreign key" model reference in a select2 instance. + * Allows custom rendering with access to the entire serialized object. + * + * arguments: + * - model: The name of the InvenTree model e.g. 'stockitem' + * - data: The JSON data representation of the modal instance (GET request) + * - parameters: The field definition (OPTIONS) request + * - options: Other options provided at time of modal creation by the client + */ +function renderModelData(model, data, paramaters, options) { + + console.log(model, '->', data); + + // TODO: Implement? + return data.text; } diff --git a/InvenTree/templates/modals.html b/InvenTree/templates/modals.html index e0cae3e580..e2bd44554c 100644 --- a/InvenTree/templates/modals.html +++ b/InvenTree/templates/modals.html @@ -7,7 +7,7 @@ -