From 725603c0a9386dbba077e19a852551bf4c7c3412 Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Mon, 27 Aug 2018 19:51:36 +0530
Subject: [PATCH] feat: Selling Page

- common Messages page for both buying and selling
---
 erpnext/public/js/hub/PageContainer.vue       |  7 +-
 erpnext/public/js/hub/Sidebar.vue             |  3 +
 .../public/js/hub/components/EmptyState.vue   | 13 ++--
 .../public/js/hub/components/ItemListCard.vue |  6 +-
 erpnext/public/js/hub/pages/Buying.vue        | 19 ++++--
 erpnext/public/js/hub/pages/Item.vue          | 12 ++--
 .../{BuyingMessages.vue => Messages.vue}      | 27 ++++++--
 erpnext/public/js/hub/pages/Selling.vue       | 64 +++++++++++++++++++
 erpnext/public/less/hub.less                  | 13 +++-
 9 files changed, 134 insertions(+), 30 deletions(-)
 rename erpnext/public/js/hub/pages/{BuyingMessages.vue => Messages.vue} (75%)
 create mode 100644 erpnext/public/js/hub/pages/Selling.vue

diff --git a/erpnext/public/js/hub/PageContainer.vue b/erpnext/public/js/hub/PageContainer.vue
index bb9ba3e8d23..e814be834b4 100644
--- a/erpnext/public/js/hub/PageContainer.vue
+++ b/erpnext/public/js/hub/PageContainer.vue
@@ -15,7 +15,8 @@ import Item from './pages/Item.vue';
 import Seller from './pages/Seller.vue';
 import Publish from './pages/Publish.vue';
 import Buying from './pages/Buying.vue';
-import BuyingMessages from './pages/BuyingMessages.vue';
+import Selling from './pages/Selling.vue';
+import Messages from './pages/Messages.vue';
 import Profile from './pages/Profile.vue';
 import NotFound from './pages/NotFound.vue';
 
@@ -33,7 +34,9 @@ const route_map = {
 	'marketplace/publish': Publish,
 	'marketplace/my-products': PublishedProducts,
 	'marketplace/buying': Buying,
-	'marketplace/buying/:item': BuyingMessages,
+	'marketplace/buying/:item': Messages,
+	'marketplace/selling': Selling,
+	'marketplace/selling/:buyer/:item': Messages
 }
 
 export default {
diff --git a/erpnext/public/js/hub/Sidebar.vue b/erpnext/public/js/hub/Sidebar.vue
index 208d8fe34c8..b5a4e46cb37 100644
--- a/erpnext/public/js/hub/Sidebar.vue
+++ b/erpnext/public/js/hub/Sidebar.vue
@@ -6,6 +6,9 @@
 			</li>
 		</ul>
 		<ul class="list-unstyled hub-sidebar-group" data-categories>
+			<li class="hub-sidebar-item is-title bold text-muted">
+				{{ __('Categories') }}
+			</li>
 			<li class="hub-sidebar-item" v-for="category in categories" :key="category.label" v-route="category.route">
 				{{ category.label }}
 			</li>
diff --git a/erpnext/public/js/hub/components/EmptyState.vue b/erpnext/public/js/hub/components/EmptyState.vue
index 3d35efc7979..527194b99c7 100644
--- a/erpnext/public/js/hub/components/EmptyState.vue
+++ b/erpnext/public/js/hub/components/EmptyState.vue
@@ -1,6 +1,6 @@
 <template>
-	<div class="empty-state flex align-center flex-column justify-center"
-		:class="{ bordered: bordered }"
+	<div class="empty-state flex flex-column"
+		:class="{ 'bordered': bordered, 'align-center': centered, 'justify-center': centered }"
 		:style="{ height: height + 'px' }"
 	>
 		<p class="text-muted">{{ message }}</p>
@@ -22,17 +22,20 @@ export default {
 		message: String,
 		bordered: Boolean,
 		height: Number,
-		action: Object
+		action: Object,
+		centered: {
+			type: Boolean,
+			default: true
+		}
 	}
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 	@import "../../../../../../frappe/frappe/public/less/variables.less";
 
 	.empty-state {
 		height: 500px;
-		margin: 15px;
 	}
 
 	.empty-state.bordered {
diff --git a/erpnext/public/js/hub/components/ItemListCard.vue b/erpnext/public/js/hub/components/ItemListCard.vue
index 4c6810003ed..70cb5666cc1 100644
--- a/erpnext/public/js/hub/components/ItemListCard.vue
+++ b/erpnext/public/js/hub/components/ItemListCard.vue
@@ -5,13 +5,11 @@
 			<div class="hub-list-body ellipsis">
 				<div class="hub-list-title">{{item.item_name}}</div>
 				<div class="hub-list-subtitle ellipsis">
-					<span>{{message.sender}}: </span>
-					<span>{{message.content}}</span>
-
+					<slot name="subtitle"></slot>
 				</div>
 			</div>
 		</div>
-		<div class="hub-list-right">
+		<div class="hub-list-right" v-if="message">
 			<span class="text-muted" v-html="frappe.datetime.comment_when(message.creation, true)" />
 		</div>
 	</div>
diff --git a/erpnext/public/js/hub/pages/Buying.vue b/erpnext/public/js/hub/pages/Buying.vue
index 7a783bc9694..cec9c9e5cb2 100644
--- a/erpnext/public/js/hub/pages/Buying.vue
+++ b/erpnext/public/js/hub/pages/Buying.vue
@@ -3,32 +3,39 @@
 		<section-header>
 			<h4>{{ __('Buying') }}</h4>
 		</section-header>
-		<div class="row">
-			<div class="col-md-7"
+		<div class="row" v-if="items">
+			<div class="col-md-7 margin-bottom"
 				v-for="item of items"
 				:key="item.name"
 			>
 				<item-list-card
 					:item="item"
-					:message="item.recent_message"
 					v-route="'marketplace/buying/' + item.name"
-				/>
+				>
+					<div slot="subtitle">
+						<span>{{item.recent_message.sender}}: </span>
+						<span>{{item.recent_message.content}}</span>
+					</div>
+				</item-list-card>
 			</div>
 		</div>
+		<empty-state v-else message="This page keeps track of items you want to buy from sellers." :centered="false" />
 	</div>
 </template>
 <script>
+import EmptyState from '../components/EmptyState.vue';
 import SectionHeader from '../components/SectionHeader.vue';
 import ItemListCard from '../components/ItemListCard.vue';
 
 export default {
 	components: {
 		SectionHeader,
-		ItemListCard
+		ItemListCard,
+		EmptyState
 	},
 	data() {
 		return {
-			items: []
+			items: null
 		}
 	},
 	created() {
diff --git a/erpnext/public/js/hub/pages/Item.vue b/erpnext/public/js/hub/pages/Item.vue
index ad28f4253a3..74a4647bc66 100644
--- a/erpnext/public/js/hub/pages/Item.vue
+++ b/erpnext/public/js/hub/pages/Item.vue
@@ -20,7 +20,7 @@
 			></detail-header-item>
 
 			<button slot="detail-header-item"
-				class="btn btn-primary margin-top"
+				class="btn btn-primary btn-sm margin-top"
 				@click="primary_action.action"
 			>
 				{{ primary_action.label }}
@@ -28,7 +28,7 @@
 
 		</detail-view>
 
-		<!-- <review-area :hub_item_code="hub_item_code"></review-area> -->
+		<!-- <review-area :hub_item_name="hub_item_name"></review-area> -->
 	</div>
 </template>
 
@@ -44,7 +44,7 @@ export default {
 	data() {
 		return {
 			page_name: frappe.get_route()[1],
-			hub_item_code: frappe.get_route()[2],
+			hub_item_name: frappe.get_route()[2],
 
 			init: true,
 
@@ -131,7 +131,7 @@ export default {
 	},
 	methods: {
 		get_profile() {
-			hub.call('get_item_details',{ hub_item_code: this.hub_item_code })
+			hub.call('get_item_details', { hub_item_name: this.hub_item_name })
 				.then(item => {
 				this.init = false;
 				this.item = item;
@@ -185,12 +185,12 @@ export default {
 					hub.call('send_message', {
 						from_seller: hub.settings.company_email,
 						to_seller: this.item.hub_seller,
-						hub_item: this.item.hub_item_code,
+						hub_item: this.item.name,
 						message
 					})
 						.then(() => {
 							d.hide();
-							frappe.set_route('marketplace', 'buy', this.item.hub_item_code);
+							frappe.set_route('marketplace', 'buying', this.item.name);
 							erpnext.hub.trigger('action:send_message')
 						});
 				}
diff --git a/erpnext/public/js/hub/pages/BuyingMessages.vue b/erpnext/public/js/hub/pages/Messages.vue
similarity index 75%
rename from erpnext/public/js/hub/pages/BuyingMessages.vue
rename to erpnext/public/js/hub/pages/Messages.vue
index 49a665639fd..1930bcb22ad 100644
--- a/erpnext/public/js/hub/pages/BuyingMessages.vue
+++ b/erpnext/public/js/hub/pages/Messages.vue
@@ -1,7 +1,7 @@
 <template>
 	<div v-if="item_details">
 		<div>
-			<a class="text-muted" v-route="'marketplace/buying'">← {{ __('Back to Messages') }}</a>
+			<a class="text-muted" v-route="back_link">← {{ __('Back to Messages') }}</a>
 		</div>
 		<section-header>
 			<div class="flex flex-column margin-bottom">
@@ -40,6 +40,7 @@ export default {
 	},
 	data() {
 		return {
+			message_type: frappe.get_route()[1],
 			item_details: null,
 			messages: []
 		}
@@ -49,12 +50,17 @@ export default {
 		this.get_item_details(hub_item_name)
 			.then(item_details => {
 				this.item_details = item_details;
-				this.get_messages(item_details)
+				this.get_messages()
 					.then(messages => {
 						this.messages = messages;
 					});
 			});
 	},
+	computed: {
+		back_link() {
+			return 'marketplace/' + this.message_type;
+		}
+	},
 	methods: {
 		send_message(message) {
 			this.messages.push({
@@ -65,7 +71,7 @@ export default {
 			});
 			hub.call('send_message', {
 				from_seller: hub.settings.company_email,
-				to_seller: this.item_details.hub_seller,
+				to_seller: this.get_against_seller(),
 				hub_item: this.item_details.name,
 				message
 			});
@@ -76,12 +82,23 @@ export default {
 		get_messages() {
 			if (!this.item_details) return [];
 			return hub.call('get_messages', {
-				against_seller: this.item_details.hub_seller,
+				against_seller: this.get_against_seller(),
 				against_item: this.item_details.name
 			});
 		},
+		get_against_seller() {
+			if (this.message_type === 'buying') {
+				return this.item_details.hub_seller;
+			} else if (this.message_type === 'selling') {
+				return frappe.get_route()[2];
+			}
+		},
 		get_hub_item_name() {
-			return frappe.get_route()[2];
+			if (this.message_type === 'buying') {
+				return frappe.get_route()[2];
+			} else if (this.message_type === 'selling') {
+				return frappe.get_route()[3];
+			}
 		}
 	}
 }
diff --git a/erpnext/public/js/hub/pages/Selling.vue b/erpnext/public/js/hub/pages/Selling.vue
new file mode 100644
index 00000000000..f8ed560a8eb
--- /dev/null
+++ b/erpnext/public/js/hub/pages/Selling.vue
@@ -0,0 +1,64 @@
+<template>
+	<div>
+		<section-header>
+			<h4>{{ __('Selling') }}</h4>
+		</section-header>
+		<div class="row">
+			<div class="col-md-7"
+				style="margin-bottom: 30px;"
+				v-for="item of items"
+				:key="item.name"
+			>
+				<item-list-card
+					:item="item"
+				>
+					<div slot="subtitle">
+						<span class="text-muted">{{ __('{0} conversations', [item.received_messages.length]) }}</span>
+					</div>
+				</item-list-card>
+				<div class="hub-list-item" v-for="(message, index) in item.received_messages" :key="index"
+					v-route="'marketplace/selling/' + message.buyer_email + '/' + item.name"
+				>
+					<div class="hub-list-left">
+						<div class="hub-list-body">
+							<div class="hub-list-title">
+								{{ message.buyer }}
+							</div>
+							<div class="hub-list-subtitle">
+								{{ message.sender }}: {{ message.content }}
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+import SectionHeader from '../components/SectionHeader.vue';
+import ItemListCard from '../components/ItemListCard.vue';
+
+export default {
+	components: {
+		SectionHeader,
+		ItemListCard
+	},
+	data() {
+		return {
+			items: []
+		}
+	},
+	created() {
+		this.get_items_for_messages()
+			.then(items => {
+				this.items = items;
+				console.log(items);
+			});
+	},
+	methods: {
+		get_items_for_messages() {
+			return hub.call('get_selling_items_for_messages');
+		}
+	}
+}
+</script>
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index 618f98f8316..27321e5f317 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -198,8 +198,17 @@ body[data-route^="marketplace/"] {
 		justify-content: space-between;
 		align-items: center;
 		border: 1px solid @border-color;
-		margin-bottom: 15px;
-		border-radius: 3px;
+		margin-bottom: -1px;
+		overflow: hidden;
+	}
+
+	.hub-list-item:first-child {
+		border-top-left-radius: 4px;
+		border-top-right-radius: 4px;
+	}
+	.hub-list-item:last-child {
+		border-bottom-left-radius: 4px;
+		border-bottom-right-radius: 4px;
 	}
 
 	.hub-list-left {