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

feat(messages): split messages into buying and selling

Browse Source 
- messages will be organized by their purpose, i.e Buying and Selling
- on clicking the buying item, the message room page will be opened
where sellers can communicate
- invalidate cache using event key
This commit is contained in:
Faris Ansari 2018-08-17 18:39:36 +05:30
parent 335c0f200f
commit 2ce2e1b6b0
6 changed files with 116 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
erpnext/public/js/hub/components/detail_view.js
View File

@ -33,6 +33,12 @@ function get_detail_view_html(item, allow_edit) {
${__('Saved')}
</button>`;
const contact_seller_button = item.hub_seller !== hub.settings.company_email
? `<button class="btn btn-primary" data-action="contact_seller">
${__('Contact Seller')}
</button>`
: '';
let menu_items = '';
if(allow_edit) {
@ -69,9 +75,7 @@ function get_detail_view_html(item, allow_edit) {
<div class="page-actions detail-page-actions">
${favourite_button}
<button class="btn btn-primary" data-action="contact_seller">
${__('Contact Seller')}
</button>
${contact_seller_button}
</div>
</div>
<div class="col-md-1">

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

@ -15,11 +15,16 @@ function get_item_card_html(item) {
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">
<div class="hub-card"
data-hub-item-code="${item.hub_item_code}"
data-route="marketplace/item/${item.hub_item_code}">
data-route="${item.route}">
<div class="hub-card-header level">
<div class="ellipsis">

11
erpnext/public/js/hub/hub_call.js
View File

@ -2,7 +2,7 @@ frappe.provide('hub');
frappe.provide('erpnext.hub');
erpnext.hub.cache = {};
hub.call = function call_hub_method(method, args={}, setup_cache_invalidation = invalidate_after_5_mins) {
hub.call = function call_hub_method(method, args={}, clear_cache_on_event) {
return new Promise((resolve, reject) => {
// cache
@ -13,7 +13,14 @@ hub.call = function call_hub_method(method, args={}, setup_cache_invalidation =
// cache invalidation
const clear_cache = () => delete erpnext.hub.cache[key];
setup_cache_invalidation(clear_cache);
if (!clear_cache_on_event) {
invalidate_after_5_mins(clear_cache);
} else {
erpnext.hub.on(clear_cache_on_event, () => {
clear_cache(key)
});
}
frappe.call({
method: 'erpnext.hub_node.api.call_hub_method',

8
erpnext/public/js/hub/pages/favourites.js
View File

@ -26,11 +26,9 @@ erpnext.hub.Favourites = class Favourites extends SubPage {
}
get_favourites() {
return hub.call(
'get_favourite_items_of_seller',
{ hub_seller: hub.settings.company_email },
clear_cache => erpnext.hub.on('action:item_favourite', clear_cache)
);
return hub.call('get_favourite_items_of_seller', {
hub_seller: hub.settings.company_email
}, 'action:item_favourite');
}
render(items) {

12
erpnext/public/js/hub/pages/item.js
View File

@ -105,6 +105,18 @@ erpnext.hub.Item = class Item extends SubPage {
],
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', 'messages');
erpnext.hub.trigger('action:send_message')
});
}
});

171
erpnext/public/js/hub/pages/messages.js
View File

@ -1,118 +1,105 @@
import SubPage from './subpage';
import { make_search_bar } from '../components/search_bar';
import { get_item_card_container_html } from '../components/items_container';
import { get_empty_state } from '../components/empty_state';
erpnext.hub.Messages = class Messages extends SubPage {
make_wrapper() {
super.make_wrapper();
make_wrapper() {
super.make_wrapper();
}
const html = `
<div class="row">
<div class="col-md-5">
<div class="seller-list"></div>
</div>
<div class="col-md-7">
${get_message_area_html()}
</div>
</div>
`;
refresh() {
const res = Promise.all([
this.get_buying_items(),
this.get_selling_items()
]);
make_search_bar({
wrapper: this.$wrapper,
on_search: keyword => {
res.then(([buying_items, selling_items]) => {
this.empty();
},
placeholder: __('Search for messages')
})
if (buying_items.length) {
buying_items.map(item => {
item.route = `marketplace/buy/${item.hub_item_code}`
})
this.render(buying_items, __('Buying'));
}
this.$wrapper.append(html);
if (selling_items.length) {
// selling_items.map(item => {
// item.route = `marketplace/sell/${item.hub_item_code}/${}`
// });
this.render(selling_items, __('Selling'));
}
this.message_input = new frappe.ui.CommentArea({
parent: this.$wrapper.find('.message-input'),
on_submit: (message) => {
this.message_input.reset();
if (!buying_items.length && !selling_items.length) {
this.render_empty_state();
}
});
}
// append message html
const $message_list = this.$wrapper.find('.message-list');
const message_html = get_message_html({
sender: hub.settings.company_email,
content: message
});
$message_list.append(message_html);
frappe.dom.scroll_to_bottom($message_list);
render(items = [], title) {
const html = get_item_card_container_html(items, title);
this.$wrapper.append(html);
}
const to_seller = frappe.get_route()[2];
hub.call('send_message', {
from_seller: hub.settings.company_email,
to_seller,
message
});
},
no_wrapper: true
});
}
render_empty_state() {
const empty_state = get_empty_state(__('You haven\'t interacted with any seller yet.'));
this.$wrapper.html(empty_state);
}
refresh() {
this.get_interactions()
.then(sellers => {
const html = sellers.map(get_list_item_html).join('');
this.$wrapper.find('.seller-list').html(html);
});
get_buying_items() {
return hub.call('get_buying_items_for_messages', {}, 'action:send_message');
}
this.get_messages()
.then(messages => {
const $message_list = this.$wrapper.find('.message-list');
const html = messages.map(get_message_html).join('');
$message_list.html(html);
frappe.dom.scroll_to_bottom($message_list);
});
}
get_selling_items() {
return hub.call('get_selling_items_for_messages');
}
get_interactions() {
return hub.call('get_sellers_with_interactions', { for_seller: hub.settings.company_email });
}
get_interactions() {
return hub.call('get_sellers_with_interactions', { for_seller: hub.settings.company_email });
}
get_messages() {
const against_seller = frappe.get_route()[2];
if (!against_seller) return Promise.resolve([]);
get_messages() {
const against_seller = frappe.get_route()[2];
if (!against_seller) return Promise.resolve([]);
return hub.call('get_messages', {
for_seller: hub.settings.company_email,
against_seller: against_seller
});
}
return hub.call('get_messages', {
for_seller: hub.settings.company_email,
against_seller: against_seller
});
}
}
function get_message_area_html() {
return `
<div class="message-area border padding flex flex-column">
<div class="message-list">
</div>
<div class="message-input">
</div>
</div>
`;
return `
<div class="message-area border padding flex flex-column">
<div class="message-list">
</div>
<div class="message-input">
</div>
</div>
`;
}
function get_list_item_html(seller) {
const active_class = frappe.get_route()[2] === seller.email ? 'active' : '';
const active_class = frappe.get_route()[2] === seller.email ? 'active' : '';
return `
<div class="message-list-item ${active_class}" data-route="marketplace/messages/${seller.email}">
<div class="list-item-left">
<img src="${seller.image || 'https://picsum.photos/200?random'}">
</div>
<div class="list-item-body">
${seller.company}
</div>
</div>
`;
return `
<div class="message-list-item ${active_class}" data-route="marketplace/messages/${seller.email}">
<div class="list-item-left">
<img src="${seller.image || 'https://picsum.photos/200?random'}">
</div>
<div class="list-item-body">
${seller.company}
</div>
</div>
`;
}
function get_message_html(message) {
return `
<div>
<h5>${message.sender}</h5>
<p>${message.content}</p>
</div>
`;
return `
<div>
<h5>${message.sender}</h5>
<p>${message.content}</p>
</div>
`;
}