Update messages UI

This commit is contained in:
Suraj Shetty 2018-08-25 21:22:55 +05:30
parent 88700cf2b9
commit 0e59ec3ed2
6 changed files with 161 additions and 72 deletions

View File

@ -1,12 +1,4 @@
function get_item_card_html(item) {
if (item.recent_message) {
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;
const title = strip_html(item_name);
const img_url = item.image;
@ -120,20 +112,23 @@ function get_buying_item_message_card_html(item) {
const content = strip_html(message.content)
// route
if (!item.route) {
item.route = `marketplace/item/${item.hub_item_code}`
}
item.route = `marketplace/buying/${item.hub_item_code}`
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="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>
@ -152,7 +147,7 @@ function get_selling_item_message_card_html(item) {
}
let received_messages = '';
item.recent_messages.forEach(message => {
item.received_messages.forEach(message => {
const sender = message.sender === frappe.session.user ? 'You' : message.sender
const content = strip_html(message.content)
@ -183,5 +178,8 @@ function get_selling_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
}

View File

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

View File

@ -91,10 +91,10 @@ 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/selling-messages">
<li class="hub-sidebar-item text-muted" data-route="marketplace/selling">
${__('Selling')}
</li>
<li class="hub-sidebar-item text-muted" data-route="marketplace/buying-messages">
<li class="hub-sidebar-item text-muted" data-route="marketplace/buying">
${__('Buying')}
</li>
`
@ -218,20 +218,12 @@ erpnext.hub.Marketplace = class Marketplace {
this.subpages['my-products'] = new erpnext.hub.PublishedProductsPage(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] === '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');
this.subpages['buying'] = new erpnext.hub.Buying(this.$body);
}
if (route[1] === 'selling' && !this.subpages['selling']) {
this.subpages['selling'] = new erpnext.hub.MessageList(this.$body, 'Selling');
this.subpages['selling'] = new erpnext.hub.Selling(this.$body, 'Selling');
}
// dont allow unregistered users to access registered routes

View File

@ -0,0 +1,60 @@
import SubPage from './subpage';
import { make_search_bar } from '../components/search_bar';
import { get_item_card_container_html } from '../components/items_container';
import { get_item_card_html } from '../components/item_card';
erpnext.hub.Home = class Home extends SubPage {
make_wrapper() {
super.make_wrapper();
make_search_bar({
wrapper: this.$wrapper,
on_search: keyword => {
frappe.set_route('marketplace', 'search', keyword);
}
});
}
refresh() {
this.get_items_and_render();
}
get_items_and_render() {
this.$wrapper.find('.hub-items-container').empty();
this.get_data()
.then(data => {
this.render(data);
});
}
get_data() {
return hub.call('get_data_for_homepage', { country: frappe.defaults.get_user_default('country') });
}
render(data) {
let html = get_item_card_container_html(data.random_items, __('Explore'));
this.$wrapper.append(html);
if (data.items_by_country.length) {
html = get_item_card_container_html(data.items_by_country, __('Near You'));
this.$wrapper.append(html);
}
const category_items = data.category_items;
if (category_items) {
Object.keys(category_items).map(category => {
const items = category_items[category];
const see_all_link = `<p data-route="marketplace/category/${category}">See All</p>`;
html = get_item_card_container_html(
items,
__(category),
get_item_card_html,
see_all_link
);
this.$wrapper.append(html);
});
}
}
}

View File

@ -1,21 +1,18 @@
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 messages_of = this.options[0];
this.get_items_for_messages(messages_of).then((items) => {
this.get_items_for_messages().then((items) => {
this.empty();
if (items.length) {
items.map(item => {
item.route = `marketplace/${messages_of.toLowerCase()}/${item.hub_item_code}`
item.route = `marketplace/buying/${item.hub_item_code}`
})
this.render(items, __(messages_of));
this.render(items, __('Buying'));
}
if (!items.length && !items.length) {
@ -25,7 +22,7 @@ erpnext.hub.Messages = class Messages extends SubPage {
}
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);
}
@ -34,18 +31,40 @@ erpnext.hub.Messages = class Messages extends SubPage {
this.$wrapper.html(empty_state);
}
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_items_for_messages() {
return hub.call('get_buying_items_for_messages', {}, 'action:send_message');
}
}
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', {});
}
}
@ -82,4 +101,4 @@ function get_message_html(message) {
<p>${message.content}</p>
</div>
`;
}
}

View File

@ -192,27 +192,47 @@ body[data-route^="marketplace/"] {
margin-bottom: 20px;
}
.item-message-card {
overflow: auto;
max-width: 600px;
.hub-list-item {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid @border-color;
margin-bottom: 15px;
border-radius: 3px;
border: 1px solid @border-color;
.message-body {
padding: 10px;
}
.item-image {
float: left;
height: 50px;
width: 50px;
object-fit: contain;
margin: 10px;
}
.frappe-timestamp {
float: right;
}
.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: 15px;