From 0e59ec3ed22fcd2f2f332c4a284a69ec44e3d3d6 Mon Sep 17 00:00:00 2001 From: Suraj Shetty Date: Sat, 25 Aug 2018 21:22:55 +0530 Subject: [PATCH] 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;