feat(marketplace): seller profile page
diff --git a/erpnext/public/js/hub/PageContainer.vue b/erpnext/public/js/hub/PageContainer.vue
index 7935837..f151add 100644
--- a/erpnext/public/js/hub/PageContainer.vue
+++ b/erpnext/public/js/hub/PageContainer.vue
@@ -14,11 +14,11 @@
import PublishedItems from './pages/PublishedItems.vue';
import Item from './pages/Item.vue';
import Seller from './pages/Seller.vue';
+import SellerItems from './pages/SellerItems.vue';
import Publish from './pages/Publish.vue';
import Buying from './pages/Buying.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';
function get_route_map() {
@@ -28,10 +28,11 @@
'marketplace/category/:category': Category,
'marketplace/item/:item': Item,
'marketplace/seller/:seller': Seller,
+ 'marketplace/seller/:seller/items': SellerItems,
'marketplace/not-found': NotFound,
}
const registered_routes = {
- 'marketplace/profile': Profile,
+ 'marketplace/profile': Seller,
'marketplace/saved-items': SavedItems,
'marketplace/featured-items': FeaturedItems,
'marketplace/publish': Publish,
diff --git a/erpnext/public/js/hub/pages/Profile.vue b/erpnext/public/js/hub/pages/Profile.vue
deleted file mode 100644
index 91ed946..0000000
--- a/erpnext/public/js/hub/pages/Profile.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
- <div
- class="marketplace-page"
- :data-page-name="page_name"
- v-if="init || profile"
- >
-
- <detail-view
- :title="title"
- :image="image"
- :sections="sections"
- :show_skeleton="init"
- >
-
- <detail-header-item slot="detail-header-item"
- :value="country"
- ></detail-header-item>
- <detail-header-item slot="detail-header-item"
- :value="site_name"
- ></detail-header-item>
- <detail-header-item slot="detail-header-item"
- :value="joined_when"
- ></detail-header-item>
-
- </detail-view>
- </div>
-</template>
-
-<script>
-export default {
- name: 'profile-page',
- data() {
- return {
- page_name: frappe.get_route()[1],
-
- init: true,
-
- profile: null,
- title: null,
- image: null,
- sections: [],
-
- country: '',
- site_name: '',
- joined_when: '',
- };
- },
- created() {
- this.get_profile();
- },
- methods: {
- get_profile() {
- hub.call(
- 'get_hub_seller_profile',
- { hub_seller: hub.settings.hub_seller_name }
- ).then(profile => {
- this.init = false;
-
- this.profile = profile;
- this.title = profile.company;
-
- this.country = __(profile.country);
- this.site_name = __(profile.site_name);
- this.joined_when = __(`Joined ${comment_when(profile.creation)}`);
-
- this.image = profile.logo;
- this.sections = [
- {
- title: __('About the Company'),
- content: profile.company_description
- ? __(profile.company_description)
- : __('No description')
- }
- ];
- });
- }
- }
-}
-</script>
-
-<style scoped></style>
diff --git a/erpnext/public/js/hub/pages/Seller.vue b/erpnext/public/js/hub/pages/Seller.vue
index c80865b..7d9b76e 100644
--- a/erpnext/public/js/hub/pages/Seller.vue
+++ b/erpnext/public/js/hub/pages/Seller.vue
@@ -22,30 +22,77 @@
</detail-view>
- <h5 v-if="profile">{{ 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 v-if="items.length">
+ <h5>
+ {{ item_container_heading }}
+ <small v-if="is_user_registered() && is_own_company">
+ <a class="pull-right" href="#marketplace/featured-items">Customize your Featured Items</a>
+ </small>
+ </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>
+ <a class="pull-right" @click="go_to_seller_items_page(seller_company)">Show all items</a>
+ </div>
+
+ <div v-if="recent_seller_reviews.length">
+ <h5>Customer Reviews</h5>
+ <div class="container" v-for="review in recent_seller_reviews" :key="review.name">
+ <br>
+ <span class="text-muted">
+ <rating :rating="review.rating" :max_rating="5"></rating>
+ </span>
+ <i class="octicon octicon-quote hidden-xs fa-fw"></i>
+ <span class="bold">{{ review.subject }}</span>
+ <i class="octicon octicon-quote hidden-xs fa-fw fa-rotate-180"></i>
+ <div class="container">
+ by {{ review.username }}
+ <a class="text-muted">
+ <span class="text-muted hidden-xs">–</span>
+ <span class="hidden-xs" v-html="comment_when(review.timestamp)"></span>
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <div v-if="seller_product_view_stats.length">
+ <h5>Stats</h5>
+ <div id="seller_traffic_chart"></div>
+ </div>
+
+
+
</div>
</template>
<script>
+import Rating from '../components/Rating.vue';
+
+
export default {
name: 'seller-page',
+ components: {
+ Rating
+ },
data() {
return {
page_name: frappe.get_route()[1],
seller_company: frappe.get_route()[2],
+ hub_seller: null,
init: true,
profile: null,
items:[],
+ recent_seller_reviews: [],
+ seller_product_view_stats: [],
+ seller_traffic_chart: null,
item_id_fieldname: 'name',
+ item_container_heading: 'Items',
title: null,
image: null,
@@ -60,19 +107,40 @@
this.get_seller_profile_and_items();
},
computed: {
- item_container_heading() {
- return __('Items by ' + this.seller_company);
- }
+ is_own_company() {
+ let is_own_company = false;
+ if(this.hub_seller) {
+ if(this.hub_seller === hub.settings.hub_seller_name) {
+ is_own_company = true;
+ }
+ }
+ return is_own_company;
+ },
},
methods: {
+ comment_when(timestamp){
+ return comment_when(timestamp)
+ },
+ is_user_registered(){
+ return hub.is_user_registered()
+ },
get_seller_profile_and_items() {
+ if (this.page_name == 'profile'){
+ this.seller_company = null;
+ this.hub_seller = hub.settings.hub_seller_name
+ }
hub.call(
'get_hub_seller_page_info',
- { company: this.seller_company }
+ { company: this.seller_company,
+ hub_seller: this.hub_seller }
).then(data => {
this.init = false;
this.profile = data.profile;
this.items = data.items;
+ this.item_container_heading = data.is_featured_item? "Features Items":"Popular Items";
+ this.hub_seller = this.items[0].hub_seller;
+ this.recent_seller_reviews = data.recent_seller_reviews;
+ this.seller_product_view_stats = data.seller_product_view_stats;
const profile = this.profile;
@@ -91,11 +159,41 @@
: __('No description')
}
];
+
+ setTimeout(() => this.init_seller_traffic_chart(), 1);
+
});
},
go_to_item_details_page(hub_item_name) {
frappe.set_route(`marketplace/item/${hub_item_name}`);
+ },
+ go_to_seller_items_page(hub_seller) {
+ frappe.set_route(`marketplace/seller/${hub_seller}/items`);
+ },
+ init_seller_traffic_chart() {
+ let lables = []
+ let tooltip_lables = {}
+ let datasets = [{name:"Product Views",chartType: 'line',values: []}]
+ this.seller_product_view_stats.map((stat) => {
+ lables.push(stat.date.substring(5));
+ tooltip_lables[stat.date.substring(5)] = new Date(stat.date).toDateString();
+ datasets[0].values.push(stat.view_count);
+ });
+ let data = {labels: lables, datasets:datasets, tooltip_lables:tooltip_lables}
+ this.seller_traffic_chart = new Chart( "#seller_traffic_chart", { // or DOM element
+ data: data,
+
+ title: "Daily Product Views",
+ type: 'axis-mixed', // or 'bar', 'line', 'pie', 'percentage'
+ height: 300,
+ colors: ['purple', '#ffa3ef', 'light-blue'],
+
+ tooltipOptions: {
+ formatTooltipX: d => this.seller_traffic_chart.data.tooltip_lables[d],
+ formatTooltipY: d => d + ' Views',
+ }
+ });
}
}
}
diff --git a/erpnext/public/js/hub/pages/SellerItems.vue b/erpnext/public/js/hub/pages/SellerItems.vue
new file mode 100644
index 0000000..852fbae
--- /dev/null
+++ b/erpnext/public/js/hub/pages/SellerItems.vue
@@ -0,0 +1,57 @@
+<template>
+ <div
+ class="marketplace-page"
+ :data-page-name="page_name"
+ v-if="init || items.length"
+ >
+ <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>
+export default {
+ name: 'seller-items-page',
+ data() {
+ return {
+ page_name: frappe.get_route()[1],
+ seller_company: frappe.get_route()[2],
+
+ init: true,
+ items:[],
+ item_id_fieldname: 'name',
+ };
+ },
+ created() {
+ this.get_seller_and_items();
+ },
+ computed: {
+ item_container_heading() {
+ return __('Items by ' + this.seller_company);
+ }
+ },
+ methods: {
+ get_seller_and_items() {
+ hub.call(
+ 'get_items',
+ { company: this.seller_company }
+ ).then(data => {
+ this.init = false;
+ this.items = data;
+ });
+ },
+
+ go_to_item_details_page(hub_item_name) {
+ frappe.set_route(`marketplace/item/${hub_item_name}`);
+ }
+ }
+}
+</script>
+
+<style scoped></style>