From 9e8d7bbeda1c01f9fbf6c26dc838f25aef9e22fb Mon Sep 17 00:00:00 2001
From: Prateeksha Singh <pratu16x7@gmail.com>
Date: Sun, 26 Aug 2018 16:29:32 +0530
Subject: [PATCH] [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 37ec4f343a5..00000000000
--- a/erpnext/public/js/hub/App.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-	<div class="app">
-		<hello></hello>
-	</div>
-</template>
-
-<script>
-import ItemCardsContainer from './components/ItemCardsContainer.vue';
-export default {
-	name: 'app',
-	components: {
-		ItemCardsContainer
-	}
-}
-</script>
-
-<style>
-body {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	height: 100%;
-	margin: 0;
-}
-.app {
-	color: #444;
-	margin-top: 100px;
-	max-width: 600px;
-	font-family: Helvetica, sans-serif;
-	text-align: center;
-	display: flex;
-	align-items: center;
-}
-</style>
diff --git a/erpnext/public/js/hub/components/DetailView.vue b/erpnext/public/js/hub/components/DetailView.vue
index ae6e8ab01b9..1a2207e4fa5 100644
--- a/erpnext/public/js/hub/components/DetailView.vue
+++ b/erpnext/public/js/hub/components/DetailView.vue
@@ -23,7 +23,7 @@
 
 			</div>
 		</div>
-		<div v-for="section in sections" class="row hub-item-description"
+		<div v-for="section in sections" class="row hub-item-description margin-bottom"
 			:key="section.title"
 		>
 			<h6 class="col-md-12 margin-top">
diff --git a/erpnext/public/js/hub/components/TimelineItem.vue b/erpnext/public/js/hub/components/TimelineItem.vue
new file mode 100644
index 00000000000..97b5a0d942f
--- /dev/null
+++ b/erpnext/public/js/hub/components/TimelineItem.vue
@@ -0,0 +1,9 @@
+/* Saving this for later */
+<template>
+	<div class="media timeline-item  notification-content">
+		<div class="small">
+			<i class="octicon octicon-bookmark fa-fw"></i>
+			<span title="Administrator"><b>4 weeks ago</b> Published 1 product to Marketplace</span>
+		</div>
+	</div>
+</template>
diff --git a/erpnext/public/js/hub/components/item_card.js b/erpnext/public/js/hub/components/item_card.js
index 7cb228118c7..fdf2690be8c 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 + `<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);
-
-	// route
-	if (!item.route) {
-		item.route = `marketplace/item/${item.hub_item_code}`
-	}
-
-	const item_html = `
-		<div class="col-md-3 col-sm-4 col-xs-6 hub-card-container">
-			<div class="hub-card"
-				data-hub-item-code="${item.hub_item_code}"
-				data-route="${item.route}">
-
-				<div class="hub-card-header level">
-					<div class="ellipsis">
-						<div class="hub-card-title ellipsis bold">${title}</div>
-						<div class="hub-card-subtitle ellipsis text-muted">${subtitle}</div>
-					</div>
-					<i class="octicon octicon-x text-extra-muted"
-						data-hub-item-code="${item.hub_item_code}">
-					</i>
-				</div>
-				<div class="hub-card-body">
-					<img class="hub-card-image" src="${img_url}" />
-					<div class="overlay hub-card-overlay"></div>
-				</div>
-			</div>
-		</div>
-	`;
-
-	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 + `<i class='fa fa-fw fa-star-o'></i>`)
-	}
-
-	if (company_name) {
-		subtitle.push(company_name);
-	}
-
-	let dot_spacer = '<span aria-hidden="true"> · </span>';
-	subtitle = subtitle.join(dot_spacer);
-
-	const edit_item_button = `<div class="hub-card-overlay-button" data-route="Form/Item/${item.item_name}">
-		<button class="btn btn-default zoom-view">
-			<i class="octicon octicon-pencil text-muted"></i>
-		</button>
-	</div>`;
-
-	const item_html = `
-		<div class="col-md-3 col-sm-4 col-xs-6 hub-card-container">
-			<div class="hub-card is-local ${is_active ? 'active' : ''}" data-id="${id}">
-				<div class="hub-card-header flex">
-					<div class="ellipsis">
-						<div class="hub-card-title ellipsis bold">${title}</div>
-						<div class="hub-card-subtitle ellipsis text-muted">${subtitle}</div>
-					</div>
-					<i class="octicon octicon-check text-success"></i>
-				</div>
-				<div class="hub-card-body">
-					<img class="hub-card-image" src="${img_url}" />
-					<div class="hub-card-overlay">
-						<div class="hub-card-overlay-body">
-							${edit_item_button}
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	`;
-
-	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 61b8af6b0b8..00000000000
--- 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
-		? `<div class="hub-items-header flex">
-				<h4>${title}</h4>
-				${action}
-			</div>`
-		: '';
-
-	const html = `<div class="row hub-items-container">
-		${title_html}
-		${items_html}
-	</div>`;
-
-	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 0b0e1be652c..c61814d0c62 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 = $(`<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();
+	}
+}
+
diff --git a/erpnext/public/js/hub/pages/Profile.vue b/erpnext/public/js/hub/pages/Profile.vue
index 2f3c9d59fa5..394136e53e0 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 00000000000..d4aa2a235f5
--- /dev/null
+++ b/erpnext/public/js/hub/pages/Seller.vue
@@ -0,0 +1,95 @@
+<template>
+	<div
+		class="marketplace-page"
+		:data-page-name="page_name"
+	>
+
+		<detail-view v-if="profile"
+			:title="title"
+			:subtitles="subtitles"
+			:image="image"
+			:sections="sections"
+		>
+		</detail-view>
+
+		<h5>{{ item_container_heading }}</h5>
+		<item-cards-container
+			:container_name="item_container_heading"
+			:items="items"
+			:item_id_fieldname="item_id_fieldname"
+			:on_click="go_to_item_details_page"
+		>
+		</item-cards-container>
+	</div>
+</template>
+
+<script>
+import DetailView from '../components/DetailView.vue';
+import ItemCardsContainer from '../components/ItemCardsContainer.vue';
+
+export default {
+	name: 'seller-page',
+	components: {
+		DetailView,
+		ItemCardsContainer
+	},
+	data() {
+		return {
+			page_name: frappe.get_route()[1],
+			seller_company: frappe.get_route()[2],
+
+			profile: null,
+			items:[],
+			item_id_fieldname: 'hub_item_code',
+
+			title: null,
+			subtitles: [],
+			image: null,
+			sections: [],
+		};
+	},
+	created() {
+		this.get_seller_profile_and_items();
+	},
+	computed: {
+		item_container_heading() {
+			return __('Products by ' + this.seller_company);
+		}
+	},
+	methods: {
+		get_seller_profile_and_items() {
+			hub.call(
+				'get_hub_seller_page_info',
+				{ company: this.seller_company }
+			).then(data => {
+				this.profile = data.profile;
+				this.items = data.items;
+
+				const profile = this.profile;
+
+				this.title = profile.company;
+				this.subtitles = [
+					__(profile.country),
+					__(profile.site_name),
+					__(`Joined ${comment_when(profile.creation)}`)
+				];
+				this.image = profile.logo;
+				this.sections = [
+					{
+						title: __('About the Company'),
+						content: profile.company_description
+							? __(profile.company_description)
+							: __('No description')
+					}
+				];
+			});
+		},
+
+		go_to_item_details_page(hub_item_code) {
+			frappe.set_route(`marketplace/item/${hub_item_code}`);
+		}
+	}
+}
+</script>
+
+<style scoped></style>
diff --git a/erpnext/public/js/hub/pages/seller.js b/erpnext/public/js/hub/pages/seller.js
deleted file mode 100644
index b86e46e5446..00000000000
--- 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);
-	}
-}