Merge pull request #48845 from diptanilsaha/feat_item_selector_list_view

feat: list view on item selector in pos

erpnext/public/scss/point-of-sale.scss

@@ -113,13 +113,108 @@
 
 		> .items-container {
 			display: grid;
-			grid-template-columns: repeat(4, minmax(0, 1fr));
-			gap: var(--margin-lg);
-			padding: var(--padding-lg);
 			padding-top: var(--padding-xs);
 			overflow-y: scroll;
 			overflow-x: hidden;
 
+			&.show-item-image {
+				grid-template-columns: repeat(4, minmax(0, 1fr));
+				gap: var(--margin-lg);
+				padding: var(--padding-lg);
+
+				> .item-wrapper {
+					border-radius: var(--border-radius-md);
+					box-shadow: var(--shadow-base);
+
+					&:hover {
+						transform: scale(1.02, 1.02);
+					}
+				}
+			}
+
+			&.hide-item-image {
+				display: flex;
+				flex-direction: column;
+				padding-left: 1.5em;
+				padding-right: 1.5em;
+				padding-top: 0;
+
+				> .list-column {
+					display: flex;
+					position: sticky;
+					top: 0;
+					z-index: 1;
+					background-color: var(--fg-color);
+					font-weight: bold;
+					flex-direction: row;
+					gap: 2rem;
+					align-items: center;
+					min-height: 3rem;
+					height: 3rem;
+					border-bottom: 1px solid var(--gray-300);
+
+					> .column-name {
+						width: 55%;
+						text-align: left;
+						white-space: initial;
+					}
+
+					> .column-price {
+						width: 15%;
+					}
+
+					> .column-uom {
+						width: 15%;
+						text-align: center;
+					}
+
+					> .column-qty-available {
+						width: 15%;
+						text-align: right;
+					}
+				}
+
+				> .item-wrapper {
+					border-top: 1px solid var(--gray-300);
+
+					&:hover {
+						background-color: var(--control-bg);
+					}
+
+					.item-detail {
+						flex-direction: row;
+						gap: 2rem;
+						align-items: center;
+						min-height: 3rem;
+						height: 3rem;
+
+						> .item-name,
+						.column-name {
+							width: 55%;
+							text-align: left;
+							white-space: initial;
+						}
+
+						> .item-price,
+						.column-price {
+							width: 15%;
+						}
+
+						> .item-uom,
+						.column-uom {
+							width: 15%;
+							text-align: center;
+						}
+
+						> .item-qty-available,
+						.column-qty-available {
+							width: 15%;
+							text-align: right;
+						}
+					}
+				}
+			}
+
 			&:after {
 				content: "";
 				display: block;
@@ -128,14 +223,8 @@
 
 			> .item-wrapper {
 				@extend .pointer-no-select;
-				border-radius: var(--border-radius-md);
-				box-shadow: var(--shadow-base);
 				position: relative;
 
-				&:hover {
-					transform: scale(1.02, 1.02);
-				}
-
 				.item-qty-pill {
 					position: absolute;
 					display: flex;

erpnext/selling/page/point_of_sale/pos_item_selector.js

@@ -34,6 +34,9 @@ erpnext.PointOfSale.ItemSelector = class {
 
 		this.$component = this.wrapper.find(".items-selector");
 		this.$items_container = this.$component.find(".items-container");
+
+		const show_hide_images = this.hide_images ? "hide-item-image" : "show-item-image";
+		this.$items_container.addClass(show_hide_images);
 	}
 
 	async load_items_data() {
@@ -73,12 +76,25 @@ erpnext.PointOfSale.ItemSelector = class {
 	render_item_list(items) {
 		this.$items_container.html("");
 
+		if (this.hide_images) {
+			this.$items_container.append(this.render_item_list_column_header());
+		}
+
 		items.forEach((item) => {
 			const item_html = this.get_item_html(item);
 			this.$items_container.append(item_html);
 		});
 	}
 
+	render_item_list_column_header() {
+		return `<div class="list-column">
+			<div class="column-name">Name</div>
+			<div class="column-price">Price</div>
+			<div class="column-uom">UOM</div>
+			<div class="column-qty-available">Quantity Available</div>
+		</div>`;
+	}
+
 	get_item_html(item) {
 		const me = this;
 		// eslint-disable-next-line no-unused-vars
@@ -100,7 +116,8 @@ erpnext.PointOfSale.ItemSelector = class {
 		}
 
 		function get_item_image_html() {
-			if (!me.hide_images && item_image) {
+			if (me.hide_images) return "";
+			if (item_image) {
 				return `<div class="item-qty-pill">
 							<span class="indicator-pill whitespace-nowrap ${indicator_color}">${qty_to_display}</span>
 						</div>
@@ -130,9 +147,19 @@ erpnext.PointOfSale.ItemSelector = class {
 
 				<div class="item-detail">
 					<div class="item-name">
-						${frappe.ellipsis(item.item_name, 18)}
+						${!me.hide_images ? frappe.ellipsis(item.item_name, 18) : item.item_name}
 					</div>
-					<div class="item-rate">${format_currency(price_list_rate, item.currency, precision) || 0} / ${uom}</div>
+					${
+						!me.hide_images
+							? `<div class="item-rate">
+								${format_currency(price_list_rate, item.currency, precision) || 0} / ${uom}
+							</div>`
+							: `
+							<div class="item-price">${format_currency(price_list_rate, item.currency, precision) || 0}</div>
+							<div class="item-uom">${uom}</div>
+							<div class="item-qty-available">${qty_to_display || "Non stock item"}</div>
+							`
+					}
 				</div>
 			</div>`;
 	}