Shiloh/brotherton-erpnext
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[hub][vue] Seller Page

Browse Source
This commit is contained in:
Prateeksha Singh 2018-08-26 16:29:32 +05:30
parent 80a8dfd6ba
commit 9e8d7bbeda
9 changed files with 127 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
erpnext/public/js/hub/App.vue
View File

@ -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>

2
erpnext/public/js/hub/components/DetailView.vue
View File

@ -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">

9
erpnext/public/js/hub/components/TimelineItem.vue Normal file
View File

@ -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>

105
erpnext/public/js/hub/components/item_card.js
View File

@ -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);

22
erpnext/public/js/hub/components/items_container.js
View File

@ -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
}

23
erpnext/public/js/hub/marketplace.js
View File

@ -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();
}
}

2
erpnext/public/js/hub/pages/Profile.vue
View File

@ -18,7 +18,7 @@
import DetailView from '../components/DetailView.vue';
export default {
name: 'saved-products-page',
name: 'profile-page',
components: {
DetailView
},

95
erpnext/public/js/hub/pages/Seller.vue Normal file
View File

@ -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>

32
erpnext/public/js/hub/pages/seller.js
View File

@ -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);
}
}