diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js index 22149562cfd..4c3e9ef7c96 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(); }); } @@ -222,8 +220,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); + } }); } @@ -302,8 +303,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); + } }); } @@ -840,15 +844,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 = $(`
@@ -858,12 +858,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(); } @@ -871,19 +878,29 @@ erpnext.hub.Publish = class Publish extends SubPage { this.$wrapper.find('.publish-items').on('click', () => { 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() { @@ -900,22 +917,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); } @@ -988,8 +998,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} @@ -1008,11 +1018,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 @@ -1026,36 +1069,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} +
+
@@ -1064,6 +1098,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++) { @@ -1074,13 +1109,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 20bf3c1219b..a4321569fb2 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 { @@ -185,6 +190,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/"] {