Add list view for messages
diff --git a/erpnext/public/js/hub/components/item_card.js b/erpnext/public/js/hub/components/item_card.js
index 269a370..e2546e6 100644
--- a/erpnext/public/js/hub/components/item_card.js
+++ b/erpnext/public/js/hub/components/item_card.js
@@ -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 @@
// 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 @@
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 @@
<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 @@
// 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 @@
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
}
diff --git a/erpnext/public/js/hub/components/items_container.js b/erpnext/public/js/hub/components/items_container.js
index 918569b..5db2c56 100644
--- a/erpnext/public/js/hub/components/items_container.js
+++ b/erpnext/public/js/hub/components/items_container.js
@@ -3,7 +3,7 @@
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>`
diff --git a/erpnext/public/less/hub.less b/erpnext/public/less/hub.less
index f06f891..5f497d9 100644
--- a/erpnext/public/less/hub.less
+++ b/erpnext/public/less/hub.less
@@ -142,16 +142,6 @@
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 @@
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;