inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-07-11 23:44:14 +00:00
Code Activity

Start of custom rendering support based on model

Browse Source
This commit is contained in:
Oliver
2021-06-25 13:58:36 +10:00
parent 4cf69a5a4c
commit d411728be6
1 changed files with 102 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
InvenTree/templates/js/forms.js
View File

@ -343,71 +343,91 @@ function initializeRelatedFields(modal, url, fields, options) {
continue; continue;
} }
// Find the select element and attach a select2 to it initializeRelatedField(modal, name, field, options);
var select = $(modal).find(`#id_${name}`); }
}
// TODO: Add 'placeholder' support for entry select2 fields
// TODO: Add 'pagination' support for the query /*
* Initializea single related-field
select.select2({ *
ajax: { * argument:
url: field.api_url, * - modal: DOM identifier for the modal window
dataType: 'json', * - name: name of the field e.g. 'location'
allowClear: !field.required, // Allow non required fields to be cleared * - field: Field definition from the OPTIONS request
dropdownParent: $(modal), * - options: Original options object provided by the client
dropdownAutoWidth: false, */
delay: 250, function initializeRelatedField(modal, name, field, options) {
cache: true,
// matcher: partialMatcher, // Find the select element and attach a select2 to it
data: function(params) { var select = $(modal).find(`#id_${name}`);
// Re-format search term into InvenTree API style
return { // TODO: Add 'placeholder' support for entry select2 fields
search: params.term,
}; // TODO: Add 'pagination' support for the query
},
processResults: function(data) { select.select2({
// Convert the returned InvenTree data into select2-friendly format ajax: {
var rows = []; url: field.api_url,
dataType: 'json',
// Only ever show the first x items allowClear: !field.required, // Allow non required fields to be cleared
for (var idx = 0; idx < data.length && idx < 50; idx++) { dropdownParent: $(modal),
var row = data[idx]; dropdownAutoWidth: false,
delay: 250,
// Reformat to match select2 requirements cache: true,
row.id = row.id || row.pk; // matcher: partialMatcher,
data: function(params) {
// TODO: Fix me? // Re-format search term into InvenTree API style
row.text = `This is ${field.api_url}${row.id}/`; return {
search: params.term,
rows.push(row); };
}
// Ref: https://select2.org/data-sources/formats
var results = {
results: rows,
};
return results;
},
},
templateResult: function(item, container) {
console.log('templateResult:', item);
return item.text;
}, },
templateSelection: function(item, container) { processResults: function(data) {
// Custom formatting for the item // Convert the returned InvenTree data into select2-friendly format
console.log("templateSelection:", item); var rows = [];
if (field.model) {
// If the 'model' is specified, hand it off to the custom model render // Only ever show the first x items
return renderModelData(field.model, item, field, options); for (var idx = 0; idx < data.length && idx < 50; idx++) {
} else { var row = data[idx];
// Simply render the 'text' parameter
return item.text; // Reformat to match select2 requirements
row.id = row.id || row.pk;
// TODO: Fix me?
row.text = `This is ${field.api_url}${row.id}/`;
rows.push(row);
} }
// Ref: https://select2.org/data-sources/formats
var results = {
results: rows,
};
return results;
},
},
templateResult: function(item, container) {
// Custom formatting for the search results
if (field.model) {
// If the 'model' is specified, hand it off to the custom model render
return renderModelData(name, field.model, item, field, options);
} else {
// Simply render the 'text' parameter
return item.text;
} }
}); },
} templateSelection: function(item, container) {
// Custom formatting for selected item
if (field.model) {
// If the 'model' is specified, hand it off to the custom model render
return renderModelData(name, field.model, item, field, options);
} else {
// Simply render the 'text' parameter
return item.text;
}
}
});
} }
@ -416,17 +436,33 @@ function initializeRelatedFields(modal, url, fields, options) {
* Allows custom rendering with access to the entire serialized object. * Allows custom rendering with access to the entire serialized object.
* *
* arguments: * arguments:
* - name: The name of the field e.g. 'location'
* - model: The name of the InvenTree model e.g. 'stockitem' * - model: The name of the InvenTree model e.g. 'stockitem'
* - data: The JSON data representation of the modal instance (GET request) * - data: The JSON data representation of the modal instance (GET request)
* - parameters: The field definition (OPTIONS) request * - parameters: The field definition (OPTIONS) request
* - options: Other options provided at time of modal creation by the client * - options: Other options provided at time of modal creation by the client
*/ */
function renderModelData(model, data, paramaters, options) { function renderModelData(name, model, data, paramaters, options) {
// TODO: Implement this function for various models
console.log(model, '->', data); var html = null;
switch (model) {
case 'company':
html = `<span>${data.name}</span> - <i>${data.description}</i>`;
default:
break;
}
// TODO: Implement? if (html != null) {
return data.text; // Render HTML to an object
var $state = $(html);
return $state;
} else {
// Simple text rendering
return data.text;
}
} }