brotherton-erpnext/erpnext/public/js/hub/marketplace.js

449 lines
10 KiB
JavaScript

import Vue from 'vue/dist/vue.js';
import './vue-plugins';
// pages
import './pages/item';
import './pages/messages';
import './pages/buying_messages';
import PageContainer from './PageContainer.vue';
import Home from './pages/Home.vue';
import SavedProducts from './pages/SavedProducts.vue';
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';
import Seller from './pages/Seller.vue';
import NotFound from './pages/NotFound.vue';
// components
import { ProfileDialog } from './components/profile_dialog';
// helpers
import './hub_call';
import EventEmitter from './event_emitter';
frappe.provide('hub');
frappe.provide('erpnext.hub');
$.extend(erpnext.hub, EventEmitter.prototype);
erpnext.hub.Marketplace = class Marketplace {
constructor({ parent }) {
this.$parent = $(parent);
this.page = parent.page;
frappe.db.get_doc('Hub Settings')
.then(doc => {
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);
});
// generic action handler
this.$parent.on('click', '[data-action]', e => {
const $target = $(e.currentTarget);
const action = $target.data().action;
if (action && this[action]) {
this[action].apply(this, $target);
}
})
}
make_sidebar() {
this.$sidebar = this.$parent.find('.layout-side-section').addClass('hidden-xs');
this.make_sidebar_nav_buttons();
this.make_sidebar_categories();
}
make_sidebar_nav_buttons() {
let $nav_group = this.$sidebar.find('[data-nav-buttons]');
if (!$nav_group.length) {
$nav_group = $('<ul class="list-unstyled hub-sidebar-group" data-nav-buttons>').appendTo(this.$sidebar);
}
$nav_group.empty();
const user_specific_items_html = this.registered
? `<li class="hub-sidebar-item" data-route="marketplace/saved-products">
${__('Saved Products')}
</li>
<li class="hub-sidebar-item text-muted" data-route="marketplace/profile">
${__('Your Profile')}
</li>
<li class="hub-sidebar-item text-muted" data-route="marketplace/publish">
${__('Publish Products')}
</li>
<li class="hub-sidebar-item text-muted" data-route="marketplace/selling">
${__('Selling')}
</li>
<li class="hub-sidebar-item text-muted" data-route="marketplace/buying">
${__('Buying')}
</li>
`
: `<li class="hub-sidebar-item text-muted" data-action="show_register_dialog">
${__('Become a seller')}
</li>`;
$nav_group.append(`
<li class="hub-sidebar-item" data-route="marketplace/home">
${__('Browse')}
</li>
${user_specific_items_html}
`);
}
make_sidebar_categories() {
hub.call('get_categories')
.then(categories => {
categories = categories.map(d => d.name);
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>`,
...(this.registered
? [`<li class="hub-sidebar-item active" data-route="marketplace/my-products">
${__('Your Products')}
</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');
this.$page_container = $('<div class="hub-page-container">').appendTo(this.$body);
new Vue({
el: '.hub-page-container',
render: h => h(PageContainer)
});
erpnext.hub.on('seller-registered', () => {
this.registered = 1;
this.make_sidebar_nav_buttons();
});
}
update_sidebar() {
const route = frappe.get_route();
const route_str = route.join('/');
const part_route_str = route.slice(0, 2).join('/');
const $sidebar_item = this.$sidebar.find(`[data-route="${route_str}"], [data-route="${part_route_str}"]`);
const $siblings = this.$sidebar.find('[data-route]');
$siblings.removeClass('active').addClass('text-muted');
$sidebar_item.addClass('active').removeClass('text-muted');
}
refresh() {
}
_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.HomePage(this.$body);
}
if (route[1] === 'search' && !this.subpages.search) {
this.subpages.search = new erpnext.hub.SearchPage(this.$body);
}
if (route[1] === 'category' && route[2] && !this.subpages.category) {
this.subpages.category = new erpnext.hub.CategoryPage(this.$body);
}
if (route[1] === 'item' && route[2] && !this.subpages.item) {
this.subpages.item = new erpnext.hub.Item(this.$body);
}
if (route[1] === 'seller' && !this.subpages['seller']) {
this.subpages['seller'] = new erpnext.hub.SellerPage(this.$body);
}
if (route[1] === 'register' && !this.subpages.register) {
if (this.registered) {
frappe.set_route('marketplace', 'home');
return;
}
this.subpages.register = new erpnext.hub.Register(this.$body);
}
// registered seller routes
if (route[1] === 'saved-products' && !this.subpages['saved-products']) {
this.subpages['saved-products'] = new erpnext.hub.SavedProductsPage(this.$body);
}
if (route[1] === 'profile' && !this.subpages.profile) {
this.subpages.profile = new erpnext.hub.ProfilePage(this.$body);
}
if (route[1] === 'publish' && !this.subpages.publish) {
this.subpages.publish = new erpnext.hub.PublishPage(this.$body);
}
if (route[1] === 'my-products' && !this.subpages['my-products']) {
this.subpages['my-products'] = new erpnext.hub.PublishedProductsPage(this.$body);
}
if (route[1] === 'buying' && !this.subpages['buying']) {
this.subpages['buying'] = new erpnext.hub.Buying(this.$body);
}
if (route[1] === 'selling' && !this.subpages['selling']) {
this.subpages['selling'] = new erpnext.hub.Selling(this.$body, 'Selling');
}
// dont allow unregistered users to access registered routes
const registered_routes = ['saved-products', 'profile', 'publish', 'my-products', 'messages'];
if (!hub.settings.registered && registered_routes.includes(route[1])) {
frappe.set_route('marketplace', 'home');
return;
}
if (!Object.keys(this.subpages).includes(route[1])) {
if (!this.subpages.not_found) {
this.subpages.not_found = new erpnext.hub.NotFoundPage(this.$body);
}
route[1] = 'not_found';
}
this.update_sidebar();
frappe.utils.scroll_to(0);
this.subpages[route[1]].show();
}
show_register_dialog() {
this.register_dialog = ProfileDialog(
__('Become a Seller'),
{
label: __('Register'),
on_submit: this.register_seller.bind(this)
}
);
this.register_dialog.show();
}
register_seller(form_values) {
frappe.call({
method: 'erpnext.hub_node.doctype.hub_settings.hub_settings.register_seller',
args: form_values
}).then(() => {
this.register_dialog.hide();
frappe.set_route('marketplace', 'publish');
erpnext.hub.trigger('seller-registered');
});
}
}
erpnext.hub.HomePage = class {
constructor(parent) {
this.$wrapper = $(`<div id="vue-area-home">`).appendTo($(parent));
new Vue({
render: h => h(Home)
}).$mount('#vue-area-home');
}
show() {
$('[data-page-name="home"]').show();
}
hide() {
$('[data-page-name="home"]').hide();
}
}
erpnext.hub.SavedProductsPage = class {
constructor(parent) {
this.$wrapper = $(`<div id="vue-area-saved">`).appendTo($(parent));
new Vue({
render: h => h(SavedProducts)
}).$mount('#vue-area-saved');
}
show() {
$('[data-page-name="saved-products"]').show();
}
hide() {
$('[data-page-name="saved-products"]').hide();
}
}
erpnext.hub.PublishPage = class {
constructor(parent) {
this.$wrapper = $(`<div id="vue-area">`).appendTo($(parent));
new Vue({
render: h => h(Publish)
}).$mount('#vue-area');
}
show() {
$('[data-page-name="publish"]').show();
}
hide() {
$('[data-page-name="publish"]').hide();
}
}
erpnext.hub.CategoryPage = class {
constructor(parent) {
this.$wrapper = $(`<div id="vue-area-category">`).appendTo($(parent));
new Vue({
render: h => h(Category)
}).$mount('#vue-area-category');
}
show() {
$('[data-page-name="category"]').show();
}
hide() {
$('[data-page-name="category"]').hide();
}
}
erpnext.hub.PublishedProductsPage = class {
constructor(parent) {
this.$wrapper = $(`<div id="vue-area-published-products">`).appendTo($(parent));
new Vue({
render: h => h(PublishedProducts)
}).$mount('#vue-area-published-products');
}
show() {
$('[data-page-name="published-products"]').show();
}
hide() {
$('[data-page-name="published-products"]').hide();
}
}
erpnext.hub.SearchPage = class {
constructor(parent) {
this.$wrapper = $(`<div id="vue-area-search">`).appendTo($(parent));
new Vue({
render: h => h(Search)
}).$mount('#vue-area-search');
}
show() {
$('[data-page-name="search"]').show();
}
hide() {
$('[data-page-name="search"]').hide();
}
}
erpnext.hub.ProfilePage = class {
constructor(parent) {
this.$wrapper = $(`<div id="vue-area-profile">`).appendTo($(parent));
new Vue({
render: h => h(Profile)
}).$mount('#vue-area-profile');
}
show() {
$('[data-page-name="profile"]').show();
}
hide() {
$('[data-page-name="profile"]').hide();
}
}
erpnext.hub.SellerPage = class {
constructor(parent) {
this.$wrapper = $(`<div id="vue-area-seller">`).appendTo($(parent));
new Vue({
render: h => h(Seller)
}).$mount('#vue-area-seller');
}
show() {
$('[data-page-name="seller"]').show();
}
hide() {
$('[data-page-name="seller"]').hide();
}
}
erpnext.hub.NotFoundPage = class {
constructor(parent) {
this.$wrapper = $(`<div id="vue-area-not-found">`).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();
}
}