diff --git a/erpnext/public/js/hub/hub_listing.js b/erpnext/public/js/hub/hub_listing.js index 0ff79708d7..9ac1b848ea 100644 --- a/erpnext/public/js/hub/hub_listing.js +++ b/erpnext/public/js/hub/hub_listing.js @@ -22,7 +22,7 @@ erpnext.hub.HubListing = class HubListing extends frappe.views.BaseList { const title = this.page_title; let iconHtml = ``; let titleHtml = `${title}`; - this.page.set_title(iconHtml + titleHtml, '', false, title); + this.page.set_title(titleHtml, '', false, title); } setup_fields() { @@ -36,6 +36,8 @@ erpnext.hub.HubListing = class HubListing extends frappe.views.BaseList { }); } + setup_filter_area() { } + get_meta() { return new Promise(resolve => frappe.call('erpnext.hub_node.get_meta', {doctype: this.doctype}, resolve)); @@ -72,12 +74,12 @@ erpnext.hub.HubListing = class HubListing extends frappe.views.BaseList { } setup_sort_selector() { - this.sort_selector = new frappe.ui.SortSelector({ - parent: this.filter_area.$filter_list_wrapper, - doctype: this.doctype, - args: this.order_by, - onchange: () => this.refresh(true) - }); + // this.sort_selector = new frappe.ui.SortSelector({ + // parent: this.filter_area.$filter_list_wrapper, + // doctype: this.doctype, + // args: this.order_by, + // onchange: () => this.refresh(true) + // }); } setup_view() { @@ -88,6 +90,21 @@ erpnext.hub.HubListing = class HubListing extends frappe.views.BaseList { this.page.fields_dict[field].set_value(value); } } + + const $hub_search = $(` +
+ +
` + ); + this.$frappe_list.prepend($hub_search); + const $search_input = $hub_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.refresh(); + } + }, 300)); } get_args() { @@ -146,7 +163,10 @@ erpnext.hub.HubListing = class HubListing extends frappe.views.BaseList { if (this.start === 0) { // ${this.getHeaderHtml()} this.$result.html(` -
+
+
+ Recently Published +
${html}
`); @@ -366,23 +386,23 @@ erpnext.hub.ItemListing = class ItemListing extends erpnext.hub.HubListing { } bootstrap_data(response) { - let companies = response.companies.map(d => d.name); - this.custom_filter_configs = [ - { - fieldtype: 'Autocomplete', - label: __('Select Company'), - condition: 'like', - fieldname: 'company_name', - options: companies - }, - { - fieldtype: 'Link', - label: __('Select Country'), - options: 'Country', - condition: 'like', - fieldname: 'country' - } - ]; + // let companies = response.companies.map(d => d.name); + // this.custom_filter_configs = [ + // { + // fieldtype: 'Autocomplete', + // label: __('Select Company'), + // condition: 'like', + // fieldname: 'company_name', + // options: companies + // }, + // { + // fieldtype: 'Link', + // label: __('Select Country'), + // options: 'Country', + // condition: 'like', + // fieldname: 'country' + // } + // ]; } prepareFormFields() { @@ -414,6 +434,10 @@ erpnext.hub.ItemListing = class ItemListing extends erpnext.hub.HubListing { setup_side_bar() { super.setup_side_bar(); + this.setup_new_sidebar(); + + return; + let $pitch = $(`
+
  • + Browse +
    • +
  • + Favorites +
    • +
  • + Become a seller +
    • + + `); + + frappe.call('erpnext.hub_node.get_categories') + .then(r => { + const categories = r.message.map(d => d.value).sort(); + const sidebar_items = [ + `
  • + Category +
    • `, + `
  • + All +
    • `, + ...categories.map(category => ` +
  • + ${category} +
    • + `) + ]; + + this.sidebar.$sidebar.append(` + + `); + }); + } + update_category(label) { this.current_category = (label=='All Categories') ? undefined : label; this.refresh(); } get_filters_for_args() { - if(!this.filter_area) return; - let filters = {}; - this.filter_area.get().forEach(f => { - let field = f[1] !== 'name' ? f[1] : 'item_name'; - filters[field] = [f[2], f[3]]; - }); - if(this.current_category) { - filters['hub_category'] = this.current_category; + const filter = {}; + + if (this.search_value) { + filter.item_name = ['like', `%${this.search_value}%`]; } - return filters; + + filter.image = ['like', 'http%']; + return filter; + + // if(!this.filter_area) return; + // let filters = {}; + // this.filter_area.get().forEach(f => { + // let field = f[1] !== 'name' ? f[1] : 'item_name'; + // filters[field] = [f[2], f[3]]; + // }); + // if(this.current_category) { + // filters['hub_category'] = this.current_category; + // } + // return filters; } update_data(r) { @@ -485,11 +558,14 @@ erpnext.hub.ItemListing = class ItemListing extends erpnext.hub.HubListing { }); } - item_html(item) { + item_html(item, index) { item._name = encodeURI(item.name); const encoded_name = item._name; const title = strip_html(item[this.meta.title_field || 'name']); - const _class = !item[this.imageFieldName] ? 'no-image' : ''; + + const img_url = item[this.imageFieldName]; + const no_image = !img_url; + const _class = no_image ? 'no-image' : ''; const route = `#Hub/Item/${item.hub_item_code}`; const company_name = item['company_name']; @@ -507,41 +583,66 @@ erpnext.hub.ItemListing = class ItemListing extends erpnext.hub.HubListing { if(i >= ratingAverage) starClass = 'fa-star-o'; ratingHtml += ``; } + let dot_spacer = ''; + let subtitle = ''; + subtitle += comment_when(item.creation); + subtitle += dot_spacer; + + if (ratingAverage > 0) { + subtitle += ratingAverage + ``; + subtitle += dot_spacer; + } + subtitle += company_name; let item_html = ` -
    -
    -
    - - ${title} - -
    -
    - ${ratingHtml} - (${reviewLength}) -
    -
    -

    ${ company_name }

     -
    -
    -
    - -
    - - +
    +
    +
    +
    + + ${title} +
    - +
    + ${ratingHtml} + (${reviewLength}) +
    +
    +

    ${ company_name }

     +
    +
    +
    + +
    + + +
    +     +
    +
    + `; + item_html = ` +
    +
    +
    +
    ${title}
    +
    ${subtitle}
    +
    +
    + +
    +
    `; diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less index bdca28f1e7..ef08fde270 100644 --- a/erpnext/public/less/hub.less +++ b/erpnext/public/less/hub.less @@ -6,8 +6,71 @@ body[data-route^="Hub/"] { height: 40px; } - .hub-page-title { - margin-left: 10px; + .layout-main-section { + border: none; + } + + .frappe-list { + padding-top: 25px; + font-size: @text-medium; + + @media (max-width: @screen-xs) { + padding-left: 20px; + padding-right: 20px; + } + } + + .hub-card { + border: 1px solid @border-color; + margin-bottom: 25px; + border-radius: 4px; + overflow: hidden; + cursor: pointer; + } + + .hub-card-header { + padding: 12px 15px; + height: 60px; + } + + .hub-card-body { + height: 200px; + } + + .hub-card-image { + min-width: 100%; + width: 100%; + } + + .hub-search-container { + margin-bottom: 20px; + + input { + font-size: @text-medium; + height: 32px; + } + } + + .hub-sidebar { + padding-top: 25px; + padding-right: 15px; + } + + .hub-sidebar-group { + margin-bottom: 10px; + } + + .hub-sidebar-item { + padding: 5px 8px; + margin-bottom: 3px; + border-radius: 4px; + border: 1px solid transparent; + + cursor: pointer; + + &.active, &:hover:not(.is-title) { + border-color: @border-color; + } } .img-wrapper {