Book details page by YegorUdovchenko · Pull Request #57 · Java-Classes/Exlibris

YegorUdovchenko · 2018-04-16T13:45:22Z

In this PR the book details page view was implemented. It is shown after the book tile click or passing the following URL directly: /#/book-details/{book-id}/{book-title}.
The {book-title} part is not functional. It is used to add meaning to the URL.

The following custom elements were created and tested:

<exlibris-book-details> - the main details view component. It applies the ExlibrisApp.ReduxMixin. It is used to dispatch the book related actions provided by this view and to receive the book from the application state.
This component displays whole book description with the cover. Also, it displays the status messages and the button. Those values are calculated from the book status and other specific book properties.
The book loading and notFound fields were added to indicate the book loading failure or the loading delay. It allows showing view 404 on invalid Id values passed and the parer-spinner when the loading delay happen. To implement this functionality, some temporary functions were added to imitate server response with a delay.
<exlibris-book-details-redirect-link> the part of book details component used to create the external link to the specified book. The link generation depends on the book code format.

The book details page examples:

The same page on the mobile screen:

# Conflicts: # client-web/src/exlibris-app/exlibris-app.html

YegorUdovchenko · 2018-05-07T07:51:42Z

@dkalinin PTAL

dkalinin

@YegorUdovchenko PTAL

dkalinin · 2018-05-18T13:08:48Z

+ return Object.assign({}, state, {
+ bookDetails: {
+ book: {},
+ loadingStatus: ExlibrisApp.LoadingStatus.NOT_FOUND


Empty book + loaded:false = Book not found.
Book + loaded:false = Completed.
It's enough to have boolean property loaded instead of enum LoadingStatus.

dkalinin · 2018-05-18T13:09:53Z

+ if (Array.isArray(arguments[i])) {
+ const filteredArray = arguments[i].filter(x => x.id === id);
+ if (filteredArray.length > 0) {
+ element = filteredArray[0];


https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

dkalinin · 2018-05-18T13:16:54Z

+ booksAndButtonsCombinations.forEach(function (combination) {
+ const element = fixture('BasicTestFixture');
+ element.set('book', combination.book);
+ testElements.push(element);


It's better to create a separate test for each combination:
suite(...,()=>{booksAndButtonsCombinations.forEach(function(combination){test(`should display book action button with title ${combination.book}`,done=>{constelement=fixture('BasicTestFixture');element.set('book',combination.book);constwideScreenButton= ....});});})

dkalinin · 2018-05-18T13:33:27Z

+ ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ -->
+
+<link rel="import" href="../shell/exlibris-app-namespace.html">


Project imports should be after bower imports.

dkalinin · 2018-05-18T13:35:45Z

+<link rel="import" href="../shell/exlibris-app-namespace.html">
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../bower_components/polymer-redux/polymer-redux.html">
+<link rel="import" href="../../../bower_components/polymer/lib/elements/dom-if.html">


It's not used.

dkalinin · 2018-05-18T13:36:47Z

+
+<link rel="import" href="../shell/exlibris-app-namespace.html">
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../bower_components/polymer-redux/polymer-redux.html">


It's imported in redux-store.

dkalinin · 2018-05-18T13:38:31Z

+ * @property {boolean} isAllowedLoanExtension true if the loan extension is provided.
+ * @property {Date} date the date when the book is expected to become available.
+ * @property {Date} dueDate the date when the book should be returned.
+ * @property {BookStatus} status one of the BookStatus values.


If BookStatus is type it should be described in @typedef before.

dkalinin · 2018-05-18T13:44:27Z

+ * @returns {Object} the title and the click function of the button for the specified book.
+ * @private
+ */
+ _chooseButton(book) {


It's enough to have status and isAllowedLoanExtension params.

dkalinin · 2018-05-18T13:46:50Z

+ * for the specified book.
+ * @private
+ */
+ _calculateActionUnsupportedMessage(book) {


It's enough to have status and isAllowedLoanExtension params.

dkalinin · 2018-05-18T13:54:37Z

@YegorUdovchenko Gray on gray is not readable:

…e book code doesn't match any pattern.

…y showing the loading failure.

…t content.

…per-spinner` hiding delay.

YegorUdovchenko · 2018-06-12T09:48:04Z

@YuriiHaidamaka PTAL

YuriiHaidamaka

LGTM, but fix comments, please.

YuriiHaidamaka · 2018-06-18T07:48:44Z

+ // Searching for a book in a local data.
+ // Should be removed when implement server response
+ const id = action.bookId;
+ const book = findElement(id, state.allBooks, state.expectedSoonBooks, state.borrowedBooks, state.reservedBooks);


I think it will be better here.
const book = [...state.allBooks, ...state.expectedSoonBooks, ...state.borrowedBooks, ...state.reservedBooks].find((item) => item.id === id);

YuriiHaidamaka · 2018-06-18T07:48:57Z

+ * The book details page component.
+ *
+ * This component allows to display the book details page with the book
+ * specific messages, the book cover and the button when it is supported.


Please delete redundant space.

YuriiHaidamaka · 2018-06-18T07:51:23Z

 }
 };
+
+ function findElement(id) {


If you did the above change you would be able to delete this function.

YegorUdovchenko · 2018-06-18T08:35:44Z

@dkalinin PTAL

YuriiHaidamaka

LGTM

YegorUdovchenko added 30 commits March 26, 2018 14:22

Dialog added.
844ce11

Add empty book modal dialog to main app.
602b22b

Add book dialog styling.
c1026e3

Merge branch 'add_book_grid' into book_modal_dialog
fb6668d
# Conflicts: # client-web/src/exlibris-app/exlibris-app.html

Merge branch 'add_book_grid' into book_modal_dialog
c55486c

Add book dialog open on book tile click.
783d539

Add book dialog narrow mode support.
cb0fd94

Add full book message to the book dialog.
8d216e8

Merge branch 'add_book_grid' into book_modal_dialog
481dafb
# Conflicts: # client-web/src/exlibris-app/exlibris-app.html

Add custom button to the book dialog.
fc7784f

Change book click handler.
78ca524

Add book-dialog docs, change dialog styles.
9005204

Fix lint issues.
18ca992

Add modal dialog close button.
c7ae0f2

Add specific route for book modal dialog.
81f6d18

Merge branch 'add_book_grid' into book_modal_dialog
69bd5e7
# Conflicts: # client-web/src/exlibris-app/exlibris-app.html

Fix custom button in book modal dialog.
c5b660d

Add docs to the book dialog.
f490daf

Add dialog buttons fire events, complete dialog docs.
b2712ea

Rename book dialog events.
1432d12

Add book dialog content tests.
6006e8f

Complete book dialog buttons tests.
8a3b05b

Add placeholder image to the book dialog.
562b4c3

Simplify book dialog routing.
9126861

Add app show view404 on unknown book id.
3a163ad

Merge branch 'add_book_grid' into book_modal_dialog
15969e7

Merge branch 'polymer_general_tasks' into book_modal_dialog
90a6d88
# Conflicts: # client-web/src/exlibris-app/exlibris-app.html

Merge branch 'polymer_general_tasks' into book_modal_dialog
21db042
# Conflicts: # client-web/src/exlibris-app/exlibris-app.html

Change book-dialot to book details page.
40a2599

Make book details page styles work with mobile screen view.
22b142e

YegorUdovchenko added 6 commits May 4, 2018 11:21

Fix test constants.
463350d

Improve docs.
805ab83

Merge branch 'master' into book_details_page
f01edf8

Add missing import.
577108f

Merge branch 'master' into book_details_page
9dc29c3

Remove redundant hidden property.
adde348

YegorUdovchenko requested a review from dkalinin May 7, 2018 07:51

dkalinin requested changes May 18, 2018
View reviewed changes

YegorUdovchenko added 4 commits June 6, 2018 11:51

Merge branch 'master' into book_details_page
34e4924

Remove book loading status. Improve docs.
a8aabca

Improve book-details styles.
cbc7e17

Improve redirect-link component, add fallback content section when th…
ea59f04
…e book code doesn't match any pattern.

YegorUdovchenko added the wip Work in progress label Jun 7, 2018

YegorUdovchenko added 7 commits June 11, 2018 13:49

Implement book loading process imitation. Add notFound bool propert…
45313a7
…y showing the loading failure.

Add spinner display while book is loading.
8d43d95

Fix book-redirect-link-tests.
dab8a04

Fix book-details buttons test, add test for book-details componen…
221208a
…t content.

Separate book-details buttons test.
12ddb9f

Fix ES-lint issues, wrap loading spinner into dom-if to prevent `pa…
5da31a1
…per-spinner` hiding delay.

Fix several code formatting mistakes.
7001524

YegorUdovchenko requested a review from YuriiHaidamaka June 12, 2018 09:48

YuriiHaidamaka reviewed Jun 18, 2018
View reviewed changes

Make required changes.
6a1d245

YegorUdovchenko removed the wip Work in progress label Jun 18, 2018

Improve docs.
3e5a75a

YuriiHaidamaka approved these changes Jun 18, 2018
View reviewed changes

Uh oh!

Conversation

YegorUdovchenko commented Apr 16, 2018• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

YegorUdovchenko commented May 7, 2018

Uh oh!

dkalinin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dkalinin commented May 18, 2018

Uh oh!

YegorUdovchenko commented Jun 12, 2018

Uh oh!

YuriiHaidamaka left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

YegorUdovchenko commented Jun 18, 2018

Uh oh!

YuriiHaidamaka left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

YegorUdovchenko commented Apr 16, 2018•
edited
Loading