New page: marketplace
- subpages: home, favourites, item, category
diff --git a/erpnext/hub_node/__init__.py b/erpnext/hub_node/__init__.py
index 65b1386..a5e4607 100644
--- a/erpnext/hub_node/__init__.py
+++ b/erpnext/hub_node/__init__.py
@@ -21,7 +21,7 @@
response = connection.get_list(doctype,
limit_start=start, limit_page_length=limit,
- filters=filters, fields=fields)
+ filters=filters, fields=['name'])
# Bad, need child tables in response
listing = []
diff --git a/erpnext/public/js/hub/hub_factory.js b/erpnext/public/js/hub/hub_factory.js
index 6451e1d..d54787a 100644
--- a/erpnext/public/js/hub/hub_factory.js
+++ b/erpnext/public/js/hub/hub_factory.js
@@ -1,6 +1,32 @@
frappe.provide('erpnext.hub.pages');
-frappe.views.HubFactory = frappe.views.Factory.extend({
+frappe.views.marketplaceFactory = class marketplaceFactory extends frappe.views.Factory {
+ show() {
+ const page_name = frappe.get_route_str();
+
+ if (frappe.pages.marketplace) {
+ frappe.container.change_to('marketplace');
+ erpnext.hub.marketplace.refresh();
+ } else {
+ this.make('marketplace');
+ }
+ }
+
+ make(page_name) {
+ const assets = [
+ '/assets/erpnext/js/hub/hub_listing.js'
+ ];
+
+ frappe.require(assets, () => {
+ erpnext.hub.marketplace = new erpnext.hub.Marketplace({
+ parent: this.make_page(true, page_name)
+ });
+ });
+ }
+}
+
+frappe.views.HubFactory = class HubFactory extends frappe.views.Factory {
+
make(route) {
const page_name = frappe.get_route_str();
const page = route[1];
@@ -60,7 +86,7 @@
window.hub_page = erpnext.hub.pages[page_name];
}
});
- },
+ }
render_offline_card() {
let html = `<div class='page-card' style='margin: 140px auto;'>
@@ -77,4 +103,4 @@
return;
}
-});
+}
diff --git a/erpnext/public/js/hub/hub_listing.js b/erpnext/public/js/hub/hub_listing.js
index 9ac1b84..a6a9ac9 100644
--- a/erpnext/public/js/hub/hub_listing.js
+++ b/erpnext/public/js/hub/hub_listing.js
@@ -1,5 +1,404 @@
frappe.provide('erpnext.hub');
+erpnext.hub.Marketplace = class Marketplace {
+ constructor({ parent }) {
+ this.$parent = $(parent);
+ this.page = parent.page;
+
+ 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);
+ });
+ }
+
+ make_sidebar() {
+ this.$sidebar = this.$parent.find('.layout-side-section');
+
+ this.$sidebar.append(`
+ <ul class="list-unstyled hub-sidebar-group">
+ <li class="hub-sidebar-item" data-route="marketplace/home">
+ ${__('Browse')}
+ </li>
+ <li class="hub-sidebar-item" data-route="marketplace/favourites">
+ ${__('Favorites')}
+ </li>
+ <li class="hub-sidebar-item text-muted">
+ ${__('Become a seller')}
+ </li>
+ </ul>
+ `);
+
+ 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 = [
+ `<li class="hub-sidebar-item bold is-title">
+ ${__('Category')}
+ </li>`,
+ `<li class="hub-sidebar-item active" data-route="marketplace/home">
+ ${__('All')}
+ </li>`,
+ ...categories.map(category => `
+ <li class="hub-sidebar-item text-muted" data-route="marketplace/category/${category}">
+ ${__(category)}
+ </li>
+ `)
+ ];
+
+ this.$sidebar.append(`
+ <ul class="list-unstyled">
+ ${sidebar_items.join('')}
+ </ul>
+ `);
+
+ 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 (!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 = $(`<div class="marketplace-page" data-page-name="${page_name}">`).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.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 = $(`
+ <div class="hub-search-container">
+ <input type="text" class="form-control" placeholder="Search for anything">
+ </div>`
+ );
+ 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.html(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) {
+ const html = get_item_card_container_html(items, __('Favourites'));
+ this.$wrapper.html(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) {
+ 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.html(html)
+ }
+}
+
+erpnext.hub.Item = class Item extends SubPage {
+ refresh() {
+ const hub_item_code = frappe.get_route()[2];
+
+ this.get_item(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 = '<span aria-hidden="true"> · </span>';
+
+ const description = item.description || '';
+
+ const rating_html = get_rating_html(item);
+ const rating_count = item.reviews.length > 0 ? `(${item.reviews.length} reviews)` : '';
+
+ const html = `
+ <div class="hub-item-container">
+ <div class="row">
+ <div class="col-md-3">
+ <div class="hub-item-image">
+ <img src="${item.image}">
+ </div>
+ </div>
+ <div class="col-md-6">
+ <h2>${title}</h2>
+ <div class="text-muted">
+ <p>${where}${dot_spacer}${when}</p>
+ <p>${rating_html}${rating_count}</p>
+ </div>
+ <hr>
+ <div class="hub-item-description">
+ ${description ?
+ `<b>${__('Description')}</b>
+ <p>${description}</p>
+ ` : __('No description')
+ }
+ </div>
+ </div>
+ </div>
+ <div class="row hub-item-seller">
+ <div class="col-md-12 margin-top margin-bottom">
+ <b class="text-muted">Seller Information</b>
+ </div>
+ <div class="col-md-1">
+ <img src="https://picsum.photos/200">
+ </div>
+ <div class="col-md-6">
+ <a href="#marketplace/seller/${company}" class="bold">${company}</a>
+ <p class="text-muted">
+ Contact Seller
+ </p>
+ </div>
+ </div>
+ </div>
+ `;
+
+ this.$wrapper.html(html);
+ }
+}
+
+
+
+function get_item_card_container_html(items, title) {
+ const html = (items || []).map(item => get_item_card_html(item)).join('');
+
+ return `
+ <div class="row hub-card-container">
+ <div class="col-md-12 margin-bottom">
+ <b>${title}</b>
+ </div>
+ ${html}
+ </div>
+ `;
+}
+
+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 route = `marketplace/item/${item.hub_item_code}`;
+
+ let subtitle = [comment_when(item.creation)];
+ const rating = get_rating(item);
+ if (rating > 0) {
+ subtitle.push(rating + `<i class='fa fa-fw fa-star-o'></i>`)
+ }
+ subtitle.push(company_name);
+
+ let dot_spacer = '<span aria-hidden="true"> · </span>';
+ subtitle = subtitle.join(dot_spacer);
+
+ const item_html = `
+ <div class="col-md-3 col-sm-4 col-xs-6">
+ <div class="hub-card" data-route="${route}">
+ <div class="hub-card-header">
+ <div class="hub-card-title ellipsis bold">${title}</div>
+ <div class="hub-card-subtitle ellipsis text-muted">${subtitle}</div>
+ </div>
+ <div class="hub-card-body">
+ <img class="hub-card-image ${item.image ? '' : 'no-image'}" src="${img_url}" />
+ <div class="hub-card-overlay"></div>
+ </div>
+ </div>
+ </div>
+ `;
+
+ 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 += `<i class='fa fa-fw ${star_class} star-icon' data-index=${i}></i>`;
+ }
+ return rating_html;
+}
+
erpnext.hub.HubListing = class HubListing extends frappe.views.BaseList {
setup_defaults() {
super.setup_defaults();
@@ -40,7 +439,7 @@
get_meta() {
return new Promise(resolve =>
- frappe.call('erpnext.hub_node.get_meta', {doctype: this.doctype}, resolve));
+ frappe.call('erpnext.hub_node.get_meta', { doctype: this.doctype }, resolve));
}
set_breadcrumbs() { }
@@ -83,7 +482,7 @@
}
setup_view() {
- if(frappe.route_options){
+ if (frappe.route_options) {
const filters = [];
for (let field in frappe.route_options) {
var value = frappe.route_options[field];
@@ -146,9 +545,9 @@
<span class='indicator red'>
{{ _("Payment Cancelled") }}</span>
</div>
- <p>${ __("Your payment is cancelled.") }</p>
+ <p>${ __("Your payment is cancelled.")}</p>
<div><a href='' class='btn btn-primary btn-sm'>
- ${ __("Continue") }</a></div>
+ ${ __("Continue")}</a></div>
</div>`;
let page = this.page.wrapper.find('.layout-side-section')
@@ -172,7 +571,7 @@
`);
}
- if(this.data.length) {
+ if (this.data.length) {
this.doc = this.data[0];
}
@@ -226,11 +625,11 @@
}
get_image_html(encoded_name, src, alt_text) {
- return `<img data-name="${encoded_name}" src="${ src }" alt="${ alt_text }">`;
+ return `<img data-name="${encoded_name}" src="${src}" alt="${alt_text}">`;
}
get_image_placeholder(title) {
- return `<span class="placeholder-text">${ frappe.get_abbr(title) }</span>`;
+ return `<span class="placeholder-text">${frappe.get_abbr(title)}</span>`;
}
loadImage(item) {
@@ -241,7 +640,7 @@
let placeholder = this.get_image_placeholder(title);
let $container = this.$result.find(`.image-field[data-name="${encoded_name}"]`);
- if(!item[this.imageFieldName]) {
+ if (!item[this.imageFieldName]) {
$container.prepend(placeholder);
$container.addClass('no-image');
}
@@ -262,7 +661,7 @@
}
setup_quick_view() {
- if(this.quick_view) return;
+ if (this.quick_view) return;
this.quick_view = new frappe.ui.Dialog({
title: 'Quick View',
@@ -312,10 +711,10 @@
}
setup_like() {
- if(this.setup_like_done) return;
+ if (this.setup_like_done) return;
this.setup_like_done = 1;
this.$result.on('click', '.btn.like-button', (e) => {
- if($(e.target).hasClass('changing')) return;
+ if ($(e.target).hasClass('changing')) return;
$(e.target).addClass('changing');
e.preventDefault();
@@ -326,13 +725,13 @@
let values = this.data_dict[name];
let heart = $(e.target);
- if(heart.hasClass('like-button')) {
+ if (heart.hasClass('like-button')) {
heart = $(e.target).find('.octicon');
}
let remove = 1;
- if(heart.hasClass('liked')) {
+ if (heart.hasClass('liked')) {
// unlike
heart.removeClass('liked');
} else {
@@ -349,7 +748,7 @@
},
callback: (r) => {
let message = __("Added to Favourites");
- if(remove) {
+ if (remove) {
message = __("Removed from Favourites");
}
frappe.show_alert(message);
@@ -454,7 +853,7 @@
label: 'All Categories',
expandable: true,
- args: {parent: this.current_category},
+ args: { parent: this.current_category },
method: 'erpnext.hub_node.get_categories',
on_click: (node) => {
this.update_category(node.label);
@@ -501,8 +900,8 @@
.then(r => {
const categories = r.message.map(d => d.value).sort();
const sidebar_items = [
- `<li class="hub-sidebar-item bold is-title">
- Category
+ `<li class="hub-sidebar-item bold text-muted is-title">
+ ${__('Category')}
</li>`,
`<li class="hub-sidebar-item active">
All
@@ -523,7 +922,7 @@
}
update_category(label) {
- this.current_category = (label=='All Categories') ? undefined : label;
+ this.current_category = (label == 'All Categories') ? undefined : label;
this.refresh();
}
@@ -573,14 +972,14 @@
const ratingAverage = reviewLength
? item.reviews
.map(r => r.rating)
- .reduce((a, b) => a + b, 0)/reviewLength
+ .reduce((a, b) => a + b, 0) / reviewLength
: -1;
let ratingHtml = ``;
- for(var i = 0; i < 5; i++) {
+ for (var i = 0; i < 5; i++) {
let starClass = 'fa-star';
- if(i >= ratingAverage) starClass = 'fa-star-o';
+ if (i >= ratingAverage) starClass = 'fa-star-o';
ratingHtml += `<i class='fa fa-fw ${starClass} star-icon' data-index=${i}></i>`;
}
let dot_spacer = '<span aria-hidden="true"> · </span>';
@@ -608,7 +1007,7 @@
(${reviewLength})
</div>
<div class="list-row-col">
- <a href="${'#Hub/Company/'+company_name+'/Items'}"><p>${ company_name }</p></a>
+ <a href="${'#Hub/Company/' + company_name + '/Items'}"><p>${company_name}</p></a>
</div>
</div>
<div class="hub-card-body">
@@ -651,7 +1050,7 @@
};
-erpnext.hub.Favourites = class Favourites extends erpnext.hub.ItemListing {
+erpnext.hub.Favourites2 = class Favourites extends erpnext.hub.ItemListing {
constructor(opts) {
super(opts);
this.show();
@@ -702,18 +1101,18 @@
}
update_category(label) {
- this.current_category = (label=='All Categories') ? undefined : label;
+ this.current_category = (label == 'All Categories') ? undefined : label;
this.refresh();
}
get_filters_for_args() {
- if(!this.filter_area) return;
+ 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) {
+ if (this.current_category) {
filters['hub_category'] = this.current_category;
}
return filters;
@@ -772,10 +1171,10 @@
get_filters_for_args() {
let filters = {};
- this.filter_area.get().forEach(f => {
- let field = f[1] !== 'name' ? f[1] : 'company_name';
- filters[field] = [f[2], f[3]];
- });
+ // this.filter_area.get().forEach(f => {
+ // let field = f[1] !== 'name' ? f[1] : 'company_name';
+ // filters[field] = [f[2], f[3]];
+ // });
return filters;
}
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index ef08fde..48d52ca 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -1,18 +1,15 @@
@import "../../../../frappe/frappe/public/less/variables.less";
-body[data-route^="Hub/"] {
- .hub-icon {
- width: 40px;
- height: 40px;
+body[data-route^="marketplace/"] {
+ .layout-side-section {
+ padding-top: 25px;
+ padding-right: 25px;
}
.layout-main-section {
border: none;
- }
-
- .frappe-list {
- padding-top: 25px;
font-size: @text-medium;
+ padding-top: 25px;
@media (max-width: @screen-xs) {
padding-left: 20px;
@@ -26,17 +23,32 @@
border-radius: 4px;
overflow: hidden;
cursor: pointer;
+
+ &:hover .hub-card-overlay {
+ display: block;
+ }
}
.hub-card-header {
padding: 12px 15px;
height: 60px;
+ border-bottom: 1px solid @border-color;
}
.hub-card-body {
+ position: relative;
height: 200px;
}
+ .hub-card-overlay {
+ display: none;
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.1);
+ }
+
.hub-card-image {
min-width: 100%;
width: 100%;
@@ -73,6 +85,30 @@
}
}
+ .hub-item-image {
+ border: 1px solid @border-color;
+ border-radius: 4px;
+ overflow: hidden;
+ height: 200px;
+ width: 200px;
+ display: flex;
+ align-items: center;
+ }
+
+ .hub-item-seller img {
+ width: 50px;
+ height: 50px;
+ border-radius: 4px;
+ border: 1px solid @border-color;
+ }
+}
+
+body[data-route^="Hub/"] {
+ .hub-icon {
+ width: 40px;
+ height: 40px;
+ }
+
.img-wrapper {
border: 1px solid #d1d8dd;
border-radius: 3px;