+
+
+
+
+
+
+
+
+
${p.company}
+
+
${p.country}
+
${p.site_name}
+
${__(`Joined ${comment_when(p.creation)}`)}
+
+
+
+ ${'description'
+ ? `
${p.company_description}
`
+ : `
__('No description')
+
+
+
+
`;
+
+ return profile_html;
+}
+
+export {
+ get_detail_view_html,
+ get_profile_html
+}
diff --git a/erpnext/public/js/hub/components/empty_state.js b/erpnext/public/js/hub/components/empty_state.js
new file mode 100644
index 00000000000..0e1ad46d2f1
--- /dev/null
+++ b/erpnext/public/js/hub/components/empty_state.js
@@ -0,0 +1,10 @@
+function get_empty_state(message, action) {
+ return `
+
${message}
+ ${action ? `
${action}
`: ''}
+
`;
+}
+
+export {
+ get_empty_state
+}
diff --git a/erpnext/public/js/hub/helpers.js b/erpnext/public/js/hub/components/item_card.js
similarity index 68%
rename from erpnext/public/js/hub/helpers.js
rename to erpnext/public/js/hub/components/item_card.js
index 7c4c9193e0d..733df62e6a6 100644
--- a/erpnext/public/js/hub/helpers.js
+++ b/erpnext/public/js/hub/components/item_card.js
@@ -1,27 +1,3 @@
-function get_empty_state(message, action) {
- return `
-
${message}
- ${action ? `
${action}
`: ''}
-
`;
-}
-
-function get_item_card_container_html(items, title='', get_item_html = get_item_card_html, action='') {
- const items_html = (items || []).map(item => get_item_html(item)).join('');
- const title_html = title
- ? ``
- : '';
-
- const html = `
- ${title_html}
- ${items_html}
-
`;
-
- return html;
-}
-
function get_item_card_html(item) {
const item_name = item.item_name || item.name;
const title = strip_html(item_name);
@@ -117,28 +93,8 @@ function get_rating_html(rating) {
return rating_html;
}
-function make_search_bar({wrapper, on_search, placeholder = __('Search for anything')}) {
- const $search = $(`
-
-
-
`
- );
- wrapper.append($search);
- const $search_input = $search.find('input');
-
- $search_input.on('keydown', frappe.utils.debounce((e) => {
- if (e.which === frappe.ui.keyCode.ENTER) {
- const search_value = $search_input.val();
- on_search(search_value);
- }
- }, 300));
-}
-
export {
- get_empty_state,
- get_item_card_container_html,
get_item_card_html,
- get_local_item_card_html,
- get_rating_html,
- make_search_bar,
+ get_local_item_card_html,
+ get_rating_html
}
diff --git a/erpnext/public/js/hub/components/items_container.js b/erpnext/public/js/hub/components/items_container.js
new file mode 100644
index 00000000000..dd29836917a
--- /dev/null
+++ b/erpnext/public/js/hub/components/items_container.js
@@ -0,0 +1,22 @@
+import { get_item_card_html } from './item_card';
+
+function get_item_card_container_html(items, title='', get_item_html = get_item_card_html, action='') {
+ const items_html = (items || []).map(item => get_item_html(item)).join('');
+ const title_html = title
+ ? ``
+ : '';
+
+ const html = `
+ ${title_html}
+ ${items_html}
+
`;
+
+ return html;
+}
+
+export {
+ get_item_card_container_html
+}
diff --git a/erpnext/public/js/hub/components/reviews.js b/erpnext/public/js/hub/components/reviews.js
new file mode 100644
index 00000000000..616f2fb7053
--- /dev/null
+++ b/erpnext/public/js/hub/components/reviews.js
@@ -0,0 +1,71 @@
+import { get_rating_html } from './item_card';
+
+function get_review_html(review) {
+ let username = review.username || review.user || __("Anonymous");
+
+ let image_html = review.user_image
+ ? `
`
+ : `
${frappe.get_abbr(username)}
`
+
+ let edit_html = review.own
+ ? `
+
+ ${'data.delete'}
+
+
+
+
+ ${'data.edit'}
+
+
`
+ : '';
+
+ let rating_html = get_rating_html(review.rating);
+
+ return get_timeline_item(review, image_html, edit_html, rating_html);
+}
+
+function get_timeline_item(data, image_html, edit_html, rating_html) {
+ return `
+
+ ${image_html}
+
+
+
+
${edit_html}
+
+
+
+
+
+ ${rating_html}
+
+
${data.subject}
+
+ ${data.content}
+
+
+
+
+
+
`;
+}
+
+export {
+ get_review_html
+}
diff --git a/erpnext/public/js/hub/components/search_bar.js b/erpnext/public/js/hub/components/search_bar.js
new file mode 100644
index 00000000000..9526516ee9b
--- /dev/null
+++ b/erpnext/public/js/hub/components/search_bar.js
@@ -0,0 +1,20 @@
+function make_search_bar({wrapper, on_search, placeholder = __('Search for anything')}) {
+ const $search = $(`
+
+
+
`
+ );
+ wrapper.append($search);
+ const $search_input = $search.find('input');
+
+ $search_input.on('keydown', frappe.utils.debounce((e) => {
+ if (e.which === frappe.ui.keyCode.ENTER) {
+ const search_value = $search_input.val();
+ on_search(search_value);
+ }
+ }, 300));
+}
+
+export {
+ make_search_bar
+}
diff --git a/erpnext/public/js/hub/components/skeleton_state.js b/erpnext/public/js/hub/components/skeleton_state.js
new file mode 100644
index 00000000000..7c6880224c5
--- /dev/null
+++ b/erpnext/public/js/hub/components/skeleton_state.js
@@ -0,0 +1,27 @@
+function get_detail_skeleton_html() {
+ const skeleton = `
`;
+
+ return skeleton;
+}
+
+export {
+ get_detail_skeleton_html
+}
diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js
index 18a1bb06294..154324338d3 100644
--- a/erpnext/public/js/hub/marketplace.js
+++ b/erpnext/public/js/hub/marketplace.js
@@ -13,7 +13,6 @@ import './pages/messages';
import './pages/not_found';
// helpers
-import './helpers';
import './hub_call';
frappe.provide('hub');
diff --git a/erpnext/public/js/hub/pages/category.js b/erpnext/public/js/hub/pages/category.js
index 13a0a92f8c4..118d196d55c 100644
--- a/erpnext/public/js/hub/pages/category.js
+++ b/erpnext/public/js/hub/pages/category.js
@@ -1,5 +1,5 @@
import SubPage from './subpage';
-import { get_item_card_container_html } from '../helpers';
+import { get_item_card_container_html } from '../components/items_container';
erpnext.hub.Category = class Category extends SubPage {
refresh() {
diff --git a/erpnext/public/js/hub/pages/favourites.js b/erpnext/public/js/hub/pages/favourites.js
index 704caeabbb4..d4a8cb3ee05 100644
--- a/erpnext/public/js/hub/pages/favourites.js
+++ b/erpnext/public/js/hub/pages/favourites.js
@@ -1,5 +1,5 @@
import SubPage from './subpage';
-import { get_item_card_container_html } from '../helpers';
+import { get_item_card_container_html } from '../components/items_container';
erpnext.hub.Favourites = class Favourites extends SubPage {
refresh() {
@@ -10,7 +10,9 @@ erpnext.hub.Favourites = class Favourites extends SubPage {
}
get_favourites() {
- return hub.call('get_item_favourites');
+ return hub.call('get_favourite_items_of_seller', {
+ hub_seller: hub.settings.company_email
+ });
}
render(items) {
@@ -18,4 +20,4 @@ erpnext.hub.Favourites = class Favourites extends SubPage {
const html = get_item_card_container_html(items, __('Favourites'));
this.$wrapper.append(html)
}
-}
\ No newline at end of file
+}
diff --git a/erpnext/public/js/hub/pages/home.js b/erpnext/public/js/hub/pages/home.js
index eefe3b87977..b7a55cec057 100644
--- a/erpnext/public/js/hub/pages/home.js
+++ b/erpnext/public/js/hub/pages/home.js
@@ -1,5 +1,7 @@
import SubPage from './subpage';
-import { make_search_bar, get_item_card_container_html, get_item_card_html } from '../helpers';
+import { make_search_bar } from '../components/search_bar';
+import { get_item_card_container_html } from '../components/items_container';
+import { get_item_card_html } from '../components/item_card';
erpnext.hub.Home = class Home extends SubPage {
make_wrapper() {
diff --git a/erpnext/public/js/hub/pages/item.js b/erpnext/public/js/hub/pages/item.js
index ec3d6edc3ee..207c94cb90a 100644
--- a/erpnext/public/js/hub/pages/item.js
+++ b/erpnext/public/js/hub/pages/item.js
@@ -1,5 +1,7 @@
import SubPage from './subpage';
-import { get_rating_html } from '../helpers';
+import { get_detail_view_html } from '../components/detail_view';
+import { get_detail_skeleton_html } from '../components/skeleton_state';
+import { get_review_html } from '../components/reviews';
erpnext.hub.Item = class Item extends SubPage {
refresh() {
@@ -16,30 +18,12 @@ erpnext.hub.Item = class Item extends SubPage {
});
}
- show_skeleton() {
- const skeleton = `
`;
- this.$wrapper.html(skeleton);
+ show_skeleton() {
+ this.$wrapper.html(get_detail_skeleton_html());
}
+
get_item(hub_item_code) {
return hub.call('get_item_details', {
hub_seller: hub.settings.company_email,
@@ -47,123 +31,9 @@ erpnext.hub.Item = class Item extends SubPage {
});
}
+
render(item) {
- const title = item.item_name || item.name;
- const seller = item.company;
-
- const who = __('Posted By {0}', [seller]);
- const when = comment_when(item.creation);
-
- const city = item.city ? item.city + ', ' : '';
- const country = item.country ? item.country : '';
- const where = `${city}${country}`;
-
- const dot_spacer = '
· ';
-
- const description = item.description || '';
-
- let stats = __('No views yet');
- if(item.view_count) {
- const views_message = __(`${item.view_count} Views`);
-
- const rating_html = get_rating_html(item.average_rating);
- const rating_count = item.no_of_ratings > 0 ? `${item.no_of_ratings} reviews` : __('No reviews yet');
-
- stats = `${views_message}${dot_spacer}${rating_html} (${rating_count})`;
- }
-
-
- let menu_items = '';
-
- if(this.own_item) {
- menu_items = `
-
${__('Edit Details')}
-
${__('Unpublish')}`;
- } else {
- menu_items = `
-
${__('Report this item')}
- `;
- }
-
- const html = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Product Description
-
-
- ${description ? description : __('No details')}
-
-
-
-
-
- Seller Information
-
-
-
-
-
-
-
-
-
-
-
- `;
-
+ const html = get_detail_view_html(item, this.own_item);
this.$wrapper.html(html);
this.make_review_area();
@@ -171,10 +41,11 @@ erpnext.hub.Item = class Item extends SubPage {
this.get_reviews()
.then(reviews => {
this.reviews = reviews;
- this.render_reviews(reviews);
+ this.render_reviews();
});
}
+
edit_details() {
if (!this.edit_dialog) {
this.edit_dialog = new frappe.ui.Dialog({
@@ -185,6 +56,7 @@ erpnext.hub.Item = class Item extends SubPage {
this.edit_dialog.show();
}
+
unpublish_item() {
if(!this.unpublish_dialog) {
this.unpublish_dialog = new frappe.ui.Dialog({
@@ -196,6 +68,16 @@ erpnext.hub.Item = class Item extends SubPage {
this.unpublish_dialog.show();
}
+
+ add_to_favourites(favourite_button) {
+ $(favourite_button).html('Added to Favourites').addClass('disabled');
+ return hub.call('remove_item_from_seller_favourites', {
+ hub_item_code: this.hub_item_code,
+ hub_seller: hub.settings.company_email
+ });
+ }
+
+
contact_seller() {
const d = new frappe.ui.Dialog({
title: __('Send a message'),
@@ -220,37 +102,48 @@ erpnext.hub.Item = class Item extends SubPage {
d.show();
}
+
make_review_area() {
this.comment_area = new frappe.ui.ReviewArea({
parent: this.$wrapper.find('.timeline-head').empty(),
mentions: [],
- on_submit: (values) => {
- values.user = frappe.session.user;
- values.username = frappe.session.user_fullname;
-
- hub.call('add_item_review', {
- hub_item_code: this.hub_item_code,
- review: JSON.stringify(values)
- })
- .then(review => {
- this.reviews = this.reviews || [];
- this.reviews.push(review);
- this.render_reviews(this.reviews);
-
- this.comment_area.reset();
- });
- }
+ on_submit: this.on_submit_review.bind(this)
});
}
+
+ on_submit_review(values) {
+ values.user = frappe.session.user;
+ values.username = frappe.session.user_fullname;
+
+ hub.call('add_item_review', {
+ hub_item_code: this.hub_item_code,
+ review: JSON.stringify(values)
+ })
+ .then(this.push_review_in_review_area.bind(this));
+ }
+
+
+ push_review_in_review_area(review) {
+ this.reviews = this.reviews || [];
+ this.reviews.push(review);
+ this.render_reviews();
+
+ this.comment_area.reset();
+ }
+
+
get_reviews() {
return hub.call('get_item_reviews', { hub_item_code: this.hub_item_code }).catch(() => {});
}
- render_reviews(reviews=[]) {
- this.$wrapper.find('.timeline-items').empty();
- reviews.sort((a, b) => {
+ render_reviews() {
+ const $timeline = this.$wrapper.find('.timeline-items');
+
+ $timeline.empty();
+
+ this.reviews.sort((a, b) => {
if (a.modified > b.modified) {
return -1;
}
@@ -262,75 +155,8 @@ erpnext.hub.Item = class Item extends SubPage {
return 0;
});
- reviews.forEach(review => this.render_review(review));
- }
-
- render_review(review) {
- let username = review.username || review.user || __("Anonymous");
-
- let image_html = review.user_image
- ? `
`
- : `
${frappe.get_abbr(username)}
`
-
- let edit_html = review.own
- ? `
-
- ${'data.delete'}
-
-
-
-
- ${'data.edit'}
-
-
`
- : '';
-
- let rating_html = get_rating_html(review.rating);
-
- 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 `
-
- ${image_html}
-
-
-
-
${edit_html}
-
-
-
-
-
- ${rating_html}
-
-
${data.subject}
-
- ${data.content}
-
-
-
-
-
-
`;
+ this.reviews.forEach(review => {
+ $(get_review_html(review)).appendTo($timeline);
+ });
}
}
diff --git a/erpnext/public/js/hub/pages/messages.js b/erpnext/public/js/hub/pages/messages.js
index 7bc99a72531..8531e0b3f95 100644
--- a/erpnext/public/js/hub/pages/messages.js
+++ b/erpnext/public/js/hub/pages/messages.js
@@ -1,5 +1,5 @@
import SubPage from './subpage';
-import { make_search_bar } from '../helpers';
+import { make_search_bar } from '../components/search_bar';
erpnext.hub.Messages = class Messages extends SubPage {
make_wrapper() {
@@ -115,4 +115,4 @@ function get_message_html(message) {
${message.content}