[hub] Register in a dialog instead of Page

- in order to recycle it for Edit Profile
- Also, the register page had too much custom code

erpnext/public/js/hub/components/profile_dialog.js

@@ -0,0 +1,75 @@
+const ProfileDialog = (title = __('Edit Profile'), action={}) => {
+    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'
+        }
+    ];
+
+    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);
+        }
+    });
+
+    // Post create
+    const default_company = frappe.defaults.get_default('company');
+    dialog.set_value('company', default_company);
+
+    return dialog;
+}
+
+export {
+	ProfileDialog
+}

erpnext/public/js/hub/marketplace.js

@@ -12,6 +12,9 @@ import './pages/published_products';
 import './pages/messages';
 import './pages/not_found';
 
+// components
+import { ProfileDialog } from './components/profile_dialog';
+
 // helpers
 import './hub_call';
 
@@ -46,6 +49,16 @@ erpnext.hub.Marketplace = class Marketplace {
 			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() {
@@ -76,7 +89,7 @@ erpnext.hub.Marketplace = class Marketplace {
 					${__('Messages')}
 				</li>`
 
-			: `<li class="hub-sidebar-item text-muted" data-route="marketplace/register">
+			: `<li class="hub-sidebar-item text-muted" data-action="show_register_dialog">
 					${__('Become a seller')}
 				</li>`;
 
@@ -215,4 +228,27 @@ erpnext.hub.Marketplace = class Marketplace {
 		frappe.utils.scroll_to(0);
 		this.subpages[route[1]].show();
 	}
+
+	show_register_dialog() {
+		this.profile_dialog = ProfileDialog(__('Become a Seller'), {
+			label: __('Register'),
+			on_submit: this.register_seller.bind(this)
+		});
+
+		this.profile_dialog.show();
+	}
+
+	register_seller(form_values) {
+		frappe.call({
+		    method: 'erpnext.hub_node.doctype.hub_settings.hub_settings.register_seller',
+		    args: form_values,
+		    btn: $(e.currentTarget)
+		}).then(() => {
+			this.profile_dialog.hide();
+			frappe.set_route('marketplace', 'publish');
+
+		    // custom jquery event
+		    this.$body.trigger('seller-registered');
+		});
+	}
 }

erpnext/public/js/hub/pages/profile.js

@@ -1,11 +1,14 @@
 import SubPage from './subpage';
+import { get_detail_skeleton_html } from '../components/skeleton_state';
 
 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.render(profile));
 	}
@@ -14,6 +17,18 @@ erpnext.hub.Profile = class Profile extends SubPage {
 		return hub.call('get_hub_seller_profile', { hub_seller: hub.settings.company_email });
 	}
 
+	make_edit_profile_dialog() {
+		// this.edit_profile_dialog = new
+	}
+
+	edit_profile() {
+		//
+	}
+
+	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();
@@ -46,7 +61,7 @@ erpnext.hub.Profile = class Profile extends SubPage {
 						<img src="${p.logo}">
 					</div>
 				</div>
-				<div class="col-md-6">
+				<div class="col-md-8">
 					<h2>${p.company}</h2>
 					<div class="text-muted">
 						<p>${p.country}</p>
@@ -60,6 +75,16 @@ erpnext.hub.Profile = class Profile extends SubPage {
 					}
 					</div>
 				</div>
+				<div class="col-md-1">
+					<div class="dropdown pull-right hub-item-dropdown">
+						<a class="dropdown-toggle btn btn-xs btn-default" data-toggle="dropdown">
+							<span class="caret"></span>
+						</a>
+						<ul class="dropdown-menu dropdown-right" role="menu">
+						<li><a data-action="edit_profile">${__('Edit Profile')}</a></li>
+						</ul>
+					</div>
+				</div>
 			</div>
 
 			<div class="timeline">

erpnext/public/js/hub/pages/subpage.js

@@ -3,16 +3,6 @@ export default class SubPage {
 		this.$parent = $(parent);
 		this.make_wrapper(options);
 
-		// generic action handler
-		this.$wrapper.on('click', '[data-action]', e => {
-			const $target = $(e.currentTarget);
-			const action = $target.data().action;
-
-			if (action && this[action]) {
-				this[action].apply(this, $target);
-			}
-		})
-
 		// handle broken images after every render
 		if (this.render) {
 			this._render = this.render.bind(this);

erpnext/public/less/hub.less

@@ -6,7 +6,7 @@ body[data-route^="marketplace/"] {
 		padding-right: 25px;
 	}
 
-	[data-route] {
+	[data-route], [data-action] {
 		cursor: pointer;
 	}