Merge pull request #25872 from nextchamp-saqib/fix-pos-broken-img

fix(pos): rendering of broken image on pos
This commit is contained in:
Deepesh Garg 2021-05-29 17:28:03 +05:30 committed by GitHub
commit 5483f21fe7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 2 deletions

View File

@ -636,13 +636,23 @@ erpnext.PointOfSale.ItemCart = class {
function get_item_image_html() { function get_item_image_html() {
const { image, item_name } = item_data; const { image, item_name } = item_data;
if (image) { if (image) {
return `<div class="item-image"><img src="${image}" alt="${image}""></div>`; return `
<div class="item-image">
<img
onerror="cur_pos.cart.handle_broken_image(this)"
src="${image}" alt="${frappe.get_abbr(item_name)}"">
</div>`;
} else { } else {
return `<div class="item-image item-abbr">${frappe.get_abbr(item_name)}</div>`; return `<div class="item-image item-abbr">${frappe.get_abbr(item_name)}</div>`;
} }
} }
} }
handle_broken_image($img) {
const item_abbr = $($img).attr('alt');
$($img).parent().replaceWith(`<div class="item-image item-abbr">${item_abbr}</div>`);
}
scroll_to_item($item) { scroll_to_item($item) {
if ($item.length === 0) return; if ($item.length === 0) return;
const scrollTop = $item.offset().top - this.$cart_items_wrapper.offset().top + this.$cart_items_wrapper.scrollTop(); const scrollTop = $item.offset().top - this.$cart_items_wrapper.offset().top + this.$cart_items_wrapper.scrollTop();

View File

@ -94,7 +94,11 @@ erpnext.PointOfSale.ItemSelector = class {
<span class="indicator-pill whitespace-nowrap ${indicator_color}">${qty_to_display}</span> <span class="indicator-pill whitespace-nowrap ${indicator_color}">${qty_to_display}</span>
</div> </div>
<div class="flex items-center justify-center h-32 border-b-grey text-6xl text-grey-100"> <div class="flex items-center justify-center h-32 border-b-grey text-6xl text-grey-100">
<img class="h-full" src="${item_image}" alt="${frappe.get_abbr(item.item_name)}" style="object-fit: cover;"> <img
onerror="cur_pos.item_selector.handle_broken_image(this)"
class="h-full" src="${item_image}"
alt="${frappe.get_abbr(item.item_name)}"
style="object-fit: cover;">
</div>`; </div>`;
} else { } else {
return `<div class="item-qty-pill"> return `<div class="item-qty-pill">
@ -122,6 +126,11 @@ erpnext.PointOfSale.ItemSelector = class {
); );
} }
handle_broken_image($img) {
const item_abbr = $($img).attr('alt');
$($img).parent().replaceWith(`<div class="item-display abbr">${item_abbr}</div>`);
}
make_search_bar() { make_search_bar() {
const me = this; const me = this;
const doc = me.events.get_frm().doc; const doc = me.events.get_frm().doc;