Separate links for selling and buying messages

- Add separate UI for selling messages
- Remove some redundant code messages
This commit is contained in:
Suraj Shetty 2018-08-24 11:25:04 +05:30
parent de426cb543
commit 88700cf2b9
6 changed files with 187 additions and 49 deletions

View File

@ -1,6 +1,10 @@
function get_item_card_html(item) {
if (item.recent_message) {
return get_item_message_card_html(item);
return get_buying_item_message_card_html(item);
}
if (item.recent_messages) {
return get_selling_item_message_card_html(item);
}
const item_name = item.item_name || item.name;
@ -52,7 +56,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);
@ -68,11 +127,11 @@ function get_item_message_card_html(item) {
const item_html = `
<div class="item-message-card" data-route="${item.route}">
<img class="item-image" src='${item.image}'>
<img class="item-image" src="${item.image}">
<div class="message-body">
<span class='text-muted'>${comment_when(message.creation, true)}</span>
<span class="text-muted">${comment_when(message.creation, true)}</span>
<span class="bold">${item_name}</span>
<div class='ellipsis'>
<div class="ellipsis">
<span>${sender}: </span>
<span>${content}</span>
</div>
@ -83,6 +142,46 @@ function get_item_message_card_html(item) {
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.recent_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="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>
`;
return item_html;
}
export {
get_item_card_html
}

View File

@ -91,9 +91,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-messages">
${__('Selling')}
</li>
<li class="hub-sidebar-item text-muted" data-route="marketplace/buying-messages">
${__('Buying')}
</li>
`
: `<li class="hub-sidebar-item text-muted" data-action="show_register_dialog">
${__('Become a seller')}
@ -214,12 +218,20 @@ 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-messages' && !this.subpages['buying-messages']) {
this.subpages['buying-messages'] = new erpnext.hub.Messages(this.$body, 'Buying');
}
if (route[1] === 'buy' && !this.subpages['buy']) {
this.subpages['buy'] = new erpnext.hub.BuyingMessages(this.$body);
if (route[1] === 'selling-messages' && !this.subpages['selling-messages']) {
this.subpages['selling-messages'] = new erpnext.hub.Messages(this.$body, 'Selling');
}
if (route[1] === 'buying' && !this.subpages['buying']) {
this.subpages['buying'] = new erpnext.hub.MessageList(this.$body, 'Buying');
}
if (route[1] === 'selling' && !this.subpages['selling']) {
this.subpages['selling'] = new erpnext.hub.MessageList(this.$body, 'Selling');
}
// dont allow unregistered users to access registered routes

View File

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

View File

@ -8,29 +8,17 @@ erpnext.hub.Messages = class Messages extends SubPage {
}
refresh() {
const res = Promise.all([
this.get_buying_items(),
this.get_selling_items()
]);
res.then(([buying_items, selling_items]) => {
const messages_of = this.options[0];
this.get_items_for_messages(messages_of).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/${messages_of.toLowerCase()}/${item.hub_item_code}`
})
this.render(buying_items, __('Buying'));
this.render(items, __(messages_of));
}
if (!buying_items.length && !selling_items.length) {
if (!items.length && !items.length) {
this.render_empty_state();
}
});
@ -46,12 +34,14 @@ erpnext.hub.Messages = class Messages extends SubPage {
this.$wrapper.html(empty_state);
}
get_buying_items() {
return hub.call('get_buying_items_for_messages', {}, 'action:send_message');
}
get_selling_items() {
return hub.call('get_selling_items_for_messages');
get_items_for_messages(messages_of) {
if (messages_of === 'Buying') {
return hub.call('get_buying_items_for_messages', {}, 'action:send_message');
} else if (messages_of === 'Selling') {
return hub.call('get_selling_items_for_messages');
} else {
frappe.throw('Invalid message type');
}
}
get_interactions() {

View File

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

View File

@ -193,26 +193,57 @@ body[data-route^="marketplace/"] {
}
.item-message-card {
height: 80px;
max-width: 500px;
margin-bottom: 10px;
padding: 10px;
border-radius: 4px;
overflow: auto;
max-width: 600px;
margin-bottom: 15px;
border-radius: 3px;
border: 1px solid @border-color;
.message-body {
margin-left: 60px;
padding: 10px;
}
.item-image {
float: left;
height: 50px;
width: 50px;
object-fit: contain;
// border-radius: 50%
margin: 10px;
}
.frappe-timestamp {
float: right;
}
}
.selling-item-message-card {
max-width: 500px;
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;
}
}
.received-message-container {
clear: left;
background-color: @light-bg;
.received-message {
border-top: 1px solid @border-color;
padding: 10px;
}
.frappe-timestamp {
float: right;
}
}
}
.form-container {
.frappe-control {
max-width: 100% !important;