Improve rendering of "Company" in API form

- Add a thumbnail image
- Refactor select2 thumbnail code

(cherry picked from commit 2df7c520be)
This commit is contained in:
Oliver 2021-07-09 11:14:10 +10:00
parent 19ba9bf93c
commit 40ac1f39e0

View File

@ -1,5 +1,20 @@
{% load i18n %}
function blankImage() {
return `/static/img/blank_image.png`;
}
// Render a select2 thumbnail image
function select2Thumbnail(image) {
if (!image) {
image = blankImage();
}
return `<img src='${image}' class='select2-thumbnail'>`;
}
/*
* This file contains functions for rendering various InvenTree database models,
* in particular for displaying them in modal forms in a 'select2' context.
@ -16,7 +31,9 @@
// Renderer for "Company" model
function renderCompany(name, data, parameters, options) {
var html = `<span>${data.name}</span> - <i>${data.description}</i>`;
var html = select2Thumbnail(data.image);
html += `<span><b>${data.name}</b></span> - <i>${data.description}</i>`;
html += `<span class='float-right'>{% trans "Company ID" %}: ${data.pk}</span>`;
@ -27,11 +44,7 @@ function renderCompany(name, data, parameters, options) {
// Renderer for "StockItem" model
function renderStockItem(name, data, parameters, options) {
var image = data.part_detail.thumbnail || data.part_detail.image;
if (!image) {
image = `/static/img/blank_image.png`;
}
var image = data.part_detail.thumbnail || data.part_detail.image || blankImage();
var html = `<img src='${image}' class='select2-thumbnail'>`;
@ -72,15 +85,13 @@ function renderStockLocation(name, data, parameters, options) {
function renderBuild(name, data, parameters, options) {
var image = '';
var image = null;
if (data.part_detail && data.part_detail.thumbnail) {
image = data.part_detail.thumbnail;
} else {
image = `/static/img/blank_image.png`;
}
var html = `<img src='${image}' class='select2-thumbnail'>`;
var html = select2Thumbnail(image);
html += `<span><b>${data.reference}</b></span> - ${data.quantity} x ${data.part_detail.full_name}`;
html += `<span class='float-right'>{% trans "Build ID" %}: ${data.pk}</span>`;
@ -94,13 +105,7 @@ function renderBuild(name, data, parameters, options) {
// Renderer for "Part" model
function renderPart(name, data, parameters, options) {
var image = data.image;
if (!image) {
image = `/static/img/blank_image.png`;
}
var html = `<img src='${image}' class='select2-thumbnail'>`;
var html = select2Thumbnail(data.image);
html += ` <span>${data.full_name || data.name}</span>`;
@ -131,7 +136,6 @@ function renderOwner(name, data, parameters, options) {
var html = `<span>${data.name}</span>`;
switch (data.label) {
case 'user':
html += `<span class='float-right fas fa-user'></span>`;
@ -177,13 +181,7 @@ function renderPartParameterTemplate(name, data, parameters, options) {
// Rendered for "SupplierPart" model
function renderSupplierPart(name, data, parameters, options) {
var image = data.supplier_detail.image;
if (!image) {
image = `/static/img/blank_image.png`;
}
var html = `<img src='${image}' class='select2-thumbnail'>`;
var html = select2Thumbnail(data.supplier_detail.image);
html += ` <span><b>${data.supplier_detail.name}</b> - ${data.SKU}</span>`;
html += ` - <i>${data.part_detail.full_name}</i>`;