diff --git a/erpnext/public/js/hub/components/item_card.js b/erpnext/public/js/hub/components/item_card.js index a2c855389fc..7cb228118c7 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 @@ 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); @@ -60,21 +111,64 @@ function get_item_message_card_html(item) { const sender = message.sender === frappe.session.user ? 'You' : message.sender const content = strip_html(message.content) + // route + item.route = `marketplace/buying/${item.hub_item_code}` + + const item_html = ` +
+
+
+ +
+
${item_name}
+
+ ${sender}: + ${content} +
+
+
+
+ ${comment_when(message.creation, true)} +
+
+
+ `; + + 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 += ` +
+ ${comment_when(message.creation, true)} +
+ ${sender}: + ${content} +
+
+ ` + }); const item_html = ` -
- -
- ${comment_when(message.creation, true)} - ${item_name} -
- ${sender}: - ${content} +
+
+ +
${item_name}
+
+ ${received_messages}
@@ -84,5 +178,8 @@ function get_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 5db2c561a57..61b8af6b0b8 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 d8bfea8a1bd..98e84e0ab30 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,12 @@ 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' && !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 2be6d78d836..7835fc36fdc 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 00000000000..b011e7ead42 --- /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 683cba01f03..f8faa99934c 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 @@ erpnext.hub.Messages = class Messages extends SubPage { 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 @@ function get_message_html(message) {

    ${message.content}

    • `; -} +} \ 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 07ea11e0d49..162aa52b294 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 720a9d80603..779d45d90bc 100644 --- a/erpnext/public/less/hub.less +++ b/erpnext/public/less/hub.less @@ -192,24 +192,75 @@ body[data-route^="marketplace/"] { 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; + } } }