Add want to read button to Search Page

[Sabreen-Parveen]

Closes #5501

This PR adds Want to Read Button to search results page.

Technical

• The reading log dropdown present in the reading logs page has been used again to implement this.
• When a user is not logged in, the green Want to Read button appears in the search result.
  • This button is disabled, and when the dropdown is clicked, the user is sent to the login page and after login redirected back to the search results page
• When a user is logged in, the dropdown from the reading log page appears, and user can choose from the four options.
  • The reading log lite button, upon selection removes the item from the list, but for search results, we might want to keep the book present in the result, so I have disabled this behaviour for search results page by applying following condition in ol.js:

               if($searchPage==null) {
                   $self.closest('.searchResultItem').remove();
               }

Testing

Screenshot

User is not logged in:

User is logged in:

Stakeholders

@mekarpeles @jimchamp

[jimchamp]

Suggested change

	<form method="POST" action="$(work.key)/bookshelves.json?debug=true" class="reading-log-lite $(searchPage)">
	<form method="POST" action="$(work.key)/bookshelves.json" class="reading-log-lite $(form_classes)">

The debug query parameter is not needed here.

[jimchamp]

Suggested change

	</div>
	</div>

Add newline to the end of the file.

[jimchamp]

I think that this should be wrapped in a form, similar to the dropper on in the /lists/widget.html template. This will ensure that patrons are directed to the login page when they press the button directly.

Login redirection will be handled by the bookshelf endpoint when this is inside of a form.

[jimchamp]

Suggested change

	$ decorations = macros.ReadingLogButton(work, read_status=users_work_read_status, url=url, searchPage="searchPage")
	$ decorations = macros.ReadingLogButton(work, read_status=users_work_read_status, url=url, form_classes="search-page")

Update parameter name and use kebab-case for HTML classes and ids.

[jimchamp]

Suggested change

	const $searchPage = $('.searchPage')[0] || null
	const $searchPage = $('.search-page')[0] || null

[jimchamp]

Suggested change

	if ($searchPage===null) {
	if (!$searchPage) {

null is falsy, so the condition can be simplified.

[jimchamp]

I think that this is really close.

I'm noticing that it's not clear that a bookshelf has been changed when I select a new value from the drop-down. Can we add the check symbol to the newly selected shelf and remove it from the old shelf? This will probably have to be done via Javascript.

[Sabreen-Parveen]

I think that this is really close.

I'm noticing that it's not clear that a bookshelf has been changed when I select a new value from the drop-down. Can we add the check symbol to the newly selected shelf and remove it from the old shelf? This will probably have to be done via Javascript.

Added this by reloading only the select element

[jimchamp]

Let's punt this for a bit. This component make sense to use on the reading log pages, as the item is removed from the list when the read status is changed. When this component is used in search results, the "Remove" option doesn't make sense. The checkmarks also need to be added when a new option is selected.

Ideally, the book page "Want to Read" dropper component would be used for both search results and reading log page. Unfortunately, the lists/widget.html template needs to be refactored in order to make this work (the dropper component is in this template, and it looks like it will be difficult to decouple it from the template).

Let's revisit this issue once there is a dedicated template for the "Want to Read" dropper.