From 5e30beec86d25a88a7b9b0cdafe14459135d7445 Mon Sep 17 00:00:00 2001 From: Prateeksha Singh Date: Sun, 26 Aug 2018 13:09:19 +0530 Subject: [PATCH 1/4] [hub][vue] DetailView and Profile page --- .../public/js/hub/components/DetailView.vue | 54 +++++++ .../public/js/hub/components/detail_view.js | 36 ----- erpnext/public/js/hub/marketplace.js | 22 ++- erpnext/public/js/hub/pages/Profile.vue | 66 ++++++++ erpnext/public/js/hub/pages/SavedProducts.vue | 2 +- erpnext/public/js/hub/pages/profile.js | 148 ------------------ 6 files changed, 141 insertions(+), 187 deletions(-) create mode 100644 erpnext/public/js/hub/components/DetailView.vue create mode 100644 erpnext/public/js/hub/pages/Profile.vue delete mode 100644 erpnext/public/js/hub/pages/profile.js diff --git a/erpnext/public/js/hub/components/DetailView.vue b/erpnext/public/js/hub/components/DetailView.vue new file mode 100644 index 0000000000..ae6e8ab01b --- /dev/null +++ b/erpnext/public/js/hub/components/DetailView.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/erpnext/public/js/hub/components/detail_view.js b/erpnext/public/js/hub/components/detail_view.js index f161e459e0..fca6a56bcb 100644 --- a/erpnext/public/js/hub/components/detail_view.js +++ b/erpnext/public/js/hub/components/detail_view.js @@ -132,42 +132,6 @@ function get_detail_view_html(item, allow_edit) { return html; } -function get_profile_html(profile) { - const p = profile; - const profile_html = `
-
-
- -
-
-
-
-
- -
-
-
-

${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/marketplace.js b/erpnext/public/js/hub/marketplace.js index d8bfea8a1b..433f7da85b 100644 --- a/erpnext/public/js/hub/marketplace.js +++ b/erpnext/public/js/hub/marketplace.js @@ -3,7 +3,6 @@ import Vue from 'vue/dist/vue.js'; // pages import './pages/item'; import './pages/seller'; -import './pages/profile'; import './pages/messages'; import './pages/buying_messages'; import './pages/not_found'; @@ -14,6 +13,7 @@ import Publish from './pages/Publish.vue'; import Category from './pages/Category.vue'; import Search from './pages/Search.vue'; import PublishedProducts from './pages/PublishedProducts.vue'; +import Profile from './pages/Profile.vue'; // components import { ProfileDialog } from './components/profile_dialog'; @@ -203,7 +203,7 @@ erpnext.hub.Marketplace = class Marketplace { } if (route[1] === 'profile' && !this.subpages.profile) { - this.subpages.profile = new erpnext.hub.Profile(this.$body); + this.subpages.profile = new erpnext.hub.ProfilePage(this.$body); } if (route[1] === 'publish' && !this.subpages.publish) { @@ -374,3 +374,21 @@ erpnext.hub.SearchPage = class { $('[data-page-name="search"]').hide(); } } + +erpnext.hub.ProfilePage = class { + constructor(parent) { + this.$wrapper = $(`
`).appendTo($(parent)); + + new Vue({ + render: h => h(Profile) + }).$mount('#vue-area-profile'); + } + + show() { + $('[data-page-name="profile"]').show(); + } + + hide() { + $('[data-page-name="profile"]').hide(); + } +} diff --git a/erpnext/public/js/hub/pages/Profile.vue b/erpnext/public/js/hub/pages/Profile.vue new file mode 100644 index 0000000000..2f3c9d59fa --- /dev/null +++ b/erpnext/public/js/hub/pages/Profile.vue @@ -0,0 +1,66 @@ + + + + + diff --git a/erpnext/public/js/hub/pages/SavedProducts.vue b/erpnext/public/js/hub/pages/SavedProducts.vue index 6e5eeffc66..f113a20c27 100644 --- a/erpnext/public/js/hub/pages/SavedProducts.vue +++ b/erpnext/public/js/hub/pages/SavedProducts.vue @@ -71,7 +71,7 @@ export default { } alert = frappe.show_alert(__(`${hub_item_code} removed. - Undo`), + Undo`), grace_period/1000, { 'undo-remove': undo_remove.bind(this) diff --git a/erpnext/public/js/hub/pages/profile.js b/erpnext/public/js/hub/pages/profile.js deleted file mode 100644 index 9bfa85d7a6..0000000000 --- a/erpnext/public/js/hub/pages/profile.js +++ /dev/null @@ -1,148 +0,0 @@ -import SubPage from './subpage'; -import { get_detail_skeleton_html } from '../components/skeleton_state'; -import { ProfileDialog } from '../components/profile_dialog'; - -erpnext.hub.Profile = class Profile extends SubPage { - make_wrapper() { - super.make_wrapper(); - this.make_edit_profile_dialog(); - } - - refresh() { - this.show_skeleton(); - this.get_hub_seller_profile(this.keyword) - .then(profile => { - this.edit_profile_dialog.set_values(profile); - this.render(profile); - }); - } - - get_hub_seller_profile() { - return hub.call('get_hub_seller_profile', { hub_seller: hub.settings.company_email }); - } - - show_skeleton() { - this.$wrapper.html(get_detail_skeleton_html()); - } - - render(profile) { - const p = profile; - const content_by_log_type = this.get_content_by_log_type(); - - let activity_logs = (p.hub_seller_activity || []).sort((a, b) => { - return new Date(b.creation) - new Date(a.creation); - }); - - const timeline_items_html = activity_logs - .map(log => { - const stats = JSON.parse(log.stats); - const no_of_items = stats && stats.push_update || ''; - - const content = content_by_log_type[log.type]; - const message = content.get_message(no_of_items); - const icon = content.icon; - return this.get_timeline_log_item(log.pretty_date, message, icon); - }) - .join(''); - - const profile_html = `
-
-
- -
-
-
-
-
- -
-
-
-

${p.company}

-
-

${p.country}

-

${p.site_name}

-
-
-
- ${'description' - ? `

${p.company_description}

` - : `

__('No description') -

-
-
- - - - -
-
-
- -
-
- ${timeline_items_html} -
-
- -
`; - - this.$wrapper.html(profile_html); - } - - make_edit_profile_dialog() { - this.edit_profile_dialog = ProfileDialog( - __('Edit Profile'), - { - label: __('Update'), - on_submit: this.update_profile.bind(this) - } - ); - - this.edit_profile_dialog.set_df_property('company_email', 'read_only', 1); - } - - edit_profile() { - this.edit_profile_dialog.set_values({ - company_email: hub.settings.company_email - }); - this.edit_profile_dialog.show(); - } - - update_profile(new_values) { - hub.call('update_profile', { - hub_seller: hub.settings.company_email, - updated_profile: new_values - }).then(new_profile => { - this.edit_profile_dialog.hide(); - this.render(new_profile); - }); - } - - get_timeline_log_item(pretty_date, message, icon) { - return `
-
- - ${pretty_date} ${message} -
-
`; - } - - get_content_by_log_type() { - return { - "Created": { - icon: 'octicon-heart', - get_message: () => 'Joined Marketplace' - }, - "Items Publish": { - icon: 'octicon-bookmark', - get_message: (no_of_items) => - `Published ${no_of_items} product${no_of_items > 1 ? 's' : ''} to Marketplace` - } - } - } -} From 9e8d7bbeda1c01f9fbf6c26dc838f25aef9e22fb Mon Sep 17 00:00:00 2001 From: Prateeksha Singh Date: Sun, 26 Aug 2018 16:29:32 +0530 Subject: [PATCH 2/4] [hub][vue] Seller Page --- erpnext/public/js/hub/App.vue | 34 ------ .../public/js/hub/components/DetailView.vue | 2 +- .../public/js/hub/components/TimelineItem.vue | 9 ++ erpnext/public/js/hub/components/item_card.js | 105 ------------------ .../js/hub/components/items_container.js | 22 ---- erpnext/public/js/hub/marketplace.js | 23 +++- erpnext/public/js/hub/pages/Profile.vue | 2 +- erpnext/public/js/hub/pages/Seller.vue | 95 ++++++++++++++++ erpnext/public/js/hub/pages/seller.js | 32 ------ 9 files changed, 127 insertions(+), 197 deletions(-) delete mode 100644 erpnext/public/js/hub/App.vue create mode 100644 erpnext/public/js/hub/components/TimelineItem.vue delete mode 100644 erpnext/public/js/hub/components/items_container.js create mode 100644 erpnext/public/js/hub/pages/Seller.vue delete mode 100644 erpnext/public/js/hub/pages/seller.js diff --git a/erpnext/public/js/hub/App.vue b/erpnext/public/js/hub/App.vue deleted file mode 100644 index 37ec4f343a..0000000000 --- a/erpnext/public/js/hub/App.vue +++ /dev/null @@ -1,34 +0,0 @@ - - - - - diff --git a/erpnext/public/js/hub/components/DetailView.vue b/erpnext/public/js/hub/components/DetailView.vue index ae6e8ab01b..1a2207e4fa 100644 --- a/erpnext/public/js/hub/components/DetailView.vue +++ b/erpnext/public/js/hub/components/DetailView.vue @@ -23,7 +23,7 @@
-
diff --git a/erpnext/public/js/hub/components/TimelineItem.vue b/erpnext/public/js/hub/components/TimelineItem.vue new file mode 100644 index 0000000000..97b5a0d942 --- /dev/null +++ b/erpnext/public/js/hub/components/TimelineItem.vue @@ -0,0 +1,9 @@ +/* Saving this for later */ + diff --git a/erpnext/public/js/hub/components/item_card.js b/erpnext/public/js/hub/components/item_card.js index 7cb228118c..fdf2690be8 100644 --- a/erpnext/public/js/hub/components/item_card.js +++ b/erpnext/public/js/hub/components/item_card.js @@ -1,108 +1,3 @@ -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; - - // 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); - - // route - if (!item.route) { - item.route = `marketplace/item/${item.hub_item_code}` - } - - 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 - let subtitle = [comment_when(item.creation)]; - const rating = item.average_rating; - - if (rating > 0) { - subtitle.push(rating + ``) - } - - if (company_name) { - subtitle.push(company_name); - } - - let dot_spacer = ''; - subtitle = subtitle.join(dot_spacer); - - const edit_item_button = `
- -
`; - - const item_html = ` -
-
-
-
-
${title}
-
${subtitle}
-
- -
-
- -
-
- ${edit_item_button} -
-
-
-
-
- `; - - return item_html; -} - function get_buying_item_message_card_html(item) { const item_name = item.item_name || item.name; const title = strip_html(item_name); diff --git a/erpnext/public/js/hub/components/items_container.js b/erpnext/public/js/hub/components/items_container.js deleted file mode 100644 index 61b8af6b0b..0000000000 --- a/erpnext/public/js/hub/components/items_container.js +++ /dev/null @@ -1,22 +0,0 @@ -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 - ? `
-

${title}

- ${action} -
` - : ''; - - const html = `
- ${title_html} - ${items_html} -
`; - - return html; -} - -export { - get_item_card_container_html -} diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js index 0b0e1be652..c61814d0c6 100644 --- a/erpnext/public/js/hub/marketplace.js +++ b/erpnext/public/js/hub/marketplace.js @@ -2,7 +2,6 @@ import Vue from 'vue/dist/vue.js'; // pages import './pages/item'; -import './pages/seller'; import './pages/messages'; import './pages/buying_messages'; import './pages/not_found'; @@ -15,6 +14,7 @@ import Category from './pages/Category.vue'; import Search from './pages/Search.vue'; import PublishedProducts from './pages/PublishedProducts.vue'; import Profile from './pages/Profile.vue'; +import Seller from './pages/Seller.vue'; // components import { ProfileDialog } from './components/profile_dialog'; @@ -198,7 +198,7 @@ erpnext.hub.Marketplace = class Marketplace { } if (route[1] === 'seller' && !this.subpages['seller']) { - this.subpages['seller'] = new erpnext.hub.Seller(this.$body); + this.subpages['seller'] = new erpnext.hub.SellerPage(this.$body); } if (route[1] === 'register' && !this.subpages.register) { @@ -404,3 +404,22 @@ erpnext.hub.ProfilePage = class { $('[data-page-name="profile"]').hide(); } } + +erpnext.hub.SellerPage = class { + constructor(parent) { + this.$wrapper = $(`
`).appendTo($(parent)); + + new Vue({ + render: h => h(Seller) + }).$mount('#vue-area-seller'); + } + + show() { + $('[data-page-name="seller"]').show(); + } + + hide() { + $('[data-page-name="seller"]').hide(); + } +} + diff --git a/erpnext/public/js/hub/pages/Profile.vue b/erpnext/public/js/hub/pages/Profile.vue index 2f3c9d59fa..394136e53e 100644 --- a/erpnext/public/js/hub/pages/Profile.vue +++ b/erpnext/public/js/hub/pages/Profile.vue @@ -18,7 +18,7 @@ import DetailView from '../components/DetailView.vue'; export default { - name: 'saved-products-page', + name: 'profile-page', components: { DetailView }, diff --git a/erpnext/public/js/hub/pages/Seller.vue b/erpnext/public/js/hub/pages/Seller.vue new file mode 100644 index 0000000000..d4aa2a235f --- /dev/null +++ b/erpnext/public/js/hub/pages/Seller.vue @@ -0,0 +1,95 @@ + + + + + diff --git a/erpnext/public/js/hub/pages/seller.js b/erpnext/public/js/hub/pages/seller.js deleted file mode 100644 index b86e46e544..0000000000 --- a/erpnext/public/js/hub/pages/seller.js +++ /dev/null @@ -1,32 +0,0 @@ -import SubPage from './subpage'; -import { get_profile_html } from '../components/detail_view'; -import { get_item_card_container_html } from '../components/items_container'; -import { get_detail_skeleton_html } from '../components/skeleton_state'; - -erpnext.hub.Seller = class Seller extends SubPage { - make_wrapper() { - super.make_wrapper(); - } - - refresh() { - this.show_skeleton(); - this.company = frappe.get_route()[2]; - this.get_hub_seller_profile() - .then(this.render.bind(this)); - } - - get_hub_seller_profile() { - return hub.call('get_hub_seller_page_info', { company: this.company }); - } - - show_skeleton() { - this.$wrapper.html(get_detail_skeleton_html()); - } - - render(data) { - this.$wrapper.html(get_profile_html(data.profile)); - - let html = get_item_card_container_html(data.items, __('Products by ' + p.company)); - this.$wrapper.append(html); - } -} From 5c9b13f5e51d2b0f65a6345a3df702b74240c485 Mon Sep 17 00:00:00 2001 From: Prateeksha Singh Date: Sun, 26 Aug 2018 18:06:25 +0530 Subject: [PATCH 3/4] [hub][vue] add skeleton state to DetailView --- .../public/js/hub/components/DetailView.vue | 61 +++++--- .../js/hub/components/profile_dialog.js | 130 +++++++++--------- .../js/hub/components/skeleton_state.js | 27 ---- erpnext/public/js/hub/pages/Profile.vue | 9 +- erpnext/public/js/hub/pages/Seller.vue | 10 +- erpnext/public/js/hub/pages/item.js | 4 +- 6 files changed, 123 insertions(+), 118 deletions(-) delete mode 100644 erpnext/public/js/hub/components/skeleton_state.js diff --git a/erpnext/public/js/hub/components/DetailView.vue b/erpnext/public/js/hub/components/DetailView.vue index 1a2207e4fa..b86468b83b 100644 --- a/erpnext/public/js/hub/components/DetailView.vue +++ b/erpnext/public/js/hub/components/DetailView.vue @@ -5,32 +5,53 @@
-
+ +
-
- -
+
-

{{ title }}

+

Name

-

-

+

Details

+

Ratings

+
+
+
+

Desc

+

Desc

-
-
-
- {{ section.title }} -
-

-

+ +
+
+
+
+ +
+
+
+

{{ title }}

+
+

+

+
+ +
+
+
+
+ {{ section.title }} +
+

+

+
@@ -40,7 +61,7 @@ export default { name: 'detail-view', - props: ['title', 'subtitles', 'image', 'sections'], + props: ['title', 'subtitles', 'image', 'sections', 'show_skeleton'], data() { return { back_to_home_text: __('Back to Home') diff --git a/erpnext/public/js/hub/components/profile_dialog.js b/erpnext/public/js/hub/components/profile_dialog.js index 800e8c66f0..e76abfaa0f 100644 --- a/erpnext/public/js/hub/components/profile_dialog.js +++ b/erpnext/public/js/hub/components/profile_dialog.js @@ -1,75 +1,75 @@ const ProfileDialog = (title = __('Edit Profile'), action={}, initial_values={}) => { - const fields = [ - { - fieldtype: 'Link', - fieldname: 'company', - label: __('Company'), - options: 'Company', - onchange: () => { - const value = dialog.get_value('company'); + const fields = [ + { + fieldtype: 'Link', + fieldname: 'company', + label: __('Company'), + options: 'Company', + onchange: () => { + const value = dialog.get_value('company'); - if (value) { - frappe.db.get_doc('Company', value) - .then(company => { - dialog.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' - } - ]; + if (value) { + frappe.db.get_doc('Company', value) + .then(company => { + dialog.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' + } + ]; - let dialog = new frappe.ui.Dialog({ - title: title, - fields: fields, - primary_action_label: action.label || __('Update'), - primary_action: () => { - const form_values = dialog.get_values(); - let values_filled = true; - const mandatory_fields = ['company', 'company_email', 'company_description']; - mandatory_fields.forEach(field => { - const value = form_values[field]; - if (!value) { - dialog.set_df_property(field, 'reqd', 1); - values_filled = false; - } - }); - if (!values_filled) return; + let dialog = new frappe.ui.Dialog({ + title: title, + fields: fields, + primary_action_label: action.label || __('Update'), + primary_action: () => { + const form_values = dialog.get_values(); + let values_filled = true; + const mandatory_fields = ['company', 'company_email', 'company_description']; + mandatory_fields.forEach(field => { + const value = form_values[field]; + if (!value) { + dialog.set_df_property(field, 'reqd', 1); + values_filled = false; + } + }); + if (!values_filled) return; - action.on_submit(form_values); - } - }); + action.on_submit(form_values); + } + }); - dialog.set_values(initial_values); + dialog.set_values(initial_values); - // Post create - const default_company = frappe.defaults.get_default('company'); - dialog.set_value('company', default_company); + // Post create + const default_company = frappe.defaults.get_default('company'); + dialog.set_value('company', default_company); - return dialog; + return dialog; } export { diff --git a/erpnext/public/js/hub/components/skeleton_state.js b/erpnext/public/js/hub/components/skeleton_state.js deleted file mode 100644 index 7c6880224c..0000000000 --- a/erpnext/public/js/hub/components/skeleton_state.js +++ /dev/null @@ -1,27 +0,0 @@ -function get_detail_skeleton_html() { - const skeleton = `
-
-
-
-
-
-

Name

-
-

Details

-

Ratings

-
-
-
-

Desc

-

Desc

-
-
-
-
`; - - return skeleton; -} - -export { - get_detail_skeleton_html -} diff --git a/erpnext/public/js/hub/pages/Profile.vue b/erpnext/public/js/hub/pages/Profile.vue index 394136e53e..1767796d61 100644 --- a/erpnext/public/js/hub/pages/Profile.vue +++ b/erpnext/public/js/hub/pages/Profile.vue @@ -2,13 +2,15 @@
-
@@ -25,6 +27,9 @@ export default { data() { return { page_name: frappe.get_route()[1], + + init: true, + profile: null, title: null, subtitles: [], @@ -41,6 +46,8 @@ export default { 'get_hub_seller_profile', { hub_seller: hub.settings.company_email } ).then(profile => { + this.init = false; + this.profile = profile; this.title = profile.company; this.subtitles = [ diff --git a/erpnext/public/js/hub/pages/Seller.vue b/erpnext/public/js/hub/pages/Seller.vue index d4aa2a235f..5a35812ccb 100644 --- a/erpnext/public/js/hub/pages/Seller.vue +++ b/erpnext/public/js/hub/pages/Seller.vue @@ -2,17 +2,18 @@
- - -
{{ item_container_heading }}
+
{{ item_container_heading }}
{ + this.init = false; this.profile = data.profile; this.items = data.items; diff --git a/erpnext/public/js/hub/pages/item.js b/erpnext/public/js/hub/pages/item.js index 618c9585a8..f15d1be635 100644 --- a/erpnext/public/js/hub/pages/item.js +++ b/erpnext/public/js/hub/pages/item.js @@ -1,6 +1,6 @@ import SubPage from './subpage'; import { get_detail_view_html } from '../components/detail_view'; -import { get_detail_skeleton_html } from '../components/skeleton_state'; +// import { get_detail_skeleton_html } from '../components/skeleton_state'; import { get_review_html } from '../components/reviews'; erpnext.hub.Item = class Item extends SubPage { @@ -20,7 +20,7 @@ erpnext.hub.Item = class Item extends SubPage { show_skeleton() { - this.$wrapper.html(get_detail_skeleton_html()); + // this.$wrapper.html(get_detail_skeleton_html()); } From fad0f64c94cc7878bd45fd8e71cf8d92b802ea7a Mon Sep 17 00:00:00 2001 From: Prateeksha Singh Date: Sun, 26 Aug 2018 18:27:04 +0530 Subject: [PATCH 4/4] [hub][vue] add action object in empty state, make NotFound page --- .../public/js/hub/components/EmptyState.vue | 9 +++- .../public/js/hub/components/empty_state.js | 10 ----- erpnext/public/js/hub/marketplace.js | 22 +++++++++- erpnext/public/js/hub/pages/NotFound.vue | 41 +++++++++++++++++++ erpnext/public/js/hub/pages/messages.js | 8 ++-- erpnext/public/js/hub/pages/not_found.js | 11 ----- 6 files changed, 73 insertions(+), 28 deletions(-) delete mode 100644 erpnext/public/js/hub/components/empty_state.js create mode 100644 erpnext/public/js/hub/pages/NotFound.vue delete mode 100644 erpnext/public/js/hub/pages/not_found.js diff --git a/erpnext/public/js/hub/components/EmptyState.vue b/erpnext/public/js/hub/components/EmptyState.vue index c0ad971aa7..3d35efc797 100644 --- a/erpnext/public/js/hub/components/EmptyState.vue +++ b/erpnext/public/js/hub/components/EmptyState.vue @@ -4,6 +4,13 @@ :style="{ height: height + 'px' }" >

{{ message }}

+

+ +

@@ -15,7 +22,7 @@ export default { message: String, bordered: Boolean, height: Number, - // action: Function + action: Object } } diff --git a/erpnext/public/js/hub/components/empty_state.js b/erpnext/public/js/hub/components/empty_state.js deleted file mode 100644 index 0e1ad46d2f..0000000000 --- a/erpnext/public/js/hub/components/empty_state.js +++ /dev/null @@ -1,10 +0,0 @@ -function get_empty_state(message, action) { - return `
-

${message}

- ${action ? `

${action}

`: ''} -
`; -} - -export { - get_empty_state -} diff --git a/erpnext/public/js/hub/marketplace.js b/erpnext/public/js/hub/marketplace.js index c61814d0c6..00b6aeea0b 100644 --- a/erpnext/public/js/hub/marketplace.js +++ b/erpnext/public/js/hub/marketplace.js @@ -4,7 +4,6 @@ import Vue from 'vue/dist/vue.js'; import './pages/item'; import './pages/messages'; import './pages/buying_messages'; -import './pages/not_found'; import PageContainer from './PageContainer.vue'; import Home from './pages/Home.vue'; @@ -15,6 +14,7 @@ import Search from './pages/Search.vue'; import PublishedProducts from './pages/PublishedProducts.vue'; import Profile from './pages/Profile.vue'; import Seller from './pages/Seller.vue'; +import NotFound from './pages/NotFound.vue'; // components import { ProfileDialog } from './components/profile_dialog'; @@ -243,7 +243,7 @@ erpnext.hub.Marketplace = class Marketplace { if (!Object.keys(this.subpages).includes(route[1])) { if (!this.subpages.not_found) { - this.subpages.not_found = new erpnext.hub.NotFound(this.$body); + this.subpages.not_found = new erpnext.hub.NotFoundPage(this.$body); } route[1] = 'not_found'; } @@ -423,3 +423,21 @@ erpnext.hub.SellerPage = class { } } +erpnext.hub.NotFoundPage = class { + constructor(parent) { + this.$wrapper = $(`
`).appendTo($(parent)); + + new Vue({ + render: h => h(NotFound) + }).$mount('#vue-area-not-found'); + } + + show() { + $('[data-page-name="not-found"]').show(); + } + + hide() { + $('[data-page-name="not-found"]').hide(); + } +} + diff --git a/erpnext/public/js/hub/pages/NotFound.vue b/erpnext/public/js/hub/pages/NotFound.vue new file mode 100644 index 0000000000..7a76437cfd --- /dev/null +++ b/erpnext/public/js/hub/pages/NotFound.vue @@ -0,0 +1,41 @@ + + + + + diff --git a/erpnext/public/js/hub/pages/messages.js b/erpnext/public/js/hub/pages/messages.js index f8faa99934..6222f53648 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 { get_item_card_container_html } from '../components/items_container'; +// import { get_item_card_container_html } from '../components/items_container'; import { get_buying_item_message_card_html } from '../components/item_card'; import { get_selling_item_message_card_html } from '../components/item_card'; import { get_empty_state } from '../components/empty_state'; @@ -22,7 +22,7 @@ erpnext.hub.Buying = class Buying extends SubPage { } render(items = [], title) { - const html = get_item_card_container_html(items, title, get_buying_item_message_card_html); + // const html = get_item_card_container_html(items, title, get_buying_item_message_card_html); this.$wrapper.append(html); } @@ -54,7 +54,7 @@ erpnext.hub.Selling = class Selling extends SubPage { } render(items = [], title) { - const html = get_item_card_container_html(items, title, get_selling_item_message_card_html); + // const html = get_item_card_container_html(items, title, get_selling_item_message_card_html); this.$wrapper.append(html); } @@ -101,4 +101,4 @@ function get_message_html(message) {

${message.content}

`; -} \ No newline at end of file +} diff --git a/erpnext/public/js/hub/pages/not_found.js b/erpnext/public/js/hub/pages/not_found.js deleted file mode 100644 index f7ccc2f5b3..0000000000 --- a/erpnext/public/js/hub/pages/not_found.js +++ /dev/null @@ -1,11 +0,0 @@ -import SubPage from './subpage'; -import { get_empty_state } from '../components/empty_state'; - -erpnext.hub.NotFound = class NotFound extends SubPage { - refresh() { - this.$wrapper.html(get_empty_state( - __('Sorry! I could not find what you were looking for.'), - `` - )); - } -}