139 lines
4.0 KiB
JavaScript
139 lines
4.0 KiB
JavaScript
import { get_rating_html } from './reviews';
|
|
|
|
function get_detail_view_html(item, allow_edit) {
|
|
const title = item.item_name || item.name;
|
|
const seller = item.company;
|
|
|
|
const who = __('Posted By {0}', [seller]);
|
|
const when = comment_when(item.creation);
|
|
|
|
const city = item.city ? item.city + ', ' : '';
|
|
const country = item.country ? item.country : '';
|
|
const where = `${city}${country}`;
|
|
|
|
const dot_spacer = '<span aria-hidden="true"> · </span>';
|
|
|
|
const description = item.description || '';
|
|
|
|
let stats = __('No views yet');
|
|
if(item.view_count) {
|
|
const views_message = __(`${item.view_count} Views`);
|
|
|
|
const rating_html = get_rating_html(item.average_rating);
|
|
const rating_count = item.no_of_ratings > 0 ? `${item.no_of_ratings} reviews` : __('No reviews yet');
|
|
|
|
stats = `${views_message}${dot_spacer}${rating_html} (${rating_count})`;
|
|
}
|
|
|
|
let favourite_button = ''
|
|
if (hub.settings.registered) {
|
|
favourite_button = !item.favourited
|
|
? `<button class="btn btn-default text-muted favourite-button" data-action="add_to_favourites">
|
|
${__('Save')} <i class="octicon octicon-heart text-extra-muted"></i>
|
|
</button>`
|
|
: `<button class="btn btn-default text-muted favourite-button disabled" data-action="add_to_favourites">
|
|
${__('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) {
|
|
menu_items = `
|
|
<li><a data-action="edit_details">${__('Edit Details')}</a></li>
|
|
<li><a data-action="unpublish_item">${__('Unpublish')}</a></li>`;
|
|
} else {
|
|
menu_items = `
|
|
<li><a data-action="report_item">${__('Report this item')}</a></li>
|
|
`;
|
|
}
|
|
|
|
const html = `
|
|
<div class="hub-item-container">
|
|
<div class="row visible-xs">
|
|
<div class="col-xs-12 margin-bottom">
|
|
<button class="btn btn-xs btn-default" data-route="marketplace/home">${__('Back to home')}</button>
|
|
</div>
|
|
</div>
|
|
<div class="row detail-page-section margin-bottom">
|
|
<div class="col-md-3">
|
|
<div class="hub-item-image">
|
|
<img src="${item.image}">
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8 flex flex-column">
|
|
<div class="detail-page-header">
|
|
<h2>${title}</h2>
|
|
<div class="text-muted">
|
|
<p>${where}${dot_spacer}${when}</p>
|
|
<p>${stats}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-actions detail-page-actions">
|
|
${favourite_button}
|
|
${contact_seller_button}
|
|
</div>
|
|
</div>
|
|
<div class="col-md-1">
|
|
<div class="dropdown pull-right hub-item-dropdown">
|
|
<a class="dropdown-toggle btn btn-xs btn-default" data-toggle="dropdown">
|
|
<span class="caret"></span>
|
|
</a>
|
|
<ul class="dropdown-menu dropdown-right" role="menu">
|
|
${menu_items}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row hub-item-description">
|
|
<h6 class="col-md-12 margin-top">
|
|
<b class="text-muted">Product Description</b>
|
|
</h6>
|
|
<p class="col-md-12">
|
|
${description ? description : __('No details')}
|
|
</p>
|
|
</div>
|
|
<div class="row hub-item-seller">
|
|
|
|
<h6 class="col-md-12 margin-top margin-bottom">
|
|
<b class="text-muted">Seller Information</b>
|
|
</h6>
|
|
<div class="col-md-1">
|
|
<img src="https://picsum.photos/200">
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div class="margin-bottom"><a href="#marketplace/seller/${seller}" class="bold">${seller}</a></div>
|
|
</div>
|
|
</div>
|
|
<!-- review area -->
|
|
<div class="row hub-item-review-container">
|
|
<div class="col-md-12 form-footer">
|
|
<div class="form-comments">
|
|
<div class="timeline">
|
|
<div class="timeline-head"></div>
|
|
<div class="timeline-items"></div>
|
|
</div>
|
|
</div>
|
|
<div class="pull-right scroll-to-top">
|
|
<a onclick="frappe.utils.scroll_to(0)"><i class="fa fa-chevron-up text-muted"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
return html;
|
|
}
|
|
|
|
export {
|
|
get_detail_view_html,
|
|
get_profile_html
|
|
}
|