[hub] added DetailHeaderItem to detail pages, contact seller button
This commit is contained in:
parent
d0a952bcda
commit
fa26899cd0
@ -7,7 +7,7 @@
|
||||
const spacer = '<span aria-hidden="true"> · </span>';
|
||||
|
||||
export default {
|
||||
name: 'header-item',
|
||||
name: 'detail-header-item',
|
||||
props: ['value'],
|
||||
data() {
|
||||
return {
|
||||
|
@ -34,12 +34,8 @@
|
||||
<div class="col-md-8">
|
||||
<h2>{{ title }}</h2>
|
||||
<div class="text-muted">
|
||||
<slot name="subtitle"></slot>
|
||||
<slot name="detail-header-item"></slot>
|
||||
</div>
|
||||
|
||||
<button v-if="primary_action" class="btn btn-primary" @click="primary_action.action">
|
||||
{{ primary_action.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="menu_items" class="col-md-1">
|
||||
@ -76,7 +72,7 @@
|
||||
|
||||
export default {
|
||||
name: 'detail-view',
|
||||
props: ['title', 'subtitles', 'image', 'sections', 'show_skeleton', 'menu_items', 'primary_action'],
|
||||
props: ['title', 'image', 'sections', 'show_skeleton', 'menu_items'],
|
||||
data() {
|
||||
return {
|
||||
back_to_home_text: __('Back to Home')
|
||||
|
42
erpnext/public/js/hub/components/ReviewArea.vue
Normal file
42
erpnext/public/js/hub/components/ReviewArea.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="review-area"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['hub_item_code'],
|
||||
mounted() {
|
||||
this.make_input();
|
||||
},
|
||||
methods: {
|
||||
make_input() {
|
||||
this.comment_area = new frappe.ui.ReviewArea({
|
||||
parent: this.$refs['review-area'],
|
||||
mentions: [],
|
||||
on_submit: this.on_submit_review.bind(this)
|
||||
});
|
||||
|
||||
this.message_input = new frappe.ui.CommentArea({
|
||||
parent: this.$refs['review-area'],
|
||||
on_submit: (message) => {
|
||||
this.message_input.reset();
|
||||
this.$emit('change', message);
|
||||
},
|
||||
no_wrapper: true
|
||||
});
|
||||
},
|
||||
|
||||
on_submit_review(values) {
|
||||
values.user = frappe.session.user;
|
||||
values.username = frappe.session.user_fullname;
|
||||
|
||||
hub.call('add_item_review', {
|
||||
hub_item_code: this.hub_item_code,
|
||||
review: JSON.stringify(values)
|
||||
})
|
||||
// .then(this.push_review_in_review_area.bind(this));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
@ -1,13 +1,8 @@
|
||||
import Vue from 'vue/dist/vue.js';
|
||||
import './vue-plugins';
|
||||
|
||||
// pages
|
||||
import './pages/messages';
|
||||
import './pages/buying_messages';
|
||||
|
||||
import PageContainer from './PageContainer.vue';
|
||||
|
||||
// components
|
||||
import PageContainer from './PageContainer.vue';
|
||||
import { ProfileDialog } from './components/profile_dialog';
|
||||
|
||||
// helpers
|
||||
|
@ -28,13 +28,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import SectionHeader from '../components/SectionHeader.vue';
|
||||
import CommentInput from '../components/CommentInput.vue';
|
||||
import ItemListCard from '../components/ItemListCard.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SectionHeader,
|
||||
CommentInput,
|
||||
ItemListCard
|
||||
},
|
||||
|
@ -7,27 +7,40 @@
|
||||
|
||||
<detail-view
|
||||
:title="title"
|
||||
:subtitles="subtitles"
|
||||
:image="image"
|
||||
:sections="sections"
|
||||
:menu_items="menu_items"
|
||||
:show_skeleton="init"
|
||||
>
|
||||
<detail-header-item slot="subtitle"
|
||||
<detail-header-item slot="detail-header-item"
|
||||
:value="item_subtitle"
|
||||
></detail-header-item>
|
||||
<detail-header-item slot="subtitle"
|
||||
<detail-header-item slot="detail-header-item"
|
||||
:value="item_views_and_ratings"
|
||||
></detail-header-item>
|
||||
|
||||
<button slot="detail-header-item"
|
||||
class="btn btn-primary margin-top"
|
||||
@click="primary_action.action"
|
||||
>
|
||||
{{ primary_action.label }}
|
||||
</button>
|
||||
|
||||
</detail-view>
|
||||
|
||||
<!-- <review-area :hub_item_code="hub_item_code"></review-area> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ReviewArea from '../components/ReviewArea.vue';
|
||||
import { get_rating_html } from '../components/reviews';
|
||||
|
||||
export default {
|
||||
name: 'item-page',
|
||||
components: {
|
||||
ReviewArea
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
page_name: frappe.get_route()[1],
|
||||
@ -37,7 +50,6 @@ export default {
|
||||
|
||||
item: null,
|
||||
title: null,
|
||||
subtitles: [],
|
||||
image: null,
|
||||
sections: [],
|
||||
|
||||
@ -105,6 +117,13 @@ export default {
|
||||
}
|
||||
|
||||
return stats;
|
||||
},
|
||||
|
||||
primary_action() {
|
||||
return {
|
||||
label: __('Contact Seller'),
|
||||
action: this.contact_seller.bind(this)
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -140,8 +159,44 @@ export default {
|
||||
];
|
||||
},
|
||||
|
||||
report_item(){
|
||||
report_item() {
|
||||
//
|
||||
},
|
||||
|
||||
contact_seller() {
|
||||
const d = new frappe.ui.Dialog({
|
||||
title: __('Send a message'),
|
||||
fields: [
|
||||
{
|
||||
fieldname: 'to',
|
||||
fieldtype: 'Read Only',
|
||||
label: __('To'),
|
||||
default: this.item.company
|
||||
},
|
||||
{
|
||||
fieldtype: 'Text',
|
||||
fieldname: 'message',
|
||||
label: __('Message')
|
||||
}
|
||||
],
|
||||
primary_action: ({ message }) => {
|
||||
if (!message) return;
|
||||
|
||||
hub.call('send_message', {
|
||||
from_seller: hub.settings.company_email,
|
||||
to_seller: this.item.hub_seller,
|
||||
hub_item: this.item.hub_item_code,
|
||||
message
|
||||
})
|
||||
.then(() => {
|
||||
d.hide();
|
||||
frappe.set_route('marketplace', 'buy', this.item.hub_item_code);
|
||||
erpnext.hub.trigger('action:send_message')
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
d.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -12,6 +12,17 @@
|
||||
: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>
|
||||
@ -27,9 +38,12 @@ export default {
|
||||
|
||||
profile: null,
|
||||
title: null,
|
||||
subtitles: [],
|
||||
image: null,
|
||||
sections: []
|
||||
sections: [],
|
||||
|
||||
country: '',
|
||||
site_name: '',
|
||||
joined_when: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -45,11 +59,11 @@ export default {
|
||||
|
||||
this.profile = profile;
|
||||
this.title = profile.company;
|
||||
this.subtitles = [
|
||||
__(profile.country),
|
||||
__(profile.site_name),
|
||||
__(`Joined ${comment_when(profile.creation)}`)
|
||||
];
|
||||
|
||||
this.country = __(profile.country);
|
||||
this.site_name = __(profile.site_name);
|
||||
this.joined_when = __(`Joined ${comment_when(profile.creation)}`);
|
||||
|
||||
this.image = profile.logo;
|
||||
this.sections = [
|
||||
{
|
||||
|
@ -6,11 +6,20 @@
|
||||
>
|
||||
<detail-view
|
||||
:title="title"
|
||||
:subtitles="subtitles"
|
||||
: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>
|
||||
|
||||
<h5 v-if="profile">{{ item_container_heading }}</h5>
|
||||
@ -39,9 +48,12 @@ export default {
|
||||
item_id_fieldname: 'hub_item_code',
|
||||
|
||||
title: null,
|
||||
subtitles: [],
|
||||
image: null,
|
||||
sections: [],
|
||||
|
||||
country: '',
|
||||
site_name: '',
|
||||
joined_when: '',
|
||||
};
|
||||
},
|
||||
created() {
|
||||
@ -65,11 +77,11 @@ export default {
|
||||
const profile = this.profile;
|
||||
|
||||
this.title = profile.company;
|
||||
this.subtitles = [
|
||||
__(profile.country),
|
||||
__(profile.site_name),
|
||||
__(`Joined ${comment_when(profile.creation)}`)
|
||||
];
|
||||
|
||||
this.country = __(profile.country);
|
||||
this.site_name = __(profile.site_name);
|
||||
this.joined_when = __(`Joined ${comment_when(profile.creation)}`);
|
||||
|
||||
this.image = profile.logo;
|
||||
this.sections = [
|
||||
{
|
||||
|
Loading…
x
Reference in New Issue
Block a user