diff --git a/erpnext/public/js/hub/hub_factory.js b/erpnext/public/js/hub/hub_factory.js index d54787af36a..c94edf4e4d5 100644 --- a/erpnext/public/js/hub/hub_factory.js +++ b/erpnext/public/js/hub/hub_factory.js @@ -14,7 +14,7 @@ frappe.views.marketplaceFactory = class marketplaceFactory extends frappe.views. make(page_name) { const assets = [ - '/assets/erpnext/js/hub/hub_listing.js' + '/assets/erpnext/js/hub/marketplace.js' ]; frappe.require(assets, () => { diff --git a/erpnext/public/js/hub/hub_listing.js b/erpnext/public/js/hub/hub_listing.js index eb558067841..368c723e5b3 100644 --- a/erpnext/public/js/hub/hub_listing.js +++ b/erpnext/public/js/hub/hub_listing.js @@ -1,792 +1,3 @@ -frappe.provide('erpnext.hub'); - -erpnext.hub.Marketplace = class Marketplace { - constructor({ parent }) { - this.$parent = $(parent); - this.page = parent.page; - - frappe.db.get_doc('Hub Settings') - .then(doc => { - this.hub_settings = doc; - this.registered = doc.registered; - - this.setup_header(); - this.make_sidebar(); - this.make_body(); - this.setup_events(); - this.refresh(); - }); - } - - setup_header() { - this.page.set_title(__('Marketplace')); - } - - setup_events() { - this.$parent.on('click', '[data-route]', (e) => { - const $target = $(e.currentTarget); - const route = $target.data().route; - frappe.set_route(route); - - e.stopPropagation(); - }); - } - - make_sidebar() { - this.$sidebar = this.$parent.find('.layout-side-section').addClass('hidden-xs'); - - const user_specific_items_html = this.registered - ? `
  • - ${__('Your Profile')} -
    • -
  • - ${__('Publish Products')} -
    • ` - - : `
  • - ${__('Become a seller')} -
    • `; - - this.$sidebar.append(` - - `); - - this.make_sidebar_categories(); - } - - make_sidebar_categories() { - frappe.call('erpnext.hub_node.get_categories') - .then(r => { - const categories = r.message.map(d => d.value).sort(); - const sidebar_items = [ - `
  • - ${__('Category')} -
    • `, - `
  • - ${__('All')} -
    • `, - ...(this.registered - ? [`
  • - ${__('Your Products')} -
    • `] - : []), - ...categories.map(category => ` -
  • - ${__(category)} -
    • - `) - ]; - - this.$sidebar.append(` - - `); - - this.update_sidebar(); - }); - } - - make_body() { - this.$body = this.$parent.find('.layout-main-section'); - } - - update_sidebar() { - const route = frappe.get_route_str(); - const $sidebar_item = this.$sidebar.find(`[data-route="${route}"]`); - - const $siblings = this.$sidebar.find('[data-route]'); - $siblings.removeClass('active').addClass('text-muted'); - - $sidebar_item.addClass('active').removeClass('text-muted'); - } - - refresh() { - const route = frappe.get_route(); - this.subpages = this.subpages || {}; - - for (let page in this.subpages) { - this.subpages[page].hide(); - } - - if (route[1] === 'home' && !this.subpages.home) { - this.subpages.home = new erpnext.hub.Home(this.$body); - } - - if (route[1] === 'favourites' && !this.subpages.favourites) { - this.subpages.favourites = new erpnext.hub.Favourites(this.$body); - } - - if (route[1] === 'category' && route[2] && !this.subpages.category) { - this.subpages.category = new erpnext.hub.Category(this.$body); - } - - if (route[1] === 'item' && route[2] && !this.subpages.item) { - this.subpages.item = new erpnext.hub.Item(this.$body); - } - - if (route[1] === 'register' && !this.subpages.register) { - this.subpages.register = new erpnext.hub.Register(this.$body); - } - - if (route[1] === 'publish' && !this.subpages.publish) { - this.subpages.publish = new erpnext.hub.Publish(this.$body); - } - - - if (!Object.keys(this.subpages).includes(route[1])) { - frappe.show_not_found(); - return; - } - - this.update_sidebar(); - frappe.utils.scroll_to(0); - this.subpages[route[1]].show(); - } -} - -class SubPage { - constructor(parent) { - this.$parent = $(parent); - this.make_wrapper(); - } - - make_wrapper() { - const page_name = frappe.get_route()[1]; - this.$wrapper = $(`
    `).appendTo(this.$parent); - this.hide(); - } - - show() { - this.refresh(); - this.$wrapper.show(); - } - - hide() { - this.$wrapper.hide(); - } -} - -erpnext.hub.Home = class Home extends SubPage { - make_wrapper() { - super.make_wrapper(); - this.make_search_bar(); - } - - refresh() { - this.get_items_and_render(); - } - - get_items_and_render() { - this.$wrapper.find('.hub-card-container').empty(); - this.get_items() - .then(r => { - erpnext.hub.hub_item_cache = r.message; - this.render(r.message); - }); - } - - get_items() { - return frappe.call('erpnext.hub_node.get_list', { - doctype: 'Hub Item', - filters: { - image: ['like', 'http%'] - } - }); - } - - make_search_bar() { - const $search = $(` -
    - -
    ` - ); - this.$wrapper.append($search); - const $search_input = $search.find('input'); - - $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(); - } - }, 300)); - } - - render(items) { - const html = get_item_card_container_html(items, __('Recently Published')); - this.$wrapper.append(html) - } -} - -erpnext.hub.Favourites = class Favourites extends SubPage { - refresh() { - this.get_favourites() - .then(r => { - this.render(r.message); - }); - } - - get_favourites() { - return frappe.call('erpnext.hub_node.get_item_favourites'); - } - - render(items) { - this.$wrapper.find('.hub-card-container').empty(); - const html = get_item_card_container_html(items, __('Favourites')); - this.$wrapper.append(html) - } -} - -erpnext.hub.Category = class Category extends SubPage { - refresh() { - this.category = frappe.get_route()[2]; - this.get_items_for_category(this.category) - .then(r => { - this.render(r.message); - }); - } - - get_items_for_category(category) { - this.$wrapper.find('.hub-card-container').empty(); - return frappe.call('erpnext.hub_node.get_list', { - doctype: 'Hub Item', - filters: { - hub_category: category - } - }); - } - - render(items) { - const html = get_item_card_container_html(items, __(this.category)); - this.$wrapper.append(html) - } -} - -erpnext.hub.Item = class Item extends SubPage { - refresh() { - this.hub_item_code = frappe.get_route()[2]; - - this.get_item(this.hub_item_code) - .then(item => { - this.render(item); - }); - } - - get_item(hub_item_code) { - return new Promise(resolve => { - const item = (erpnext.hub.hub_item_cache || []).find(item => item.name === hub_item_code) - - if (item) { - resolve(item); - } else { - frappe.call('erpnext.hub_node.get_list', { - doctype: 'Hub Item', - filters: { - name: hub_item_code - } - }) - .then(r => { - resolve(r.message[0]); - }); - } - }); - } - - render(item) { - const title = item.item_name || item.name; - const company = item.company_name; - - const who = __('Posted By {0}', [company]); - const when = comment_when(item.creation); - - const city = item.seller_city ? item.seller_city + ', ' : ''; - const country = item.country ? item.country : ''; - const where = `${city}${country}`; - - const dot_spacer = ''; - - const description = item.description || ''; - - const rating_html = get_rating_html(item); - const rating_count = item.reviews.length > 0 ? `(${item.reviews.length} reviews)` : ''; - - const html = ` -
    -
    -
    - -
    -
    -
    -
    -
    - -
    -
    -
    -

    ${title}

    -
    -

    ${where}${dot_spacer}${when}

    -

    ${rating_html}${rating_count}

    -
    -
    -
    - ${description ? - `${__('Description')} -

    ${description}

    - ` : __('No description') - } -
    -
    -
    -
    -
    - Seller Information -
    -
    - -
    -
    - ${company} -

    - Contact Seller -

    -
    -
    - -
    -
    -
    -
    -
    -
    -
    -
    -
    - -
    -
    -
    -
    - `; - - this.$wrapper.html(html); - - this.make_review_area(); - this.render_reviews(item); - } - - make_review_area() { - this.comment_area = new frappe.ui.ReviewArea({ - parent: this.$wrapper.find('.timeline-head').empty(), - mentions: [], - on_submit: (val) => { - val.user = frappe.session.user; - val.username = frappe.session.user_fullname; - - frappe.call({ - method: 'erpnext.hub_node.send_review', - args: { - hub_item_code: this.hub_item_code, - review: val - }, - callback: (r) => { - console.log(r); - this.render_reviews(r.message); - this.comment_area.reset(); - }, - freeze: true - }); - } - }); - } - - render_reviews(item) { - this.$wrapper.find('.timeline-items').empty(); - item.reviews.forEach(review => this.render_review(review, item)); - } - - render_review(review, item) { - let username = review.username || review.user || __("Anonymous"); - - let image_html = review.user_image - ? `
    ` - : `
    ${frappe.get_abbr(username)}
    ` - - let edit_html = review.own - ? ` -
    - - ${'data.edit'} - -
    ` - : ''; - - let rating_html = get_rating_html(item); - - const $timeline_items = this.$wrapper.find('.timeline-items'); - - $(this.get_timeline_item(review, image_html, edit_html, rating_html)) - .appendTo($timeline_items); - } - - get_timeline_item(data, image_html, edit_html, rating_html) { - return `
    - -
    -
    -
    ${edit_html}
    - -
    - - ${image_html} - - -
    - - - ${data.username} - - - - - -
    -
    -
    -
    -

    - ${rating_html} -

    -
    ${data.subject}
    -

    - ${data.content} -

    -
    -
    -
    -
    -
    `; - } -} -erpnext.hub.Register = class Register extends SubPage { - make_wrapper() { - super.make_wrapper(); - this.$register_container = $(`
    `) - .appendTo(this.$wrapper); - this.$form_container = $('
    ') - .appendTo(this.$wrapper); - } - - refresh() { - this.$register_container.empty(); - this.$form_container.empty(); - this.render(); - } - - render() { - this.make_field_group(); - } - - make_field_group() { - const fields = [ - { - fieldtype: 'Link', - fieldname: 'company', - label: __('Company'), - options: 'Company', - onchange: () => { - const value = this.field_group.get_value('company'); - - if (value) { - frappe.db.get_doc('Company', value) - .then(company => { - this.field_group.set_values({ - country: company.country, - company_email: company.email, - currency: company.default_currency - }); - }); - } - } - }, - { - fieldname: 'company_email', - label: __('Email'), - fieldtype: 'Data' - }, - { - fieldname: 'country', - label: __('Country'), - fieldtype: 'Read Only' - }, - { - fieldname: 'currency', - label: __('Currency'), - fieldtype: 'Read Only' - }, - { - fieldtype: 'Text', - label: __('About your Company'), - fieldname: 'company_description' - } - ]; - - this.field_group = new frappe.ui.FieldGroup({ - parent: this.$form_container, - fields - }); - - this.field_group.make(); - - this.$form_container.find('.form-column').append(` -
    - -
    - `); - - this.$form_container.find('.form-message').removeClass('hidden small').addClass('h4').text(__('Become a Seller')) - - this.$form_container.on('click', '.btn-register', () => { - const form_values = this.field_group.get_values(); - frappe.call('erpnext.hub_node.doctype.hub_settings.hub_settings.register_seller', form_values) - .then(() => { - // Reload page and things ... but for now - frappe.msgprint('Registered successfully.'); - }); - }); - } -} - -erpnext.hub.Publish = class Publish extends SubPage { - make_wrapper() { - super.make_wrapper(); - const title_html = `${__('Select Products to Publish')}`; - const info = `

    ${__("Status decided by the 'Publish in Hub' field in Item.")}

    `; - const subtitle_html = ` -

    - ${__(`Only products with an image, description and category can be published. - Please update them if an item in your inventory does not appear.`)} -

    `; - const publish_button_html = ``; - - const select_all_button = ``; - const deselect_all_button = ``; - - const search_html = `
    - -
    `; - - const subpage_header = $(` -
    -
    - ${title_html} - ${subtitle_html} -
    - ${publish_button_html} -
    - - ${search_html} - - ${select_all_button} - ${deselect_all_button} - `); - - this.$wrapper.append(subpage_header); - - this.setup_events(); - } - - setup_events() { - this.$wrapper.find('.select-all').on('click', () => { - this.$wrapper.find('.hub-card').addClass('active'); - }); - - this.$wrapper.find('.deselect-all').on('click', () => { - this.$wrapper.find('.hub-card').removeClass('active'); - }); - - this.$wrapper.find('.publish-items').on('click', () => { - this.publish_selected_items() - .then(r => { - frappe.msgprint('check'); - }); - }); - - const $search_input = this.$wrapper.find('.hub-search-container input'); - this.search_value = ''; - - $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(); - } - }, 300)); - } - - get_items_and_render() { - this.$wrapper.find('.hub-card-container').empty(); - this.get_valid_items() - .then(r => { - this.render(r.message); - }); - } - - refresh() { - 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'); - }); - - this.$wrapper.append(items_container); - } - - get_valid_items() { - return frappe.call( - 'erpnext.hub_node.get_valid_items', - { - search_value: this.search_value - } - ); - } - - publish_selected_items() { - const items_to_publish = []; - const items_to_unpublish = []; - this.$wrapper.find('.hub-card').map(function () { - const active = $(this).hasClass('active'); - - if(active) { - items_to_publish.push($(this).attr("data-id")); - } else { - items_to_unpublish.push($(this).attr("data-id")); - } - }); - - return frappe.call( - 'erpnext.hub_node.publish_selected_items', - { - items_to_publish: items_to_publish, - items_to_unpublish: items_to_unpublish - } - ); - } -} - -function get_item_card_container_html(items, title='') { - const items_html = (items || []).map(item => get_item_card_html(item)).join(''); - - const html = `
    -
    - ${title} -
    - ${items_html} -
    `; - - return html; -} - -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_name; - - const active = item.publish_in_hub; - - const id = item.hub_item_code || item.item_code; - - // Subtitle - let subtitle = [comment_when(item.creation)]; - const rating = get_rating(item); - if (rating > 0) { - subtitle.push(rating + ``) - } - subtitle.push(company_name); - - let dot_spacer = ''; - subtitle = subtitle.join(dot_spacer); - - // Decide item link - const isLocal = item.source_type === "local"; - const route = !isLocal - ? `marketplace/item/${item.hub_item_code}` - : `Form/Item/${item.item_name}`; - - const card_route = isLocal ? '' : `data-route='${route}'`; - - const show_local_item_button = isLocal - ? `
    - -
    ` - : ''; - - const item_html = ` -
    -
    -
    -
    -
    ${title}
    -
    ${subtitle}
    -
    - -
    -
    - -
    - ${show_local_item_button} -
    -
    -
    - `; - - return item_html; -} - -function get_rating(item) { - const review_length = (item.reviews || []).length; - return review_length - ? item.reviews - .map(r => r.rating) - .reduce((a, b) => a + b, 0) / review_length - : 0; -} - -function get_rating_html(item) { - const rating = get_rating(item); - let rating_html = ``; - for (var i = 0; i < 5; i++) { - let star_class = 'fa-star'; - if (i >= rating) star_class = 'fa-star-o'; - rating_html += ``; - } - return rating_html; -} erpnext.hub.HubListing = class HubListing extends frappe.views.BaseList { setup_defaults() {