feat(POS): hide images & auto add item checkbox (#24102)

erpnext/accounts/doctype/pos_profile/pos_profile.json

@@ -14,7 +14,6 @@
   "column_break_9",
   "update_stock",
   "ignore_pricing_rule",
-  "hide_unavailable_items",
   "warehouse",
   "campaign",
   "company_address",
@@ -23,6 +22,9 @@
   "section_break_11",
   "payments",
   "section_break_14",
+  "hide_images",
+  "hide_unavailable_items",
+  "auto_add_item_to_cart",
   "item_groups",
   "column_break_16",
   "customer_groups",
@@ -124,7 +126,8 @@
   },
   {
    "fieldname": "section_break_14",
-   "fieldtype": "Section Break"
+   "fieldtype": "Section Break",
+   "label": "Configuration"
   },
   {
    "description": "Only show Items from these Item Groups",
@@ -314,13 +317,25 @@
    "fieldname": "hide_unavailable_items",
    "fieldtype": "Check",
    "label": "Hide Unavailable Items"
+  },
+  {
+   "default": "0",
+   "fieldname": "hide_images",
+   "fieldtype": "Check",
+   "label": "Hide Images"
+  },
+  {
+   "default": "0",
+   "fieldname": "auto_add_item_to_cart",
+   "fieldtype": "Check",
+   "label": "Automatically Add Filtered Item To Cart"
   }
  ],
  "icon": "icon-cog",
  "idx": 1,
  "index_web_pages_for_search": 1,
  "links": [],
- "modified": "2020-10-29 13:18:38.795925",
+ "modified": "2020-12-10 13:59:28.877572",
  "modified_by": "Administrator",
  "module": "Accounts",
  "name": "POS Profile",

erpnext/selling/page/point_of_sale/pos_controller.js

@@ -111,24 +111,24 @@ erpnext.PointOfSale.Controller = class {
 		dialog.show();
 	}
 
-	prepare_app_defaults(data) {
+	async prepare_app_defaults(data) {
 		this.pos_opening = data.name;
 		this.company = data.company;
 		this.pos_profile = data.pos_profile;
 		this.pos_opening_time = data.period_start_date;
+		this.item_stock_map = {};
+		this.settings = {};
 
 		frappe.db.get_value('Stock Settings', undefined, 'allow_negative_stock').then(({ message }) => {
 			this.allow_negative_stock = flt(message.allow_negative_stock) || false;
 		});
 
 		frappe.db.get_doc("POS Profile", this.pos_profile).then((profile) => {
-			this.customer_groups = profile.customer_groups.map(group => group.customer_group);
-			this.cart.make_customer_selector();
+			this.settings.customer_groups = profile.customer_groups.map(group => group.customer_group);
+			this.settings.hide_images = profile.hide_images;
+			this.settings.auto_add_item_to_cart = profile.auto_add_item_to_cart;
+			this.make_app();
 		});
-
-		this.item_stock_map = {};
-
-		this.make_app();
 	}
 
 	set_opening_entry_status() {
@@ -238,12 +238,11 @@ erpnext.PointOfSale.Controller = class {
 		this.item_selector = new erpnext.PointOfSale.ItemSelector({
 			wrapper: this.$components_wrapper,
 			pos_profile: this.pos_profile,
+			settings: this.settings,
 			events: {
 				item_selected: args => this.on_cart_update(args),
 
-				get_frm: () => this.frm || {},
-
-				get_allowed_item_group: () => this.item_groups
+				get_frm: () => this.frm || {}
 			}
 		})
 	}
@@ -251,6 +250,7 @@ erpnext.PointOfSale.Controller = class {
 	init_item_cart() {
 		this.cart = new erpnext.PointOfSale.ItemCart({
 			wrapper: this.$components_wrapper,
+			settings: this.settings,
 			events: {
 				get_frm: () => this.frm,
 
@@ -273,9 +273,7 @@ erpnext.PointOfSale.Controller = class {
 					this.customer_details = details;
 					// will add/remove LP payment method
 					this.payment.render_loyalty_points_payment_mode();
-				},
-
-				get_allowed_customer_group: () => this.customer_groups
+				}
 			}
 		})
 	}

erpnext/selling/page/point_of_sale/pos_item_cart.js

@@ -1,8 +1,10 @@
 erpnext.PointOfSale.ItemCart = class {
-	constructor({ wrapper, events }) {
+	constructor({ wrapper, events, settings }) {
 		this.wrapper = wrapper;
 		this.events = events;
 		this.customer_info = undefined;
+		this.hide_images = settings.hide_images;
+		this.allowed_customer_groups = settings.customer_groups;
 		
 		this.init_component();
 	}
@@ -32,6 +34,7 @@ erpnext.PointOfSale.ItemCart = class {
 			`<div class="customer-section rounded flex flex-col m-8 mb-0"></div>`
 		)
 		this.$customer_section = this.$component.find('.customer-section');
+		this.make_customer_selector();
 	}
 	
 	reset_customer_selector() {
@@ -302,7 +305,7 @@ erpnext.PointOfSale.ItemCart = class {
 		this.$customer_section.html(`<div class="customer-search-field flex flex-1 items-center"></div>`);
 		const me = this;
 		const query = { query: 'erpnext.controllers.queries.customer_query' };
-		const allowed_customer_group = this.events.get_allowed_customer_group() || [];
+		const allowed_customer_group = this.allowed_customer_groups || [];
 		if (allowed_customer_group.length) {
 			query.filters = {
 				customer_group: ['in', allowed_customer_group]
@@ -423,6 +426,7 @@ erpnext.PointOfSale.ItemCart = class {
 	}
 	
 	update_customer_section() {
+		const me = this;
 		const { customer, email_id='', mobile_no='', image } = this.customer_info || {};
 
 		if (customer) {
@@ -460,7 +464,7 @@ erpnext.PointOfSale.ItemCart = class {
 		}
 
 		function get_customer_image() {
-			if (image) {
+			if (!me.hide_images && image) {
 				return `<div class="icon flex items-center justify-center w-12 h-12 rounded bg-light-grey mr-4 text-grey-200">
 							<img class="h-full" src="${image}" alt="${image}" style="object-fit: cover;">
 						</div>`

erpnext/selling/page/point_of_sale/pos_item_selector.js

@@ -1,8 +1,10 @@
 erpnext.PointOfSale.ItemSelector = class {
-	constructor({ frm, wrapper, events, pos_profile }) {
+	constructor({ frm, wrapper, events, pos_profile, settings }) {
 		this.wrapper = wrapper;
 		this.events = events;
 		this.pos_profile = pos_profile;
+		this.hide_images = settings.hide_images;
+		this.auto_add_item = settings.auto_add_item_to_cart;
 		
 		this.inti_component();
 	}
@@ -26,13 +28,14 @@ erpnext.PointOfSale.ItemSelector = class {
 					<div class="flex flex-1 flex-col p-8 pt-2">
 						<div class="text-grey mb-6">ALL ITEMS</div>
 						<div class="items-container grid grid-cols-4 gap-8">
-						</div>					
+						</div>
 					</div>
 				</div>
 			</section>`
 		);
 		
 		this.$component = this.wrapper.find('.items-selector');
+		this.$items_container = this.$component.find('.items-container');
 	}
 
 	async load_items_data() {
@@ -65,7 +68,6 @@ erpnext.PointOfSale.ItemSelector = class {
 
 
 	render_item_list(items) {
-		this.$items_container = this.$component.find('.items-container');
 		this.$items_container.html('');
 
 		items.forEach(item => {
@@ -75,11 +77,12 @@ erpnext.PointOfSale.ItemSelector = class {
 	}
 
 	get_item_html(item) {
+		const me = this;
 		const { item_image, serial_no, batch_no, barcode, actual_qty, stock_uom } = item;
 		const indicator_color = actual_qty > 10 ? "green" : actual_qty <= 0 ? "red" : "orange";
 
 		function get_item_image_html() {
-			if (item_image) {
+			if (!me.hide_images && item_image) {
 				return `<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;">
 						</div>`
@@ -203,6 +206,7 @@ erpnext.PointOfSale.ItemSelector = class {
 			ignore_inputs: true,
 			page: cur_page.page.page
 		});
+
 		// for selecting the last filtered item on search
 		frappe.ui.keys.on("enter", () => {
 			const selector_is_visible = this.$component.is(':visible');
@@ -235,6 +239,7 @@ erpnext.PointOfSale.ItemSelector = class {
 				const items = this.search_index[search_term];
 				this.items = items;
 				this.render_item_list(items);
+				this.auto_add_item && this.items.length == 1 && this.add_filtered_item_to_cart();
 				return;
 			}
 		}
@@ -247,8 +252,13 @@ erpnext.PointOfSale.ItemSelector = class {
 				}
 				this.items = items;
 				this.render_item_list(items);
+				this.auto_add_item && this.items.length == 1 && this.add_filtered_item_to_cart();
 			});
 	}
+
+	add_filtered_item_to_cart() {
+		this.$items_container.find(".item-wrapper").click();
+	}
 	
 	resize_selector(minimize) {
 		minimize ?