Merge branch 'hub-redesign' of https://github.com/frappe/erpnext into hub-redesign
This commit is contained in:
Prateeksha Singh
commit
80a8dfd6ba
40
erpnext/public/js/hub/PageContainer.vue
Normal file
40
erpnext/public/js/hub/PageContainer.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="hub-page-container">
|
||||
<component :is="current_page"></component>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Home from './pages/Home.vue';
|
||||
import SavedProducts from './pages/SavedProducts.vue';
|
||||
import Publish from './pages/Publish.vue';
|
||||
import Category from './pages/Category.vue';
|
||||
import Search from './pages/Search.vue';
|
||||
import PublishedProducts from './pages/PublishedProducts.vue';
|
||||
|
||||
const route_map = {
|
||||
'marketplace/home': Home,
|
||||
'marketplace/saved-products': SavedProducts,
|
||||
'marketplace/publish': Publish
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
current_page: this.get_current_page()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
frappe.route.on('change', () => {
|
||||
this.set_current_page();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
set_current_page() {
|
||||
this.current_page = this.get_current_page();
|
||||
},
|
||||
get_current_page() {
|
||||
return route_map[frappe.get_route_str()];
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,8 +1,4 @@
|
||||
function get_item_card_html(item) {
|
||||
if (item.recent_message) {
|
||||
return get_item_message_card_html(item);
|
||||
}
|
||||
|
||||
const item_name = item.item_name || item.name;
|
||||
const title = strip_html(item_name);
|
||||
const img_url = item.image;
|
||||
@ -52,7 +48,62 @@ function get_item_card_html(item) {
|
||||
return item_html;
|
||||
}
|
||||
|
||||
function get_item_message_card_html(item) {
|
||||
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);
|
||||
|
||||
@ -60,21 +111,64 @@ function get_item_message_card_html(item) {
|
||||
const sender = message.sender === frappe.session.user ? 'You' : message.sender
|
||||
const content = strip_html(message.content)
|
||||
|
||||
// route
|
||||
item.route = `marketplace/buying/${item.hub_item_code}`
|
||||
|
||||
const item_html = `
|
||||
<div class="col-md-7">
|
||||
<div class="hub-list-item" data-route="${item.route}">
|
||||
<div class="hub-list-left">
|
||||
<img class="hub-list-image" src="${item.image}">
|
||||
<div class="hub-list-body ellipsis">
|
||||
<div class="hub-list-title">${item_name}</div>
|
||||
<div class="hub-list-subtitle ellipsis">
|
||||
<span>${sender}: </span>
|
||||
<span>${content}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hub-list-right">
|
||||
<span class="text-muted">${comment_when(message.creation, true)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
return item_html;
|
||||
}
|
||||
|
||||
function get_selling_item_message_card_html(item) {
|
||||
const item_name = item.item_name || item.name;
|
||||
const title = strip_html(item_name);
|
||||
|
||||
// route
|
||||
if (!item.route) {
|
||||
item.route = `marketplace/item/${item.hub_item_code}`
|
||||
}
|
||||
|
||||
let received_messages = '';
|
||||
item.received_messages.forEach(message => {
|
||||
const sender = message.sender === frappe.session.user ? 'You' : message.sender
|
||||
const content = strip_html(message.content)
|
||||
|
||||
received_messages += `
|
||||
<div class="received-message">
|
||||
<span class="text-muted">${comment_when(message.creation, true)}</span>
|
||||
<div class="ellipsis">
|
||||
<span class="bold">${sender}: </span>
|
||||
<span>${content}</span>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
|
||||
const item_html = `
|
||||
<div class="item-message-card" data-route="${item.route}">
|
||||
<img class="item-image" src='${item.image}'>
|
||||
<div class="message-body">
|
||||
<span class='text-muted'>${comment_when(message.creation, true)}</span>
|
||||
<span class="bold">${item_name}</span>
|
||||
<div class='ellipsis'>
|
||||
<span>${sender}: </span>
|
||||
<span>${content}</span>
|
||||
<div class="selling-item-message-card">
|
||||
<div class="selling-item-detail" data-route="${item.route}">
|
||||
<img class="item-image" src="${item.image}">
|
||||
<h5 class="item-name">${item_name}</h5>
|
||||
<div class="received-message-container">
|
||||
${received_messages}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -84,5 +178,8 @@ function get_item_message_card_html(item) {
|
||||
}
|
||||
|
||||
export {
|
||||
get_item_card_html
|
||||
get_item_card_html,
|
||||
get_local_item_card_html,
|
||||
get_buying_item_message_card_html,
|
||||
get_selling_item_message_card_html
|
||||
}
|
||||
|
||||
@ -3,7 +3,7 @@ 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 margin-bottom flex">
|
||||
? `<div class="hub-items-header flex">
|
||||
<h4>${title}</h4>
|
||||
${action}
|
||||
</div>`
|
||||
|
||||
@ -7,6 +7,7 @@ import './pages/messages';
|
||||
import './pages/buying_messages';
|
||||
import './pages/not_found';
|
||||
|
||||
import PageContainer from './PageContainer.vue';
|
||||
import Home from './pages/Home.vue';
|
||||
import SavedProducts from './pages/SavedProducts.vue';
|
||||
import Publish from './pages/Publish.vue';
|
||||
@ -91,9 +92,13 @@ erpnext.hub.Marketplace = class Marketplace {
|
||||
<li class="hub-sidebar-item text-muted" data-route="marketplace/publish">
|
||||
${__('Publish Products')}
|
||||
</li>
|
||||
<li class="hub-sidebar-item text-muted" data-route="marketplace/messages">
|
||||
${__('Messages')}
|
||||
</li>`
|
||||
<li class="hub-sidebar-item text-muted" data-route="marketplace/selling">
|
||||
${__('Selling')}
|
||||
</li>
|
||||
<li class="hub-sidebar-item text-muted" data-route="marketplace/buying">
|
||||
${__('Buying')}
|
||||
</li>
|
||||
`
|
||||
|
||||
: `<li class="hub-sidebar-item text-muted" data-action="show_register_dialog">
|
||||
${__('Become a seller')}
|
||||
@ -143,6 +148,13 @@ erpnext.hub.Marketplace = class Marketplace {
|
||||
|
||||
make_body() {
|
||||
this.$body = this.$parent.find('.layout-main-section');
|
||||
// this.$page_container = $('<div class="hub-page-container">').appendTo(this.$body);
|
||||
|
||||
// new Vue({
|
||||
// el: '.hub-page-container',
|
||||
// render: h => h(PageContainer)
|
||||
// });
|
||||
|
||||
erpnext.hub.on('seller-registered', () => {
|
||||
this.registered = 1;
|
||||
this.make_sidebar_nav_buttons();
|
||||
@ -214,12 +226,12 @@ erpnext.hub.Marketplace = class Marketplace {
|
||||
this.subpages['my-products'] = new erpnext.hub.PublishedProductsPage(this.$body);
|
||||
}
|
||||
|
||||
if (route[1] === 'messages' && !this.subpages['messages']) {
|
||||
this.subpages['messages'] = new erpnext.hub.Messages(this.$body);
|
||||
if (route[1] === 'buying' && !this.subpages['buying']) {
|
||||
this.subpages['buying'] = new erpnext.hub.Buying(this.$body);
|
||||
}
|
||||
|
||||
if (route[1] === 'buy' && !this.subpages['buy']) {
|
||||
this.subpages['buy'] = new erpnext.hub.BuyingMessages(this.$body);
|
||||
if (route[1] === 'selling' && !this.subpages['selling']) {
|
||||
this.subpages['selling'] = new erpnext.hub.Selling(this.$body, 'Selling');
|
||||
}
|
||||
|
||||
// dont allow unregistered users to access registered routes
|
||||
|
||||
@ -1,19 +1,24 @@
|
||||
import SubPage from './subpage';
|
||||
|
||||
erpnext.hub.BuyingMessages = class BuyingMessages extends SubPage {
|
||||
erpnext.hub.MessageList = class BuyingMessages extends SubPage {
|
||||
make_wrapper() {
|
||||
const messages_of = this.options[0];
|
||||
if (messages_of === 'Buying') {
|
||||
this.back_route = 'marketplace/buying-messages'
|
||||
} else {
|
||||
this.back_route = 'marketplace/selling-messages'
|
||||
}
|
||||
super.make_wrapper();
|
||||
this.add_back_link(__('Back to Messages'), 'marketplace/messages');
|
||||
this.add_back_link(__('Back to Messages'), this.back_route);
|
||||
this.$message_container = this.add_section({ title: 'Buy' });
|
||||
}
|
||||
|
||||
refresh() {
|
||||
const item_code = frappe.get_route()[2] || null;
|
||||
if (!item_code) {
|
||||
frappe.set_route('marketplace/messages');
|
||||
frappe.set_route(this.back_route);
|
||||
return;
|
||||
}
|
||||
|
||||
this.get_item_details(item_code)
|
||||
.then(item_details => {
|
||||
this.item_details = item_details;
|
||||
|
||||
@ -1,43 +1,28 @@
|
||||
import SubPage from './subpage';
|
||||
import { get_item_card_container_html } from '../components/items_container';
|
||||
import { get_buying_item_message_card_html } from '../components/item_card';
|
||||
import { get_selling_item_message_card_html } from '../components/item_card';
|
||||
import { get_empty_state } from '../components/empty_state';
|
||||
|
||||
erpnext.hub.Messages = class Messages extends SubPage {
|
||||
make_wrapper() {
|
||||
super.make_wrapper();
|
||||
}
|
||||
|
||||
erpnext.hub.Buying = class Buying extends SubPage {
|
||||
refresh() {
|
||||
const res = Promise.all([
|
||||
this.get_buying_items(),
|
||||
this.get_selling_items()
|
||||
]);
|
||||
|
||||
res.then(([buying_items, selling_items]) => {
|
||||
this.get_items_for_messages().then((items) => {
|
||||
this.empty();
|
||||
|
||||
if (selling_items.length) {
|
||||
// selling_items.map(item => {
|
||||
// item.route = `marketplace/sell/${item.hub_item_code}/${}`
|
||||
// });
|
||||
this.render(selling_items, __('Selling'));
|
||||
}
|
||||
|
||||
if (buying_items.length) {
|
||||
buying_items.map(item => {
|
||||
item.route = `marketplace/buy/${item.hub_item_code}`
|
||||
if (items.length) {
|
||||
items.map(item => {
|
||||
item.route = `marketplace/buying/${item.hub_item_code}`
|
||||
})
|
||||
this.render(buying_items, __('Buying'));
|
||||
this.render(items, __('Buying'));
|
||||
}
|
||||
|
||||
if (!buying_items.length && !selling_items.length) {
|
||||
if (!items.length && !items.length) {
|
||||
this.render_empty_state();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
render(items = [], title) {
|
||||
const html = get_item_card_container_html(items, title);
|
||||
const html = get_item_card_container_html(items, title, get_buying_item_message_card_html);
|
||||
this.$wrapper.append(html);
|
||||
}
|
||||
|
||||
@ -46,16 +31,40 @@ erpnext.hub.Messages = class Messages extends SubPage {
|
||||
this.$wrapper.html(empty_state);
|
||||
}
|
||||
|
||||
get_buying_items() {
|
||||
get_items_for_messages() {
|
||||
return hub.call('get_buying_items_for_messages', {}, 'action:send_message');
|
||||
}
|
||||
}
|
||||
|
||||
get_selling_items() {
|
||||
return hub.call('get_selling_items_for_messages');
|
||||
erpnext.hub.Selling = class Selling extends SubPage {
|
||||
refresh() {
|
||||
this.get_items_for_messages().then((items) => {
|
||||
this.empty();
|
||||
if (items.length) {
|
||||
items.map(item => {
|
||||
item.route = `marketplace/selling/${item.hub_item_code}`
|
||||
})
|
||||
this.render(items, __('Selling'));
|
||||
}
|
||||
|
||||
if (!items.length && !items.length) {
|
||||
this.render_empty_state();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
get_interactions() {
|
||||
return hub.call('get_sellers_with_interactions', { for_seller: hub.settings.company_email });
|
||||
render(items = [], title) {
|
||||
const html = get_item_card_container_html(items, title, get_selling_item_message_card_html);
|
||||
this.$wrapper.append(html);
|
||||
}
|
||||
|
||||
render_empty_state() {
|
||||
const empty_state = get_empty_state(__('You haven\'t interacted with any seller yet.'));
|
||||
this.$wrapper.html(empty_state);
|
||||
}
|
||||
|
||||
get_items_for_messages() {
|
||||
return hub.call('get_selling_items_for_messages', {});
|
||||
}
|
||||
}
|
||||
|
||||
@ -92,4 +101,4 @@ function get_message_html(message) {
|
||||
<p>${message.content}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
export default class SubPage {
|
||||
constructor(parent, options) {
|
||||
constructor(parent, ...options) {
|
||||
this.$parent = $(parent);
|
||||
this.options = options;
|
||||
this.make_wrapper(options);
|
||||
|
||||
// generic action handler
|
||||
|
||||
@ -192,24 +192,75 @@ body[data-route^="marketplace/"] {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.item-message-card {
|
||||
height: 80px;
|
||||
.hub-list-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border: 1px solid @border-color;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.hub-list-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.hub-list-right {
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
.hub-list-image {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
border-right: 1px solid @border-color;
|
||||
|
||||
&::after {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.hub-list-body {
|
||||
padding: 12px 15px;
|
||||
}
|
||||
|
||||
.hub-list-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hub-list-subtitle {
|
||||
color: @text-muted;
|
||||
}
|
||||
|
||||
.selling-item-message-card {
|
||||
max-width: 500px;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
.message-body {
|
||||
margin-left: 60px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid @border-color;
|
||||
.selling-item-detail {
|
||||
overflow: auto;
|
||||
.item-image {
|
||||
float: left;
|
||||
height: 80px;
|
||||
width: 80px;
|
||||
object-fit: contain;
|
||||
margin: 5px;
|
||||
}
|
||||
.item-name {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.item-image {
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
object-fit: contain;
|
||||
// border-radius: 50%
|
||||
}
|
||||
.frappe-timestamp {
|
||||
float: right;
|
||||
.received-message-container {
|
||||
clear: left;
|
||||
background-color: @light-bg;
|
||||
.received-message {
|
||||
border-top: 1px solid @border-color;
|
||||
padding: 10px;
|
||||
}
|
||||
.frappe-timestamp {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user