diff --git a/erpnext/public/js/hub/components/item_card.js b/erpnext/public/js/hub/components/item_card.js index a2c855389fc..e6471c6d89c 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 d8bfea8a1bd..7987e251dc1 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 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/messages.js b/erpnext/public/js/hub/pages/messages.js index 683cba01f03..d02b3026238 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 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..14bff77d03c 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;