Merge pull request #15194 from surajshetty3416/fixes-and-improvements

UI/UX fixes and improvements

erpnext/hub_node/api.py

@@ -3,12 +3,13 @@ import frappe, requests, json
 from frappe.utils import now
 from frappe.frappeclient import FrappeClient
 from frappe.desk.form.load import get_attachments
+from six import string_types
 
 @frappe.whitelist()
 def call_hub_method(method, params=None):
 	connection = get_hub_connection()
 
-	if type(params) == unicode:
+	if isinstance(params, string_types):
 		params = json.loads(params)
 
 	params.update({

erpnext/hub_node/doctype/hub_settings/hub_settings.py

@@ -21,6 +21,8 @@ class HubSettings(Document):
 			frappe.throw(_("Please select a Price List to publish pricing"))
 
 	def get_hub_url(self):
+		if not frappe.conf.hub_url:
+			frappe.throw('hub_url is not set in site_config')
 		return frappe.conf.hub_url
 
 	def register(self):

erpnext/public/js/hub/components/detail_view.js

@@ -25,13 +25,16 @@ function get_detail_view_html(item, allow_edit) {
 		stats = `${views_message}${dot_spacer}${rating_html} (${rating_count})`;
 	}
 
-	let favourite_button = !item.favourited
+	let favourite_button = ''
-		? `<button class="btn btn-default text-muted favourite-button" data-action="add_to_favourites">
+	if (hub.settings.registered) {
-			${__('Save')} <i class="octicon octicon-heart text-extra-muted"></i>
+		favourite_button = !item.favourited
-		</button>`
+			? `<button class="btn btn-default text-muted favourite-button" data-action="add_to_favourites">
-		: `<button class="btn btn-default text-muted favourite-button disabled" data-action="add_to_favourites">
+				${__('Save')} <i class="octicon octicon-heart text-extra-muted"></i>
-			${__('Saved')}
+			</button>`
-		</button>`;
+			: `<button class="btn btn-default text-muted favourite-button disabled" data-action="add_to_favourites">
+				${__('Saved')}
+			</button>`;
+	}
 
 	const contact_seller_button = item.hub_seller !== hub.settings.company_email
 		? `<button class="btn btn-primary" data-action="contact_seller">
@@ -114,7 +117,7 @@ function get_detail_view_html(item, allow_edit) {
 				<div class="col-md-12 form-footer">
 					<div class="form-comments">
 						<div class="timeline">
-							<div class="timeline-head"></div>
+							 <div class="timeline-head"></div>
 							<div class="timeline-items"></div>
 						</div>
 					</div>

erpnext/public/js/hub/components/item_card.js

@@ -1,4 +1,7 @@
 function get_item_card_html(item) {
+	if (item.recent_message) {
+		return get_item_message_card_html(item);
+	}
 	const item_name = item.item_name || item.name;
 	const title = strip_html(item_name);
 	const img_url = item.image;
@@ -7,9 +10,11 @@ function get_item_card_html(item) {
 	// Subtitle
 	let subtitle = [comment_when(item.creation)];
 	const rating = item.average_rating;
+
 	if (rating > 0) {
 		subtitle.push(rating + `<i class='fa fa-fw fa-star-o'></i>`)
 	}
+	
 	subtitle.push(company_name);
 
 	let dot_spacer = '<span aria-hidden="true"> · </span>';
@@ -39,7 +44,6 @@ function get_item_card_html(item) {
 					<img class="hub-card-image" src="${img_url}" />
 					<div class="overlay hub-card-overlay"></div>
 				</div>
-
 			</div>
 		</div>
 	`;
@@ -59,10 +63,14 @@ function get_local_item_card_html(item) {
 	// Subtitle
 	let subtitle = [comment_when(item.creation)];
 	const rating = item.average_rating;
+
 	if (rating > 0) {
 		subtitle.push(rating + `<i class='fa fa-fw fa-star-o'></i>`)
 	}
-	subtitle.push(company_name);
+
+	if (company_name) {
+		subtitle.push(company_name);
+	}
 
 	let dot_spacer = '<span aria-hidden="true"> · </span>';
 	subtitle = subtitle.join(dot_spacer);
@@ -77,7 +85,7 @@ function get_local_item_card_html(item) {
 		<div class="col-md-3 col-sm-4 col-xs-6 hub-card-container">
 			<div class="hub-card is-local ${is_active ? 'active' : ''}" data-id="${id}">
 				<div class="hub-card-header flex">
-					<div>
+					<div class="ellipsis">
 						<div class="hub-card-title ellipsis bold">${title}</div>
 						<div class="hub-card-subtitle ellipsis text-muted">${subtitle}</div>
 					</div>
@@ -98,7 +106,38 @@ function get_local_item_card_html(item) {
 	return item_html;
 }
 
+function get_item_message_card_html(item) {
+	const item_name = item.item_name || item.name;
+	const title = strip_html(item_name);
+
+	const message = item.recent_message
+	const sender = message.sender === frappe.session.user ? 'You' : message.sender
+	const content = strip_html(message.content)
+
+	// route
+	if (!item.route) {
+		item.route = `marketplace/item/${item.hub_item_code}`
+	}
+
+
+	const item_html = `
+		<div class="item-message-card" data-route="${item.route}">
+			<img class="item-image" src='${item.image}'>
+			<div class="message-body">
+				<span class='text-muted'>${comment_when(message.creation, true)}</span>
+				<span class="bold">${item_name}</span>
+				<div class='ellipsis'>
+					<span>${sender}: </span>
+					<span>${content}</span>
+				</div>
+			</div>
+		</div>
+	`;
+
+	return item_html;
+}
+
 export {
 	get_item_card_html,
-    get_local_item_card_html
+	get_local_item_card_html
 }

erpnext/public/js/hub/components/items_container.js

@@ -3,7 +3,7 @@ import { get_item_card_html } from './item_card';
 function get_item_card_container_html(items, title='', get_item_html = get_item_card_html, action='') {
 	const items_html = (items || []).map(item => get_item_html(item)).join('');
 	const title_html = title
-		? `<div class="hub-items-header col-sm-12 margin-bottom flex">
+		? `<div class="hub-items-header margin-bottom flex">
 				<h4>${title}</h4>
 				${action}
 			</div>`

erpnext/public/js/hub/components/publishing_area.js

@@ -13,7 +13,7 @@ function get_publishing_header() {
 
     return $(`
         <div class="publish-area empty">
-            <div class="flex justify-between align-flex-end">
+            <div class="publish-area-head">
                 ${title_html}
                 ${publish_button_html}
             </div>

erpnext/public/js/hub/marketplace.js

@@ -254,8 +254,7 @@ erpnext.hub.Marketplace = class Marketplace {
 	register_seller(form_values) {
 		frappe.call({
 		    method: 'erpnext.hub_node.doctype.hub_settings.hub_settings.register_seller',
-		    args: form_values,
+		    args: form_values
-		    btn: $(e.currentTarget)
 		}).then(() => {
 			this.register_dialog.hide();
 			frappe.set_route('marketplace', 'publish');

erpnext/public/js/hub/pages/buying_messages.js

@@ -17,9 +17,9 @@ erpnext.hub.BuyingMessages = class BuyingMessages extends SubPage {
 		this.get_item_details(item_code)
 			.then(item_details => {
 				this.item_details = item_details;
+				this.$message_container.find('.hub-section-header h4').text(this.item_details.item_name);
 
 				// make chat area
-				this.$message_container.find('.hub-section-header h4').text(this.item_details.item_name);
 				this.$message_container.find('.hub-section-body').html(`
 					<div class="col-md-7 message-container">
 						<div class="message-list"></div>

erpnext/public/js/hub/pages/item.js

@@ -57,7 +57,7 @@ erpnext.hub.Item = class Item extends SubPage {
 
 
 	unpublish_item() {
-		if(!this.unpublish_dialog) {
+		if (!this.unpublish_dialog) {
 			this.unpublish_dialog = new frappe.ui.Dialog({
 				title: "Edit Your Product",
 				fields: []
@@ -75,14 +75,14 @@ erpnext.hub.Item = class Item extends SubPage {
 			hub_item_code: this.hub_item_code,
 			hub_seller: hub.settings.company_email
 		})
-		.then(() => {
+			.then(() => {
-			$(favourite_button).html('Saved');
+				$(favourite_button).html('Saved');
-			frappe.show_alert(__('Saved to <b><a href="#marketplace/favourites">Favourites</a></b>'));
+				frappe.show_alert(__('Saved to <b><a href="#marketplace/favourites">Favourites</a></b>'));
-			erpnext.hub.trigger('action:item_favourite');
+				erpnext.hub.trigger('action:item_favourite');
-		})
+			})
-		.catch(e => {
+			.catch(e => {
-			console.error(e);
+				console.error(e);
-		});
+			});
 	}
 
 
@@ -106,16 +106,16 @@ erpnext.hub.Item = class Item extends SubPage {
 				if (!message) return;
 
 				hub.call('send_message', {
-                    from_seller: hub.settings.company_email,
+					from_seller: hub.settings.company_email,
 					to_seller: this.item.hub_seller,
 					hub_item: this.item.hub_item_code,
-                    message
+					message
 				})
-				.then(() => {
+					.then(() => {
-					d.hide();
+						d.hide();
-					frappe.set_route('marketplace', 'buy', this.item.hub_item_code);
+						frappe.set_route('marketplace', 'buy', this.item.hub_item_code);
-					erpnext.hub.trigger('action:send_message')
+						erpnext.hub.trigger('action:send_message')
-				});
+					});
 			}
 		});
 
@@ -124,11 +124,19 @@ erpnext.hub.Item = class Item extends SubPage {
 
 
 	make_review_area() {
-		this.comment_area = new frappe.ui.ReviewArea({
+		if (hub.settings.registered) {
-			parent: this.$wrapper.find('.timeline-head').empty(),
+			this.comment_area = new frappe.ui.ReviewArea({
-			mentions: [],
+				parent: this.$wrapper.find('.timeline-head').empty(),
-			on_submit: this.on_submit_review.bind(this)
+				mentions: [],
-		});
+				on_submit: this.on_submit_review.bind(this)
+			});
+		} else {
+			//TODO: fix UI
+			this.comment_area = this.$wrapper
+				.find('.timeline-head')
+				.empty()
+				.append('<div></div>');
+		}
 	}
 
 

erpnext/public/js/hub/pages/messages.js

@@ -57,16 +57,6 @@ erpnext.hub.Messages = class Messages extends SubPage {
 	get_interactions() {
 		return hub.call('get_sellers_with_interactions', { for_seller: hub.settings.company_email });
 	}
-
-	get_messages() {
-		const against_seller = frappe.get_route()[2];
-		if (!against_seller) return Promise.resolve([]);
-
-		return hub.call('get_messages', {
-			for_seller: hub.settings.company_email,
-			against_seller: against_seller
-		});
-	}
 }
 
 function get_message_area_html() {

erpnext/public/js/hub/pages/publish.js

@@ -74,13 +74,18 @@ erpnext.hub.Publish = class Publish extends SubPage {
 
 		this.make_publishing_dialog();
 
+		this.$wrapper.on('click', '[data-route]', (e) => {
+			e.stopPropagation();
+			const $target = $(e.currentTarget);
+			const route = $target.data().route;
+			frappe.set_route(route);
+		});
+
 		this.$wrapper.on('click', '.hub-card', (e) => {
 			const $target = $(e.currentTarget);
 			const item_code = $target.attr('data-id');
 			this.show_publishing_dialog_for_item(item_code);
-
 			this.$current_selected_card = $target.parent();
-
 		});
 	}
 

erpnext/public/less/hub.less

@@ -137,8 +137,9 @@ body[data-route^="marketplace/"] {
 	}
 
 	.hub-card-image {
-		min-width: 100%;
 		width: 100%;
+		height: 100%;
+		object-fit: contain;
 	}
 
 	.hub-search-container {
@@ -234,6 +235,33 @@ body[data-route^="marketplace/"] {
 		}
 	}
 
+	.publish-area-head {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 20px;
+	}
+
+	.item-message-card {
+		height: 80px;
+		max-width: 500px;
+		margin-bottom: 10px;
+		padding: 10px;
+		border-radius: 4px;
+		.message-body {
+			margin-left: 60px;
+		}
+		.item-image {
+			float: left;
+			height: 50px;
+			width: 50px;
+			object-fit: contain;
+			// border-radius: 50%
+		}
+		.frappe-timestamp {
+			float: right;
+		}
+	}
+
 	.form-container {
 		.frappe-control {
 			max-width: 100% !important;