Hide reviews UI in Search if no reviews available

This commit is contained in:
Robbie Antenesse 2020-06-14 14:39:12 -06:00
parent bb60fefd08
commit 6c80f3977a
2 changed files with 40 additions and 29 deletions

View File

@ -8,21 +8,28 @@ export const resultDetails = (searchController, result, emit = () => {}) => {
const { __ } = searchController.i18n;
const modalId = `result_${result.uri}`;
const hasReviews = typeof result.averageRating !== 'undefined' && typeof result.numberOfReviews !== 'undefined';
const buttonHTML = html`<label for=${modalId} class="pseudo button">
<span data-tooltip="${__('interaction.average_rating')}: ${result.averageRating}">
${starRating(result.averageRating)}
</span>
<span style="margin-left:10px;" data-tooltip=${__('interaction.reviews_written')}>
<span style="margin-right:8px;"><i class="icon-chat"></i></span>
<span>${result.numberOfReviews}</span>
</span>
${!hasReviews
? __('search.no_reviews')
: html`<span data-tooltip="${__('interaction.average_rating')}: ${result.averageRating}">
${starRating(result.averageRating)}
</span>
<span style="margin-left:10px;" data-tooltip=${__('interaction.reviews_written')}>
<span style="margin-right:8px;"><i class="icon-chat"></i></span>
<span>${result.numberOfReviews}</span>
</span>`
}
<br />
<small>${__('search.click_for_details')}</small>
</label>`;
const tabNames = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten', 'eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty'];
const modalContent = html`<article class="flex">
<div class="sixth-700" style="text-align:center;">
<h4>Covers</h4>
<h4>${__('search.covers')}</h4>
${typeof result.covers === 'undefined'
? html`<span style="font-size:3em;"><i class="icon-loading animate-spin"></i></span>`
: html`<div class="tabs ${typeof tabNames[result.covers.length - 1] !== 'undefined' ? tabNames[result.covers.length - 1] : null}">
@ -55,32 +62,33 @@ export const resultDetails = (searchController, result, emit = () => {}) => {
}
</div>
<div class="two-third-700">
<h4>${__('interaction.average_rating')}</h4>
<span data-tooltip="${result.averageRating}">${starRating(result.averageRating)}</span>
${!hasReviews
? html`<h4>${__('search.no_reviews')}</h4>`
: html`<h4>${__('interaction.average_rating')}</h4>
<span data-tooltip="${result.averageRating}">${starRating(result.averageRating)}</span>
<div class="flex">
<div>
<h4>Top Reviews</h4>
<div class="flex">
<div>
<h4>Top Reviews</h4>
</div>
<div>
<a href="/book/${result.uri}" class="small button">
<span style="margin-right:8px;"><i class="icon-chat"></i></span>
<span>${result.numberOfReviews}</span>
<span>${__('search.see_interaction_details')}</span>
</a>
</div>
</div>
<div>
<a href="/book/${result.uri}" class="small button">
<span style="margin-right:8px;"><i class="icon-chat"></i></span>
<span>${result.numberOfReviews}</span>
<span>${__('search.see_interaction_details')}</span>
</a>
</div>
</div>
${result.reviews.map(review => {
return reviewCard(searchController, review);
})}
${(typeof result.reviews !== 'undefined' && Array.isArray(result.reviews) ? result.reviews : []).map(review => {
return reviewCard(searchController, review);
})}`
}
</div>
<div class="sixth-700">
<p>
<span data-tooltip=${__('interaction.add')}>
<button class="success">
<i class="icon-plus"></i>
</button>
</span>
<button class="success">
<i class="icon-plus"></i> <span>${__('interaction.add')}</span>
</button>
</p>
<p>
<a class="small button" href=${result.link} target="_blank">

View File

@ -72,11 +72,14 @@
"author": "Author"
},
"loading": "Loading...",
"no_reviews": "No Reviews yet",
"click_for_details": "Show Book Details",
"no_results": "None Found",
"no_results_suggestion": "If you're expecting book data, go and help fill out the Inventaire database!",
"people_header": "People",
"series_header": "Series",
"books_header": "Books",
"covers": "Covers",
"see_interaction_details": "See All Interactions",
"see_book_details": "See Book Details"
},