From abcc8ab8e5cafc21edbc4a233838c47bb7a676fb Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Sat, 28 Jul 2018 13:57:16 +0530 Subject: [PATCH 1/2] Push review area to bottom --- erpnext/public/less/hub.less | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less index fd1a752c3b..5886893fbc 100644 --- a/erpnext/public/less/hub.less +++ b/erpnext/public/less/hub.less @@ -171,6 +171,14 @@ body[data-route^="marketplace/"] { padding-bottom: 0; border-bottom: none; } + + .hub-item-container { + overflow: hidden; + } + + .hub-item-review-container { + margin-top: calc(30vh); + } } body[data-route^="Hub/"] { From 296848cb69b221a79e8d3d9aafe6df9c195a4a96 Mon Sep 17 00:00:00 2001 From: Faris Ansari Date: Sat, 28 Jul 2018 16:14:22 +0530 Subject: [PATCH 2/2] Publish Page - Code cleanup - Separate local item card and hub item card - Use make_search_bar --- erpnext/hub_node/__init__.py | 11 +- erpnext/public/js/hub/marketplace.js | 175 ++++++++++++++++----------- erpnext/public/less/hub.less | 39 +++--- 3 files changed, 132 insertions(+), 93 deletions(-) diff --git a/erpnext/hub_node/__init__.py b/erpnext/hub_node/__init__.py index 3a23daaaa2..5ed2dade2f 100644 --- a/erpnext/hub_node/__init__.py +++ b/erpnext/hub_node/__init__.py @@ -67,17 +67,16 @@ def get_valid_items(search_value=''): @frappe.whitelist() def publish_selected_items(items_to_publish): - for item_code in json.loads(items_to_publish): - frappe.db.set_value('Item', item_code, 'publish_in_hub', 1) - # frappe.db.set_value("Hub Settings", "Hub Settings", "sync_in_progress", 1) - # time.sleep(10) - # frappe.db.set_value("Hub Settings", "Hub Settings", "sync_in_progress", 0) + items_to_publish = json.loads(items_to_publish) + + for item_code in items_to_publish: + frappe.db.set_value('Item', item_code, 'publish_in_hub', 1) hub_settings = frappe.get_doc('Hub Settings') hub_settings.sync() - return + return len(items_to_publish) @frappe.whitelist() def get_item_favourites(start=0, limit=20, fields=["*"], order_by=None): diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js index 7363afb912..97fed62406 100644 --- a/erpnext/public/js/hub/marketplace.js +++ b/erpnext/public/js/hub/marketplace.js @@ -28,8 +28,6 @@ erpnext.hub.Marketplace = class Marketplace { const $target = $(e.currentTarget); const route = $target.data().route; frappe.set_route(route); - - e.stopPropagation(); }); } @@ -218,8 +216,11 @@ erpnext.hub.Home = class Home extends SubPage { make_wrapper() { super.make_wrapper(); - make_search_bar(this.$wrapper, keyword => { - frappe.set_route('marketplace', 'search', keyword); + make_search_bar({ + wrapper: this.$wrapper, + on_search: keyword => { + frappe.set_route('marketplace', 'search', keyword); + } }); } @@ -298,8 +299,11 @@ erpnext.hub.SearchPage = class SearchPage extends SubPage { make_wrapper() { super.make_wrapper(); - make_search_bar(this.$wrapper, keyword => { - frappe.set_route('marketplace', 'search', keyword); + make_search_bar({ + wrapper: this.$wrapper, + on_search: keyword => { + frappe.set_route('marketplace', 'search', keyword); + } }); } @@ -696,6 +700,11 @@ erpnext.hub.Profile = class Profile extends SubPage { } erpnext.hub.Publish = class Publish extends SubPage { + make_wrapper() { + super.make_wrapper(); + this.load_publish_page(); + } + load_publish_page() { const title_html = `${__('Select Products to Publish')}`; @@ -708,15 +717,11 @@ erpnext.hub.Publish = class Publish extends SubPage { const publish_button_html = ``; - const select_all_button = ``; - const deselect_all_button = ``; - - const search_html = `
- -
`; + const select_all_button = ``; + const deselect_all_button = ``; const subpage_header = $(`
@@ -726,12 +731,19 @@ erpnext.hub.Publish = class Publish extends SubPage {
${publish_button_html} - - ${search_html} `); this.$wrapper.append(subpage_header); + make_search_bar({ + wrapper: this.$wrapper, + on_search: keyword => { + this.search_value = keyword; + this.get_items_and_render(); + }, + placeholder: __('Search Items') + }); + this.setup_events(); } @@ -740,27 +752,32 @@ erpnext.hub.Publish = class Publish extends SubPage { this.load_publishing_state(); this.publish_selected_items() .then(r => { - frappe.msgprint('check'); + console.log(`${r.message} items will be published`); }); }); - const $search_input = this.$wrapper.find('.hub-search-container input'); - this.search_value = ''; + this.$wrapper.on('click', '.hub-card', (e) => { + const $target = $(e.currentTarget); + $target.toggleClass('active'); - $search_input.on('keydown', frappe.utils.debounce((e) => { - if (e.which === frappe.ui.keyCode.ENTER) { - this.search_value = $search_input.val(); - this.get_items_and_render(); + // Get total items + const total_items = this.$wrapper.find('.hub-card.active').length; + + let button_label; + if (total_items > 0) { + const more_than_one = total_items > 1; + button_label = __('Publish {0} item{1}', [total_items, more_than_one ? 's' : '']); + } else { + button_label = __('Publish'); } - }, 300)); + + this.$wrapper.find('.publish-items') + .text(button_label) + .prop('disabled', total_items === 0); + }); } get_items_and_render() { - if(hub.settings.sync_in_progress) { - this.load_publishing_state(); - return; - } - this.$wrapper.find('.hub-card-container').empty(); this.get_valid_items() .then(r => { @@ -769,22 +786,15 @@ erpnext.hub.Publish = class Publish extends SubPage { } refresh() { - this.get_items_and_render(); + if (hub.settings.sync_in_progress) { + this.load_publishing_state(); + } else { + this.get_items_and_render(); + } } render(items) { - const items_container = $(get_item_card_container_html(items)); - items_container.addClass('static').on('click', '.hub-card', (e) => { - const $target = $(e.currentTarget); - $target.toggleClass('active'); - - // Get total items - const total_items = this.$wrapper.find('.hub-card.active').length; - const more_than_one = total_items > 1; - this.$wrapper.find('.publish-items') - .html(__('Publish ' + total_items + ' item' + (more_than_one ? 's' : ''))); - }); - + const items_container = $(get_item_card_container_html(items, '', get_local_item_card_html)); this.$wrapper.append(items_container); } @@ -855,8 +865,8 @@ function get_empty_state(message, action) { `; } -function get_item_card_container_html(items, title='') { - const items_html = (items || []).map(item => get_item_card_html(item)).join(''); +function get_item_card_container_html(items, title='', get_item_html = get_item_card_html) { + const items_html = (items || []).map(item => get_item_html(item)).join(''); const title_html = title ? `
${title} @@ -875,11 +885,44 @@ function get_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 active = item.publish_in_hub; + // Subtitle + let subtitle = [comment_when(item.creation)]; + const rating = item.average_rating; + if (rating > 0) { + subtitle.push(rating + ``) + } + subtitle.push(company_name); + let dot_spacer = ''; + subtitle = subtitle.join(dot_spacer); + + const item_html = ` +
+
+
+
${title}
+
${subtitle}
+
+
+ +
+
+
+
+ `; + + return item_html; +} + +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 @@ -893,36 +936,27 @@ function get_item_card_html(item) { let dot_spacer = ''; subtitle = subtitle.join(dot_spacer); - // Decide item link - const is_local = item.source_type === "local"; - const route = !is_local - ? `marketplace/item/${item.hub_item_code}` - : `Form/Item/${item.item_name}`; - - const card_route = is_local ? '' : `data-route='${route}'`; - - const show_local_item_button = is_local - ? `
- -
` - : ''; + const edit_item_button = `
+ +
`; const item_html = `
-
+
-
-
${title}
-
${subtitle}
-
+
${title}
+
${subtitle}
-
- ${show_local_item_button} +
+
+ ${edit_item_button} +
+
@@ -931,6 +965,7 @@ function get_item_card_html(item) { return item_html; } + function get_rating_html(rating) { let rating_html = ``; for (var i = 0; i < 5; i++) { @@ -941,13 +976,13 @@ function get_rating_html(rating) { return rating_html; } -function make_search_bar($wrapper, on_search) { +function make_search_bar({wrapper, on_search, placeholder = __('Search for anything')}) { const $search = $(`
- +
` ); - $wrapper.append($search); + wrapper.append($search); const $search_input = $search.find('input'); $search_input.on('keydown', frappe.utils.debounce((e) => { diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less index 5886893fbc..177ec42728 100644 --- a/erpnext/public/less/hub.less +++ b/erpnext/public/less/hub.less @@ -43,10 +43,12 @@ body[data-route^="marketplace/"] { overflow: hidden; cursor: pointer; - &:hover .overlay { + &:hover .hub-card-overlay { display: block; } + } + .hub-card.is-local { &.active { .hub-card-header { background-color: #f4ffe5; @@ -56,42 +58,45 @@ body[data-route^="marketplace/"] { display: inline; } } - } - - .hub-card-header { - padding: 12px 15px; - height: 60px; - border-bottom: 1px solid @border-color; - - display: flex; - justify-content: space-between; .octicon-check { display: none; + position: absolute; font-size: 20px; + right: 15px; + top: 50%; + transform: translateY(-50%); } } + .hub-card-header { + position: relative; + padding: 12px 15px; + height: 60px; + border-bottom: 1px solid @border-color; + } + .hub-card-body { position: relative; height: 200px; } - .overlay { + .hub-card-overlay { display: none; position: absolute; - } - - .hub-card-overlay { top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.1); } - .button-overlay { - top: 155px; - left: 15px; + .hub-card-overlay-body { + position: relative; + height: 100%; + } + + .hub-card-overlay-button { + position: absolute; } .hub-card-image {