From 88700cf2b96e27f28417275c2c33e6c24805781e Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Fri, 24 Aug 2018 11:25:04 +0530 Subject: [PATCH 1/2] Separate links for selling and buying messages - Add separate UI for selling messages - Remove some redundant code messages --- erpnext/public/js/hub/components/item_card.js | 109 +++++++++++++++++- erpnext/public/js/hub/marketplace.js | 26 +++-- .../public/js/hub/pages/buying_messages.js | 13 ++- erpnext/public/js/hub/pages/messages.js | 40 +++---- erpnext/public/js/hub/pages/subpage.js | 3 +- erpnext/public/less/hub.less | 45 ++++++-- 6 files changed, 187 insertions(+), 49 deletions(-) diff --git a/erpnext/public/js/hub/components/item_card.js b/erpnext/public/js/hub/components/item_card.js index a2c855389f..e6471c6d89 100644 --- a/erpnext/public/js/hub/components/item_card.js +++ b/erpnext/public/js/hub/components/item_card.js @@ -1,6 +1,10 @@ function get_item_card_html(item) { if (item.recent_message) { - return get_item_message_card_html(item); + return get_buying_item_message_card_html(item); + } + + if (item.recent_messages) { + return get_selling_item_message_card_html(item); } const item_name = item.item_name || item.name; @@ -52,7 +56,62 @@ function get_item_card_html(item) { 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 + ``) + } + + if (company_name) { + subtitle.push(company_name); + } + + let dot_spacer = ''; + subtitle = subtitle.join(dot_spacer); + + const edit_item_button = `
+ +
`; + + const item_html = ` +
+
+
+
+
${title}
+
${subtitle}
+
+ +
+
+ +
+
+ ${edit_item_button} +
+
+
+
+
+ `; + + 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); @@ -68,11 +127,11 @@ function get_item_message_card_html(item) { const item_html = `
- +
- ${comment_when(message.creation, true)} + ${comment_when(message.creation, true)} ${item_name} -
+
${sender}: ${content}
@@ -83,6 +142,46 @@ function get_item_message_card_html(item) { 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.recent_messages.forEach(message => { + const sender = message.sender === frappe.session.user ? 'You' : message.sender + const content = strip_html(message.content) + + received_messages += ` +
+ ${comment_when(message.creation, true)} +
+ ${sender}: + ${content} +
+
+ ` + }); + + const item_html = ` +
+
+ +
${item_name}
+
+ ${received_messages} +
+
+
+ `; + + return item_html; +} + export { get_item_card_html } diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js index d8bfea8a1b..7987e251dc 100644 --- a/erpnext/public/js/hub/marketplace.js +++ b/erpnext/public/js/hub/marketplace.js @@ -91,9 +91,13 @@ erpnext.hub.Marketplace = class Marketplace {
  • ${__('Publish Products')}
    • -
  • - ${__('Messages')} -
    • ` +
  • + ${__('Selling')} +
    • +
  • + ${__('Buying')} +
    • + ` : `
  • ${__('Become a seller')} @@ -214,12 +218,20 @@ erpnext.hub.Marketplace = class Marketplace { 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-messages' && !this.subpages['buying-messages']) { + this.subpages['buying-messages'] = new erpnext.hub.Messages(this.$body, 'Buying'); } - if (route[1] === 'buy' && !this.subpages['buy']) { - this.subpages['buy'] = new erpnext.hub.BuyingMessages(this.$body); + if (route[1] === 'selling-messages' && !this.subpages['selling-messages']) { + this.subpages['selling-messages'] = new erpnext.hub.Messages(this.$body, 'Selling'); + } + + if (route[1] === 'buying' && !this.subpages['buying']) { + this.subpages['buying'] = new erpnext.hub.MessageList(this.$body, 'Buying'); + } + + if (route[1] === 'selling' && !this.subpages['selling']) { + this.subpages['selling'] = new erpnext.hub.MessageList(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 2be6d78d83..7835fc36fd 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/messages.js b/erpnext/public/js/hub/pages/messages.js index 683cba01f0..d02b302623 100644 --- a/erpnext/public/js/hub/pages/messages.js +++ b/erpnext/public/js/hub/pages/messages.js @@ -8,29 +8,17 @@ erpnext.hub.Messages = class Messages extends SubPage { } refresh() { - const res = Promise.all([ - this.get_buying_items(), - this.get_selling_items() - ]); - - res.then(([buying_items, selling_items]) => { + const messages_of = this.options[0]; + this.get_items_for_messages(messages_of).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/${messages_of.toLowerCase()}/${item.hub_item_code}` }) - this.render(buying_items, __('Buying')); + this.render(items, __(messages_of)); } - if (!buying_items.length && !selling_items.length) { + if (!items.length && !items.length) { this.render_empty_state(); } }); @@ -46,12 +34,14 @@ erpnext.hub.Messages = class Messages extends SubPage { this.$wrapper.html(empty_state); } - get_buying_items() { - return hub.call('get_buying_items_for_messages', {}, 'action:send_message'); - } - - get_selling_items() { - return hub.call('get_selling_items_for_messages'); + get_items_for_messages(messages_of) { + if (messages_of === 'Buying') { + return hub.call('get_buying_items_for_messages', {}, 'action:send_message'); + } else if (messages_of === 'Selling') { + return hub.call('get_selling_items_for_messages'); + } else { + frappe.throw('Invalid message type'); + } } get_interactions() { diff --git a/erpnext/public/js/hub/pages/subpage.js b/erpnext/public/js/hub/pages/subpage.js index 07ea11e0d4..162aa52b29 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 720a9d8060..14bff77d03 100644 --- a/erpnext/public/less/hub.less +++ b/erpnext/public/less/hub.less @@ -193,26 +193,57 @@ body[data-route^="marketplace/"] { } .item-message-card { - height: 80px; - max-width: 500px; - margin-bottom: 10px; - padding: 10px; - border-radius: 4px; + overflow: auto; + max-width: 600px; + margin-bottom: 15px; + border-radius: 3px; + border: 1px solid @border-color; .message-body { - margin-left: 60px; + padding: 10px; } .item-image { float: left; height: 50px; width: 50px; object-fit: contain; - // border-radius: 50% + margin: 10px; } .frappe-timestamp { float: right; } } + .selling-item-message-card { + max-width: 500px; + 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; + } + } + .received-message-container { + clear: left; + background-color: @light-bg; + .received-message { + border-top: 1px solid @border-color; + padding: 10px; + } + .frappe-timestamp { + float: right; + } + } + } + .form-container { .frappe-control { max-width: 100% !important; From 0e59ec3ed22fcd2f2f332c4a284a69ec44e3d3d6 Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Sat, 25 Aug 2018 21:22:55 +0530 Subject: [PATCH 2/2] Update messages UI --- erpnext/public/js/hub/components/item_card.js | 42 ++++++------- .../js/hub/components/items_container.js | 2 +- erpnext/public/js/hub/marketplace.js | 16 ++--- erpnext/public/js/hub/pages/home.js | 60 ++++++++++++++++++ erpnext/public/js/hub/pages/messages.js | 61 ++++++++++++------- erpnext/public/less/hub.less | 52 +++++++++++----- 6 files changed, 161 insertions(+), 72 deletions(-) create mode 100644 erpnext/public/js/hub/pages/home.js diff --git a/erpnext/public/js/hub/components/item_card.js b/erpnext/public/js/hub/components/item_card.js index e6471c6d89..7cb228118c 100644 --- a/erpnext/public/js/hub/components/item_card.js +++ b/erpnext/public/js/hub/components/item_card.js @@ -1,12 +1,4 @@ function get_item_card_html(item) { - if (item.recent_message) { - return get_buying_item_message_card_html(item); - } - - if (item.recent_messages) { - return get_selling_item_message_card_html(item); - } - const item_name = item.item_name || item.name; const title = strip_html(item_name); const img_url = item.image; @@ -120,20 +112,23 @@ function get_buying_item_message_card_html(item) { const content = strip_html(message.content) // route - if (!item.route) { - item.route = `marketplace/item/${item.hub_item_code}` - } - + item.route = `marketplace/buying/${item.hub_item_code}` const item_html = ` -
    - -
    - ${comment_when(message.creation, true)} - ${item_name} -
    - ${sender}: - ${content} +
    +
    +
    + +
    +
    ${item_name}
    +
    + ${sender}: + ${content} +
    +
    +
    +
    + ${comment_when(message.creation, true)}
    @@ -152,7 +147,7 @@ function get_selling_item_message_card_html(item) { } let received_messages = ''; - item.recent_messages.forEach(message => { + item.received_messages.forEach(message => { const sender = message.sender === frappe.session.user ? 'You' : message.sender const content = strip_html(message.content) @@ -183,5 +178,8 @@ function get_selling_item_message_card_html(item) { } 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 5db2c561a5..61b8af6b0b 100644 --- a/erpnext/public/js/hub/components/items_container.js +++ b/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 - ? `
    + ? `

    ${title}

    ${action}
    ` diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js index 7987e251dc..98e84e0ab3 100644 --- a/erpnext/public/js/hub/marketplace.js +++ b/erpnext/public/js/hub/marketplace.js @@ -91,10 +91,10 @@ erpnext.hub.Marketplace = class Marketplace {
  • ${__('Publish Products')}
    • -
  • +
  • ${__('Selling')}
    • -
  • +
  • ${__('Buying')}
    • ` @@ -218,20 +218,12 @@ erpnext.hub.Marketplace = class Marketplace { this.subpages['my-products'] = new erpnext.hub.PublishedProductsPage(this.$body); } - if (route[1] === 'buying-messages' && !this.subpages['buying-messages']) { - this.subpages['buying-messages'] = new erpnext.hub.Messages(this.$body, 'Buying'); - } - - if (route[1] === 'selling-messages' && !this.subpages['selling-messages']) { - this.subpages['selling-messages'] = new erpnext.hub.Messages(this.$body, 'Selling'); - } - if (route[1] === 'buying' && !this.subpages['buying']) { - this.subpages['buying'] = new erpnext.hub.MessageList(this.$body, 'Buying'); + this.subpages['buying'] = new erpnext.hub.Buying(this.$body); } if (route[1] === 'selling' && !this.subpages['selling']) { - this.subpages['selling'] = new erpnext.hub.MessageList(this.$body, '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/home.js b/erpnext/public/js/hub/pages/home.js new file mode 100644 index 0000000000..b011e7ead4 --- /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 = `

    See All

    `; + + 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 d02b302623..f8faa99934 100644 --- a/erpnext/public/js/hub/pages/messages.js +++ b/erpnext/public/js/hub/pages/messages.js @@ -1,21 +1,18 @@ 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 messages_of = this.options[0]; - this.get_items_for_messages(messages_of).then((items) => { + this.get_items_for_messages().then((items) => { this.empty(); if (items.length) { items.map(item => { - item.route = `marketplace/${messages_of.toLowerCase()}/${item.hub_item_code}` + item.route = `marketplace/buying/${item.hub_item_code}` }) - this.render(items, __(messages_of)); + this.render(items, __('Buying')); } if (!items.length && !items.length) { @@ -25,7 +22,7 @@ erpnext.hub.Messages = class Messages extends SubPage { } 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); } @@ -34,18 +31,40 @@ erpnext.hub.Messages = class Messages extends SubPage { this.$wrapper.html(empty_state); } - get_items_for_messages(messages_of) { - if (messages_of === 'Buying') { - return hub.call('get_buying_items_for_messages', {}, 'action:send_message'); - } else if (messages_of === 'Selling') { - return hub.call('get_selling_items_for_messages'); - } else { - frappe.throw('Invalid message type'); - } + get_items_for_messages() { + return hub.call('get_buying_items_for_messages', {}, 'action:send_message'); + } +} + +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', {}); } } @@ -82,4 +101,4 @@ function get_message_html(message) {

    ${message.content}

    `; -} +} \ No newline at end of file diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less index 14bff77d03..779d45d90b 100644 --- a/erpnext/public/less/hub.less +++ b/erpnext/public/less/hub.less @@ -192,27 +192,47 @@ body[data-route^="marketplace/"] { margin-bottom: 20px; } - .item-message-card { - overflow: auto; - max-width: 600px; + .hub-list-item { + display: flex; + justify-content: space-between; + align-items: center; + border: 1px solid @border-color; margin-bottom: 15px; border-radius: 3px; - border: 1px solid @border-color; - .message-body { - padding: 10px; - } - .item-image { - float: left; - height: 50px; - width: 50px; - object-fit: contain; - margin: 10px; - } - .frappe-timestamp { - float: right; + } + + .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: 15px;