Merge pull request #16611 from karthikeyan5/hotfix-marketplace-features
feat(marketplace): seller profile page
This commit is contained in:
Rushabh Mehta
GitHub
commit
f3b33f3ab2
@ -1,5 +1,6 @@
|
||||
{
|
||||
"allow_copy": 0,
|
||||
"allow_events_in_timeline": 0,
|
||||
"allow_guest_to_view": 0,
|
||||
"allow_import": 0,
|
||||
"allow_rename": 0,
|
||||
@ -351,8 +352,8 @@
|
||||
"issingle": 1,
|
||||
"istable": 0,
|
||||
"max_attachments": 0,
|
||||
"modified": "2018-09-01 17:05:59.600583",
|
||||
"modified_by": "cave@aperture.com",
|
||||
"modified": "2019-02-01 14:21:16.729848",
|
||||
"modified_by": "Administrator",
|
||||
"module": "Hub Node",
|
||||
"name": "Marketplace Settings",
|
||||
"name_case": "",
|
||||
|
||||
@ -10,14 +10,15 @@ import Home from './pages/Home.vue';
|
||||
import Search from './pages/Search.vue';
|
||||
import Category from './pages/Category.vue';
|
||||
import SavedItems from './pages/SavedItems.vue';
|
||||
import FeaturedItems from './pages/FeaturedItems.vue';
|
||||
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() {
|
||||
@ -27,11 +28,13 @@ function get_route_map() {
|
||||
'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,
|
||||
'marketplace/published-items': PublishedItems,
|
||||
'marketplace/buying': Buying,
|
||||
|
||||
@ -30,6 +30,11 @@ export default {
|
||||
route: 'marketplace/saved-items',
|
||||
condition: () => this.hub_registered
|
||||
},
|
||||
{
|
||||
label: __('Your Featured Items'),
|
||||
route: 'marketplace/featured-items',
|
||||
condition: () => this.hub_registered
|
||||
},
|
||||
{
|
||||
label: __('Your Profile'),
|
||||
route: 'marketplace/profile',
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
<template>
|
||||
<p class="text-muted" v-html="header_item"></p>
|
||||
<p class="text-muted" v-if="!Array.isArray(this.header_items)" v-html="header_items"></p>
|
||||
<p class="text-muted" v-else>
|
||||
<span v-for="(header_item , index) in header_items" :key="index">
|
||||
<span v-if="index" v-html="spacer"></span>
|
||||
<span v-if="typeof(header_item) == 'string'" v-html="header_item"></span>
|
||||
<a v-else-if="typeof(header_item) == 'object'" @click="header_item.on_click(header_item.value)" v-html="header_item.value"></a>
|
||||
</span>
|
||||
</p>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -11,9 +18,8 @@ export default {
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {
|
||||
header_item: Array.isArray(this.value)
|
||||
? this.value.join(spacer)
|
||||
: this.value
|
||||
header_items: this.value,
|
||||
spacer: spacer
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
:class="{ 'bordered': bordered, 'align-center': centered, 'justify-center': centered }"
|
||||
:style="{ height: height + 'px' }"
|
||||
>
|
||||
<p class="text-muted">{{ message }}</p>
|
||||
<p class="text-muted" v-html="message" ></p>
|
||||
<p v-if="action">
|
||||
<button class="btn btn-default btn-xs"
|
||||
@click="action.on_click"
|
||||
|
||||
118
erpnext/public/js/hub/pages/FeaturedItems.vue
Normal file
118
erpnext/public/js/hub/pages/FeaturedItems.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div
|
||||
class="marketplace-page"
|
||||
:data-page-name="page_name"
|
||||
>
|
||||
<h5>{{ page_title }}</h5>
|
||||
<p v-if="items.length"
|
||||
class="text-muted margin-bottom">
|
||||
{{ __('You can Feature upto 8 items.') }}
|
||||
</p>
|
||||
|
||||
<item-cards-container
|
||||
:container_name="page_title"
|
||||
:items="items"
|
||||
:item_id_fieldname="item_id_fieldname"
|
||||
:on_click="go_to_item_details_page"
|
||||
:editable="true"
|
||||
@remove-item="on_item_remove"
|
||||
:empty_state_message="empty_state_message"
|
||||
>
|
||||
</item-cards-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'featured-items-page',
|
||||
data() {
|
||||
return {
|
||||
page_name: frappe.get_route()[1],
|
||||
items: [],
|
||||
item_id_fieldname: 'name',
|
||||
|
||||
// Constants
|
||||
page_title: __('Your Featured Items'),
|
||||
empty_state_message: __(`No featured items yet. Got to your
|
||||
<a href="#marketplace/published-items">
|
||||
Published Items</a>
|
||||
and feature upto 8 items that you want to highlight to your customers.`)
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.get_items();
|
||||
},
|
||||
methods: {
|
||||
get_items() {
|
||||
hub.call(
|
||||
'get_featured_items_of_seller', {},
|
||||
'action:item_feature'
|
||||
)
|
||||
.then((items) => {
|
||||
this.items = items;
|
||||
})
|
||||
},
|
||||
|
||||
go_to_item_details_page(hub_item_name) {
|
||||
frappe.set_route(`marketplace/item/${hub_item_name}`);
|
||||
},
|
||||
|
||||
on_item_remove(hub_item_name) {
|
||||
const grace_period = 5000;
|
||||
let reverted = false;
|
||||
let alert;
|
||||
|
||||
const undo_remove = () => {
|
||||
this.toggle_item(hub_item_name);;
|
||||
reverted = true;
|
||||
alert.hide();
|
||||
return false;
|
||||
}
|
||||
|
||||
const item_name = this.items.filter(item => item.hub_item_name === hub_item_name);
|
||||
|
||||
alert = frappe.show_alert(__(`<span>${item_name} removed.
|
||||
<a href="#" data-action="undo-remove"><b>Undo</b></a></span>`),
|
||||
grace_period/1000,
|
||||
{
|
||||
'undo-remove': undo_remove.bind(this)
|
||||
}
|
||||
);
|
||||
|
||||
this.toggle_item(hub_item_name, false);
|
||||
|
||||
setTimeout(() => {
|
||||
if(!reverted) {
|
||||
this.remove_item_from_featured_items(hub_item_name);
|
||||
}
|
||||
}, grace_period);
|
||||
},
|
||||
|
||||
remove_item_from_featured_items(hub_item_name) {
|
||||
erpnext.hub.trigger('action:item_feature');
|
||||
hub.call('remove_item_from_seller_featured_items', {
|
||||
hub_item_name,
|
||||
hub_user: frappe.session.user
|
||||
})
|
||||
.then(() => {
|
||||
this.get_items();
|
||||
})
|
||||
.catch(e => {
|
||||
console.log(e);
|
||||
});
|
||||
},
|
||||
|
||||
// By default show
|
||||
toggle_item(hub_item_name, show=true) {
|
||||
this.items = this.items.map(item => {
|
||||
if(item.name === hub_item_name) {
|
||||
item.seen = show;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -72,6 +72,11 @@ export default {
|
||||
condition: hub.is_user_registered() && !this.is_own_item,
|
||||
action: this.add_to_saved_items
|
||||
},
|
||||
{
|
||||
label: __('Add to Featured Item'),
|
||||
condition: hub.is_user_registered() && this.is_own_item,
|
||||
action: this.add_to_featured_items
|
||||
},
|
||||
{
|
||||
label: __('Report this Item'),
|
||||
condition: !this.is_own_item,
|
||||
@ -103,7 +108,7 @@ export default {
|
||||
subtitle_items.push(rating + `<i class='fa fa-fw fa-star-o'></i>`)
|
||||
}
|
||||
|
||||
subtitle_items.push(this.item.company);
|
||||
subtitle_items.push({value:this.item.company,on_click:this.go_to_seller_profile_page});
|
||||
|
||||
return subtitle_items;
|
||||
},
|
||||
@ -169,7 +174,9 @@ export default {
|
||||
this.make_dialogs();
|
||||
});
|
||||
},
|
||||
|
||||
go_to_seller_profile_page(seller_name) {
|
||||
frappe.set_route(`marketplace/seller/${seller_name}`);
|
||||
},
|
||||
build_data() {
|
||||
this.title = this.item.item_name || this.item.name;
|
||||
this.image = this.item.image;
|
||||
@ -210,6 +217,21 @@ export default {
|
||||
});
|
||||
},
|
||||
|
||||
add_to_featured_items() {
|
||||
hub.call('add_item_to_seller_featured_items', {
|
||||
hub_item_name: this.hub_item_name,
|
||||
hub_user: frappe.session.user
|
||||
},)
|
||||
.then(() => {
|
||||
const featured_items_link = `<b><a href="#marketplace/featured-items">${__('Added to Featured Items')}</a></b>`
|
||||
frappe.show_alert(featured_items_link);
|
||||
erpnext.hub.trigger('action:item_feature');
|
||||
})
|
||||
.catch(e => {
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
|
||||
make_contact_seller_dialog() {
|
||||
this.contact_seller_dialog = new frappe.ui.Dialog({
|
||||
title: __('Send a message'),
|
||||
|
||||
@ -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>
|
||||
@ -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,39 @@ export default {
|
||||
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() {
|
||||
hub.call(
|
||||
'get_hub_seller_page_info',
|
||||
{ company: this.seller_company }
|
||||
).then(data => {
|
||||
let post_data = {company: this.seller_company}
|
||||
if (this.page_name == 'profile'){
|
||||
this.seller_company = null;
|
||||
this.hub_seller = hub.settings.hub_seller_name
|
||||
post_data = {hub_seller: this.hub_seller}
|
||||
}
|
||||
hub.call('get_hub_seller_page_info', post_data)
|
||||
.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 +158,41 @@ export default {
|
||||
: __('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',
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
57
erpnext/public/js/hub/pages/SellerItems.vue
Normal file
57
erpnext/public/js/hub/pages/SellerItems.vue
Normal file
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user