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

Add list view for messages

Browse Source
This commit is contained in:
Suraj Shetty 2018-08-22 21:31:16 +05:30
parent d94701e5cc
commit 341386e3a7
3 changed files with 62 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,7 @@
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;
@ -7,9 +10,11 @@ function get_item_card_html(item) {
// 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>';
@ -20,24 +25,6 @@ function get_item_card_html(item) {
item.route = `marketplace/item/${item.hub_item_code}`
}
let recent_message_block = ''
if(item.recent_message) {
let message = item.recent_message
let sender = message.sender === frappe.session.user ? 'You' : message.sender
let content = $('<p>' + message.content + '</p>').text() //https://stackoverflow.com/a/14337611
recent_message_block = `
<div class="hub-recent-message">
<span class='text-muted'>${comment_when(message.creation, true)}</span>
<div class='bold ellipsis'>${message.receiver}</div>
<div class='ellipsis'>
<span>${sender}: </span>
<span>${content}</span>
</div>
</div>
`
}
const item_html = `
<div class="col-md-3 col-sm-4 col-xs-6 hub-card-container">
<div class="hub-card"
@ -57,7 +44,6 @@ function get_item_card_html(item) {
<img class="hub-card-image" src="${img_url}" />
<div class="overlay hub-card-overlay"></div>
</div>
${recent_message_block}
</div>
</div>
`;
@ -77,10 +63,12 @@ function get_local_item_card_html(item) {
// 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) {
if (company_name) {
subtitle.push(company_name);
}
@ -118,7 +106,38 @@ function get_local_item_card_html(item) {
return item_html;
}
function get_item_message_card_html(item) {
const item_name = item.item_name || item.name;
const title = strip_html(item_name);
const message = item.recent_message
const sender = message.sender === frappe.session.user ? 'You' : message.sender
const content = strip_html(message.content)
// route
if (!item.route) {
item.route = `marketplace/item/${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>
</div>
</div>
`;
return item_html;
}
export {
get_item_card_html,
get_local_item_card_html
get_local_item_card_html
}

2
erpnext/public/js/hub/components/items_container.js
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 col-sm-12 margin-bottom flex">
? `<div class="hub-items-header margin-bottom flex">
<h4>${title}</h4>
${action}
</div>`

31
erpnext/public/less/hub.less
View File

@ -142,16 +142,6 @@ body[data-route^="marketplace/"] {
object-fit: contain;
}
.hub-recent-message {
padding: 10px;
.frappe-timestamp {
float: right;
}
div {
padding: 3px
}
}
.hub-search-container {
margin-bottom: 20px;
@ -251,6 +241,27 @@ body[data-route^="marketplace/"] {
margin-bottom: 20px;
}
.item-message-card {
height: 80px;
max-width: 500px;
margin-bottom: 10px;
padding: 10px;
border-radius: 4px;
.message-body {
margin-left: 60px;
}
.item-image {
float: left;
height: 50px;
width: 50px;
object-fit: contain;
// border-radius: 50%
}
.frappe-timestamp {
float: right;
}
}
.form-container {
.frappe-control {
max-width: 100% !important;