Merge pull request #15212 from surajshetty3416/fixes-and-improvements
Separate links for selling and buying messages
diff --git a/erpnext/public/js/hub/components/item_card.js b/erpnext/public/js/hub/components/item_card.js
index a2c8553..7cb2281 100644
--- a/erpnext/public/js/hub/components/item_card.js
+++ b/erpnext/public/js/hub/components/item_card.js
@@ -1,8 +1,4 @@
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;
@@ -52,7 +48,62 @@
return item_html;
}
-function get_item_message_card_html(item) {
+function get_local_item_card_html(item) {
+ const item_name = item.item_name || item.name;
+ const title = strip_html(item_name);
+ const img_url = item.image;
+ const company_name = item.company;
+
+ const is_active = item.publish_in_hub;
+ const id = item.hub_item_code || item.item_code;
+
+ // 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>`)
+ }
+
+ if (company_name) {
+ subtitle.push(company_name);
+ }
+
+ let dot_spacer = '<span aria-hidden="true"> ยท </span>';
+ subtitle = subtitle.join(dot_spacer);
+
+ const edit_item_button = `<div class="hub-card-overlay-button" data-route="Form/Item/${item.item_name}">
+ <button class="btn btn-default zoom-view">
+ <i class="octicon octicon-pencil text-muted"></i>
+ </button>
+ </div>`;
+
+ const item_html = `
+ <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 class="ellipsis">
+ <div class="hub-card-title ellipsis bold">${title}</div>
+ <div class="hub-card-subtitle ellipsis text-muted">${subtitle}</div>
+ </div>
+ <i class="octicon octicon-check text-success"></i>
+ </div>
+ <div class="hub-card-body">
+ <img class="hub-card-image" src="${img_url}" />
+ <div class="hub-card-overlay">
+ <div class="hub-card-overlay-body">
+ ${edit_item_button}
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ `;
+
+ return item_html;
+}
+
+function get_buying_item_message_card_html(item) {
const item_name = item.item_name || item.name;
const title = strip_html(item_name);
@@ -61,20 +112,63 @@
const content = strip_html(message.content)
// route
+ item.route = `marketplace/buying/${item.hub_item_code}`
+
+ const item_html = `
+ <div class="col-md-7">
+ <div class="hub-list-item" data-route="${item.route}">
+ <div class="hub-list-left">
+ <img class="hub-list-image" src="${item.image}">
+ <div class="hub-list-body ellipsis">
+ <div class="hub-list-title">${item_name}</div>
+ <div class="hub-list-subtitle ellipsis">
+ <span>${sender}: </span>
+ <span>${content}</span>
+ </div>
+ </div>
+ </div>
+ <div class="hub-list-right">
+ <span class="text-muted">${comment_when(message.creation, true)}</span>
+ </div>
+ </div>
+ </div>
+ `;
+
+ return item_html;
+}
+
+function get_selling_item_message_card_html(item) {
+ const item_name = item.item_name || item.name;
+ const title = strip_html(item_name);
+
+ // route
if (!item.route) {
item.route = `marketplace/item/${item.hub_item_code}`
}
+ let received_messages = '';
+ item.received_messages.forEach(message => {
+ const sender = message.sender === frappe.session.user ? 'You' : message.sender
+ const content = strip_html(message.content)
+
+ received_messages += `
+ <div class="received-message">
+ <span class="text-muted">${comment_when(message.creation, true)}</span>
+ <div class="ellipsis">
+ <span class="bold">${sender}: </span>
+ <span>${content}</span>
+ </div>
+ </div>
+ `
+ });
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 class="selling-item-message-card">
+ <div class="selling-item-detail" data-route="${item.route}">
+ <img class="item-image" src="${item.image}">
+ <h5 class="item-name">${item_name}</h5>
+ <div class="received-message-container">
+ ${received_messages}
</div>
</div>
</div>
@@ -84,5 +178,8 @@
}
export {
- get_item_card_html
+ get_item_card_html,
+ get_local_item_card_html,
+ get_buying_item_message_card_html,
+ get_selling_item_message_card_html
}
diff --git a/erpnext/public/js/hub/components/items_container.js b/erpnext/public/js/hub/components/items_container.js
index 5db2c56..61b8af6 100644
--- a/erpnext/public/js/hub/components/items_container.js
+++ b/erpnext/public/js/hub/components/items_container.js
@@ -3,7 +3,7 @@
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 margin-bottom flex">
+ ? `<div class="hub-items-header flex">
<h4>${title}</h4>
${action}
</div>`
diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js
index d8bfea8..98e84e0 100644
--- a/erpnext/public/js/hub/marketplace.js
+++ b/erpnext/public/js/hub/marketplace.js
@@ -91,9 +91,13 @@
<li class="hub-sidebar-item text-muted" data-route="marketplace/publish">
${__('Publish Products')}
</li>
- <li class="hub-sidebar-item text-muted" data-route="marketplace/messages">
- ${__('Messages')}
- </li>`
+ <li class="hub-sidebar-item text-muted" data-route="marketplace/selling">
+ ${__('Selling')}
+ </li>
+ <li class="hub-sidebar-item text-muted" data-route="marketplace/buying">
+ ${__('Buying')}
+ </li>
+ `
: `<li class="hub-sidebar-item text-muted" data-action="show_register_dialog">
${__('Become a seller')}
@@ -214,12 +218,12 @@
this.subpages['my-products'] = new erpnext.hub.PublishedProductsPage(this.$body);
}
- if (route[1] === 'messages' && !this.subpages['messages']) {
- this.subpages['messages'] = new erpnext.hub.Messages(this.$body);
+ if (route[1] === 'buying' && !this.subpages['buying']) {
+ this.subpages['buying'] = new erpnext.hub.Buying(this.$body);
}
- if (route[1] === 'buy' && !this.subpages['buy']) {
- this.subpages['buy'] = new erpnext.hub.BuyingMessages(this.$body);
+ if (route[1] === 'selling' && !this.subpages['selling']) {
+ this.subpages['selling'] = new erpnext.hub.Selling(this.$body, 'Selling');
}
// dont allow unregistered users to access registered routes
diff --git a/erpnext/public/js/hub/pages/buying_messages.js b/erpnext/public/js/hub/pages/buying_messages.js
index 2be6d78..7835fc3 100644
--- a/erpnext/public/js/hub/pages/buying_messages.js
+++ b/erpnext/public/js/hub/pages/buying_messages.js
@@ -1,19 +1,24 @@
import SubPage from './subpage';
-erpnext.hub.BuyingMessages = class BuyingMessages extends SubPage {
+erpnext.hub.MessageList = class BuyingMessages extends SubPage {
make_wrapper() {
+ const messages_of = this.options[0];
+ if (messages_of === 'Buying') {
+ this.back_route = 'marketplace/buying-messages'
+ } else {
+ this.back_route = 'marketplace/selling-messages'
+ }
super.make_wrapper();
- this.add_back_link(__('Back to Messages'), 'marketplace/messages');
+ this.add_back_link(__('Back to Messages'), this.back_route);
this.$message_container = this.add_section({ title: 'Buy' });
}
refresh() {
const item_code = frappe.get_route()[2] || null;
if (!item_code) {
- frappe.set_route('marketplace/messages');
+ frappe.set_route(this.back_route);
return;
}
-
this.get_item_details(item_code)
.then(item_details => {
this.item_details = item_details;
diff --git a/erpnext/public/js/hub/pages/home.js b/erpnext/public/js/hub/pages/home.js
new file mode 100644
index 0000000..b011e7e
--- /dev/null
+++ b/erpnext/public/js/hub/pages/home.js
@@ -0,0 +1,60 @@
+import SubPage from './subpage';
+import { make_search_bar } from '../components/search_bar';
+import { get_item_card_container_html } from '../components/items_container';
+import { get_item_card_html } from '../components/item_card';
+
+erpnext.hub.Home = class Home extends SubPage {
+ make_wrapper() {
+ super.make_wrapper();
+
+ make_search_bar({
+ wrapper: this.$wrapper,
+ on_search: keyword => {
+ frappe.set_route('marketplace', 'search', keyword);
+ }
+ });
+ }
+
+ refresh() {
+ this.get_items_and_render();
+ }
+
+ get_items_and_render() {
+ this.$wrapper.find('.hub-items-container').empty();
+ this.get_data()
+ .then(data => {
+ this.render(data);
+ });
+ }
+
+ get_data() {
+ return hub.call('get_data_for_homepage', { country: frappe.defaults.get_user_default('country') });
+ }
+
+ render(data) {
+ let html = get_item_card_container_html(data.random_items, __('Explore'));
+ this.$wrapper.append(html);
+
+ if (data.items_by_country.length) {
+ html = get_item_card_container_html(data.items_by_country, __('Near You'));
+ this.$wrapper.append(html);
+ }
+
+ const category_items = data.category_items;
+
+ if (category_items) {
+ Object.keys(category_items).map(category => {
+ const items = category_items[category];
+ const see_all_link = `<p data-route="marketplace/category/${category}">See All</p>`;
+
+ html = get_item_card_container_html(
+ items,
+ __(category),
+ get_item_card_html,
+ see_all_link
+ );
+ this.$wrapper.append(html);
+ });
+ }
+ }
+}
diff --git a/erpnext/public/js/hub/pages/messages.js b/erpnext/public/js/hub/pages/messages.js
index 683cba0..f8faa99 100644
--- a/erpnext/public/js/hub/pages/messages.js
+++ b/erpnext/public/js/hub/pages/messages.js
@@ -1,43 +1,28 @@
import SubPage from './subpage';
import { get_item_card_container_html } from '../components/items_container';
+import { get_buying_item_message_card_html } from '../components/item_card';
+import { get_selling_item_message_card_html } from '../components/item_card';
import { get_empty_state } from '../components/empty_state';
-erpnext.hub.Messages = class Messages extends SubPage {
- make_wrapper() {
- super.make_wrapper();
- }
-
+erpnext.hub.Buying = class Buying extends SubPage {
refresh() {
- const res = Promise.all([
- this.get_buying_items(),
- this.get_selling_items()
- ]);
-
- res.then(([buying_items, selling_items]) => {
+ this.get_items_for_messages().then((items) => {
this.empty();
-
- if (selling_items.length) {
- // selling_items.map(item => {
- // item.route = `marketplace/sell/${item.hub_item_code}/${}`
- // });
- this.render(selling_items, __('Selling'));
- }
-
- if (buying_items.length) {
- buying_items.map(item => {
- item.route = `marketplace/buy/${item.hub_item_code}`
+ if (items.length) {
+ items.map(item => {
+ item.route = `marketplace/buying/${item.hub_item_code}`
})
- this.render(buying_items, __('Buying'));
+ this.render(items, __('Buying'));
}
- if (!buying_items.length && !selling_items.length) {
+ if (!items.length && !items.length) {
this.render_empty_state();
}
});
}
render(items = [], title) {
- const html = get_item_card_container_html(items, title);
+ const html = get_item_card_container_html(items, title, get_buying_item_message_card_html);
this.$wrapper.append(html);
}
@@ -46,16 +31,40 @@
this.$wrapper.html(empty_state);
}
- get_buying_items() {
+ get_items_for_messages() {
return hub.call('get_buying_items_for_messages', {}, 'action:send_message');
}
+}
- get_selling_items() {
- return hub.call('get_selling_items_for_messages');
+erpnext.hub.Selling = class Selling extends SubPage {
+ refresh() {
+ this.get_items_for_messages().then((items) => {
+ this.empty();
+ if (items.length) {
+ items.map(item => {
+ item.route = `marketplace/selling/${item.hub_item_code}`
+ })
+ this.render(items, __('Selling'));
+ }
+
+ if (!items.length && !items.length) {
+ this.render_empty_state();
+ }
+ });
}
- get_interactions() {
- return hub.call('get_sellers_with_interactions', { for_seller: hub.settings.company_email });
+ render(items = [], title) {
+ const html = get_item_card_container_html(items, title, get_selling_item_message_card_html);
+ this.$wrapper.append(html);
+ }
+
+ render_empty_state() {
+ const empty_state = get_empty_state(__('You haven\'t interacted with any seller yet.'));
+ this.$wrapper.html(empty_state);
+ }
+
+ get_items_for_messages() {
+ return hub.call('get_selling_items_for_messages', {});
}
}
@@ -92,4 +101,4 @@
<p>${message.content}</p>
</div>
`;
-}
+}
\ No newline at end of file
diff --git a/erpnext/public/js/hub/pages/subpage.js b/erpnext/public/js/hub/pages/subpage.js
index 07ea11e..162aa52 100644
--- a/erpnext/public/js/hub/pages/subpage.js
+++ b/erpnext/public/js/hub/pages/subpage.js
@@ -1,6 +1,7 @@
export default class SubPage {
- constructor(parent, options) {
+ constructor(parent, ...options) {
this.$parent = $(parent);
+ this.options = options;
this.make_wrapper(options);
// generic action handler
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index 720a9d8..779d45d 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -192,24 +192,75 @@
margin-bottom: 20px;
}
- .item-message-card {
- height: 80px;
+ .hub-list-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border: 1px solid @border-color;
+ margin-bottom: 15px;
+ border-radius: 3px;
+ }
+
+ .hub-list-left {
+ display: flex;
+ align-items: center;
+ max-width: 90%;
+ }
+
+ .hub-list-right {
+ padding-right: 15px;
+ }
+
+ .hub-list-image {
+ width: 58px;
+ height: 58px;
+ border-right: 1px solid @border-color;
+
+ &::after {
+ font-size: 12px;
+ }
+ }
+
+ .hub-list-body {
+ padding: 12px 15px;
+ }
+
+ .hub-list-title {
+ font-weight: bold;
+ }
+
+ .hub-list-subtitle {
+ color: @text-muted;
+ }
+
+ .selling-item-message-card {
max-width: 500px;
- margin-bottom: 10px;
- padding: 10px;
- border-radius: 4px;
- .message-body {
- margin-left: 60px;
+ margin-bottom: 15px;
+ border-radius: 3px;
+ border: 1px solid @border-color;
+ .selling-item-detail {
+ overflow: auto;
+ .item-image {
+ float: left;
+ height: 80px;
+ width: 80px;
+ object-fit: contain;
+ margin: 5px;
+ }
+ .item-name {
+ margin-left: 10px;
+ }
}
- .item-image {
- float: left;
- height: 50px;
- width: 50px;
- object-fit: contain;
- // border-radius: 50%
- }
- .frappe-timestamp {
- float: right;
+ .received-message-container {
+ clear: left;
+ background-color: @light-bg;
+ .received-message {
+ border-top: 1px solid @border-color;
+ padding: 10px;
+ }
+ .frappe-timestamp {
+ float: right;
+ }
}
}