From 844ce11665b82645ea75a11af6a73615fcc2f50b Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 26 Mar 2018 14:22:00 +0300
Subject: [PATCH 01/92] Dialog added.

---
 client-web/bower.json                         |  5 +-
 client-web/src/exlibris-app/book-dialog.html  | 67 +++++++++++++++++++
 client-web/src/exlibris-app/exlibris-app.html | 11 ++-
 3 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 client-web/src/exlibris-app/book-dialog.html

diff --git a/client-web/bower.json b/client-web/bower.json
index 36758cb..7955c4b 100644
--- a/client-web/bower.json
+++ b/client-web/bower.json
@@ -10,7 +10,10 @@
     "app-layout": "PolymerElements/app-layout#^2.1.0",
     "iron-pages": "PolymerElements/iron-pages#^2.1.0",
     "iron-icons": "PolymerElements/iron-icons#^2.1.1",
-    "paper-badge": "PolymerElements/paper-badge#^2.1.0"
+    "paper-badge": "PolymerElements/paper-badge#^2.1.0",
+    "paper-dialog": "PolymerElements/paper-dialog#^2.1.1",
+    "paper-button": "PolymerElements/paper-button#^2.1.0",
+    "paper-dialog-behavior": "PolymerElements/paper-dialog-behavior#^2.2.0"
   },
   "devDependencies": {
     "web-component-tester": "Polymer/web-component-tester#^6.0.0",
diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/book-dialog.html
new file mode 100644
index 0000000..3f470c7
--- /dev/null
+++ b/client-web/src/exlibris-app/book-dialog.html
@@ -0,0 +1,67 @@
+<!--
+  ~ Copyright 2018, TeamDev Ltd. All rights reserved.
+  ~
+  ~ Redistribution and use in source and/or binary forms, with or without
+  ~ modification, must retain the above copyright notice and the following
+  ~ disclaimer.
+  ~
+  ~ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+  ~ "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+  ~ LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+  ~ A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+  ~ OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+  ~ SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+  ~ LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+  ~ DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+  ~ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+  ~ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+  ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+  -->
+
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/paper-styles/color.html">
+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../../bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
+<link rel="import" href="../../bower_components/paper-dialog-behavior/paper-dialog-shared-styles.html">
+<!--<link rel="import" href="../../bower_components/neon-animation/web-animations.html">-->
+<!--<link rel="import" href="../../bower_components/neon-animation/animations/scale-up-animation.html">-->
+<!--<link rel="import" href="../../bower_components/neon-animation/animations/fade-out-animation.html">-->
+
+<dom-module id="book-dialog">
+    <template>
+        <style include="paper-dialog-shared-styles">
+            :host {
+                display: block;
+            }
+
+        </style>
+        <paper-dialog id="dialog" with-backdrop>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+            <div class="buttons">
+                <paper-button dialog-confirm autofocus>Tap me to close</paper-button>
+            </div>
+        </paper-dialog>
+    </template>
+
+    <script>
+
+        class BookDialog extends Polymer.Element {
+            static get is() {
+                return 'book-dialog';
+            }
+
+            static get properties() {
+                return {
+
+                };
+            }
+
+            open() {
+                this.$.dialog.open();
+            }
+        }
+
+        window.customElements.define(BookDialog.is, BookDialog);
+    </script>
+</dom-module>
diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 060da82..9fd556a 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -38,8 +38,10 @@
 <link rel="import" href="../../bower_components/paper-styles/color.html">
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
 
-<link rel="import" href="menu/menu-item.html">
+<link rel="import" href="./menu/menu-item.html">
+<link rel="import" href="./book-dialog.html">
 
 <dom-module id="exlibris-app">
     <template>
@@ -86,6 +88,7 @@
                 route="{{route}}"
                 pattern="/:page"
                 data="{{routeData}}"></app-route>
+        <book-dialog id="modal"></book-dialog>
         <app-drawer-layout fullbleed narrow="{{narrow}}">
             <!-- Drawer content -->
             <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
@@ -167,6 +170,7 @@
                         fallback-selection="view404"
                         role="main">
                     <div data-name="view404">View404</div>
+                    <paper-button data-name="overdue-books" on-click="_openModal">Open</paper-button>
                 </iron-pages>
             </app-header-layout>
         </app-drawer-layout>
@@ -246,6 +250,11 @@
                     this.set('selectedTitle', selectedMenuItem.title);
                 }
             }
+           _openModal(){
+                this.$.modal.open();
+           }
+
+
         }
 
         window.customElements.define(ExlibrisApp.is, ExlibrisApp);

From c1026e323d3cdf6298ed8531d68dfc6c1ee7ff08 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 26 Mar 2018 19:22:37 +0300
Subject: [PATCH 02/92] Add book dialog styling.

---
 client-web/bower.json                         |  8 +-
 client-web/src/exlibris-app/book-dialog.html  | 75 +++++++++++++++++--
 client-web/src/exlibris-app/exlibris-app.html | 20 ++++-
 3 files changed, 91 insertions(+), 12 deletions(-)

diff --git a/client-web/bower.json b/client-web/bower.json
index 46e8719..71b3dc8 100644
--- a/client-web/bower.json
+++ b/client-web/bower.json
@@ -11,15 +11,13 @@
     "iron-pages": "PolymerElements/iron-pages#^2.1.0",
     "iron-icons": "PolymerElements/iron-icons#^2.1.1",
     "paper-badge": "PolymerElements/paper-badge#^2.1.0",
-<<<<<<< HEAD
     "iron-image": "PolymerElements/iron-image#^2.2.0",
     "iron-scroll-threshold": "PolymerElements/iron-scroll-threshold#^2.0.0",
-    "iron-list": "PolymerElements/iron-list#^2.0.13"
-=======
+    "iron-list": "PolymerElements/iron-list#^2.0.13",
     "paper-dialog": "PolymerElements/paper-dialog#^2.1.1",
     "paper-button": "PolymerElements/paper-button#^2.1.0",
-    "paper-dialog-behavior": "PolymerElements/paper-dialog-behavior#^2.2.0"
->>>>>>> dialog_testing
+    "paper-dialog-behavior": "PolymerElements/paper-dialog-behavior#^2.2.0",
+    "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.2.0"
   },
   "devDependencies": {
     "web-component-tester": "Polymer/web-component-tester#^6.0.0",
diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/book-dialog.html
index e6cd26b..6a41c06 100644
--- a/client-web/src/exlibris-app/book-dialog.html
+++ b/client-web/src/exlibris-app/book-dialog.html
@@ -23,7 +23,12 @@
 <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
-<link rel="import" href="../../bower_components/paper-dialog-behavior/paper-dialog-shared-styles.html">
+<link rel="import"
+      href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
+<link rel="import" href="../../bower_components/iron-image/iron-image.html">
+<link rel="import"
+      href="../../bower_components/paper-dialog-behavior/paper-dialog-shared-styles.html">
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
 
 <dom-module id="book-dialog">
     <template>
@@ -32,12 +37,72 @@
                 display: block;
             }
 
+            paper-dialog {
+                display: flex;
+                flex-direction: column;
+                position: center;
+                width: 40%;
+                height: 60%;
+            }
+
+            .head-region {
+                display: flex;
+                /*flex-wrap: wrap;*/
+                justify-content: flex-start;
+                align-items: flex-start;
+                height: 50%;
+            }
+
+            .head-region > iron-image {
+                height:100%;
+                --iron-image-height: 100%;
+            }
+
+            .head-info {
+                padding-left: 30px;
+                flex-direction: column;
+            }
+
+            .head-info > h1 {
+                font-size: 30px;
+                line-height: 35px;
+                margin: 25px 0 10px 0;
+                text-align: left;
+            }
+
+            .head-info > h2 {
+                font-size: 15px;
+                font-weight: normal;
+            }
+
+            section {
+                display: flex;
+                height: 50%;
+                @apply --layout-vertical;
+            }
+
+            section paper-dialog-scrollable {
+                @apply --layout-flex;
+                --paper-dialog-scrollable: {
+                    padding: 0 24px 0 0;
+                };
+            }
         </style>
         <paper-dialog id="dialog" with-backdrop>
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-            <div class="buttons">
-                <paper-button dialog-confirm autofocus>Tap me to close</paper-button>
+
+            <div class="head-region">
+                <iron-image  src="[[book.image]]"></iron-image>
+                <div class="head-info">
+                    <h1>[[book.title]]</h1>
+                    <h2>[[book.author]]</h2>
+                </div>
             </div>
+
+            <section>
+                <paper-dialog-scrollable>
+                    [[book.description]]
+                </paper-dialog-scrollable>
+            </section>
         </paper-dialog>
     </template>
 
@@ -50,7 +115,7 @@
 
             static get properties() {
                 return {
-
+                    book: Object
                 };
             }
 
diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index dd1b85f..66cf02a 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -45,6 +45,7 @@
 <link rel="import" href="./menu/menu-item.html">
 <link rel="import" href="./book-dialog.html">
 
+
 <dom-module id="exlibris-app">
     <template>
         <style>
@@ -177,7 +178,6 @@
             </app-header-layout>
         </app-drawer-layout>
     </template>
-
     <script>
 
         /**
@@ -254,7 +254,23 @@
             }
 
            _openModal(){
-                this.$.modal.open();
+                const bookDialog = this.$.modal;
+                bookDialog.book = {
+                    title: "Прежде Чем Он Согрешит ",
+                    image: "https://books.google.com/books/content/images/frontcover/uVVMDwAAQBAJ?fife=w200-h300",
+                    author: "Блейк Пирс",
+                    category: "Fiction ",
+                    description: "Блейк Пирс, автор бестселлера «КОГДА ОНА УШЛА» (бестселлера #1 с более чем 900 отзывов с высшей оценкой), представляет книгу #7 в увлекательной серии детективных романов о Макензи Уайт.\n" +
+                    "В «ПРЕЖДЕ ЧЕМ ОН СОГРЕШИТ» (Загадки Макензи Уайт—Книга 7) по всему Вашингтону полиция находит тела священников, распятые перед входом в храмы. Что это, акт возмездия? Искать ли преступника среди служителей церкви? Или это серийный убийца, открывший охоту на священников и движимый более зловещими мотивами?\n" +
+                    "\n" +
+                    "ФБР передаёт это дело специальному агенту Макензи Уайт, потому что оно перекликается с религиозными убийствами, которые она расследовала, когда охотилась на преступника по прозвищу «Страшила» в своём первом деле. Погрузившись в мир, в котором живут священники, Макензи пытается лучше понять смысл ритуалов, древних религиозных текстов и даже разум самого убийцы. При этом она также занята поиском убийцы отца, твёрдо решив, что на этот раз не даст ему уйти. Убийца священников намного более жесток, чем другие преступники, и в смертельной игре в кошки-мышки он подводит Макензи к черте, за которой начинается безумие.\n" +
+                    "\n" +
+                    "Мрачный психологический триллер с увлекательным сюжетом «ПРЕЖДЕ ЧЕМ ОН СОГРЕШИТ» – это книга #7 в захватывающей серии детективных романов, рассказывающих о любимой героине. От книги просто невозможно оторваться.\n" +
+                    "\n" +
+                    "Также не пропустите роман Блейка Пирса «КОГДА ОНА УШЛА» (Загадки Райли Пейдж—Книга #1), бестселлер #1 с более чем 900 отзывов с высшей оценкой. Роман доступен для бесплатного скачивания!",
+                    availableCount: 3
+                };
+                bookDialog.open();
            }
         }
 

From 783d5392b39bfb6adc34081302148d9d8ecf083e Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 27 Mar 2018 12:09:49 +0300
Subject: [PATCH 03/92] Add book dialog open on book tile click.

---
 client-web/src/exlibris-app/book-dialog.html  |  6 ++-
 client-web/src/exlibris-app/book-grid.html    |  7 ++-
 client-web/src/exlibris-app/exlibris-app.html | 44 +++++++++----------
 3 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/book-dialog.html
index 6a41c06..02bf626 100644
--- a/client-web/src/exlibris-app/book-dialog.html
+++ b/client-web/src/exlibris-app/book-dialog.html
@@ -47,18 +47,22 @@
 
             .head-region {
                 display: flex;
-                /*flex-wrap: wrap;*/
+                flex-wrap: wrap;
+                flex-direction: inherit;
                 justify-content: flex-start;
                 align-items: flex-start;
                 height: 50%;
             }
 
             .head-region > iron-image {
+                width: 30%;
+                min-width: fit-content;
                 height:100%;
                 --iron-image-height: 100%;
             }
 
             .head-info {
+                width: 60%;
                 padding-left: 30px;
                 flex-direction: column;
             }
diff --git a/client-web/src/exlibris-app/book-grid.html b/client-web/src/exlibris-app/book-grid.html
index e59e8e1..ba109d1 100644
--- a/client-web/src/exlibris-app/book-grid.html
+++ b/client-web/src/exlibris-app/book-grid.html
@@ -126,7 +126,7 @@
         <iron-list items="[[books]]" as="book" scroll-target="document" grid>
             <template>
                 <div class="bookContainer">
-                    <div class="bookContent" tabindex$="[[tabIndex]]">
+                    <div class="bookContent" tabindex$="[[tabIndex]]" on-click="_handleBookClick">
                         <iron-image sizing="cover"
                                     src="[[book.image]]">
                         </iron-image>
@@ -173,6 +173,11 @@
             _onLowerThreshold() {
                 console.log('Add more books');
             }
+
+            _handleBookClick(e) {
+                const book = e.model.__data.book;
+                this.dispatchEvent(new CustomEvent('book-tile-click', {detail: book}));
+            }
         }
         window.customElements.define(BookGrid.is, BookGrid);
     </script>
diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index dd714db..844035f 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -172,14 +172,20 @@
                         attr-for-selected="data-name"
                         fallback-selection="view404"
                         role="main">
-                    <book-grid data-name="all-books" books="[[allBooks]]"></book-grid>
-                    <book-grid data-name="overdue-books" books="[[overdueBooks]]"></book-grid>
-                    <book-grid data-name="borrowed-books" books="[[borrowedBooks]]"></book-grid>
-                    <book-grid data-name="reserved-books" books="[[reservedBooks]]"></book-grid>
+                    <book-grid data-name="all-books" books="[[allBooks]]"
+                               on-book-tile-click="_handleBookClick"></book-grid>
+                    <book-grid data-name="overdue-books" books="[[overdueBooks]]"
+                               on-book-tile-click="_handleBookClick"></book-grid>
+                    <book-grid data-name="borrowed-books" books="[[borrowedBooks]]"
+                               on-book-tile-click="_handleBookClick"></book-grid>
+                    <book-grid data-name="reserved-books" books="[[reservedBooks]]"
+                               on-book-tile-click="_handleBookClick"></book-grid>
                     <book-grid data-name="expected-soon"
-                               books="[[expectedSoonBooks]]"></book-grid>
+                               books="[[expectedSoonBooks]]"
+                               on-book-tile-click="_handleBookClick"></book-grid>
                     <book-grid data-name="should-return-books"
-                               books="[[shouldReturnBooks]]"></book-grid>
+                               books="[[shouldReturnBooks]]"
+                               on-book-tile-click="_handleBookClick"></book-grid>
                     <div data-name="view404">View404</div>
                 </iron-pages>
             </app-header-layout>
@@ -492,25 +498,17 @@
                 });
             }
 
-           _openModal(){
+            _openModal(book) {
                 const bookDialog = this.$.modal;
-                bookDialog.book = {
-                    title: "Прежде Чем Он Согрешит ",
-                    image: "https://books.google.com/books/content/images/frontcover/uVVMDwAAQBAJ?fife=w200-h300",
-                    author: "Блейк Пирс",
-                    category: "Fiction ",
-                    description: "Блейк Пирс, автор бестселлера «КОГДА ОНА УШЛА» (бестселлера #1 с более чем 900 отзывов с высшей оценкой), представляет книгу #7 в увлекательной серии детективных романов о Макензи Уайт.\n" +
-                    "В «ПРЕЖДЕ ЧЕМ ОН СОГРЕШИТ» (Загадки Макензи Уайт—Книга 7) по всему Вашингтону полиция находит тела священников, распятые перед входом в храмы. Что это, акт возмездия? Искать ли преступника среди служителей церкви? Или это серийный убийца, открывший охоту на священников и движимый более зловещими мотивами?\n" +
-                    "\n" +
-                    "ФБР передаёт это дело специальному агенту Макензи Уайт, потому что оно перекликается с религиозными убийствами, которые она расследовала, когда охотилась на преступника по прозвищу «Страшила» в своём первом деле. Погрузившись в мир, в котором живут священники, Макензи пытается лучше понять смысл ритуалов, древних религиозных текстов и даже разум самого убийцы. При этом она также занята поиском убийцы отца, твёрдо решив, что на этот раз не даст ему уйти. Убийца священников намного более жесток, чем другие преступники, и в смертельной игре в кошки-мышки он подводит Макензи к черте, за которой начинается безумие.\n" +
-                    "\n" +
-                    "Мрачный психологический триллер с увлекательным сюжетом «ПРЕЖДЕ ЧЕМ ОН СОГРЕШИТ» – это книга #7 в захватывающей серии детективных романов, рассказывающих о любимой героине. От книги просто невозможно оторваться.\n" +
-                    "\n" +
-                    "Также не пропустите роман Блейка Пирса «КОГДА ОНА УШЛА» (Загадки Райли Пейдж—Книга #1), бестселлер #1 с более чем 900 отзывов с высшей оценкой. Роман доступен для бесплатного скачивания!",
-                    availableCount: 3
-                };
+                bookDialog.book = book;
                 bookDialog.open();
-           }
+            }
+
+            _handleBookClick(e) {
+                this._openModal(e.detail);
+                e.stopPropagation();
+                e.preventDefault();
+            }
         }
 
         window.customElements.define(ExlibrisApp.is, ExlibrisApp);

From cb0fd9458f433bd677b8d496fd4e7c273c7445e2 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 27 Mar 2018 13:29:59 +0300
Subject: [PATCH 04/92] Add book dialog narrow mode support.

---
 client-web/src/exlibris-app/book-dialog.html  | 44 ++++++++++++++-----
 client-web/src/exlibris-app/exlibris-app.html |  2 +-
 2 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/book-dialog.html
index 02bf626..6343559 100644
--- a/client-web/src/exlibris-app/book-dialog.html
+++ b/client-web/src/exlibris-app/book-dialog.html
@@ -35,21 +35,19 @@
         <style include="paper-dialog-shared-styles">
             :host {
                 display: block;
+                position: center;
             }
 
             paper-dialog {
                 display: flex;
                 flex-direction: column;
-                position: center;
-                width: 40%;
-                height: 60%;
             }
 
             .head-region {
                 display: flex;
                 flex-wrap: wrap;
                 flex-direction: inherit;
-                justify-content: flex-start;
+                /*justify-content: flex-start;*/
                 align-items: flex-start;
                 height: 50%;
             }
@@ -57,12 +55,12 @@
             .head-region > iron-image {
                 width: 30%;
                 min-width: fit-content;
-                height:100%;
+                height: 100%;
                 --iron-image-height: 100%;
             }
 
             .head-info {
-                width: 60%;
+                width: 50%;
                 padding-left: 30px;
                 flex-direction: column;
             }
@@ -92,10 +90,10 @@
                 };
             }
         </style>
-        <paper-dialog id="dialog" with-backdrop>
+        <paper-dialog id="dialog" with-backdrop dynamic-align>
 
             <div class="head-region">
-                <iron-image  src="[[book.image]]"></iron-image>
+                <iron-image src="[[book.image]]"></iron-image>
                 <div class="head-info">
                     <h1>[[book.title]]</h1>
                     <h2>[[book.author]]</h2>
@@ -117,17 +115,43 @@ <h2>[[book.author]]</h2>
                 return 'book-dialog';
             }
 
+            static get observers() {
+                return [
+                    '_narrowChanged(narrow)'
+                ];
+            }
+
             static get properties() {
                 return {
-                    book: Object
+                    book: Object,
+                    narrow: Boolean,
+                    some: {
+                        type: Boolean,
+                        value: false
+                    }
                 };
             }
 
             open() {
                 this.$.dialog.open();
             }
-        }
 
+            _narrowChanged(narrow) {
+                if (this.narrow) {
+                    this.$.dialog.updateStyles({
+                        'height': '100%',
+                        'width': '100%',
+                        'min-width': ''
+                    });
+                } else {
+                    this.$.dialog.updateStyles({
+                        'height': '60%',
+                        'width': '40%',
+                        'min-width': '500px'
+                    });
+                }
+            }
+        }
         window.customElements.define(BookDialog.is, BookDialog);
     </script>
 </dom-module>
diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 844035f..c81d8b4 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -88,7 +88,7 @@
                 route="{{route}}"
                 pattern="/:page"
                 data="{{routeData}}"></app-route>
-        <book-dialog id="modal"></book-dialog>
+        <book-dialog id="modal" narrow="[[narrow]]"></book-dialog>
         <app-drawer-layout fullbleed narrow="{{narrow}}">
             <!-- Drawer content -->
             <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">

From 8d216e8eb99595b2c1a8b98e3d26ae1213e35d06 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 27 Mar 2018 14:36:30 +0300
Subject: [PATCH 05/92] Add full book message to the book dialog.

---
 client-web/src/exlibris-app/book-dialog.html  | 45 ++++++++++++++-----
 client-web/src/exlibris-app/exlibris-app.html | 12 ++++-
 2 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/book-dialog.html
index 6343559..91710c8 100644
--- a/client-web/src/exlibris-app/book-dialog.html
+++ b/client-web/src/exlibris-app/book-dialog.html
@@ -47,7 +47,6 @@
                 display: flex;
                 flex-wrap: wrap;
                 flex-direction: inherit;
-                /*justify-content: flex-start;*/
                 align-items: flex-start;
                 height: 50%;
             }
@@ -59,22 +58,41 @@
                 --iron-image-height: 100%;
             }
 
-            .head-info {
+            .head-region > .head-info {
+                display: flex;
                 width: 50%;
+                height: 100%;
                 padding-left: 30px;
                 flex-direction: column;
+                justify-content: space-between;
+            }
+
+            .head-region > .head-info > .head-text {
+                flex-direction: column;
+                justify-content: flex-start;
             }
 
-            .head-info > h1 {
-                font-size: 30px;
-                line-height: 35px;
-                margin: 25px 0 10px 0;
+            .head-region > .head-info > .head-text > h1 {
+                font-size: 25px;
+                line-height: 30px;
+                margin: 10px 0 10px 0;
                 text-align: left;
             }
 
-            .head-info > h2 {
+            .head-region > .head-info > .head-text > h3 {
+                font-size: 12px;
+                font-weight: lighter;
+                margin: 5px 0 5px 0;
+            }
+
+            .head-region > .head-info > .head-text > h2 {
+                white-space: pre;
                 font-size: 15px;
-                font-weight: normal;
+                font-weight: bold;
+                margin: 5px 0 5px 0;
+            }
+
+            .head-region > .head-info > .head-button > paper-button{
             }
 
             section {
@@ -95,8 +113,14 @@
             <div class="head-region">
                 <iron-image src="[[book.image]]"></iron-image>
                 <div class="head-info">
-                    <h1>[[book.title]]</h1>
-                    <h2>[[book.author]]</h2>
+                    <div class="head-text">
+                        <h1>[[book.title]]</h1>
+                        <h3>[[book.author]]</h3>
+                        <h2>[[book.fullStatusMessage]]</h2>
+                    </div>
+                    <div class="head-button">
+                        <paper-button raised="">Button</paper-button>
+                    </div>
                 </div>
             </div>
 
@@ -152,6 +176,7 @@ <h2>[[book.author]]</h2>
                 }
             }
         }
+
         window.customElements.define(BookDialog.is, BookDialog);
     </script>
 </dom-module>
diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index c81d8b4..962104d 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -355,16 +355,19 @@
                         if (book.availableCount > 0) {
                             newBook["status"] = bookStatus.AVAILABLE;
                             newBook["statusMessage"] = book.availableCount + " AVAILABLE";
+                            newBook["fullStatusMessage"] = book.availableCount + ' available.' + '\n' + 'Scan QR code to borrow.';
                             return newBook;
                         }
                         newBook["status"] = bookStatus.EXPECTED;
-                        newBook["statusMessage"] = "EXPECTED";
+                        newBook["statusMessage"] = "NOT AVAILABLE";
+                        newBook["fullStatusMessage"] = "Not available.";
                         return newBook;
                     }
                     else {
                         if (book.expectedSoon) {
                             newBook["status"] = bookStatus.EXPECTED;
                             newBook["statusMessage"] = "EXPECTED SOON";
+                            newBook["fullStatusMessage"] = "Arriving to library shortly.";
                             this.push('expectedSoonBooks', newBook);
                             return newBook;
                         }
@@ -391,11 +394,12 @@
              */
             _overdueBooksChanged(books) {
                 this.overdueBooks = books.map(book => {
-                    const newBook = this._cloneMainFields(book)
+                    const newBook = this._cloneMainFields(book);
                     newBook["status"] = bookStatus.OVERDUE;
                     const oneDay = 1000 * 60 * 60 * 24;
                     const numberOfOverdueDays = Math.floor((new Date() - book.dueDate) / oneDay);
                     newBook["statusMessage"] = numberOfOverdueDays + " DAYS OVERDUE";
+                    newBook["fullStatusMessage"] = numberOfOverdueDays + " days overdue.";
                     return newBook;
                 });
             }
@@ -419,6 +423,7 @@
                     const newBook = this._cloneMainFields(book);
                     newBook["status"] = bookStatus.BORROWED;
                     newBook["statusMessage"] = "DUE ON " + book.dueDate.toLocaleDateString();
+                    newBook["fullStatusMessage"] = "Borrowed by you.\nReturn before " + book.dueDate.toLocaleDateString() + '.';
 
                     const oneDay = 1000 * 60 * 60 * 24;
                     if (Math.floor((new Date() - book.dueDate) / oneDay) <= 3) {
@@ -448,6 +453,7 @@
                     const newBook = this._cloneMainFields(book);
                     newBook["status"] = bookStatus.RESERVED;
                     newBook["statusMessage"] = "READY TO PICK UP";
+                    newBook["fullStatusMessage"] = "Reserved for you.\nReady to pick up.";
                     return newBook;
                 });
 
@@ -455,6 +461,8 @@
                         const newBook = this._cloneMainFields(book);
                         newBook["status"] = bookStatus.RESERVED;
                         newBook["statusMessage"] = "EXPECTED ON " + book.date.toLocaleDateString();
+                        newBook["fullStatusMessage"] = "Reserved for you.\nExpected on " +
+                            book.date.toLocaleDateString() + '.';
                         return newBook;
                     }
                 );

From fc7784f07f71c1db83956eea90f1f769a8cd81d5 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 27 Mar 2018 17:21:57 +0300
Subject: [PATCH 06/92] Add custom button to the book dialog.

---
 client-web/src/exlibris-app/book-dialog.html  | 57 +++++++++++++++----
 client-web/src/exlibris-app/book-grid.html    |  9 +++
 client-web/src/exlibris-app/book_values.html  |  1 +
 client-web/src/exlibris-app/exlibris-app.html | 32 ++++++-----
 client-web/src/exlibris-app/test_values.js    |  6 +-
 5 files changed, 78 insertions(+), 27 deletions(-)

diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/book-dialog.html
index 91710c8..90a3a9d 100644
--- a/client-web/src/exlibris-app/book-dialog.html
+++ b/client-web/src/exlibris-app/book-dialog.html
@@ -19,6 +19,7 @@
   -->
 
 <link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">
 <link rel="import" href="../../bower_components/paper-styles/color.html">
 <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
@@ -30,6 +31,8 @@
       href="../../bower_components/paper-dialog-behavior/paper-dialog-shared-styles.html">
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
 
+<link rel="import" href="./book_values.html">
+
 <dom-module id="book-dialog">
     <template>
         <style include="paper-dialog-shared-styles">
@@ -72,27 +75,29 @@
                 justify-content: flex-start;
             }
 
-            .head-region > .head-info > .head-text > h1 {
+            h1 {
                 font-size: 25px;
                 line-height: 30px;
                 margin: 10px 0 10px 0;
                 text-align: left;
             }
 
-            .head-region > .head-info > .head-text > h3 {
+            h3 {
                 font-size: 12px;
                 font-weight: lighter;
                 margin: 5px 0 5px 0;
             }
 
-            .head-region > .head-info > .head-text > h2 {
+            h2 {
                 white-space: pre;
                 font-size: 15px;
                 font-weight: bold;
                 margin: 5px 0 5px 0;
             }
 
-            .head-region > .head-info > .head-button > paper-button{
+            paper-button {
+                background-color: var(--app-primary-color);
+                color: white;
             }
 
             section {
@@ -119,7 +124,19 @@ <h3>[[book.author]]</h3>
                         <h2>[[book.fullStatusMessage]]</h2>
                     </div>
                     <div class="head-button">
-                        <paper-button raised="">Button</paper-button>
+                        <template is="dom-if" if="[[_isReserved(book.status)]]">
+                            <paper-button raised>CANCEL RESERVATION</paper-button>
+                        </template>
+                        <template is="dom-if" if="[[_isExpected(book.status)]]">
+                            <paper-button raised>RESERVE</paper-button>
+                        </template>
+                        <template is="dom-if" if="[[_isBorrowedAndCanBeExtended(book)]]">
+                            <paper-button raised>EXTEND FOR TWO WEEKS
+                            </paper-button>
+                        </template>
+                        <template is="dom-if" if="[[_isBorrowedAndCannotBeExtended(book)]]">
+                            <h3>RESERVED BY ANOTHER READER</h3>
+                        </template>
                     </div>
                 </div>
             </div>
@@ -147,12 +164,11 @@ <h2>[[book.fullStatusMessage]]</h2>
 
             static get properties() {
                 return {
-                    book: Object,
+                    book: {
+                        type: Object,
+                        reflectToAttribute: true
+                    },
                     narrow: Boolean,
-                    some: {
-                        type: Boolean,
-                        value: false
-                    }
                 };
             }
 
@@ -175,6 +191,27 @@ <h2>[[book.fullStatusMessage]]</h2>
                     });
                 }
             }
+
+            _isReserved(status) {
+                return status === bookStatus.RESERVED;
+            }
+
+            _isExpected(status) {
+                return status === bookStatus.EXPECTED;
+            }
+
+            _isBorrowedAndCanBeExtended(book) {
+                return (book.status === bookStatus.SHOULD_RETURN_SOON
+                    || book.status === bookStatus.OVERDUE)
+                    && book.isAllowedLoanExtension;
+            }
+
+            _isBorrowedAndCannotBeExtended(book) {
+                return (book.status === bookStatus.SHOULD_RETURN_SOON
+                    || book.status === bookStatus.OVERDUE
+                    || book.status === bookStatus.BORROWED)
+                    && !book.isAllowedLoanExtension;
+            }
         }
 
         window.customElements.define(BookDialog.is, BookDialog);
diff --git a/client-web/src/exlibris-app/book-grid.html b/client-web/src/exlibris-app/book-grid.html
index ba109d1..0ff3542 100644
--- a/client-web/src/exlibris-app/book-grid.html
+++ b/client-web/src/exlibris-app/book-grid.html
@@ -114,6 +114,15 @@
                 text-align: center;
                 margin-top: 5px;
             }
+
+            .bookContent > .synopsis > .should-return-soon {
+                background: var(--paper-green-400);
+                color: white;
+                font-size: 12px;
+                text-align: center;
+                margin-top: 5px;
+            }
+
             .bookContent > .synopsis > .reserved {
                 background: var(--app-primary-color);
                 color: white;
diff --git a/client-web/src/exlibris-app/book_values.html b/client-web/src/exlibris-app/book_values.html
index 4533c80..efdaf07 100644
--- a/client-web/src/exlibris-app/book_values.html
+++ b/client-web/src/exlibris-app/book_values.html
@@ -22,6 +22,7 @@
     const bookStatus = {
         OVERDUE: "overdue",
         BORROWED: "borrowed",
+        SHOULD_RETURN_SOON: "should-return-soon",
         AVAILABLE: "available",
         RESERVED: "reserved",
         EXPECTED: "expected"
diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 4804cd6..16450b6 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -89,7 +89,6 @@
                 route="{{route}}"
                 pattern="/:page"
                 data="{{routeData}}"></app-route>
-        <book-dialog id="modal" narrow="[[narrow]]"></book-dialog>
         <app-drawer-layout fullbleed narrow="{{narrow}}">
             <!-- Drawer content -->
             <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
@@ -104,7 +103,7 @@
                                on-menu-item-click="_changeRoute">
                         <iron-icon icon="book"
                                    slot="icon"
-                                   style="--iron-icon-fill-color: var(--app-primary-color)"></iron-icon>
+                        style="--iron-icon-fill-color: var(--app-primary-color)"></iron-icon>
                     </menu-item>
 
                     <menu-item data-name="expected-soon"
@@ -113,7 +112,7 @@
                                on-menu-item-click="_changeRoute">
                         <iron-icon icon="update"
                                    slot="icon"
-                                   style="--iron-icon-fill-color: var(--paper-green-600)"></iron-icon>
+                        style="--iron-icon-fill-color: var(--paper-green-600)"></iron-icon>
                     </menu-item>
 
                     <menu-item data-name="borrowed-books"
@@ -123,7 +122,7 @@
                                on-menu-item-click="_changeRoute">
                         <iron-icon icon="shopping-basket"
                                    slot="icon"
-                                   style="--iron-icon-fill-color: var(--paper-grey-600)"></iron-icon>
+                        style="--iron-icon-fill-color: var(--paper-grey-600)"></iron-icon>
                     </menu-item>
 
                     <menu-item data-name="reserved-books"
@@ -133,7 +132,7 @@
                                on-menu-item-click="_changeRoute">
                         <iron-icon icon="lock"
                                    slot="icon"
-                                   style="--iron-icon-fill-color: var(--paper-grey-600)"></iron-icon>
+                        style="--iron-icon-fill-color: var(--paper-grey-600)"></iron-icon>
                     </menu-item>
 
                     <menu-item data-name="should-return-books"
@@ -143,7 +142,7 @@
                                on-menu-item-click="_changeRoute">
                         <iron-icon icon="query-builder"
                                    slot="icon"
-                                   style="--iron-icon-fill-color: var(--paper-grey-600)"></iron-icon>
+                        style="--iron-icon-fill-color: var(--paper-grey-600)"></iron-icon>
                     </menu-item>
 
                     <menu-item data-name="overdue-books"
@@ -153,7 +152,7 @@
                                on-menu-item-click="_changeRoute">
                         <iron-icon icon="warning"
                                    slot="icon"
-                                   style="--iron-icon-fill-color: var(--paper-red-600)"></iron-icon>
+                        style="--iron-icon-fill-color: var(--paper-red-600)"></iron-icon>
                     </menu-item>
                 </iron-selector>
             </app-drawer>
@@ -163,7 +162,7 @@
                 <app-header slot="header" fixed>
                     <app-toolbar>
                         <paper-icon-button id="number" icon="menu"
-                                           drawer-toggle></paper-icon-button>
+                        drawer-toggle></paper-icon-button>
                         <span drawer-toggle>[[selectedTitle]]</span>
                     </app-toolbar>
                 </app-header>
@@ -174,23 +173,24 @@
                         fallback-selection="view404"
                         role="main">
                     <book-grid data-name="all-books" books="[[allBooks]]"
-                               on-book-tile-click="_handleBookClick"></book-grid>
+                    on-book-tile-click="_handleBookClick"></book-grid>
                     <book-grid data-name="overdue-books" books="[[overdueBooks]]"
-                               on-book-tile-click="_handleBookClick"></book-grid>
+                    on-book-tile-click="_handleBookClick"></book-grid>
                     <book-grid data-name="borrowed-books" books="[[borrowedBooks]]"
-                               on-book-tile-click="_handleBookClick"></book-grid>
+                    on-book-tile-click="_handleBookClick"></book-grid>
                     <book-grid data-name="reserved-books" books="[[reservedBooks]]"
-                               on-book-tile-click="_handleBookClick"></book-grid>
+                    on-book-tile-click="_handleBookClick"></book-grid>
                     <book-grid data-name="expected-soon"
                                books="[[expectedSoonBooks]]"
-                               on-book-tile-click="_handleBookClick"></book-grid>
+                    on-book-tile-click="_handleBookClick"></book-grid>
                     <book-grid data-name="should-return-books"
                                books="[[shouldReturnBooks]]"
-                               on-book-tile-click="_handleBookClick"></book-grid>
+                    on-book-tile-click="_handleBookClick"></book-grid>
                     <div data-name="view404">View404</div>
                 </iron-pages>
             </app-header-layout>
         </app-drawer-layout>
+        <book-dialog id="modal" narrow="[[narrow]]"></book-dialog>
     </template>
 
     <script>
@@ -429,6 +429,7 @@
 
                     const oneDay = 1000 * 60 * 60 * 24;
                     if (Math.floor((new Date() - book.dueDate) / oneDay) <= 3) {
+                        newBook["status"] = bookStatus.SHOULD_RETURN_SOON;
                         this.push('shouldReturnBooks', newBook);
                     }
                     return newBook;
@@ -504,7 +505,8 @@
                     author: book.author,
                     category: book.category,
                     description: book.description,
-                    image: book.image
+                    image: book.image,
+                    isAllowedLoanExtension: book.isAllowedLoanExtension
                 });
             }
 
diff --git a/client-web/src/exlibris-app/test_values.js b/client-web/src/exlibris-app/test_values.js
index cd57001..0de0630 100644
--- a/client-web/src/exlibris-app/test_values.js
+++ b/client-web/src/exlibris-app/test_values.js
@@ -730,7 +730,8 @@ const userTestBooks = {
             "\n" +
             "Style and approach\n" +
             "This is your guide to designing custom web components, and the concepts are explained in a conversational and easy-to-follow style. Each topic is explained through examples, with detailed explanations wherever required.",
-            dueDate: new Date(new Date().getTime() + 14 * 172800000)
+            dueDate: new Date(new Date().getTime() + 14 * 172800000),
+            isAllowedLoanExtension: true
         }],
         overdue: [{
             id: "8535902722",
@@ -744,7 +745,8 @@ const userTestBooks = {
             "Mastering Lambdas: Java Programming in a Multicore World by Maurice Naftalin\n" +
             "Quick Start Guide to JavaFX by J.F. DiMarzio\n" +
             "Mastering JavaFX 8 Controls: Create Custom JavaFX 8 Controls for Cross-Platform Applications by Hendrik Ebbers",
-            dueDate: new Date(new Date().getTime() - 2 * 1000 * 60 * 60 * 24)
+            dueDate: new Date(new Date().getTime() - 2 * 1000 * 60 * 60 * 24),
+            isAllowedLoanExtension: false
         }]
     }
 ;

From 78ca524cfa9d91af88c7aef42b08137b270a9106 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 27 Mar 2018 17:39:21 +0300
Subject: [PATCH 07/92] Change book click handler.

---
 client-web/src/exlibris-app/book-dialog.html  |  1 +
 client-web/src/exlibris-app/exlibris-app.html | 50 ++++++++++---------
 2 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/book-dialog.html
index 90a3a9d..9ee0d72 100644
--- a/client-web/src/exlibris-app/book-dialog.html
+++ b/client-web/src/exlibris-app/book-dialog.html
@@ -98,6 +98,7 @@
             paper-button {
                 background-color: var(--app-primary-color);
                 color: white;
+                width: 200px;
             }
 
             section {
diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 16450b6..ff7942f 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -103,7 +103,7 @@
                                on-menu-item-click="_changeRoute">
                         <iron-icon icon="book"
                                    slot="icon"
-                        style="--iron-icon-fill-color: var(--app-primary-color)"></iron-icon>
+                                   style="--iron-icon-fill-color: var(--app-primary-color)"></iron-icon>
                     </menu-item>
 
                     <menu-item data-name="expected-soon"
@@ -112,7 +112,7 @@
                                on-menu-item-click="_changeRoute">
                         <iron-icon icon="update"
                                    slot="icon"
-                        style="--iron-icon-fill-color: var(--paper-green-600)"></iron-icon>
+                                   style="--iron-icon-fill-color: var(--paper-green-600)"></iron-icon>
                     </menu-item>
 
                     <menu-item data-name="borrowed-books"
@@ -122,7 +122,7 @@
                                on-menu-item-click="_changeRoute">
                         <iron-icon icon="shopping-basket"
                                    slot="icon"
-                        style="--iron-icon-fill-color: var(--paper-grey-600)"></iron-icon>
+                                   style="--iron-icon-fill-color: var(--paper-grey-600)"></iron-icon>
                     </menu-item>
 
                     <menu-item data-name="reserved-books"
@@ -132,7 +132,7 @@
                                on-menu-item-click="_changeRoute">
                         <iron-icon icon="lock"
                                    slot="icon"
-                        style="--iron-icon-fill-color: var(--paper-grey-600)"></iron-icon>
+                                   style="--iron-icon-fill-color: var(--paper-grey-600)"></iron-icon>
                     </menu-item>
 
                     <menu-item data-name="should-return-books"
@@ -142,7 +142,7 @@
                                on-menu-item-click="_changeRoute">
                         <iron-icon icon="query-builder"
                                    slot="icon"
-                        style="--iron-icon-fill-color: var(--paper-grey-600)"></iron-icon>
+                                   style="--iron-icon-fill-color: var(--paper-grey-600)"></iron-icon>
                     </menu-item>
 
                     <menu-item data-name="overdue-books"
@@ -152,7 +152,7 @@
                                on-menu-item-click="_changeRoute">
                         <iron-icon icon="warning"
                                    slot="icon"
-                        style="--iron-icon-fill-color: var(--paper-red-600)"></iron-icon>
+                                   style="--iron-icon-fill-color: var(--paper-red-600)"></iron-icon>
                     </menu-item>
                 </iron-selector>
             </app-drawer>
@@ -162,7 +162,7 @@
                 <app-header slot="header" fixed>
                     <app-toolbar>
                         <paper-icon-button id="number" icon="menu"
-                        drawer-toggle></paper-icon-button>
+                                           drawer-toggle></paper-icon-button>
                         <span drawer-toggle>[[selectedTitle]]</span>
                     </app-toolbar>
                 </app-header>
@@ -173,19 +173,19 @@
                         fallback-selection="view404"
                         role="main">
                     <book-grid data-name="all-books" books="[[allBooks]]"
-                    on-book-tile-click="_handleBookClick"></book-grid>
+                               on-book-tile-click="_handleBookClick"></book-grid>
                     <book-grid data-name="overdue-books" books="[[overdueBooks]]"
-                    on-book-tile-click="_handleBookClick"></book-grid>
+                               on-book-tile-click="_handleBookClick"></book-grid>
                     <book-grid data-name="borrowed-books" books="[[borrowedBooks]]"
-                    on-book-tile-click="_handleBookClick"></book-grid>
+                               on-book-tile-click="_handleBookClick"></book-grid>
                     <book-grid data-name="reserved-books" books="[[reservedBooks]]"
-                    on-book-tile-click="_handleBookClick"></book-grid>
+                               on-book-tile-click="_handleBookClick"></book-grid>
                     <book-grid data-name="expected-soon"
                                books="[[expectedSoonBooks]]"
-                    on-book-tile-click="_handleBookClick"></book-grid>
+                               on-book-tile-click="_handleBookClick"></book-grid>
                     <book-grid data-name="should-return-books"
                                books="[[shouldReturnBooks]]"
-                    on-book-tile-click="_handleBookClick"></book-grid>
+                               on-book-tile-click="_handleBookClick"></book-grid>
                     <div data-name="view404">View404</div>
                 </iron-pages>
             </app-header-layout>
@@ -286,7 +286,6 @@
                         type: Array,
                         value: () => []
                     }
-
                 };
             }
 
@@ -390,7 +389,6 @@
              * Adds fields `status` equals `overdue`
              * and `statusMessage` equals `N DAYS OVERDUE`
              *
-             *
              * @param books all `overdue` user books from library
              * @private
              */
@@ -470,10 +468,8 @@
                     }
                 );
                 this.reservedBooks = [...readyToPickUpBooks, ...expectedUserBooks];
-
             }
 
-
             /**
              * Removes all elements of the second array from the first.
              *
@@ -510,16 +506,22 @@
                 });
             }
 
-            _openModal(book) {
-                const bookDialog = this.$.modal;
-                bookDialog.book = book;
-                bookDialog.open();
-            }
-
+            /**
+             * Handles the book tile click event.
+             * Opens modal dialog for specified book.
+             *
+             * @param e the book tile click event.
+             *        `e.detail` contains the book value.
+             * @private
+             */
             _handleBookClick(e) {
-                this._openModal(e.detail);
+                const book = e.detail;
                 e.stopPropagation();
                 e.preventDefault();
+
+                const bookDialog = this.$.modal;
+                bookDialog.book = book;
+                bookDialog.open();
             }
         }
 

From 9005204540c2a481a27d4058d7f41406ad739852 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 27 Mar 2018 18:17:47 +0300
Subject: [PATCH 08/92] Add book-dialog docs, change dialog styles.

---
 client-web/src/exlibris-app/book-dialog.html  | 27 +++++++++++++------
 client-web/src/exlibris-app/exlibris-app.html |  4 +--
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/book-dialog.html
index 9ee0d72..cb7c803 100644
--- a/client-web/src/exlibris-app/book-dialog.html
+++ b/client-web/src/exlibris-app/book-dialog.html
@@ -49,13 +49,14 @@
             .head-region {
                 display: flex;
                 flex-wrap: wrap;
-                flex-direction: inherit;
+                flex-direction: row;
+                justify-content: space-between;
                 align-items: flex-start;
                 height: 50%;
             }
 
             .head-region > iron-image {
-                width: 30%;
+                max-width: 30%;
                 min-width: fit-content;
                 height: 100%;
                 --iron-image-height: 100%;
@@ -165,18 +166,28 @@ <h3>RESERVED BY ANOTHER READER</h3>
 
             static get properties() {
                 return {
-                    book: {
-                        type: Object,
-                        reflectToAttribute: true
-                    },
-                    narrow: Boolean,
+                    /**
+                     * The book object to display.
+                     */
+                    book: Object,
                 };
             }
 
+            /**
+             * Opens the modal dialog.
+             */
             open() {
                 this.$.dialog.open();
             }
 
+            /**
+             * Reflects to the window width change.
+             * If the `narrow` value is true, extends dialog
+             * for full screen width.
+             *
+             * @param narrow
+             * @private
+             */
             _narrowChanged(narrow) {
                 if (this.narrow) {
                     this.$.dialog.updateStyles({
@@ -188,7 +199,7 @@ <h3>RESERVED BY ANOTHER READER</h3>
                     this.$.dialog.updateStyles({
                         'height': '60%',
                         'width': '40%',
-                        'min-width': '500px'
+                        'min-width': '550px'
                     });
                 }
             }
diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index ff7942f..7b8ffce 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -190,7 +190,7 @@
                 </iron-pages>
             </app-header-layout>
         </app-drawer-layout>
-        <book-dialog id="modal" narrow="[[narrow]]"></book-dialog>
+        <book-dialog id="dialog" narrow="[[narrow]]"></book-dialog>
     </template>
 
     <script>
@@ -519,7 +519,7 @@
                 e.stopPropagation();
                 e.preventDefault();
 
-                const bookDialog = this.$.modal;
+                const bookDialog = this.$.dialog;
                 bookDialog.book = book;
                 bookDialog.open();
             }

From 18ca9929bbc3796af3a08a87984b15d29da6cbf5 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 27 Mar 2018 18:22:40 +0300
Subject: [PATCH 09/92] Fix lint issues.

---
 client-web/src/exlibris-app/book-dialog.html  | 5 +++++
 client-web/src/exlibris-app/exlibris-app.html | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/book-dialog.html
index cb7c803..49714f9 100644
--- a/client-web/src/exlibris-app/book-dialog.html
+++ b/client-web/src/exlibris-app/book-dialog.html
@@ -170,6 +170,11 @@ <h3>RESERVED BY ANOTHER READER</h3>
                      * The book object to display.
                      */
                     book: Object,
+
+                    /**
+                     * Sets the element styling for narrow screen.
+                     */
+                    narrow: Boolean
                 };
             }
 
diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 7b8ffce..2d6fa55 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -39,7 +39,7 @@
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
 
-<link rel="import" href="menu/menu-item.html">
+<link rel="import" href="./menu/menu-item.html">
 <link rel="import" href="./book-grid.html">
 <link rel="import" href="./book_values.html">
 <link rel="import" href="./book-dialog.html">

From c7ae0f220098f4939e76180a61314c9f1c3019f9 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Wed, 28 Mar 2018 10:25:45 +0300
Subject: [PATCH 10/92] Add modal dialog close button.

---
 client-web/src/exlibris-app/book-dialog.html | 27 ++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/book-dialog.html
index 49714f9..8cb4a5f 100644
--- a/client-web/src/exlibris-app/book-dialog.html
+++ b/client-web/src/exlibris-app/book-dialog.html
@@ -23,6 +23,8 @@
 <link rel="import" href="../../bower_components/paper-styles/color.html">
 <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="../../bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
 <link rel="import"
       href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
@@ -50,7 +52,7 @@
                 display: flex;
                 flex-wrap: wrap;
                 flex-direction: row;
-                justify-content: space-between;
+                justify-content: flex-start;
                 align-items: flex-start;
                 height: 50%;
             }
@@ -114,9 +116,23 @@
                     padding: 0 24px 0 0;
                 };
             }
+            paper-icon-button {
+                color: var(--app-secondary-color);
+
+            }
+
+            .close-button {
+                position: absolute;
+                right: 4px;
+                top: 4px;
+                padding: 0;
+                margin: 0;
+            }
         </style>
         <paper-dialog id="dialog" with-backdrop dynamic-align>
-
+        <div class="close-button">
+        <paper-icon-button icon="close" on-tap="close"></paper-icon-button>
+        </div>
             <div class="head-region">
                 <iron-image src="[[book.image]]"></iron-image>
                 <div class="head-info">
@@ -185,6 +201,13 @@ <h3>RESERVED BY ANOTHER READER</h3>
                 this.$.dialog.open();
             }
 
+            /**
+             * Closes the modal dialog.
+             */
+            close() {
+                this.$.dialog.close();
+            }
+
             /**
              * Reflects to the window width change.
              * If the `narrow` value is true, extends dialog

From 81f6d18e5cfe53b66d9d2ba91ddf976c81494bdd Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Wed, 28 Mar 2018 16:28:04 +0300
Subject: [PATCH 11/92] Add specific route for book modal dialog.

---
 client-web/src/exlibris-app/book-dialog.html  | 52 +++++-------------
 client-web/src/exlibris-app/exlibris-app.html | 53 ++++++++++++++++---
 2 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/book-dialog.html
index 8cb4a5f..e259f41 100644
--- a/client-web/src/exlibris-app/book-dialog.html
+++ b/client-web/src/exlibris-app/book-dialog.html
@@ -37,7 +37,7 @@
 
 <dom-module id="book-dialog">
     <template>
-        <style include="paper-dialog-shared-styles">
+        <style>
             :host {
                 display: block;
                 position: center;
@@ -46,11 +46,13 @@
             paper-dialog {
                 display: flex;
                 flex-direction: column;
+                height: 60%;
+                width: 40%;
+                min-width: 550px;
             }
 
             .head-region {
                 display: flex;
-                flex-wrap: wrap;
                 flex-direction: row;
                 justify-content: flex-start;
                 align-items: flex-start;
@@ -118,7 +120,6 @@
             }
             paper-icon-button {
                 color: var(--app-secondary-color);
-
             }
 
             .close-button {
@@ -129,7 +130,8 @@
                 margin: 0;
             }
         </style>
-        <paper-dialog id="dialog" with-backdrop dynamic-align>
+
+        <paper-dialog id="dialog" with-backdrop on-opened-changed="_handleOpenedChange">
         <div class="close-button">
         <paper-icon-button icon="close" on-tap="close"></paper-icon-button>
         </div>
@@ -158,7 +160,6 @@ <h3>RESERVED BY ANOTHER READER</h3>
                     </div>
                 </div>
             </div>
-
             <section>
                 <paper-dialog-scrollable>
                     [[book.description]]
@@ -174,23 +175,12 @@ <h3>RESERVED BY ANOTHER READER</h3>
                 return 'book-dialog';
             }
 
-            static get observers() {
-                return [
-                    '_narrowChanged(narrow)'
-                ];
-            }
-
             static get properties() {
                 return {
                     /**
                      * The book object to display.
                      */
                     book: Object,
-
-                    /**
-                     * Sets the element styling for narrow screen.
-                     */
-                    narrow: Boolean
                 };
             }
 
@@ -208,30 +198,6 @@ <h3>RESERVED BY ANOTHER READER</h3>
                 this.$.dialog.close();
             }
 
-            /**
-             * Reflects to the window width change.
-             * If the `narrow` value is true, extends dialog
-             * for full screen width.
-             *
-             * @param narrow
-             * @private
-             */
-            _narrowChanged(narrow) {
-                if (this.narrow) {
-                    this.$.dialog.updateStyles({
-                        'height': '100%',
-                        'width': '100%',
-                        'min-width': ''
-                    });
-                } else {
-                    this.$.dialog.updateStyles({
-                        'height': '60%',
-                        'width': '40%',
-                        'min-width': '550px'
-                    });
-                }
-            }
-
             _isReserved(status) {
                 return status === bookStatus.RESERVED;
             }
@@ -252,6 +218,12 @@ <h3>RESERVED BY ANOTHER READER</h3>
                     || book.status === bookStatus.BORROWED)
                     && !book.isAllowedLoanExtension;
             }
+
+            _handleOpenedChange(){
+                if(!this.$.dialog.opened) {
+                    this.dispatchEvent(new CustomEvent('dialog-closed'));
+                }
+            }
         }
 
         window.customElements.define(BookDialog.is, BookDialog);
diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 2d6fa55..28f6db8 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -88,7 +88,16 @@
         <app-route
                 route="{{route}}"
                 pattern="/:page"
-                data="{{routeData}}"></app-route>
+                data="{{routeData}}"
+                tail="{{subroute}}"></app-route>
+        <app-route
+                route="{{subroute}}"
+                pattern="/:title"
+                tail="{{subrouteTail}}"></app-route>
+        <app-route
+                route="{{subrouteTail}}"
+                pattern="/:id"
+                data="{{tailData}}"></app-route>
         <app-drawer-layout fullbleed narrow="{{narrow}}">
             <!-- Drawer content -->
             <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
@@ -168,6 +177,7 @@
                 </app-header>
 
                 <iron-pages
+                        id="pages"
                         selected="[[routeData.page]]"
                         attr-for-selected="data-name"
                         fallback-selection="view404"
@@ -186,11 +196,12 @@
                     <book-grid data-name="should-return-books"
                                books="[[shouldReturnBooks]]"
                                on-book-tile-click="_handleBookClick"></book-grid>
+                    <div data-name="book-details"></div>
                     <div data-name="view404">View404</div>
                 </iron-pages>
             </app-header-layout>
         </app-drawer-layout>
-        <book-dialog id="dialog" narrow="[[narrow]]"></book-dialog>
+        <book-dialog id="dialog" on-dialog-closed="_handleDialogClose"></book-dialog>
     </template>
 
     <script>
@@ -285,7 +296,9 @@
                     expectedSoonBooks: {
                         type: Array,
                         value: () => []
-                    }
+                    },
+
+                    previousPage: String
                 };
             }
 
@@ -306,6 +319,23 @@
                 if (!this.route.path) {
                     this.set('route.path', '/all-books');
                 }
+
+                if (this.routeData.page === 'book-details' && this.tailData.id) {
+                    Polymer.RenderStatus.afterNextRender(this, function () {
+                        const book = this._findBookById(this.tailData.id);
+                        const bookDialog = this.$.dialog;
+                        bookDialog.book = book;
+                        bookDialog.open();
+                    });
+
+                    if(!this.previousPage) {
+                        // this.$.pages.selected = 'all-books';
+                    } else {
+                        this.$.pages.selected = this.previousPage;
+                    }
+                }
+
+                this.previousPage = this.$.pages.selected;
             }
 
             /**
@@ -518,10 +548,21 @@
                 const book = e.detail;
                 e.stopPropagation();
                 e.preventDefault();
+                this.set('route.path', '/book-details/' + book.title.replace(/\s/g, '_') + '/' + book.id);
+            }
 
-                const bookDialog = this.$.dialog;
-                bookDialog.book = book;
-                bookDialog.open();
+            _findBookById(id) {
+                const book = this.allBooks.find(x => x.id === id)
+                    || this.borrowedBooks.find(x => x.id === id)
+                    || this.reservedBooks.find(x => x.id === id)
+                    || this.expectedSoonBooks.find(x => x.id === id);
+                return book;
+            }
+
+            _handleDialogClose(e){
+                if (this.previousPage) {
+                    this.set('route.path', '/' + this.previousPage);
+                }
             }
         }
 

From c5b660deecfe529f889347b8053f154a51c19836 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Wed, 28 Mar 2018 17:28:45 +0300
Subject: [PATCH 12/92] Fix custom button in book modal dialog.

---
 client-web/src/exlibris-app/exlibris-app.html | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 1e97540..8e81211 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -21,7 +21,6 @@
 <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="./../exlibris-app/shell/redux-store.html">
-
 <link rel="import" href="../../bower_components/app-layout/app-drawer/app-drawer.html">
 <link rel="import"
       href="../../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
@@ -97,7 +96,7 @@
         <app-route
                 route="{{subrouteTail}}"
                 pattern="/:id"
-                data="{{tailData}}"></app-route>
+                data="{{pathBookId}}"></app-route>
         <app-drawer-layout fullbleed narrow="{{narrow}}">
             <!-- Drawer content -->
             <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
@@ -282,7 +281,9 @@
                         statePath: 'expectedSoonBooks'
                     },
 
-                    previousPage: String
+                    previousPage: String,
+
+                    pathBookId: String
                 };
             }
 
@@ -300,16 +301,16 @@
                     this.set('route.path', '/all-books');
                 }
 
-                if (this.routeData.page === 'book-details' && this.tailData.id) {
+                if (this.routeData.page === 'book-details' && this.pathBookId.id) {
                     Polymer.RenderStatus.afterNextRender(this, function () {
-                        const book = this._findBookById(this.tailData.id);
+                        const book = this._findBookById(this.pathBookId.id);
                         const bookDialog = this.$.dialog;
                         bookDialog.book = book;
                         bookDialog.open();
                     });
 
-                    if(!this.previousPage) {
-                        // this.$.pages.selected = 'all-books';
+                    if (!this.previousPage) {
+                        this.$.pages.selected = 'all-books';
                     } else {
                         this.$.pages.selected = this.previousPage;
                     }
@@ -346,6 +347,7 @@
                     this.set('selectedTitle', selectedMenuItem.title);
                 }
             }
+
             /**
              * Handles the book tile click event.
              * Opens modal dialog for specified book.
@@ -363,13 +365,15 @@
 
             _findBookById(id) {
                 const book = this.allBooks.find(x => x.id === id)
+                    || this.expectedSoonBooks.find(x => x.id === id)
+                    || this.overdueBooks.find(x => x.id === id)
+                    || this.shouldReturnBooks.find(x => x.id === id)
                     || this.borrowedBooks.find(x => x.id === id)
-                    || this.reservedBooks.find(x => x.id === id)
-                    || this.expectedSoonBooks.find(x => x.id === id);
+                    || this.reservedBooks.find(x => x.id === id);
                 return book;
             }
 
-            _handleDialogClose(e){
+            _handleDialogClose(e) {
                 if (this.previousPage) {
                     this.set('route.path', '/' + this.previousPage);
                 }

From f490daf48f6929862e836d65470ef99439e5af10 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Thu, 29 Mar 2018 10:54:26 +0300
Subject: [PATCH 13/92] Add docs to the book dialog.

---
 client-web/src/exlibris-app/book-dialog.html | 24 +++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/book-dialog.html
index e259f41..606c132 100644
--- a/client-web/src/exlibris-app/book-dialog.html
+++ b/client-web/src/exlibris-app/book-dialog.html
@@ -32,7 +32,6 @@
 <link rel="import"
       href="../../bower_components/paper-dialog-behavior/paper-dialog-shared-styles.html">
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
-
 <link rel="import" href="./book_values.html">
 
 <dom-module id="book-dialog">
@@ -118,6 +117,7 @@
                     padding: 0 24px 0 0;
                 };
             }
+
             paper-icon-button {
                 color: var(--app-secondary-color);
             }
@@ -132,9 +132,9 @@
         </style>
 
         <paper-dialog id="dialog" with-backdrop on-opened-changed="_handleOpenedChange">
-        <div class="close-button">
-        <paper-icon-button icon="close" on-tap="close"></paper-icon-button>
-        </div>
+            <div class="close-button">
+                <paper-icon-button icon="close" on-tap="close"></paper-icon-button>
+            </div>
             <div class="head-region">
                 <iron-image src="[[book.image]]"></iron-image>
                 <div class="head-info">
@@ -177,6 +177,12 @@ <h3>RESERVED BY ANOTHER READER</h3>
 
             static get properties() {
                 return {
+                    /**
+                     * Fired on `element` modal dialog close.
+                     *
+                     * @event dialog-closed
+                     */
+
                     /**
                      * The book object to display.
                      */
@@ -219,8 +225,14 @@ <h3>RESERVED BY ANOTHER READER</h3>
                     && !book.isAllowedLoanExtension;
             }
 
-            _handleOpenedChange(){
-                if(!this.$.dialog.opened) {
+            /**
+             * Handles the dialog `opened` state changes.
+             * If the dialog was closed, fires `dialog-closed` event.
+             *
+             * @private
+             */
+            _handleOpenedChange() {
+                if (!this.$.dialog.opened) {
                     this.dispatchEvent(new CustomEvent('dialog-closed'));
                 }
             }

From b2712ead36d0f64be977c62d82094c8027d5145c Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Thu, 29 Mar 2018 11:44:44 +0300
Subject: [PATCH 14/92] Add dialog buttons fire events, complete dialog docs.

---
 client-web/src/exlibris-app/book-dialog.html  | 58 ++++++++++++++++++-
 client-web/src/exlibris-app/exlibris-app.html | 50 +++++++++++++++-
 2 files changed, 104 insertions(+), 4 deletions(-)

diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/book-dialog.html
index 606c132..3b5b1a8 100644
--- a/client-web/src/exlibris-app/book-dialog.html
+++ b/client-web/src/exlibris-app/book-dialog.html
@@ -145,13 +145,17 @@ <h2>[[book.fullStatusMessage]]</h2>
                     </div>
                     <div class="head-button">
                         <template is="dom-if" if="[[_isReserved(book.status)]]">
-                            <paper-button raised>CANCEL RESERVATION</paper-button>
+                            <paper-button raised on-click="_requestCancelReservation">CANCEL
+                                RESERVATION
+                            </paper-button>
                         </template>
                         <template is="dom-if" if="[[_isExpected(book.status)]]">
-                            <paper-button raised>RESERVE</paper-button>
+                            <paper-button raised on-click="_requestReservation">RESERVE
+                            </paper-button>
                         </template>
                         <template is="dom-if" if="[[_isBorrowedAndCanBeExtended(book)]]">
-                            <paper-button raised>EXTEND FOR TWO WEEKS
+                            <paper-button raised on-click="_requestLoanExtension">EXTEND FOR TWO
+                                WEEKS
                             </paper-button>
                         </template>
                         <template is="dom-if" if="[[_isBorrowedAndCannotBeExtended(book)]]">
@@ -183,6 +187,27 @@ <h3>RESERVED BY ANOTHER READER</h3>
                      * @event dialog-closed
                      */
 
+                    /**
+                     * Fired on the `CANCEL RESERVATION` button click.
+                     *
+                     * @event cancel-reservation-requested
+                     * @param {detail.bookId} the id of a book the reservation of which must be canceled.
+                     */
+
+                    /**
+                     * Fired on the `RESERVE` button click.
+                     *
+                     * @event reservation-requested
+                     * @param {detail.bookId} the id of a book to reserve.
+                     */
+
+                    /**
+                     * Fired on the `EXTEND FOR TWO WEEKS` button click.
+                     *
+                     * @event loan-extension-requested
+                     * @param {detail.bookId} the id of a book the loan period of which must be extended.
+                     */
+
                     /**
                      * The book object to display.
                      */
@@ -236,6 +261,33 @@ <h3>RESERVED BY ANOTHER READER</h3>
                     this.dispatchEvent(new CustomEvent('dialog-closed'));
                 }
             }
+
+            /**
+             * Handles the `CANCEL RESERVATION` button click.
+             *
+             * @private
+             */
+            _requestCancelReservation() {
+                this.dispatchEvent(new CustomEvent('cancel-reservation-requested', {detail: {bookId: this.book.id}}));
+            }
+
+            /**
+             * Handles the `RESERVE` button click.
+             *
+             * @private
+             */
+            _requestReservation() {
+                this.dispatchEvent(new CustomEvent('reservation-requested', {detail: {bookId: this.book.id}}));
+            }
+
+            /**
+             * Handles the `EXTEND FOR TWO WEEKS` button click.
+             *
+             * @private
+             */
+            _requestLoanExtension() {
+                this.dispatchEvent(new CustomEvent('loan-extension-requested', {detail: {bookId: this.book.id}}));
+            }
         }
 
         window.customElements.define(BookDialog.is, BookDialog);
diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 8e81211..188b143 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -200,7 +200,11 @@
                 </iron-pages>
             </app-header-layout>
         </app-drawer-layout>
-        <book-dialog id="dialog" on-dialog-closed="_handleDialogClose"></book-dialog>
+        <book-dialog id="dialog"
+                     on-dialog-closed="_handleDialogClose"
+                     on-cancel-reservation-requested="_cancelBookReservation"
+                     on-reservation-requested="_reserveBook"
+                     on-loan-extension-requested="_extendBookLoanPeriod"></book-dialog>
     </template>
 
     <script>
@@ -295,6 +299,10 @@
 
             /**
              * Checks for an empty route passed to redirect user to the default app view.
+             *
+             * If the route matches the `book-dialog` route, searches for the book by
+             * the id from URL, opens modal dialog with specified book,
+             * selects the appropriate page to show in the dialog background.
              */
             _routePageChanged() {
                 if (!this.route.path) {
@@ -363,6 +371,9 @@
                 this.set('route.path', '/book-details/' + book.title.replace(/\s/g, '_') + '/' + book.id);
             }
 
+            /**
+             * Searches the book in the related book arrays by id.
+             */
             _findBookById(id) {
                 const book = this.allBooks.find(x => x.id === id)
                     || this.expectedSoonBooks.find(x => x.id === id)
@@ -373,11 +384,48 @@
                 return book;
             }
 
+            /**
+             * Handles the book dialog close action.
+             * Sets the route path to the previous value.
+             */
             _handleDialogClose(e) {
                 if (this.previousPage) {
                     this.set('route.path', '/' + this.previousPage);
                 }
             }
+
+            /**
+             * Handles the request to cancel book reservation.
+             *
+             * @param e the dialog button click event.
+             * @private
+             */
+            _cancelBookReservation(e) {
+                const bookId = e.detail.bookId;
+                console.log('Cancel book reservation ' + bookId);
+            }
+
+            /**
+             * Handles the request to reserve book.
+             *
+             * @param e the dialog button click event.
+             * @private
+             */
+            _reserveBook(e) {
+                const bookId = e.detail.bookId;
+                console.log('Reserve book ' + bookId);
+            }
+
+            /**
+             * Handles the request to extend book loan period.
+             *
+             * @param e the dialog button click event.
+             * @private
+             */
+            _extendBookLoanPeriod(e) {
+                const bookId = e.detail.bookId;
+                console.log('Extend loan ' + bookId);
+            }
         }
 
         window.customElements.define(ExlibrisApp.is, ExlibrisApp);

From 1432d1205ec70fed0c9360603df6ed09c67a2ae2 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Thu, 29 Mar 2018 12:22:45 +0300
Subject: [PATCH 15/92] Rename book dialog events.

---
 client-web/src/exlibris-app/book-dialog.html  | 18 +++---
 client-web/src/exlibris-app/exlibris-app.html |  8 +--
 .../test/exlibris-app/book-dialog_test.html   | 59 +++++++++++++++++++
 3 files changed, 72 insertions(+), 13 deletions(-)
 create mode 100644 client-web/test/exlibris-app/book-dialog_test.html

diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/book-dialog.html
index 3b5b1a8..26cb80b 100644
--- a/client-web/src/exlibris-app/book-dialog.html
+++ b/client-web/src/exlibris-app/book-dialog.html
@@ -184,27 +184,27 @@ <h3>RESERVED BY ANOTHER READER</h3>
                     /**
                      * Fired on `element` modal dialog close.
                      *
-                     * @event dialog-closed
+                     * @event book-dialog-closed
                      */
 
                     /**
                      * Fired on the `CANCEL RESERVATION` button click.
                      *
-                     * @event cancel-reservation-requested
+                     * @event book-dialog-cancel-reservation
                      * @param {detail.bookId} the id of a book the reservation of which must be canceled.
                      */
 
                     /**
                      * Fired on the `RESERVE` button click.
                      *
-                     * @event reservation-requested
+                     * @event book-dialog-reserve-book
                      * @param {detail.bookId} the id of a book to reserve.
                      */
 
                     /**
                      * Fired on the `EXTEND FOR TWO WEEKS` button click.
                      *
-                     * @event loan-extension-requested
+                     * @event book-dialog-extend-loan
                      * @param {detail.bookId} the id of a book the loan period of which must be extended.
                      */
 
@@ -252,13 +252,13 @@ <h3>RESERVED BY ANOTHER READER</h3>
 
             /**
              * Handles the dialog `opened` state changes.
-             * If the dialog was closed, fires `dialog-closed` event.
+             * If the dialog was closed, fires `book-dialog-closed` event.
              *
              * @private
              */
             _handleOpenedChange() {
                 if (!this.$.dialog.opened) {
-                    this.dispatchEvent(new CustomEvent('dialog-closed'));
+                    this.dispatchEvent(new CustomEvent('book-dialog-closed'));
                 }
             }
 
@@ -268,7 +268,7 @@ <h3>RESERVED BY ANOTHER READER</h3>
              * @private
              */
             _requestCancelReservation() {
-                this.dispatchEvent(new CustomEvent('cancel-reservation-requested', {detail: {bookId: this.book.id}}));
+                this.dispatchEvent(new CustomEvent('book-dialog-cancel-reservation', {detail: {bookId: this.book.id}}));
             }
 
             /**
@@ -277,7 +277,7 @@ <h3>RESERVED BY ANOTHER READER</h3>
              * @private
              */
             _requestReservation() {
-                this.dispatchEvent(new CustomEvent('reservation-requested', {detail: {bookId: this.book.id}}));
+                this.dispatchEvent(new CustomEvent('book-dialog-reserve-book', {detail: {bookId: this.book.id}}));
             }
 
             /**
@@ -286,7 +286,7 @@ <h3>RESERVED BY ANOTHER READER</h3>
              * @private
              */
             _requestLoanExtension() {
-                this.dispatchEvent(new CustomEvent('loan-extension-requested', {detail: {bookId: this.book.id}}));
+                this.dispatchEvent(new CustomEvent('book-dialog-extend-loan', {detail: {bookId: this.book.id}}));
             }
         }
 
diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 188b143..22d4db6 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -201,10 +201,10 @@
             </app-header-layout>
         </app-drawer-layout>
         <book-dialog id="dialog"
-                     on-dialog-closed="_handleDialogClose"
-                     on-cancel-reservation-requested="_cancelBookReservation"
-                     on-reservation-requested="_reserveBook"
-                     on-loan-extension-requested="_extendBookLoanPeriod"></book-dialog>
+                     on-book-dialog-closed="_handleDialogClose"
+                     on-book-dialog-cancel-reservation="_cancelBookReservation"
+                     on-book-dialog-reserve-book="_reserveBook"
+                     on-book-dialog-extend-loan="_extendBookLoanPeriod"></book-dialog>
     </template>
 
     <script>
diff --git a/client-web/test/exlibris-app/book-dialog_test.html b/client-web/test/exlibris-app/book-dialog_test.html
new file mode 100644
index 0000000..d533f97
--- /dev/null
+++ b/client-web/test/exlibris-app/book-dialog_test.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<!--
+  ~ Copyright 2018, TeamDev Ltd. All rights reserved.
+  ~
+  ~ Redistribution and use in source and/or binary forms, with or without
+  ~ modification, must retain the above copyright notice and the following
+  ~ disclaimer.
+  ~
+  ~ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+  ~ "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+  ~ LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+  ~ A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+  ~ OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+  ~ SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+  ~ LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+  ~ DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+  ~ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+  ~ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+  ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+  -->
+
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport"
+          content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>book-grid test</title>
+
+    <script src="./../../bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="./../../bower_components/web-component-tester/browser.js"></script>
+    <script src="./test_variables.js"></script>
+
+    <link rel="import" href="../../src/exlibris-app/book-dialog.html">
+</head>
+<body>
+
+<test-fixture id="BasicTestFixture">
+    <template>
+        <book-dialog></book-dialog>
+    </template>
+</test-fixture>
+
+<script>
+    suite('book-dialog', function () {
+        const SYNOPSIS_SELECTOR = ".bookContent >.synopsis";
+
+        let bookDialog;
+        setup(() => {
+            bookDialog = fixture('BasicTestFixture');
+        });
+
+        test('should not display without open() call.', function () {
+            console.log(bookDialog.$.dialog);
+        });
+    });
+</script>
+</body>
+</html>

From 6006e8f36c2e47de496c4a83e3d523d88cd15ddd Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Thu, 29 Mar 2018 13:58:44 +0300
Subject: [PATCH 16/92] Add book dialog content tests.

---
 client-web/src/exlibris-app/book-dialog.html  | 23 +++++---
 .../test/exlibris-app/book-dialog_test.html   | 59 ++++++++++++++++++-
 .../test/exlibris-app/test_variables.js       |  6 +-
 3 files changed, 76 insertions(+), 12 deletions(-)

diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/book-dialog.html
index 26cb80b..59744ba 100644
--- a/client-web/src/exlibris-app/book-dialog.html
+++ b/client-web/src/exlibris-app/book-dialog.html
@@ -100,7 +100,7 @@
             }
 
             paper-button {
-                background-color: var(--app-primary-color);
+                background-color: var(--app-primary-color, blue);
                 color: white;
                 width: 200px;
             }
@@ -119,7 +119,7 @@
             }
 
             paper-icon-button {
-                color: var(--app-secondary-color);
+                color: var(--app-secondary-color, black);
             }
 
             .close-button {
@@ -145,17 +145,24 @@ <h2>[[book.fullStatusMessage]]</h2>
                     </div>
                     <div class="head-button">
                         <template is="dom-if" if="[[_isReserved(book.status)]]">
-                            <paper-button raised on-click="_requestCancelReservation">CANCEL
-                                RESERVATION
+                            <paper-button id="book-dialog-cancel-button"
+                                          raised
+                                          on-click="_requestCancelReservation">
+                                CANCEL RESERVATION
                             </paper-button>
                         </template>
                         <template is="dom-if" if="[[_isExpected(book.status)]]">
-                            <paper-button raised on-click="_requestReservation">RESERVE
+                            <paper-button id="book-dialog-reserve-button"
+                                          raised
+                                          on-click="_requestReservation">
+                                RESERVE
                             </paper-button>
                         </template>
                         <template is="dom-if" if="[[_isBorrowedAndCanBeExtended(book)]]">
-                            <paper-button raised on-click="_requestLoanExtension">EXTEND FOR TWO
-                                WEEKS
+                            <paper-button id="book-dialog-extend-button"
+                                          raised
+                                          on-click="_requestLoanExtension">
+                                EXTEND FOR TWO WEEKS
                             </paper-button>
                         </template>
                         <template is="dom-if" if="[[_isBorrowedAndCannotBeExtended(book)]]">
@@ -166,7 +173,7 @@ <h3>RESERVED BY ANOTHER READER</h3>
             </div>
             <section>
                 <paper-dialog-scrollable>
-                    [[book.description]]
+                    <div class="book-description">[[book.description]]</div>
                 </paper-dialog-scrollable>
             </section>
         </paper-dialog>
diff --git a/client-web/test/exlibris-app/book-dialog_test.html b/client-web/test/exlibris-app/book-dialog_test.html
index d533f97..888fe47 100644
--- a/client-web/test/exlibris-app/book-dialog_test.html
+++ b/client-web/test/exlibris-app/book-dialog_test.html
@@ -32,6 +32,8 @@
     <script src="./test_variables.js"></script>
 
     <link rel="import" href="../../src/exlibris-app/book-dialog.html">
+    <link rel="import" href="./test_variables.js">
+    <link rel="import" href="../../src/exlibris-app/book_values.html">
 </head>
 <body>
 
@@ -43,7 +45,15 @@
 
 <script>
     suite('book-dialog', function () {
-        const SYNOPSIS_SELECTOR = ".bookContent >.synopsis";
+        const TEST_BOOK = TEST_BOOKS[0];
+        const IMAGE_SELECTOR = 'iron-image';
+        const BOOK_TITLE_SELECTOR = '.head-region > .head-info > .head-text > h1';
+        const BOOK_AUTHOR_SELECTOR = '.head-region > .head-info > .head-text > h3';
+        const BOOK_FULL_STATUS_MESSAGE_SELECTOR = '.head-region > .head-info > .head-text > h2';
+        const BOOK_DESCRIPTION = '.book-description';
+        const RESERVE_CANCEL_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-cancel-button';
+        const RESERVE_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-reserve-button';
+        const EXTEND_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-extend-button';
 
         let bookDialog;
         setup(() => {
@@ -51,8 +61,53 @@
         });
 
         test('should not display without open() call.', function () {
-            console.log(bookDialog.$.dialog);
+            const modal = bookDialog.$.dialog;
+            assert.isFalse(modal.opened);
         });
+
+        test('should display when open() called.', function () {
+            const modal = bookDialog.$.dialog;
+            assert.isFalse(modal.opened);
+            bookDialog.open();
+            assert.isTrue(modal.opened);
+        });
+
+        test('should display book image, title, author and description.', function () {
+            bookDialog.set('book', TEST_BOOK);
+            bookDialog.open();
+            const dialogShadowRoot = bookDialog.shadowRoot;
+            const bookCover = dialogShadowRoot.querySelector(IMAGE_SELECTOR);
+            const bookTitle = dialogShadowRoot.querySelector(BOOK_TITLE_SELECTOR);
+            const bookAuthor = dialogShadowRoot.querySelector(BOOK_AUTHOR_SELECTOR);
+            const bookFullStatusMessage = dialogShadowRoot.querySelector(BOOK_FULL_STATUS_MESSAGE_SELECTOR);
+            const bookDescription = dialogShadowRoot.querySelector(BOOK_DESCRIPTION);
+
+            assert.equal(bookCover.src, TEST_BOOK.image);
+            assert.equal(bookTitle.innerHTML, TEST_BOOK.title);
+            assert.equal(bookAuthor.innerHTML, TEST_BOOK.author);
+            assert.equal(bookFullStatusMessage.innerHTML, TEST_BOOK.fullStatusMessage);
+            assert.equal(bookDescription.innerHTML, TEST_BOOK.description);
+        });
+
+        test('should display `RESERVE` button when book status is `EXPECTED` and fire event on click.', function (done) {
+            const expectedBook = Object.assign(TEST_BOOK, {status: bookStatus.EXPECTED});
+            bookDialog.set('book', expectedBook);
+            bookDialog.addEventListener('book-dialog-reserve-book', function (e) {
+                const bookId = e.detail.bookId;
+                assert.equal(bookId, expectedBook.id);
+                done();
+            });
+
+            bookDialog.open();
+            const dialogShadowRoot = bookDialog.shadowRoot;
+            flush(function () {
+                const reserveButton = dialogShadowRoot.querySelector(RESERVE_BUTTON_SELECTOR);
+                assert.isNotNull(reserveButton, 'Button is not displayed');
+                assert.equal(reserveButton.innerHTML.trim(), 'RESERVE');
+                reserveButton.click();
+            });
+        });
+
     });
 </script>
 </body>
diff --git a/client-web/test/exlibris-app/test_variables.js b/client-web/test/exlibris-app/test_variables.js
index 5e720e4..fdd4128 100644
--- a/client-web/test/exlibris-app/test_variables.js
+++ b/client-web/test/exlibris-app/test_variables.js
@@ -26,7 +26,8 @@ const TEST_BOOKS = [{
     category: "Biography",
     description: "В основу этой биографии легли беседы с самим Стивом Джобсом, а также с его родственниками, друзьями, врагами, соперниками и коллегами. Джобс никак не контролировал автора. Он откровенно отвечал на все вопросы и ждал такой же честности от остальных. Это рассказ о жизни, полной падений и взлетов, о сильном человеке и талантливом бизнесмене, который одним из первых понял: чтобы добиться успеха в XXI веке, нужно соединить креативность и технологии.",
     status: "available",
-    statusMessage: "3 AVAILABLE"
+    statusMessage: "3 AVAILABLE",
+    fullStatusMessage: '3 available.' + '\n' + 'Scan QR code to borrow.'
 }, {
     id: "123456790",
     title: "Эйнштейн. Его жизнь и его Вселенная",
@@ -35,6 +36,7 @@ const TEST_BOOKS = [{
     category: "Biography",
     description: "Уолтер Айзексон, автор знаменитой биографии Стивена Джобса, написал книгу об одном из самых известных ученых XX века, Альберте Эйнштейне. Он не только подробно и доступно изложил суть научных концепций и открытий автора теории относительности, но и увлекательно рассказал об Эйнштейне-человеке. В книге приводится множество документальных материалов – письма, воспоминания, дневниковые записи. Перед нами встает образ удивительно талантливого человека, мечтателя и бунтаря, гуманиста и мыслителя.",
     status: "reserved",
-    statusMessage: "EXPECTED ON 28.05.18"
+    statusMessage: "EXPECTED ON 28.05.18",
+    fullStatusMessage: "Reserved for you.\nExpected on 28.05.18"
 }];
 

From 8a3b05b472675d5166a44a76a974614e024cae00 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Thu, 29 Mar 2018 14:50:31 +0300
Subject: [PATCH 17/92] Complete book dialog buttons tests.

---
 .../test/exlibris-app/book-dialog_test.html   | 137 ++++++++++++++++++
 1 file changed, 137 insertions(+)

diff --git a/client-web/test/exlibris-app/book-dialog_test.html b/client-web/test/exlibris-app/book-dialog_test.html
index 888fe47..6a28009 100644
--- a/client-web/test/exlibris-app/book-dialog_test.html
+++ b/client-web/test/exlibris-app/book-dialog_test.html
@@ -54,6 +54,8 @@
         const RESERVE_CANCEL_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-cancel-button';
         const RESERVE_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-reserve-button';
         const EXTEND_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-extend-button';
+        const RESERVED_BY_ANOTHER_SELECTOR = '.head-region > .head-info > .head-button > h3';
+        const CLOSE_BUTTON_SELECTOR = '.close-button > paper-icon-button';
 
         let bookDialog;
         setup(() => {
@@ -72,6 +74,21 @@
             assert.isTrue(modal.opened);
         });
 
+        test('should close on close button click called. Tan fire close event.', function (done) {
+            bookDialog.addEventListener('book-dialog-closed', function () {
+                done();
+            });
+            const dialogShadowRoot = bookDialog.shadowRoot;
+            const modal = bookDialog.$.dialog;
+            assert.isFalse(modal.opened);
+            bookDialog.open();
+            assert.isTrue(modal.opened);
+
+            const closeButton = dialogShadowRoot.querySelector(CLOSE_BUTTON_SELECTOR);
+            closeButton.click();
+            assert.isFalse(modal.opened);
+        });
+
         test('should display book image, title, author and description.', function () {
             bookDialog.set('book', TEST_BOOK);
             bookDialog.open();
@@ -108,6 +125,126 @@
             });
         });
 
+        test('should display `CANCEL RESERVATION` button when book status is `RESERVED` and fire event on click.', function (done) {
+            const expectedBook = Object.assign(TEST_BOOK, {status: bookStatus.RESERVED});
+            bookDialog.set('book', expectedBook);
+            bookDialog.addEventListener('book-dialog-cancel-reservation', function (e) {
+                const bookId = e.detail.bookId;
+                assert.equal(bookId, expectedBook.id);
+                done();
+            });
+
+            bookDialog.open();
+            const dialogShadowRoot = bookDialog.shadowRoot;
+            flush(function () {
+                const cancelButton = dialogShadowRoot.querySelector(RESERVE_CANCEL_BUTTON_SELECTOR);
+                assert.isNotNull(cancelButton, 'Button is not displayed');
+                assert.equal(cancelButton.innerHTML.trim(), 'CANCEL RESERVATION');
+                cancelButton.click();
+            });
+        });
+
+        test('should display `EXTEND FOR TWO WEEKS` button when book status is `SHOULD_RETURN_SOON`' +
+            ' and available for extension. Than fire event on click.', function (done) {
+            const bookAllowedToExtend = Object.assign(TEST_BOOK, {
+                status: bookStatus.SHOULD_RETURN_SOON,
+                isAllowedLoanExtension: true
+            });
+            bookDialog.set('book', bookAllowedToExtend);
+            bookDialog.addEventListener('book-dialog-extend-loan', function (e) {
+                const bookId = e.detail.bookId;
+                assert.equal(bookId, bookAllowedToExtend.id);
+                done();
+            });
+
+            bookDialog.open();
+            const dialogShadowRoot = bookDialog.shadowRoot;
+            flush(function () {
+                const extendButton = dialogShadowRoot.querySelector(EXTEND_BUTTON_SELECTOR);
+                assert.isNotNull(extendButton, 'Button is not displayed');
+                assert.equal(extendButton.innerHTML.trim(), 'EXTEND FOR TWO WEEKS');
+                extendButton.click();
+            });
+        });
+
+        test('should display `EXTEND FOR TWO WEEKS` button when book status is `OVERDUE`' +
+            ' and available for extension. Than fire event on click.', function (done) {
+            const bookAllowedToExtend = Object.assign(TEST_BOOK, {
+                status: bookStatus.OVERDUE,
+                isAllowedLoanExtension: true
+            });
+            bookDialog.set('book', bookAllowedToExtend);
+            bookDialog.addEventListener('book-dialog-extend-loan', function (e) {
+                const bookId = e.detail.bookId;
+                assert.equal(bookId, bookAllowedToExtend.id);
+                done();
+            });
+
+            bookDialog.open();
+            const dialogShadowRoot = bookDialog.shadowRoot;
+            flush(function () {
+                const extendButton = dialogShadowRoot.querySelector(EXTEND_BUTTON_SELECTOR);
+                assert.isNotNull(extendButton, 'Button is not displayed');
+                assert.equal(extendButton.innerHTML.trim(), 'EXTEND FOR TWO WEEKS');
+                extendButton.click();
+            });
+        });
+
+
+        test('should display `RESERVED BY ANOTHER READER` when book status is `BORROWED`' +
+            ' and extension not allowed.', function (done) {
+            const bookNotAllowedToExtend = Object.assign(TEST_BOOK, {
+                status: bookStatus.BORROWED,
+                isAllowedLoanExtension: false
+            });
+            bookDialog.set('book', bookNotAllowedToExtend);
+            bookDialog.open();
+
+            const dialogShadowRoot = bookDialog.shadowRoot;
+            flush(function () {
+                const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
+                assert.isNotNull(reservedByAnother, 'Row is not displayed');
+                assert.equal(reservedByAnother.innerHTML.trim(), 'RESERVED BY ANOTHER READER');
+                done();
+            });
+        });
+
+        test('should display `RESERVED BY ANOTHER READER` when book status is `OVERDUE`' +
+            ' and extension not allowed.', function (done) {
+            const bookNotAllowedToExtend = Object.assign(TEST_BOOK, {
+                status: bookStatus.OVERDUE,
+                isAllowedLoanExtension: false
+            });
+            bookDialog.set('book', bookNotAllowedToExtend);
+            bookDialog.open();
+
+            const dialogShadowRoot = bookDialog.shadowRoot;
+            flush(function () {
+                const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
+                assert.isNotNull(reservedByAnother, 'Row is not displayed');
+                assert.equal(reservedByAnother.innerHTML.trim(), 'RESERVED BY ANOTHER READER');
+                done();
+            });
+        });
+
+        test('should display `RESERVED BY ANOTHER READER` when book status is `SHOULD_RETURN_SOON`' +
+            ' and extension not allowed.', function (done) {
+            const bookNotAllowedToExtend = Object.assign(TEST_BOOK, {
+                status: bookStatus.SHOULD_RETURN_SOON,
+                isAllowedLoanExtension: false
+            });
+            bookDialog.set('book', bookNotAllowedToExtend);
+            bookDialog.open();
+
+            const dialogShadowRoot = bookDialog.shadowRoot;
+            flush(function () {
+                const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
+                assert.isNotNull(reservedByAnother, 'Row is not displayed');
+                assert.equal(reservedByAnother.innerHTML.trim(), 'RESERVED BY ANOTHER READER');
+                done();
+            });
+        });
+
     });
 </script>
 </body>

From 562b4c37b2dfce1ba23cd783759bf1de404f4189 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 30 Mar 2018 11:04:52 +0300
Subject: [PATCH 18/92] Add placeholder image to the book dialog.

---
 client-web/src/exlibris-app/book-dialog.html     |  14 +++++++++++++-
 .../exlibris-app/images/cover-placeholder.png    | Bin 0 -> 4916 bytes
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 client-web/src/exlibris-app/images/cover-placeholder.png

diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/book-dialog.html
index 59744ba..73c1780 100644
--- a/client-web/src/exlibris-app/book-dialog.html
+++ b/client-web/src/exlibris-app/book-dialog.html
@@ -65,6 +65,10 @@
                 --iron-image-height: 100%;
             }
 
+            .head-region > iron-image.hidden {
+                display: none;
+            }
+
             .head-region > .head-info {
                 display: flex;
                 width: 50%;
@@ -136,7 +140,8 @@
                 <paper-icon-button icon="close" on-tap="close"></paper-icon-button>
             </div>
             <div class="head-region">
-                <iron-image src="[[book.image]]"></iron-image>
+                <iron-image class$="[[_isImageLoaded(loaded)]]" src="src/exlibris-app/images/cover-placeholder.png"></iron-image>
+                <iron-image preload loaded="{{loaded}}" src="[[book.image]]"></iron-image>
                 <div class="head-info">
                     <div class="head-text">
                         <h1>[[book.title]]</h1>
@@ -222,6 +227,13 @@ <h3>RESERVED BY ANOTHER READER</h3>
                 };
             }
 
+            /**
+             * Used to set custom style for the placeholder image
+             * when the original image is loaded.
+             */
+            _isImageLoaded(loaded) {
+                return loaded ? 'hidden' : '';
+            }
             /**
              * Opens the modal dialog.
              */
diff --git a/client-web/src/exlibris-app/images/cover-placeholder.png b/client-web/src/exlibris-app/images/cover-placeholder.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6822c36259cb21f455039e2be3893fc636ff673
GIT binary patch
literal 4916
zcmbtYdpr~D+n*Wc5HqJq*tC!)Gg(ft7TM$w;i2@H(?nCsIjYUf`IJKsIph?T(`KQf
zGD*eI(}<O`CnCqlA>`fjd*6TFKi<FIzwYb0ug~?p?)!TmKG$_6owc{#C$V1w008VG
z5-gnrV>19CBo7t{0NY=i0tEo_KWTRo0AOWE?s$m^bhr<}$qoRxp$Py`;{bqPf+^}Z
z03Zwv0L+m90FyibKq<KJxucoDAQnorvl5#WR)vUa@52-Sg#&t@v9<*4C1h}40RT`l
zqUA|vnDPMUWX7SvsL_?Z)#7tuOACw2*O7M`%3+E7I)tPmWnu2f<%pHRA64&<N*?U4
z@qSBP09B%F4rCedMw;geH?ED;ExN{QB>YM69$3<1pW&E`Y|GD|V><l5gs%}?xMDV*
z)8&z<g$4ad@|!)V9FxagqMgKjJ}tq*R3aE16=0T;Iv_<Rdu!w#0|H(_7J=}Sv^2>p
zwHuU(`-P~N4quzOH64NDgRPg6txCO)29iBD|LC31uZ#Gj%GoXE?AMJpEG@I7;c@<p
zpNoA(lG}jOjJst<+ihYlx4OADH74hm-@RLnDV~X$;ug>T1&bp?Vlfqt$uiYD=^`X%
zNO5JrqW}C8Wo;Me62xg4Gl!NkH2;3XRLx@xoj+FRt59?PDlh8Z>SbITXH%mQyiyK}
zza~}ObJHZf_J<c{Pqaz0f@i*bl~=hsJhK|Ah=2GwKOjL~_G5-ipsp3CoDy^|`j+AL
zvby84SMCy7D(R>jh{0IsI7pgme~bXd<OUVb+-0BBIMIMMKjNMEp<4TtDoMc3J8W}t
zy#ae;O(ARZ&)g+VkSGOFOpyQfoGRKG{AFg=tY??1PlohL5oHhIEnIV;2(>(+OSLn9
zEY|+K!qVp8+ha1iBG8j%%sG^lQ0G}rZP-R(Rlq&=8QE(eRKXn{31_8#RybW2Hvumr
zb8)S`Sci~qX|Oh&W|GC-cob8$21GDQmTMYESI=zBpSW4=WTP5qz~&!M)|S1Y?_4@g
z<R~35dezcmdR!${8KNXEdd?BPdO{~dz<FwHZjoE>X!Nf}_C~Q9!&%4Le`zK(XCe}o
zppolzL}_tkKSxP;?NiI1kT@|;9_r71Ln^$R2Kx6nO~G7zer+T7c>as#HEM-WnBK>;
z@zqmCcaOB?b!qV8wR5e=OS605Z%xRF(wTDT^CcY~Fp;tPAF7rGz309+3&K9vaSr@e
z`vLfum)U{%NTDGkw=kp?t|@MGbS=unA;dzQNY~WG7v6zDk&-L88k9L9ez2a2af>Rh
zeDw9gOuIQXj%mQIs_zaqIuL&y00J{vkjZwLE8C$jEgW`1(6S->FTzWbu0<|IKYwH&
zDR$erEfwgS7Se-#iP0^3VaFRDi-kPznlGv-XB_r3J0NrFFp7dovbK)~HTd-!JMj7&
zBoEt5cvhGu;>cm-L$0|4ZpQ$ksb1utouuUvvyPr>o$Z(%t(cb)mHYG-icicsX;<ja
z8A%(SenNFuqN)>Rh3dD>iuytnzvPnvh)g%II3m<L?9JS}$IPxzsTT^QM8_KTONkaB
zJa=pQn~%TT`<1d1+EsjaGEH8eFzEQ!>!D-hw1{x;C~xrThV84_pyKII^$!wX6VtUD
z<0MKy053v@>_gtp-5t<#yZJ_^4JO()E_Xz@lW=XYWVH2nLB`(X(&)>WAh`!~GG+ax
zcQfV9-f@fT&RYi0j9ysUdZv#Z{P|ewfn~M^klP-7c{p`xS){p%ce+*2?IQbm%Kqg2
z1~4vnj>-v^K5y`|`;RHly@A`cx3`xR8l?>*eTU~Q2@h<-$=wxa!oZJUKIQYf!x$bv
z+JUaL`E6deMFu4$tN{`bM>b@c;QNjV!)*P+M13;lV{hDySQXn_cDTLnNhTVx6U917
zQBSrD-(Qf5XLH7*eY6xO%VZ_rpsWbPa$%^CMPTAEEl#^8YeT{HO<g<L%eFzHZQLf6
z{_xar&Ts40vEiI+FnnlXer1%Quqa6M90bqJ>Vl*H44$M(_Fgf_<0_w~XuVw5uxqe!
zoxFL%v}{H;^`sdF7E^h?l5AY~%)+C^kS;`vblnOUPVqhDRZQ>zLyo!nk1EBqQ~+r1
ziT<J>JpXbJ6<nZt2PgEvNZ%AegWIY$9O3^(^$PY5KLwR|cq*K0Pw)WsPj<}5gFu!;
z^U3hw-ETofDyFhmR<1=*lY8n2piAHK=NXP*e20F}dOHCDoE$RX%P=gd(kHTCpq+5w
zPFuEm7M$wM{SyYVl&fD{O2EpUE!#jQqg525BIv5I67PHCNF4#;ctT00@x-xc1TKy%
z9>JCa((v!aH+=PwiZtbG_il<GrL5!O@at6dpNFU8Y?IYlj@P5_6p<XWN6=6RDqWQ=
zcNz*x`CjR(m8Bg^y2eABdfAYG+%PSE5)ue*t4imKpFzc1*>UY*tVHItgJ$!mB&hfI
z_<+!AP)R0Vh6TnMew=3@;efQid+gmf8j$_v1x08Yf(k2Vt3Xpoj^za}GTq|zX?)3p
z=u%DTs=}-OQ%@|{krFBo)*YqONTpe1y$&n*hth%(NFo!SUMtvykk?7$MqfS9|LAyN
zJ4$+Fp79jS*2YF_1TNI=d<)|CSY4NRPx&jO+z$`dnQo`t@6gC3RnUXb7qn<#q>*uu
zB6$^g5GY>vjpW1abO*|!Vk*9nxYJ1~qzQVqqz|^Y9T)6~&btUvqHz*@EH=QDSS~m#
zt?S&8HDkBLK&B8Y44R0Br{xDIdVfb|0+~iX*MLcBY)~>9R&=8>4cTN5l*g5wGucO=
z6bjSZNk+b($ugk$F8ZVhLGUPU5^k9wk|^04mx|g?tC~0LSB966LJ;eSjyKw0;H<F8
zlT?T`CI~lAJ)6jI=(44EbP~N~;n~(7u~|bxrGQjx%)iKy5Y#_i?eo^hz%o8T7zW>p
zD4)N;DvG)UAu^dR6s|M~4sL_^kUvvA6-cp+M{jLakl4B|RIF{V@w#onf{LFHP*3|U
z_sL0$N3M_<7UEO6&-=TMsHvNR4_lb#?wtFmH}`w<i@0mACy>5aYk0rdLl9}18nk|p
zA{E7bvd>$+ojBRLm@mqbn?NG2VuI*H3BhlT>J51F)+FeUya1J?n_#J-0m=1)+Qj0d
ze4<Y!vJI=kGpRk$pe6x#QSotZCAGx0CA!$r?G8ZwEBM;9!lO0q`MrzR=X=%i(x8bI
z%;fnI{^6?PMa%^Sg1t`lyW;;Cj~4v5k^7{@$F{JYk^{mrT*f7}11?bR;$W;~_Kz!b
zGqdF_#ed6`T2pMlryZ!g>^dRRtA<MD>j-7Jx%eOFPd^56UB#0;t973b{JQz3lX5T8
z)j#amGv@~^S(QWL#F{zVa@!)BWz&%MO0h}H;TgUa7F%%WL##{CvA@Y8qNt`bJLg{*
zVr_l9x2Jjro!0DiDYo}Qo>{26yZETk(M?0gRvv0%u@YKtlpMfHjb@WRBBGGvO2nHz
zQl(5KQZl_?$3;5J`KYw3`Xj$oh)fb2S!t^F!OVb3M}Z_ne-oeN-$>VAn}`7juHVrg
zJ4=!BL$LW^?+#bu=}AYsw(%NW)(}b@spdlG_%5iX)HcK&QgiW<`X@6@zTl9uNJb#A
z^U}L?ejOwZrRGfMJoU};u10w!Sqq8MU%$WA-$5eS6=pOkIC*0=uVhRW(z*2Uq<=&T
zG*`4Eq1QFZ)yN|q<>SP-3-@ZX(1*A>krhzB9NQ79>FdhL1~)(9>v-AZxhy09vBjQg
z&l1=*_(PO@bTw0m$PZJ)q?4))_<5iD61Ltrw>~zL>m*lq;LRk8U9{eliEu#-*O6Ir
zIcg%)UBtm-WS~c|D^7VAd(Qs2%2xm~MJ(5Upy=3zL(E91S$0}axbg}T*%n?X^Y_vj
z8O%WfR`aahDOXocJ5?6Oau;2xxF;Fn#lEPB_-OW!goaH#8PYi@^8WFDw9zS>f(4AM
z{YnY2lhhW#a%=+M;n3SUsj}EFerGh?T~^!3URXQK^hv@Hf1A})WnfH{&>e#P_0;rh
zzZ*e9EuW!_?QSR05s|(rwrm#+xO-?Q*IGRM-a-SD<Ke9Kz^an3!_U$UDeWqM5-i|K
zS6SH?tfqV?pvgwmYYQlr!ELAHF`l6{rSH`GU#;ELoG5gSE5yQ+($H2@Ermforjg!?
zWHBk{;-O6P_f&wG!^d&o?NqyEq#TBCLg#Sgw0s+)u<>2lAWC=}hGRhQ`IIl#Xu>hN
zy#Bfc+e|y%L20sbL>|9Plh0!EFzsY54Sc&jg~?AcdHR6Gay&nON_B)M-h~>Pw^V(P
zJQ!4N%aRETz3l#+LhrHf|9mDXllkUWfAzOo|Bq!G&=XadOzq7R2Gwo(O)_wh!E=)N
zbl8!fw@6-dA7oT9m#>Decgi5$L?+vfipV4{IrioJ8`3~aRf@=olxyUroi^J_-ciEi
zZ}zNA>D`e*pVo(X=wm--j&4;kj4Ok5cYjDYrr3GVh!+!84y%)1(#bmOq8wZh5{Q?b
z6w9gsw)kjT<$&!7gq^%Cqi}Tw(pgdjbEf-3T()|m8}Zwu2o_uaPV)BF>Dy*6Yt_dz
z5Cb|^+MSDEG@Fyu34R0e5Bd{}SGNSoHCvD@2k!DFc(1J|UBOA`E2JEId6~Win>2aX
zpqJ4b>kGR(N9WMehPTdlPOTUz4n)7IdrO3$4T5#eMsDt8*WWV69&f0QE_^@@WkRc!
zFJ?9=Af_aNahd2QA`u~5VUWg9gt3FQyYRJrye+d0Pru8n!#~`l-}2Pczslj@xX4)T
zHV-K3q1p4@l-oN4-JS<5URa12E{>(OI@IV)dgFS{H<U<<8}Be`sqXS{5%Gsq^q&WC
z;L5GvBP|gd3qd(1{m}ZZV54*&V?j-#1r!1b{;xcjuYbE3?<TxziT=4&<x>~}-;DP)
zG-CVTNOTG`^gqf4d+Q%$RItHBFvy#0-WSrhH}WOQr1^JQdKJ&1^M-;SEHFv$L+nl#
zqeKG&hm?q5GjuZ2J!LGme=IGv96p7$HyB$)1!VS*_{#$iBgv`y!o5#+^`j=9Ic#jq
zJlgYk&<|Z98W-BXJ@vwhfc_HHbkonjZ!IYoBv@c+W?Q0Iu64w5-tPUF-y0Sy@^3Lc
z(<-t4NeGHnPF~Rq|6hkB7)HMLXP(XM&GB}3cl$l>t^}Kn=2)biPblrw?KHpd9|vJD
zO3Sqql_6(OCNgl4ECJ@P<j@<}%tr_B@5%hW{>>cyKwfB;G~n){7_W#hPP0)BOsfC9
zwYa`MY>|zZjX5v#$6%F@9o^kXFQy%KF4!au0)EWNQ*;azFOmg<!17KgZ7?y{`t9J#
zWKW94?tRal&=>>tgIl7kdoDJQWZ%xOZv7s<GPAm{uyE5f=k;vp4fj1{{IvrKgpJW(
zFQSf7ZE&CM3*>Z;q6M{tT{6_^_!YMDe~<|z*2h08c;PKkC#Ef?_I{83-dxyvcOqGE
zi=KPCd=8C>INo?Wv@d5Zdm?mq@|QD%rvy_m!2^+2gngz#Ix-$;6383jn(HrM^W+_Q
zs6y!*Jt2Dc%{yZ;QL9^f&$jyXUK%M?oJ|yd+H8EA-`m{WJoBj=ttNeH$5Cp^tLAGO
z2j{QQ+E)`h28Vd()||$bfM}UGs)7;*SXz%3t$Z|oyuSYT^8LMacE;XLRkMY9M&roK
z7u#h;Rq2y&f?J<GGv5bB=HXBhqNf@pUKVX?(r`5$T~x?LI2=GbeOM6~_hAqwd{1n<
zr#{_tZ+<ytZ-f7;b<1I9+qmvZdex0qlcLU#2GL8iz)pB;TRDfsmJp=Nrb57#hs?)t
z2#^M#wQ1v>;E-R?R741K?3Vt^5_RdN&kmza&(0-W*ZX_sk-z0(!!>CJJ~UJaCPh|g
ztzW(f0<r|JFpdO>L*r3vR0;5`uITH35YKL(7=AIoptG2FCb#O*ML%fcUGXnT)}YuV
z7ZSR!V_Ra(3SOK)AcTP9z*1mG5xg_5Bwb&r(dxE=y+v7b*`)w$T_bkYf-sCL{5nzp
zDV39$8|lf!j3FU?CP(NvE*vBd_Hso)-kEii)SkYwP#rf*wpyY;Wx5@Lrby#GV5gS7
zrd2?bgMzvlrB;F45zS|~Us7XcjeB$#D4DVDY}!rZNoY>9!I4!vAk96=MFY|&m8dn1
zhyVZjG`v?p(}I+i@QUVtyGn;bt=vL=y+Zv=e6ITm1^@=FZ={Ph(8U-#>mM^gV@-~s
pkDxIoXtYwB$D{w{5OmcyfE@LIJCKY1Q4lx)h*tKNb$C+je*utH)q?;4

literal 0
HcmV?d00001


From 91268619375e772ba75509555bbd6a928d16cd19 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 30 Mar 2018 11:32:30 +0300
Subject: [PATCH 19/92] Simplify book dialog routing.

---
 client-web/src/exlibris-app/exlibris-app.html | 33 ++++++++-----------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 22d4db6..55fdea9 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -91,12 +91,10 @@
                 tail="{{subroute}}"></app-route>
         <app-route
                 route="{{subroute}}"
-                pattern="/:title"
-                tail="{{subrouteTail}}"></app-route>
-        <app-route
-                route="{{subrouteTail}}"
-                pattern="/:id"
-                data="{{pathBookId}}"></app-route>
+                pattern="/:title/:id"
+                data="{{subrouteData}}"
+                active="{{subrouteActive}}"></app-route>
+
         <app-drawer-layout fullbleed narrow="{{narrow}}">
             <!-- Drawer content -->
             <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
@@ -195,7 +193,6 @@
                     <book-grid data-name="should-return-books"
                                books="[[shouldReturnBooks]]"
                                on-book-tile-click="_handleBookClick"></book-grid>
-                    <div data-name="book-details"></div>
                     <div data-name="view404">View404</div>
                 </iron-pages>
             </app-header-layout>
@@ -285,15 +282,16 @@
                         statePath: 'expectedSoonBooks'
                     },
 
+                    /**
+                     * The page to show in the book dialog backdrop.
+                     */
                     previousPage: String,
-
-                    pathBookId: String
                 };
             }
 
             static get observers() {
                 return [
-                    '_routePageChanged(routeData.page)'
+                    '_routePageChanged(routeData.page, subrouteData.id, subrouteActive)'
                 ];
             }
 
@@ -304,24 +302,21 @@
              * the id from URL, opens modal dialog with specified book,
              * selects the appropriate page to show in the dialog background.
              */
-            _routePageChanged() {
+            _routePageChanged(page, bookId, subrouteActive) {
                 if (!this.route.path) {
                     this.set('route.path', '/all-books');
                 }
 
-                if (this.routeData.page === 'book-details' && this.pathBookId.id) {
+                if (page === 'book-details' && subrouteActive) {
                     Polymer.RenderStatus.afterNextRender(this, function () {
-                        const book = this._findBookById(this.pathBookId.id);
+                        const book = this._findBookById(bookId);
                         const bookDialog = this.$.dialog;
-                        bookDialog.book = book;
+                        bookDialog.book = book ? book : {title: 'Book not found.'};
                         bookDialog.open();
                     });
 
-                    if (!this.previousPage) {
-                        this.$.pages.selected = 'all-books';
-                    } else {
-                        this.$.pages.selected = this.previousPage;
-                    }
+                    // To display the proper content under the dialog backdrop.
+                    this.$.pages.selected = this.previousPage ? this.previousPage : 'all-books';
                 }
 
                 this.previousPage = this.$.pages.selected;

From 3a163adde63f7c1c8b74306f7dc65a246eda5462 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 30 Mar 2018 13:08:04 +0300
Subject: [PATCH 20/92] Add app show `view404` on unknown book id.

---
 client-web/src/exlibris-app/exlibris-app.html | 35 +++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 55fdea9..fa95b59 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -88,12 +88,12 @@
                 route="{{route}}"
                 pattern="/:page"
                 data="{{routeData}}"
-                tail="{{subroute}}"></app-route>
+                tail="{{subRoute}}"></app-route>
         <app-route
-                route="{{subroute}}"
+                route="{{subRoute}}"
                 pattern="/:title/:id"
-                data="{{subrouteData}}"
-                active="{{subrouteActive}}"></app-route>
+                data="{{subRouteData}}"
+                active="{{subRouteActive}}"></app-route>
 
         <app-drawer-layout fullbleed narrow="{{narrow}}">
             <!-- Drawer content -->
@@ -286,12 +286,22 @@
                      * The page to show in the book dialog backdrop.
                      */
                     previousPage: String,
+
+                    /**
+                     * The subRoute parameters.
+                     */
+                    subRouteData: Object,
+
+                    /**
+                     * Indicates that the `subRoute` matches the `pattern`.
+                     */
+                    subRouteActive: Boolean
                 };
             }
 
             static get observers() {
                 return [
-                    '_routePageChanged(routeData.page, subrouteData.id, subrouteActive)'
+                    '_routePageChanged(routeData.page, subRouteActive)'
                 ];
             }
 
@@ -302,17 +312,22 @@
              * the id from URL, opens modal dialog with specified book,
              * selects the appropriate page to show in the dialog background.
              */
-            _routePageChanged(page, bookId, subrouteActive) {
+            _routePageChanged() {
                 if (!this.route.path) {
                     this.set('route.path', '/all-books');
                 }
 
-                if (page === 'book-details' && subrouteActive) {
+                if (this.routeData.page === 'book-details' && this.subRouteActive) {
                     Polymer.RenderStatus.afterNextRender(this, function () {
+                        const bookId = this.subRouteData.id;
                         const book = this._findBookById(bookId);
-                        const bookDialog = this.$.dialog;
-                        bookDialog.book = book ? book : {title: 'Book not found.'};
-                        bookDialog.open();
+                        if (book) {
+                            const bookDialog = this.$.dialog;
+                            bookDialog.book = book;
+                            bookDialog.open();
+                        } else {
+                            this.set('route.path', '/view404');
+                        }
                     });
 
                     // To display the proper content under the dialog backdrop.

From 40a25993fac68a601a2e311baad58dff030d931c Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 3 Apr 2018 13:55:43 +0300
Subject: [PATCH 21/92] Change book-dialot to book details page.

---
 client-web/src/exlibris-app/exlibris-app.html | 78 ++++---------------
 ...dialog.html => exlibris-book-details.html} | 39 ----------
 .../test/exlibris-app/book-dialog_test.html   |  2 +-
 3 files changed, 17 insertions(+), 102 deletions(-)
 rename client-web/src/exlibris-app/{book-dialog.html => exlibris-book-details.html} (89%)

diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 14e1d7e..8a09df4 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -37,10 +37,10 @@
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
 
-<link rel="import" href="menu/exlibris-menu-drawer.html">
+<link rel="import" href="./menu/exlibris-menu-drawer.html">
 <link rel="import" href="./book-grid.html">
 <link rel="import" href="./book_values.html">
-<link rel="import" href="./book-dialog.html">
+<link rel="import" href="./exlibris-book-details.html">
 
 <dom-module id="exlibris-app">
     <template>
@@ -77,11 +77,6 @@
                 pattern="/:page"
                 data="{{routeData}}"
                 tail="{{subRoute}}"></app-route>
-        <app-route
-                route="{{subRoute}}"
-                pattern="/:title/:id"
-                data="{{subRouteData}}"
-                active="{{subRouteActive}}"></app-route>
 
         <app-drawer-layout fullbleed narrow="{{narrow}}">
             <!-- Drawer content -->
@@ -121,15 +116,11 @@
                     <book-grid data-name="should-return-books"
                                books="[[shouldReturnBooks]]"
                                on-book-tile-click="_handleBookClick"></book-grid>
+                    <exlibris-book-details data-name="book-details"></exlibris-book-details>
                     <div data-name="view404">View404</div>
                 </iron-pages>
             </app-header-layout>
         </app-drawer-layout>
-        <book-dialog id="dialog"
-                     on-book-dialog-closed="_handleDialogClose"
-                     on-book-dialog-cancel-reservation="_cancelBookReservation"
-                     on-book-dialog-reserve-book="_reserveBook"
-                     on-book-dialog-extend-loan="_extendBookLoanPeriod"></book-dialog>
     </template>
 
     <script>
@@ -154,6 +145,18 @@
 
             static get properties() {
                 return {
+                    /**
+                     * Defines count badges of the menu items.
+                     */
+                    countBadges: {
+                        type: Object,
+                        value: {
+                            overdue: 1,
+                            shouldReturnSoon: 1,
+                            reserved: 1,
+                            borrowed: 1
+                        }
+                    },
 
                     /**
                      * The array of all books from library.
@@ -202,42 +205,12 @@
                         type: Array,
                         statePath: 'expectedSoonBooks'
                     },
-
-                    /**
-                     * The page to show in the book dialog backdrop.
-                     */
-                    previousPage: String,
-
-                    /**
-                     * The subRoute parameters.
-                     */
-                    subRouteData: Object,
-
-                    /**
-                     * Indicates that the `subRoute` matches the `pattern`.
-                     */
-                    subRouteActive: Boolean
-                };
-                return {
-
-                    /**
-                     * Defines count badges of the menu items.
-                     */
-                    countBadges: {
-                        type: Object,
-                        value: {
-                            overdue: 1,
-                            shouldReturnSoon: 1,
-                            reserved: 1,
-                            borrowed: 1
-                        }
-                    }
                 };
             }
 
             static get observers() {
                 return [
-                    '_routePageChanged(routeData.page, subRouteActive)'
+                    '_routePageChanged(routeData.page)'
                 ];
             }
 
@@ -252,25 +225,6 @@
                 if (!this.route.path) {
                     this.set('route.path', '/all-books');
                 }
-
-                if (this.routeData.page === 'book-details' && this.subRouteActive) {
-                    Polymer.RenderStatus.afterNextRender(this, function () {
-                        const bookId = this.subRouteData.id;
-                        const book = this._findBookById(bookId);
-                        if (book) {
-                            const bookDialog = this.$.dialog;
-                            bookDialog.book = book;
-                            bookDialog.open();
-                        } else {
-                            this.set('route.path', '/view404');
-                        }
-                    });
-
-                    // To display the proper content under the dialog backdrop.
-                    this.$.pages.selected = this.previousPage ? this.previousPage : 'all-books';
-                }
-
-                this.previousPage = this.$.pages.selected;
             }
 
             /**
diff --git a/client-web/src/exlibris-app/book-dialog.html b/client-web/src/exlibris-app/exlibris-book-details.html
similarity index 89%
rename from client-web/src/exlibris-app/book-dialog.html
rename to client-web/src/exlibris-app/exlibris-book-details.html
index 73c1780..97d1ed5 100644
--- a/client-web/src/exlibris-app/book-dialog.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -42,14 +42,6 @@
                 position: center;
             }
 
-            paper-dialog {
-                display: flex;
-                flex-direction: column;
-                height: 60%;
-                width: 40%;
-                min-width: 550px;
-            }
-
             .head-region {
                 display: flex;
                 flex-direction: row;
@@ -126,19 +118,7 @@
                 color: var(--app-secondary-color, black);
             }
 
-            .close-button {
-                position: absolute;
-                right: 4px;
-                top: 4px;
-                padding: 0;
-                margin: 0;
-            }
         </style>
-
-        <paper-dialog id="dialog" with-backdrop on-opened-changed="_handleOpenedChange">
-            <div class="close-button">
-                <paper-icon-button icon="close" on-tap="close"></paper-icon-button>
-            </div>
             <div class="head-region">
                 <iron-image class$="[[_isImageLoaded(loaded)]]" src="src/exlibris-app/images/cover-placeholder.png"></iron-image>
                 <iron-image preload loaded="{{loaded}}" src="[[book.image]]"></iron-image>
@@ -176,12 +156,6 @@ <h3>RESERVED BY ANOTHER READER</h3>
                     </div>
                 </div>
             </div>
-            <section>
-                <paper-dialog-scrollable>
-                    <div class="book-description">[[book.description]]</div>
-                </paper-dialog-scrollable>
-            </section>
-        </paper-dialog>
     </template>
 
     <script>
@@ -234,19 +208,6 @@ <h3>RESERVED BY ANOTHER READER</h3>
             _isImageLoaded(loaded) {
                 return loaded ? 'hidden' : '';
             }
-            /**
-             * Opens the modal dialog.
-             */
-            open() {
-                this.$.dialog.open();
-            }
-
-            /**
-             * Closes the modal dialog.
-             */
-            close() {
-                this.$.dialog.close();
-            }
 
             _isReserved(status) {
                 return status === bookStatus.RESERVED;
diff --git a/client-web/test/exlibris-app/book-dialog_test.html b/client-web/test/exlibris-app/book-dialog_test.html
index 6a28009..e567ecf 100644
--- a/client-web/test/exlibris-app/book-dialog_test.html
+++ b/client-web/test/exlibris-app/book-dialog_test.html
@@ -31,7 +31,7 @@
     <script src="./../../bower_components/web-component-tester/browser.js"></script>
     <script src="./test_variables.js"></script>
 
-    <link rel="import" href="../../src/exlibris-app/book-dialog.html">
+    <link rel="import" href="../../src/exlibris-app/exlibris-book-details.html">
     <link rel="import" href="./test_variables.js">
     <link rel="import" href="../../src/exlibris-app/book_values.html">
 </head>

From 22b142ea4631f61d28dd3d41d9eabe718dba60a7 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 3 Apr 2018 15:41:19 +0300
Subject: [PATCH 22/92] Make book details page styles work with mobile screen
 view.

---
 client-web/src/exlibris-app/exlibris-app.html |   4 -
 .../exlibris-app/exlibris-book-details.html   | 220 ++++++++++--------
 2 files changed, 129 insertions(+), 95 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 8a09df4..88235c5 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -216,10 +216,6 @@
 
             /**
              * Checks for an empty route passed to redirect user to the default app view.
-             *
-             * If the route matches the `book-dialog` route, searches for the book by
-             * the id from URL, opens modal dialog with specified book,
-             * selects the appropriate page to show in the dialog background.
              */
             _routePageChanged() {
                 if (!this.route.path) {
diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 97d1ed5..48de6f7 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -34,170 +34,220 @@
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="./book_values.html">
 
-<dom-module id="book-dialog">
+<dom-module id="exlibris-book-details">
     <template>
         <style>
+
             :host {
-                display: block;
-                position: center;
+                display: flex;
+                justify-content: center;
+            }
+
+            .book-card {
+                @apply --layout-vertical;
+                border-radius: 3px;
+                box-shadow: 4px 4px 10px #888888;
+                background-color: white;
+                max-width: 800px;
+                margin: 10px;
             }
 
-            .head-region {
+            .book-card > .content {
+                margin: 10px;
+            }
+
+            .book-card .content > .head-region {
                 display: flex;
                 flex-direction: row;
                 justify-content: flex-start;
                 align-items: flex-start;
-                height: 50%;
+                width: 100%;
             }
 
-            .head-region > iron-image {
-                max-width: 30%;
-                min-width: fit-content;
-                height: 100%;
-                --iron-image-height: 100%;
+            .book-card > .content > .head-region > iron-image {
+                width: 40%;
+                --iron-image-width: 100%;
+                overflow: inherit;
             }
 
-            .head-region > iron-image.hidden {
+            .book-card > .content > .head-region > iron-image.hidden {
                 display: none;
             }
 
-            .head-region > .head-info {
+            .book-card > .content > .head-region > .head-info {
                 display: flex;
-                width: 50%;
+                width: 70%;
                 height: 100%;
                 padding-left: 30px;
                 flex-direction: column;
                 justify-content: space-between;
             }
 
-            .head-region > .head-info > .head-text {
+            .book-card > .content > .head-region > .head-info > .head-text {
                 flex-direction: column;
                 justify-content: flex-start;
             }
 
-            h1 {
+            .book-card > .content > .description {
+                margin: 10px;
+            }
+
+            .book-card > .content > .head-region > .head-info > .head-text > .title {
                 font-size: 25px;
                 line-height: 30px;
                 margin: 10px 0 10px 0;
                 text-align: left;
+                font-weight: normal;
             }
 
-            h3 {
+            .book-card > .content > .head-region > .head-info > .head-text > .author {
                 font-size: 12px;
                 font-weight: lighter;
                 margin: 5px 0 5px 0;
             }
 
-            h2 {
+            .book-card > .content > .head-region > .head-info > .head-text > .plain-text {
                 white-space: pre;
                 font-size: 15px;
                 font-weight: bold;
                 margin: 5px 0 5px 0;
             }
 
+            @media only screen and (max-width: 400px) {
+                .book-card {
+                    @apply --layout-vertical;
+                    border-radius: 0px;
+                    box-shadow: unset;
+                    background-color: initial;
+                    margin: 0;
+                }
+
+                .book-card > .content > .head-region > .head-info > .head-text > .title {
+                    font-size: 16px;
+                    line-height: 15px;
+                    margin: 5px 0 5px 0;
+                }
+
+                .book-card > .content > .head-region > .head-info {
+                    padding-left: 10px;
+                }
+            }
+
             paper-button {
                 background-color: var(--app-primary-color, blue);
                 color: white;
                 width: 200px;
             }
 
-            section {
-                display: flex;
-                height: 50%;
-                @apply --layout-vertical;
-            }
-
-            section paper-dialog-scrollable {
-                @apply --layout-flex;
-                --paper-dialog-scrollable: {
-                    padding: 0 24px 0 0;
-                };
-            }
-
             paper-icon-button {
                 color: var(--app-secondary-color, black);
             }
 
         </style>
-            <div class="head-region">
-                <iron-image class$="[[_isImageLoaded(loaded)]]" src="src/exlibris-app/images/cover-placeholder.png"></iron-image>
-                <iron-image preload loaded="{{loaded}}" src="[[book.image]]"></iron-image>
-                <div class="head-info">
-                    <div class="head-text">
-                        <h1>[[book.title]]</h1>
-                        <h3>[[book.author]]</h3>
-                        <h2>[[book.fullStatusMessage]]</h2>
-                    </div>
-                    <div class="head-button">
-                        <template is="dom-if" if="[[_isReserved(book.status)]]">
-                            <paper-button id="book-dialog-cancel-button"
-                                          raised
-                                          on-click="_requestCancelReservation">
-                                CANCEL RESERVATION
-                            </paper-button>
-                        </template>
-                        <template is="dom-if" if="[[_isExpected(book.status)]]">
-                            <paper-button id="book-dialog-reserve-button"
-                                          raised
-                                          on-click="_requestReservation">
-                                RESERVE
-                            </paper-button>
-                        </template>
-                        <template is="dom-if" if="[[_isBorrowedAndCanBeExtended(book)]]">
-                            <paper-button id="book-dialog-extend-button"
-                                          raised
-                                          on-click="_requestLoanExtension">
-                                EXTEND FOR TWO WEEKS
-                            </paper-button>
-                        </template>
-                        <template is="dom-if" if="[[_isBorrowedAndCannotBeExtended(book)]]">
-                            <h3>RESERVED BY ANOTHER READER</h3>
-                        </template>
+        <div class="book-card">
+            <div class="content">
+                <div class="head-region">
+                    <iron-image class$="[[_isImageLoaded(loaded)]]"
+                                src="src/exlibris-app/images/cover-placeholder.png"></iron-image>
+                    <iron-image preload loaded="{{loaded}}" src="[[book.image]]"></iron-image>
+                    <div class="head-info">
+                        <div class="head-text">
+                            <div class="title">[[book.title]]</div>
+                            <div class="author">[[book.author]]</div>
+                            <div class="plain-text">[[book.fullStatusMessage]]</div>
+                        </div>
+                        <div class="head-button">
+                            <template is="dom-if" if="[[_isReserved(book.status)]]">
+                                <paper-button id="book-details-cancel-button"
+                                              raised
+                                              on-click="_requestCancelReservation">
+                                    CANCEL RESERVATION
+                                </paper-button>
+                            </template>
+                            <template is="dom-if" if="[[_isExpected(book.status)]]">
+                                <paper-button id="book-details-reserve-button"
+                                              raised
+                                              on-click="_requestReservation">
+                                    RESERVE
+                                </paper-button>
+                            </template>
+                            <template is="dom-if" if="[[_isBorrowedAndCanBeExtended(book)]]">
+                                <paper-button id="book-details-extend-button"
+                                              raised
+                                              on-click="_requestLoanExtension">
+                                    EXTEND FOR TWO WEEKS
+                                </paper-button>
+                            </template>
+                            <template is="dom-if" if="[[_isBorrowedAndCannotBeExtended(book)]]">
+                                <h3>RESERVED BY ANOTHER READER</h3>
+                            </template>
+                        </div>
                     </div>
                 </div>
+                <div class="description">
+                    <div class="plain-text">[[book.description]]</div>
+                </div>
             </div>
+        </div>
     </template>
 
     <script>
 
-        class BookDialog extends Polymer.Element {
+        class ExlibrisBookDetails extends Polymer.Element {
             static get is() {
-                return 'book-dialog';
+                return 'exlibris-book-details';
             }
 
             static get properties() {
                 return {
-                    /**
-                     * Fired on `element` modal dialog close.
-                     *
-                     * @event book-dialog-closed
-                     */
 
                     /**
                      * Fired on the `CANCEL RESERVATION` button click.
                      *
-                     * @event book-dialog-cancel-reservation
+                     * @event book-details-cancel-reservation
                      * @param {detail.bookId} the id of a book the reservation of which must be canceled.
                      */
 
                     /**
                      * Fired on the `RESERVE` button click.
                      *
-                     * @event book-dialog-reserve-book
+                     * @event book-details-reserve-book
                      * @param {detail.bookId} the id of a book to reserve.
                      */
 
                     /**
                      * Fired on the `EXTEND FOR TWO WEEKS` button click.
                      *
-                     * @event book-dialog-extend-loan
+                     * @event book-details-extend-loan
                      * @param {detail.bookId} the id of a book the loan period of which must be extended.
                      */
 
                     /**
                      * The book object to display.
                      */
-                    book: Object,
+                    book: {
+                        type: Object,
+                        value: {
+                            id: "8535902731",
+                            title: "Java in a Nutshell: A Desktop Quick Reference, Edition 6",
+                            image: "https://books.google.com/books/content/images/frontcover/trDXBAAAQBAJ?fife=w200-h300",
+                            author: "Benjamin J EvansDavid Flanagan",
+                            category: "Java Programming",
+                            description: "The latest edition of Java in a Nutshell is designed to help experienced Java programmers get the most out of Java 7 and 8, but it’s also a learning path for new developers. Chock full of examples that demonstrate how to take complete advantage of modern Java APIs and development best practices, the first section of this thoroughly updated book provides a fast-paced, no-fluff introduction to the Java programming language and the core runtime aspects of the Java platform.\n" +
+                            "The second section is a reference to core concepts and APIs that shows you how to perform real programming work in the Java environment.\n" +
+                            "\n" +
+                            "Get up to speed on language details, including Java 8 changes\n" +
+                            "Learn object-oriented programming, using basic Java syntax\n" +
+                            "Explore generics, enumerations, annotations, and lambda expressions\n" +
+                            "Understand basic techniques used in object-oriented design\n" +
+                            "Examine concurrency and memory, and how they’re intertwined\n" +
+                            "Work with Java collections and handle common data formats\n" +
+                            "Delve into Java’s latest I/O APIs, including asynchronous channels\n" +
+                            "Use Nashorn to execute JavaScript on the Java Virtual Machine\n" +
+                            "Become familiar with development tools in OpenJDK",
+                            availableCount: 5
+                        }
+                    }
                 };
             }
 
@@ -230,25 +280,13 @@ <h3>RESERVED BY ANOTHER READER</h3>
                     && !book.isAllowedLoanExtension;
             }
 
-            /**
-             * Handles the dialog `opened` state changes.
-             * If the dialog was closed, fires `book-dialog-closed` event.
-             *
-             * @private
-             */
-            _handleOpenedChange() {
-                if (!this.$.dialog.opened) {
-                    this.dispatchEvent(new CustomEvent('book-dialog-closed'));
-                }
-            }
-
             /**
              * Handles the `CANCEL RESERVATION` button click.
              *
              * @private
              */
             _requestCancelReservation() {
-                this.dispatchEvent(new CustomEvent('book-dialog-cancel-reservation', {detail: {bookId: this.book.id}}));
+                this.dispatchEvent(new CustomEvent('book-details-cancel-reservation', {detail: {bookId: this.book.id}}));
             }
 
             /**
@@ -257,7 +295,7 @@ <h3>RESERVED BY ANOTHER READER</h3>
              * @private
              */
             _requestReservation() {
-                this.dispatchEvent(new CustomEvent('book-dialog-reserve-book', {detail: {bookId: this.book.id}}));
+                this.dispatchEvent(new CustomEvent('book-details-reserve-book', {detail: {bookId: this.book.id}}));
             }
 
             /**
@@ -266,10 +304,10 @@ <h3>RESERVED BY ANOTHER READER</h3>
              * @private
              */
             _requestLoanExtension() {
-                this.dispatchEvent(new CustomEvent('book-dialog-extend-loan', {detail: {bookId: this.book.id}}));
+                this.dispatchEvent(new CustomEvent('book-details-extend-loan', {detail: {bookId: this.book.id}}));
             }
         }
 
-        window.customElements.define(BookDialog.is, BookDialog);
+        window.customElements.define(ExlibrisBookDetails.is, ExlibrisBookDetails);
     </script>
 </dom-module>

From e10c747f1ef0ef2e027048f10e4a3077b6168d1b Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Wed, 4 Apr 2018 12:28:38 +0300
Subject: [PATCH 23/92] Remove close dialog method.

---
 client-web/src/exlibris-app/exlibris-app.html | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index bf0fedc..72f36aa 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -112,6 +112,7 @@
                                         books="[[expectedSoonBooks]]"></exlibris-book-grid>
                     <exlibris-book-grid data-page="should-return-books"
                                         books="[[shouldReturnBooks]]"></exlibris-book-grid>
+                    <exlibris-book-details data-page="book-details"></exlibris-book-details>
                     <div data-page="view404">View404</div>
                 </iron-pages>
             </app-header-layout>
@@ -290,16 +291,6 @@
                 return book;
             }
 
-            /**
-             * Handles the book dialog close action.
-             * Sets the route path to the previous value.
-             */
-            _handleDialogClose(e) {
-                if (this.previousPage) {
-                    this.set('route.path', '/' + this.previousPage);
-                }
-            }
-
             /**
              * Handles the request to cancel book reservation.
              *

From 209584e979e104a265a8217d84bf8e3a6b4d70c7 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Wed, 4 Apr 2018 12:37:40 +0300
Subject: [PATCH 24/92] Add book tile click event listener.

---
 .../src/exlibris-app/exlibris-book-details.html | 17 +++++++++--------
 .../src/exlibris-app/exlibris-book-tile.html    |  9 +++++++++
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 48de6f7..a508551 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -245,7 +245,8 @@ <h3>RESERVED BY ANOTHER READER</h3>
                             "Delve into Java’s latest I/O APIs, including asynchronous channels\n" +
                             "Use Nashorn to execute JavaScript on the Java Virtual Machine\n" +
                             "Become familiar with development tools in OpenJDK",
-                            availableCount: 5
+                            availableCount: 5,
+                            status: 'AVAILABLE'
                         }
                     }
                 };
@@ -260,23 +261,23 @@ <h3>RESERVED BY ANOTHER READER</h3>
             }
 
             _isReserved(status) {
-                return status === bookStatus.RESERVED;
+                return status === BookStatus.RESERVED;
             }
 
             _isExpected(status) {
-                return status === bookStatus.EXPECTED;
+                return status === BookStatus.EXPECTED;
             }
 
             _isBorrowedAndCanBeExtended(book) {
-                return (book.status === bookStatus.SHOULD_RETURN_SOON
-                    || book.status === bookStatus.OVERDUE)
+                return (book.status === BookStatus.SHOULD_RETURN_SOON
+                    || book.status === BookStatus.OVERDUE)
                     && book.isAllowedLoanExtension;
             }
 
             _isBorrowedAndCannotBeExtended(book) {
-                return (book.status === bookStatus.SHOULD_RETURN_SOON
-                    || book.status === bookStatus.OVERDUE
-                    || book.status === bookStatus.BORROWED)
+                return (book.status === BookStatus.SHOULD_RETURN_SOON
+                    || book.status === BookStatus.OVERDUE
+                    || book.status === BookStatus.BORROWED)
                     && !book.isAllowedLoanExtension;
             }
 
diff --git a/client-web/src/exlibris-app/exlibris-book-tile.html b/client-web/src/exlibris-app/exlibris-book-tile.html
index 8d40f89..4a784bd 100644
--- a/client-web/src/exlibris-app/exlibris-book-tile.html
+++ b/client-web/src/exlibris-app/exlibris-book-tile.html
@@ -149,6 +149,11 @@
                 };
             }
 
+            connectedCallback() {
+                super.connectedCallback();
+                this.addEventListener('click', this._handleClick);
+            }
+
             /**
              * Creates statusClass property depending on book.status.
              *
@@ -205,6 +210,10 @@
                     }
                 }
             }
+
+            _handleClick() {
+                console.log('Book click' + this.book.id);
+            }
         }
 
         window.customElements.define(ExlibrisBookTile.is, ExlibrisBookTile);

From f6fca3411d14ca346ae6748a7b669b351c678e96 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Wed, 4 Apr 2018 13:17:26 +0300
Subject: [PATCH 25/92] Add redux for book-details component to get selected
 book.

---
 client-web/src/exlibris-app/exlibris-app.html | 18 +++++++----
 .../exlibris-app/exlibris-book-details.html   | 31 ++++++-------------
 .../src/exlibris-app/exlibris-book-tile.html  |  9 +++++-
 .../reducers/exlibris_reducer.html            |  3 +-
 4 files changed, 31 insertions(+), 30 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 72f36aa..271c2d6 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -99,7 +99,8 @@
                         selected="[[routeData.page]]"
                         attr-for-selected="data-page"
                         fallback-selection="view404"
-                        role="main">
+                        role="main"
+                        on-exlibris-book-tile-click="_handleBookClick">
                     <exlibris-book-grid data-page="all-books"
                                         books="[[allBooks]]"></exlibris-book-grid>
                     <exlibris-book-grid data-page="overdue-books"
@@ -112,7 +113,8 @@
                                         books="[[expectedSoonBooks]]"></exlibris-book-grid>
                     <exlibris-book-grid data-page="should-return-books"
                                         books="[[shouldReturnBooks]]"></exlibris-book-grid>
-                    <exlibris-book-details data-page="book-details"></exlibris-book-details>
+                    <exlibris-book-details data-page="book-details"
+                                           route="[[subRoute]]"></exlibris-book-details>
                     <div data-page="view404">View404</div>
                 </iron-pages>
             </app-header-layout>
@@ -265,17 +267,21 @@
 
             /**
              * Handles the book tile click event.
-             * Opens modal dialog for specified book.
+             * Sets the route path for the specified book using the book title and the Id.
              *
              * @param e the book tile click event.
-             *        `e.detail` contains the book value.
+             *        `e.detail` contains the book Id and the book title.
              * @private
              */
             _handleBookClick(e) {
-                const book = e.detail;
+                const bookId = e.detail.bookId;
+                const bookTitle = e.detail.bookTitle;
                 e.stopPropagation();
                 e.preventDefault();
-                this.set('route.path', '/book-details/' + book.title.replace(/\s/g, '_') + '/' + book.id);
+                if (bookId && bookTitle) {
+                    return this.set('route.path', '/book-details/' + bookTitle.replace(/\s/g, '_') + '/' + bookId);
+                }
+                this.set('route.path', '/view404');
             }
 
             /**
diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index a508551..6fe70fa 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -144,6 +144,13 @@
             }
 
         </style>
+
+        <app-route
+                route="{{route}}"
+                pattern="/:title/:id"
+                data="{{routeData}}"
+                ></app-route>
+
         <div class="book-card">
             <div class="content">
                 <div class="head-region">
@@ -193,7 +200,7 @@ <h3>RESERVED BY ANOTHER READER</h3>
 
     <script>
 
-        class ExlibrisBookDetails extends Polymer.Element {
+        class ExlibrisBookDetails extends window.ExlibrisApplication.ReduxMixin(Polymer.Element) {
             static get is() {
                 return 'exlibris-book-details';
             }
@@ -227,27 +234,7 @@ <h3>RESERVED BY ANOTHER READER</h3>
                      */
                     book: {
                         type: Object,
-                        value: {
-                            id: "8535902731",
-                            title: "Java in a Nutshell: A Desktop Quick Reference, Edition 6",
-                            image: "https://books.google.com/books/content/images/frontcover/trDXBAAAQBAJ?fife=w200-h300",
-                            author: "Benjamin J EvansDavid Flanagan",
-                            category: "Java Programming",
-                            description: "The latest edition of Java in a Nutshell is designed to help experienced Java programmers get the most out of Java 7 and 8, but it’s also a learning path for new developers. Chock full of examples that demonstrate how to take complete advantage of modern Java APIs and development best practices, the first section of this thoroughly updated book provides a fast-paced, no-fluff introduction to the Java programming language and the core runtime aspects of the Java platform.\n" +
-                            "The second section is a reference to core concepts and APIs that shows you how to perform real programming work in the Java environment.\n" +
-                            "\n" +
-                            "Get up to speed on language details, including Java 8 changes\n" +
-                            "Learn object-oriented programming, using basic Java syntax\n" +
-                            "Explore generics, enumerations, annotations, and lambda expressions\n" +
-                            "Understand basic techniques used in object-oriented design\n" +
-                            "Examine concurrency and memory, and how they’re intertwined\n" +
-                            "Work with Java collections and handle common data formats\n" +
-                            "Delve into Java’s latest I/O APIs, including asynchronous channels\n" +
-                            "Use Nashorn to execute JavaScript on the Java Virtual Machine\n" +
-                            "Become familiar with development tools in OpenJDK",
-                            availableCount: 5,
-                            status: 'AVAILABLE'
-                        }
+                        statePath: 'selectedBook'
                     }
                 };
             }
diff --git a/client-web/src/exlibris-app/exlibris-book-tile.html b/client-web/src/exlibris-app/exlibris-book-tile.html
index 4a784bd..d7f7af8 100644
--- a/client-web/src/exlibris-app/exlibris-book-tile.html
+++ b/client-web/src/exlibris-app/exlibris-book-tile.html
@@ -212,7 +212,14 @@
             }
 
             _handleClick() {
-                console.log('Book click' + this.book.id);
+                this.dispatchEvent(new CustomEvent('exlibris-book-tile-click', {
+                    detail: {
+                        bookId: this.book.id,
+                        bookTitle: this.book.title
+                    },
+                    composed: true,
+                    bubbles: true
+                }));
             }
         }
 
diff --git a/client-web/src/exlibris-app/reducers/exlibris_reducer.html b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
index a809f0c..bb4c1a6 100644
--- a/client-web/src/exlibris-app/reducers/exlibris_reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
@@ -28,7 +28,8 @@
             shouldReturnBooks: userTestBooks.shouldReturnSoon,
             reservedBooks: userTestBooks.reserved,
             allBooks: [...userTestBooks.overdue, ...libraryTestBooks],
-            expectedSoonBooks: expectedSoonLibraryBooks
+            expectedSoonBooks: expectedSoonLibraryBooks,
+            selectedBook: expectedSoonLibraryBooks[0]
         };
 
         const reducer = (state = initialState, action) => {

From 223c007ff043e3b676573a26f4a7b83dfa50bae5 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Wed, 4 Apr 2018 13:28:47 +0300
Subject: [PATCH 26/92] Remove book details buttons fire events to exlibris
 app.

---
 client-web/src/exlibris-app/exlibris-app.html | 46 -------------------
 .../exlibris-app/exlibris-book-details.html   | 11 +++--
 2 files changed, 6 insertions(+), 51 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 271c2d6..2a05f50 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -283,52 +283,6 @@
                 }
                 this.set('route.path', '/view404');
             }
-
-            /**
-             * Searches the book in the related book arrays by id.
-             */
-            _findBookById(id) {
-                const book = this.allBooks.find(x => x.id === id)
-                    || this.expectedSoonBooks.find(x => x.id === id)
-                    || this.overdueBooks.find(x => x.id === id)
-                    || this.shouldReturnBooks.find(x => x.id === id)
-                    || this.borrowedBooks.find(x => x.id === id)
-                    || this.reservedBooks.find(x => x.id === id);
-                return book;
-            }
-
-            /**
-             * Handles the request to cancel book reservation.
-             *
-             * @param e the dialog button click event.
-             * @private
-             */
-            _cancelBookReservation(e) {
-                const bookId = e.detail.bookId;
-                console.log('Cancel book reservation ' + bookId);
-            }
-
-            /**
-             * Handles the request to reserve book.
-             *
-             * @param e the dialog button click event.
-             * @private
-             */
-            _reserveBook(e) {
-                const bookId = e.detail.bookId;
-                console.log('Reserve book ' + bookId);
-            }
-
-            /**
-             * Handles the request to extend book loan period.
-             *
-             * @param e the dialog button click event.
-             * @private
-             */
-            _extendBookLoanPeriod(e) {
-                const bookId = e.detail.bookId;
-                console.log('Extend loan ' + bookId);
-            }
         }
 
         window.customElements.define(ExlibrisApp.is, ExlibrisApp);
diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 6fe70fa..02ecb88 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -149,7 +149,7 @@
                 route="{{route}}"
                 pattern="/:title/:id"
                 data="{{routeData}}"
-                ></app-route>
+                active="[[routeActive]]"></app-route>
 
         <div class="book-card">
             <div class="content">
@@ -252,7 +252,8 @@ <h3>RESERVED BY ANOTHER READER</h3>
             }
 
             _isExpected(status) {
-                return status === BookStatus.EXPECTED;
+                return status === BookStatus.EXPECTED
+                    || status === BookStatus.EXPECTED_SOON;
             }
 
             _isBorrowedAndCanBeExtended(book) {
@@ -274,7 +275,7 @@ <h3>RESERVED BY ANOTHER READER</h3>
              * @private
              */
             _requestCancelReservation() {
-                this.dispatchEvent(new CustomEvent('book-details-cancel-reservation', {detail: {bookId: this.book.id}}));
+                //Request someone to cancel reservation
             }
 
             /**
@@ -283,7 +284,7 @@ <h3>RESERVED BY ANOTHER READER</h3>
              * @private
              */
             _requestReservation() {
-                this.dispatchEvent(new CustomEvent('book-details-reserve-book', {detail: {bookId: this.book.id}}));
+                //Request someone to make reservation
             }
 
             /**
@@ -292,7 +293,7 @@ <h3>RESERVED BY ANOTHER READER</h3>
              * @private
              */
             _requestLoanExtension() {
-                this.dispatchEvent(new CustomEvent('book-details-extend-loan', {detail: {bookId: this.book.id}}));
+                //Request someone to extend loan period
             }
         }
 

From 58eba4e113f5c5f8810332cbf804d3fbace9dddb Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Wed, 4 Apr 2018 14:45:02 +0300
Subject: [PATCH 27/92] Add book-details message calculation depending on book
 status.

---
 .../exlibris-app/exlibris-book-details.html   | 72 +++++++++++++------
 .../reducers/exlibris_reducer.html            |  2 +-
 2 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 02ecb88..9ebe749 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -161,7 +161,7 @@
                         <div class="head-text">
                             <div class="title">[[book.title]]</div>
                             <div class="author">[[book.author]]</div>
-                            <div class="plain-text">[[book.fullStatusMessage]]</div>
+                            <div class="plain-text">[[_getMessage()]]</div>
                         </div>
                         <div class="head-button">
                             <template is="dom-if" if="[[_isReserved(book.status)]]">
@@ -208,27 +208,6 @@ <h3>RESERVED BY ANOTHER READER</h3>
             static get properties() {
                 return {
 
-                    /**
-                     * Fired on the `CANCEL RESERVATION` button click.
-                     *
-                     * @event book-details-cancel-reservation
-                     * @param {detail.bookId} the id of a book the reservation of which must be canceled.
-                     */
-
-                    /**
-                     * Fired on the `RESERVE` button click.
-                     *
-                     * @event book-details-reserve-book
-                     * @param {detail.bookId} the id of a book to reserve.
-                     */
-
-                    /**
-                     * Fired on the `EXTEND FOR TWO WEEKS` button click.
-                     *
-                     * @event book-details-extend-loan
-                     * @param {detail.bookId} the id of a book the loan period of which must be extended.
-                     */
-
                     /**
                      * The book object to display.
                      */
@@ -269,12 +248,59 @@ <h3>RESERVED BY ANOTHER READER</h3>
                     && !book.isAllowedLoanExtension;
             }
 
+            _getMessage() {
+                const book = this.book;
+                let message = '';
+                switch (book.status) {
+                    case BookStatus.AVAILABLE: {
+                        message = book.availableCount ? book.availableCount + ' available.\nScan QR code to borrow.' : '';
+                        break;
+                    }
+
+                    case BookStatus.EXPECTED: {
+                        message = 'Book not available.';
+                        break;
+                    }
+
+                    case BookStatus.EXPECTED_SOON: {
+                        message = 'Arriving to library shortly.';
+                        break;
+                    }
+
+                    case BookStatus.OVERDUE: {
+                        if (book.dueDate) {
+                            const now = new Date();
+                            const numberOfOverdueDays = now.getDate() - book.dueDate.getDate();
+                            message = numberOfOverdueDays + ' days overdue.';
+                        }
+                        break;
+                    }
+
+                    case BookStatus.READY_TO_PICK_UP: {
+                        message = book.date ? 'Book is ready to pick up.\nBorrow it before ' + book.date.toLocaleDateString() : '';
+                        break;
+                    }
+
+                    case BookStatus.RESERVED: {
+                        message = book.date ? 'Reserved for you.\nExpected on ' + book.date.toLocaleDateString() : '';
+                        break;
+                    }
+
+                    case BookStatus.BORROWED: {
+                        message = book.dueDate ? 'Borrowed by you.\nReturn before ' + book.dueDate.toLocaleDateString() : '';
+                        break;
+                    }
+                }
+                return message;
+            }
+
             /**
              * Handles the `CANCEL RESERVATION` button click.
              *
              * @private
              */
             _requestCancelReservation() {
+                alert('Reservation canceled!');
                 //Request someone to cancel reservation
             }
 
@@ -284,6 +310,7 @@ <h3>RESERVED BY ANOTHER READER</h3>
              * @private
              */
             _requestReservation() {
+                alert('Book reserved!');
                 //Request someone to make reservation
             }
 
@@ -293,6 +320,7 @@ <h3>RESERVED BY ANOTHER READER</h3>
              * @private
              */
             _requestLoanExtension() {
+                alert('Loan period extended!');
                 //Request someone to extend loan period
             }
         }
diff --git a/client-web/src/exlibris-app/reducers/exlibris_reducer.html b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
index bb4c1a6..c24dac6 100644
--- a/client-web/src/exlibris-app/reducers/exlibris_reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
@@ -29,7 +29,7 @@
             reservedBooks: userTestBooks.reserved,
             allBooks: [...userTestBooks.overdue, ...libraryTestBooks],
             expectedSoonBooks: expectedSoonLibraryBooks,
-            selectedBook: expectedSoonLibraryBooks[0]
+            selectedBook: userTestBooks.overdue[0]
         };
 
         const reducer = (state = initialState, action) => {

From b6cae579390d54b678ff2e582aab60d8b07f9871 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Wed, 4 Apr 2018 15:15:47 +0300
Subject: [PATCH 28/92] Refactor book status check methods.

---
 client-web/src/exlibris-app/exlibris-app.html |  2 +-
 .../exlibris-app/exlibris-book-details.html   | 26 +++++--------------
 .../reducers/exlibris_reducer.html            |  2 +-
 3 files changed, 8 insertions(+), 22 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 2a05f50..add8e62 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -46,7 +46,7 @@
         <style>
             :host {
                 --exlibris-app-primary-color: var(--paper-blue-600);
-                --app-secondary-color: var(--paper-grey-600);
+                --exlibris-app-secondary-color: var(--paper-grey-600);
                 --exlibris-app-background-color: var(--paper-grey-200);
                 --app-drawer-width: 250px;
                 display: block;
diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 9ebe749..7ea1de6 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -20,17 +20,12 @@
 
 <link rel="import" href="../../bower_components/polymer/polymer-element.html">
 <link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">
+<link rel="import" href="../../bower_components/app-route/app-route.html">
 <link rel="import" href="../../bower_components/paper-styles/color.html">
-<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
 <link rel="import" href="../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
-<link rel="import" href="../../bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
-<link rel="import"
-      href="../../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
 <link rel="import" href="../../bower_components/iron-image/iron-image.html">
-<link rel="import"
-      href="../../bower_components/paper-dialog-behavior/paper-dialog-shared-styles.html">
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="./book_values.html">
 
@@ -134,13 +129,8 @@
             }
 
             paper-button {
-                background-color: var(--app-primary-color, blue);
+                background-color: var(--exlibris-app-primary-color, blue);
                 color: white;
-                width: 200px;
-            }
-
-            paper-icon-button {
-                color: var(--app-secondary-color, black);
             }
 
         </style>
@@ -227,24 +217,20 @@ <h3>RESERVED BY ANOTHER READER</h3>
             }
 
             _isReserved(status) {
-                return status === BookStatus.RESERVED;
+                return [BookStatus.READY_TO_PICK_UP, BookStatus.RESERVED].includes(status);
             }
 
             _isExpected(status) {
-                return status === BookStatus.EXPECTED
-                    || status === BookStatus.EXPECTED_SOON;
+                return [BookStatus.EXPECTED, BookStatus.EXPECTED_SOON].includes(status);
             }
 
             _isBorrowedAndCanBeExtended(book) {
-                return (book.status === BookStatus.SHOULD_RETURN_SOON
-                    || book.status === BookStatus.OVERDUE)
+                return [BookStatus.OVERDUE, BookStatus.SHOULD_RETURN_SOON].includes(status)
                     && book.isAllowedLoanExtension;
             }
 
             _isBorrowedAndCannotBeExtended(book) {
-                return (book.status === BookStatus.SHOULD_RETURN_SOON
-                    || book.status === BookStatus.OVERDUE
-                    || book.status === BookStatus.BORROWED)
+                return [BookStatus.SHOULD_RETURN_SOON, BookStatus.OVERDUE, BookStatus.BORROWED].includes(book.status)
                     && !book.isAllowedLoanExtension;
             }
 
diff --git a/client-web/src/exlibris-app/reducers/exlibris_reducer.html b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
index c24dac6..4829e69 100644
--- a/client-web/src/exlibris-app/reducers/exlibris_reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
@@ -29,7 +29,7 @@
             reservedBooks: userTestBooks.reserved,
             allBooks: [...userTestBooks.overdue, ...libraryTestBooks],
             expectedSoonBooks: expectedSoonLibraryBooks,
-            selectedBook: userTestBooks.overdue[0]
+            selectedBook: userTestBooks.reserved[0]
         };
 
         const reducer = (state = initialState, action) => {

From cb134f5af50fbc10a04cfbacd5d950a2c44e0ee5 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Wed, 4 Apr 2018 17:59:42 +0300
Subject: [PATCH 29/92] Remove multiple buttons, add button for narrow screen.

---
 .../exlibris-app/exlibris-book-details.html   | 155 ++++++++++--------
 1 file changed, 85 insertions(+), 70 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 7ea1de6..59a3ec1 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -47,29 +47,27 @@
                 margin: 10px;
             }
 
-            .book-card > .content {
-                margin: 10px;
-            }
-
-            .book-card .content > .head-region {
+            .book-card .head-region {
                 display: flex;
                 flex-direction: row;
                 justify-content: flex-start;
                 align-items: flex-start;
                 width: 100%;
+                height: fit-content;
             }
 
-            .book-card > .content > .head-region > iron-image {
+            .book-card .head-region iron-image {
                 width: 40%;
                 --iron-image-width: 100%;
                 overflow: inherit;
+                box-shadow: 0 0 4px #8d8d8d;
             }
 
-            .book-card > .content > .head-region > iron-image.hidden {
+            .book-card .head-region iron-image.hidden {
                 display: none;
             }
 
-            .book-card > .content > .head-region > .head-info {
+            .book-card .head-region .head-info {
                 display: flex;
                 width: 70%;
                 height: 100%;
@@ -78,16 +76,41 @@
                 justify-content: space-between;
             }
 
-            .book-card > .content > .head-region > .head-info > .head-text {
+            .book-card .head-region .head-info .head-text {
+                display: flex;
                 flex-direction: column;
                 justify-content: flex-start;
             }
 
-            .book-card > .content > .description {
-                margin: 10px;
+            .book-card .head-region .head-info .wide-screen {
+                display: block;
+                width: fit-content;
+                margin: 0;
             }
 
-            .book-card > .content > .head-region > .head-info > .head-text > .title {
+            .book-card .narrow-screen {
+                display: none;
+                width: fit-content;
+                margin: 12px 0 0 0;
+            }
+
+            paper-button {
+                margin: 0;
+                background-color: var(--exlibris-app-primary-color, blue);
+                color: white;
+            }
+
+            paper-button.small {
+                font-size: 12px;
+            }
+
+            .book-card .description {
+                margin-top: 30px;
+                margin-bottom: 30px;
+                padding: 0 50px 0 50px;
+            }
+
+            .book-card .head-region .head-info .head-text .title {
                 font-size: 25px;
                 line-height: 30px;
                 margin: 10px 0 10px 0;
@@ -95,13 +118,13 @@
                 font-weight: normal;
             }
 
-            .book-card > .content > .head-region > .head-info > .head-text > .author {
+            .book-card .head-region .head-info .head-text .author {
                 font-size: 12px;
                 font-weight: lighter;
                 margin: 5px 0 5px 0;
             }
 
-            .book-card > .content > .head-region > .head-info > .head-text > .plain-text {
+            .book-card .head-region .head-info .head-text .plain-text {
                 white-space: pre;
                 font-size: 15px;
                 font-weight: bold;
@@ -110,13 +133,20 @@
 
             @media only screen and (max-width: 400px) {
                 .book-card {
-                    @apply --layout-vertical;
                     border-radius: 0px;
                     box-shadow: unset;
                     background-color: initial;
                     margin: 0;
                 }
 
+                .book-card .head-region .head-info .wide-screen {
+                    display: none;
+                }
+
+                .book-card .narrow-screen {
+                    display: block;
+                }
+
                 .book-card > .content > .head-region > .head-info > .head-text > .title {
                     font-size: 16px;
                     line-height: 15px;
@@ -128,10 +158,6 @@
                 }
             }
 
-            paper-button {
-                background-color: var(--exlibris-app-primary-color, blue);
-                color: white;
-            }
 
         </style>
 
@@ -142,48 +168,26 @@
                 active="[[routeActive]]"></app-route>
 
         <div class="book-card">
-            <div class="content">
-                <div class="head-region">
-                    <iron-image class$="[[_isImageLoaded(loaded)]]"
-                                src="src/exlibris-app/images/cover-placeholder.png"></iron-image>
-                    <iron-image preload loaded="{{loaded}}" src="[[book.image]]"></iron-image>
-                    <div class="head-info">
-                        <div class="head-text">
-                            <div class="title">[[book.title]]</div>
-                            <div class="author">[[book.author]]</div>
-                            <div class="plain-text">[[_getMessage()]]</div>
-                        </div>
-                        <div class="head-button">
-                            <template is="dom-if" if="[[_isReserved(book.status)]]">
-                                <paper-button id="book-details-cancel-button"
-                                              raised
-                                              on-click="_requestCancelReservation">
-                                    CANCEL RESERVATION
-                                </paper-button>
-                            </template>
-                            <template is="dom-if" if="[[_isExpected(book.status)]]">
-                                <paper-button id="book-details-reserve-button"
-                                              raised
-                                              on-click="_requestReservation">
-                                    RESERVE
-                                </paper-button>
-                            </template>
-                            <template is="dom-if" if="[[_isBorrowedAndCanBeExtended(book)]]">
-                                <paper-button id="book-details-extend-button"
-                                              raised
-                                              on-click="_requestLoanExtension">
-                                    EXTEND FOR TWO WEEKS
-                                </paper-button>
-                            </template>
-                            <template is="dom-if" if="[[_isBorrowedAndCannotBeExtended(book)]]">
-                                <h3>RESERVED BY ANOTHER READER</h3>
-                            </template>
-                        </div>
+            <div class="head-region">
+                <iron-image class$="[[_isImageLoaded(loaded)]]"
+                            src="src/exlibris-app/images/cover-placeholder.png"></iron-image>
+                <iron-image preload loaded="{{loaded}}" src="[[book.image]]"></iron-image>
+                <div class="head-info">
+                    <div class="head-text">
+                        <div class="title">[[book.title]]</div>
+                        <div class="author">[[book.author]]</div>
+                        <div class="plain-text">[[_getMessage()]]</div>
+                    </div>
+                    <div class="wide-screen">
+                    <paper-button>[[buttonTitle]]</paper-button>
                     </div>
                 </div>
-                <div class="description">
-                    <div class="plain-text">[[book.description]]</div>
-                </div>
+            </div>
+            <div class="narrow-screen">
+            <paper-button class="small">[[buttonTitle]]</paper-button>
+            </div>
+            <div class="description">
+                <div class="plain-text">[[book.description]]</div>
             </div>
         </div>
     </template>
@@ -203,7 +207,12 @@ <h3>RESERVED BY ANOTHER READER</h3>
                      */
                     book: {
                         type: Object,
-                        statePath: 'selectedBook'
+                        statePath: 'selectedBook',
+                    },
+
+                    buttonTitle: {
+                        type: String,
+                        computed: '_getButtonTitle(book)'
                     }
                 };
             }
@@ -216,22 +225,22 @@ <h3>RESERVED BY ANOTHER READER</h3>
                 return loaded ? 'hidden' : '';
             }
 
-            _isReserved(status) {
-                return [BookStatus.READY_TO_PICK_UP, BookStatus.RESERVED].includes(status);
+            _isReserved() {
+                return [BookStatus.READY_TO_PICK_UP, BookStatus.RESERVED].includes(this.book.status);
             }
 
-            _isExpected(status) {
-                return [BookStatus.EXPECTED, BookStatus.EXPECTED_SOON].includes(status);
+            _isExpected() {
+                return [BookStatus.EXPECTED, BookStatus.EXPECTED_SOON].includes(this.book.status);
             }
 
-            _isBorrowedAndCanBeExtended(book) {
-                return [BookStatus.OVERDUE, BookStatus.SHOULD_RETURN_SOON].includes(status)
-                    && book.isAllowedLoanExtension;
+            _isBorrowedAndCanBeExtended() {
+                return [BookStatus.OVERDUE, BookStatus.SHOULD_RETURN_SOON].includes(this.book.status)
+                    && this.book.isAllowedLoanExtension;
             }
 
-            _isBorrowedAndCannotBeExtended(book) {
-                return [BookStatus.SHOULD_RETURN_SOON, BookStatus.OVERDUE, BookStatus.BORROWED].includes(book.status)
-                    && !book.isAllowedLoanExtension;
+            _isBorrowedAndCannotBeExtended() {
+                return [BookStatus.SHOULD_RETURN_SOON, BookStatus.OVERDUE, BookStatus.BORROWED].includes(this.book.status)
+                    && !this.book.isAllowedLoanExtension;
             }
 
             _getMessage() {
@@ -280,6 +289,12 @@ <h3>RESERVED BY ANOTHER READER</h3>
                 return message;
             }
 
+            _getButtonTitle(book) {
+                if (this._isReserved()) return 'CANCEL RESERVATION';
+                if (this._isExpected()) return 'RESERVE';
+                if (this._isBorrowedAndCanBeExtended()) return 'EXTEND LOAN PERIOD';
+            }
+
             /**
              * Handles the `CANCEL RESERVATION` button click.
              *

From 100968eadd19d26e7973d2bb61d226cd7e169a3b Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Wed, 4 Apr 2018 19:19:47 +0300
Subject: [PATCH 30/92] Improve book-details styling.

---
 .../exlibris-app/exlibris-book-details.html   | 43 +++++++++++++------
 .../menu/exlibris-menu-drawer.html            |  2 +-
 .../exlibris-app/menu/exlibris-menu-item.html |  5 ++-
 3 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 59a3ec1..4c698c4 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -61,6 +61,8 @@
                 --iron-image-width: 100%;
                 overflow: inherit;
                 box-shadow: 0 0 4px #8d8d8d;
+                margin-left: 25px;
+                margin-top: 25px;
             }
 
             .book-card .head-region iron-image.hidden {
@@ -80,24 +82,27 @@
                 display: flex;
                 flex-direction: column;
                 justify-content: flex-start;
+                /*color: var(--exlibris-app-secondary-color);*/
             }
 
             .book-card .head-region .head-info .wide-screen {
                 display: block;
-                width: fit-content;
+                width: 100%;
                 margin: 0;
             }
 
             .book-card .narrow-screen {
                 display: none;
                 width: fit-content;
-                margin: 12px 0 0 0;
+                margin: 15px 0 0 15px;
             }
 
             paper-button {
                 margin: 0;
                 background-color: var(--exlibris-app-primary-color, blue);
                 color: white;
+                height: 36px;
+                font-size: 15px;
             }
 
             paper-button.small {
@@ -107,13 +112,15 @@
             .book-card .description {
                 margin-top: 30px;
                 margin-bottom: 30px;
-                padding: 0 50px 0 50px;
+                padding: 0 25px 0 25px;
+                text-align: justify;
+                color: var(--exlibris-app-secondary-color);
             }
 
             .book-card .head-region .head-info .head-text .title {
                 font-size: 25px;
                 line-height: 30px;
-                margin: 10px 0 10px 0;
+                margin: 40px 0 10px 0;
                 text-align: left;
                 font-weight: normal;
             }
@@ -128,17 +135,22 @@
                 white-space: pre;
                 font-size: 15px;
                 font-weight: bold;
-                margin: 5px 0 5px 0;
+                margin: 20px 0 5px 0;
             }
 
-            @media only screen and (max-width: 400px) {
+            @media only screen and (max-width: 640px) {
                 .book-card {
-                    border-radius: 0px;
+                    border-radius: 0;
                     box-shadow: unset;
                     background-color: initial;
                     margin: 0;
                 }
 
+                .book-card .head-region iron-image {
+                    margin-left: 15px;
+                    margin-top: 15px;
+                }
+
                 .book-card .head-region .head-info .wide-screen {
                     display: none;
                 }
@@ -147,13 +159,18 @@
                     display: block;
                 }
 
-                .book-card > .content > .head-region > .head-info > .head-text > .title {
+                .book-card .description {
+                    margin-top: 8px;
+                    padding: 0 15px 0 15px;
+                }
+
+                .book-card .head-region .head-info .head-text .title {
                     font-size: 16px;
                     line-height: 15px;
-                    margin: 5px 0 5px 0;
+                    margin: 20px 0 5px 0;
                 }
 
-                .book-card > .content > .head-region > .head-info {
+                .book-card .head-region .head-info {
                     padding-left: 10px;
                 }
             }
@@ -179,15 +196,15 @@
                         <div class="plain-text">[[_getMessage()]]</div>
                     </div>
                     <div class="wide-screen">
-                    <paper-button>[[buttonTitle]]</paper-button>
+                        <paper-button>[[buttonTitle]]</paper-button>
                     </div>
                 </div>
             </div>
             <div class="narrow-screen">
-            <paper-button class="small">[[buttonTitle]]</paper-button>
+                <paper-button class="small">[[buttonTitle]]</paper-button>
             </div>
             <div class="description">
-                <div class="plain-text">[[book.description]]</div>
+                [[book.description]]
             </div>
         </div>
     </template>
diff --git a/client-web/src/exlibris-app/menu/exlibris-menu-drawer.html b/client-web/src/exlibris-app/menu/exlibris-menu-drawer.html
index 4292aee..1b0b041 100644
--- a/client-web/src/exlibris-app/menu/exlibris-menu-drawer.html
+++ b/client-web/src/exlibris-app/menu/exlibris-menu-drawer.html
@@ -42,7 +42,7 @@
 
             exlibris-menu-item {
                 --exlibris-menu-item-background-color: var(--exlibris-app-background-color);
-                --exlibris-menu-item-title-color: var(--app-secondary-color);
+                --exlibris-menu-item-title-color: var(--exlibris-app-secondary-color);
             }
 
             exlibris-menu-item.iron-selected {
diff --git a/client-web/src/exlibris-app/menu/exlibris-menu-item.html b/client-web/src/exlibris-app/menu/exlibris-menu-item.html
index 3e12d59..e9d3cb7 100644
--- a/client-web/src/exlibris-app/menu/exlibris-menu-item.html
+++ b/client-web/src/exlibris-app/menu/exlibris-menu-item.html
@@ -18,7 +18,7 @@
                 align-items: center;
                 color: var(--exlibris-menu-item-title-color, black);
                 border-radius: var(--exlibris-menu-item-border-radius, 3px);
-                background-color: var(--exlibris-menu-item-background-color, white);
+                background-color: var(--exlibris-menu-item-background-color);
                 line-height: 40px;
                 --iron-icon-height: 26px;
                 --iron-icon-width: 26px;
@@ -26,6 +26,9 @@
                 font-size: 15px;
             }
 
+            .item:hover {
+                background-color: var(--google-grey-300);
+            }
             .name {
                 padding-left: 12px;
             }

From fa8e1efd0358e162f1964ad06b1dc20401495ea2 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Thu, 5 Apr 2018 10:40:47 +0300
Subject: [PATCH 31/92] Add button click handler depending on book status.

---
 .../exlibris-app/exlibris-book-details.html   | 32 ++++++++++++++-----
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 4c698c4..40bdf23 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -193,15 +193,16 @@
                     <div class="head-text">
                         <div class="title">[[book.title]]</div>
                         <div class="author">[[book.author]]</div>
-                        <div class="plain-text">[[_getMessage()]]</div>
+                        <div class="plain-text">[[statusMessage]]</div>
                     </div>
                     <div class="wide-screen">
-                        <paper-button>[[buttonTitle]]</paper-button>
+                        <paper-button on-click="_handleButtonClick">[[buttonTitle]]</paper-button>
                     </div>
                 </div>
             </div>
             <div class="narrow-screen">
-                <paper-button class="small">[[buttonTitle]]</paper-button>
+                <paper-button class="small" on-click="_handleButtonClick">[[buttonTitle]]
+                </paper-button>
             </div>
             <div class="description">
                 [[book.description]]
@@ -229,7 +230,12 @@
 
                     buttonTitle: {
                         type: String,
-                        computed: '_getButtonTitle(book)'
+                        computed: '_computeButton(book)'
+                    },
+
+                    statusMessage: {
+                        type: String,
+                        computed: '_getMessage(book)'
                     }
                 };
             }
@@ -306,10 +312,20 @@
                 return message;
             }
 
-            _getButtonTitle(book) {
-                if (this._isReserved()) return 'CANCEL RESERVATION';
-                if (this._isExpected()) return 'RESERVE';
-                if (this._isBorrowedAndCanBeExtended()) return 'EXTEND LOAN PERIOD';
+            _computeButton() {
+                if (this._isReserved()) {
+                    this._handleButtonClick = this._requestCancelReservation;
+                    return 'CANCEL RESERVATION';
+                }
+
+                if (this._isExpected()) {
+                    this._handleButtonClick = this._requestReservation;
+                    return 'RESERVE';
+                }
+
+                if (this._isBorrowedAndCanBeExtended()) {
+                    this._handleButtonClick = this._requestLoanExtension;
+                    return 'EXTEND LOAN PERIOD';}
             }
 
             /**

From 2855e2355d175e3c0b1f27852167bb8da546fdcb Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Thu, 5 Apr 2018 11:33:29 +0300
Subject: [PATCH 32/92] Add button hidden state, add `reserved by someone`
 message.

---
 .../exlibris-app/exlibris-book-details.html   | 36 ++++++++++++++-----
 client-web/src/exlibris-app/test_values.js    |  9 +++--
 2 files changed, 33 insertions(+), 12 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 40bdf23..df5ccdc 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -41,7 +41,7 @@
             .book-card {
                 @apply --layout-vertical;
                 border-radius: 3px;
-                box-shadow: 4px 4px 10px #888888;
+                box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
                 background-color: white;
                 max-width: 800px;
                 margin: 10px;
@@ -60,7 +60,7 @@
                 width: 40%;
                 --iron-image-width: 100%;
                 overflow: inherit;
-                box-shadow: 0 0 4px #8d8d8d;
+                box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
                 margin-left: 25px;
                 margin-top: 25px;
             }
@@ -82,7 +82,6 @@
                 display: flex;
                 flex-direction: column;
                 justify-content: flex-start;
-                /*color: var(--exlibris-app-secondary-color);*/
             }
 
             .book-card .head-region .head-info .wide-screen {
@@ -120,7 +119,7 @@
             .book-card .head-region .head-info .head-text .title {
                 font-size: 25px;
                 line-height: 30px;
-                margin: 40px 0 10px 0;
+                margin: 40px 15px 10px 0;
                 text-align: left;
                 font-weight: normal;
             }
@@ -167,7 +166,7 @@
                 .book-card .head-region .head-info .head-text .title {
                     font-size: 16px;
                     line-height: 15px;
-                    margin: 20px 0 5px 0;
+                    margin: 20px 15px 5px 0;
                 }
 
                 .book-card .head-region .head-info {
@@ -196,13 +195,21 @@
                         <div class="plain-text">[[statusMessage]]</div>
                     </div>
                     <div class="wide-screen">
-                        <paper-button on-click="_handleButtonClick">[[buttonTitle]]</paper-button>
+                        <paper-button on-click="_handleButtonClick"
+                                      hidden="[[_isHidden()]]">
+                            [[buttonTitle]]
+                        </paper-button>
+                        <div>[[actionUnsupportedMessage]]</div>
                     </div>
                 </div>
             </div>
             <div class="narrow-screen">
-                <paper-button class="small" on-click="_handleButtonClick">[[buttonTitle]]
+                <paper-button class="small"
+                              on-click="_handleButtonClick"
+                              hidden="[[_isHidden()]]">
+                    [[buttonTitle]]
                 </paper-button>
+                <div>[[actionUnsupportedMessage]]</div>
             </div>
             <div class="description">
                 [[book.description]]
@@ -236,7 +243,9 @@
                     statusMessage: {
                         type: String,
                         computed: '_getMessage(book)'
-                    }
+                    },
+
+                    actionUnsupportedMessage: String
                 };
             }
 
@@ -325,7 +334,16 @@
 
                 if (this._isBorrowedAndCanBeExtended()) {
                     this._handleButtonClick = this._requestLoanExtension;
-                    return 'EXTEND LOAN PERIOD';}
+                    return 'EXTEND LOAN PERIOD';
+                }
+
+                if (this._isBorrowedAndCannotBeExtended()) {
+                    this.actionUnsupportedMessage = 'RESERVED BY ANOTHER READER';
+                }
+            }
+
+            _isHidden() {
+                return !this.buttonTitle;
             }
 
             /**
diff --git a/client-web/src/exlibris-app/test_values.js b/client-web/src/exlibris-app/test_values.js
index 343c5d7..3d68b0f 100644
--- a/client-web/src/exlibris-app/test_values.js
+++ b/client-web/src/exlibris-app/test_values.js
@@ -684,7 +684,8 @@ const userTestBooks = {
             "Style and approach\n" +
             "This is your guide to designing custom web components, and the concepts are explained in a conversational and easy-to-follow style. Each topic is explained through examples, with detailed explanations wherever required.",
             dueDate: new Date(new Date().getTime() + twoWeeks * millisecondsInOneDay),
-            status: "BORROWED"
+            status: "BORROWED",
+            isAllowedLoanExtension: true
         }],
         overdue: [{
             id: "8535902722",
@@ -699,7 +700,8 @@ const userTestBooks = {
             "Quick Start Guide to JavaFX by J.F. DiMarzio\n" +
             "Mastering JavaFX 8 Controls: Create Custom JavaFX 8 Controls for Cross-Platform Applications by Hendrik Ebbers",
             dueDate: new Date(new Date().getTime() - twoDays * millisecondsInOneDay),
-            status: "OVERDUE"
+            status: "OVERDUE",
+            isAllowedLoanExtension: false
         }],
         shouldReturnSoon: [{
             id: "8535902724",
@@ -731,7 +733,8 @@ const userTestBooks = {
             "Style and approach\n" +
             "This is your guide to designing custom web components, and the concepts are explained in a conversational and easy-to-follow style. Each topic is explained through examples, with detailed explanations wherever required.",
             dueDate: new Date(new Date().getTime() + threeDays * millisecondsInOneDay),
-            status: "BORROWED"
+            status: "BORROWED",
+            isAllowedLoanExtension: false
         }]
     }
 ;

From 881938ca3a80ac808e9804b0bb5eaec4a6a19496 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Thu, 5 Apr 2018 11:59:02 +0300
Subject: [PATCH 33/92] Improve book details card styling.

---
 client-web/src/exlibris-app/exlibris-book-details.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index df5ccdc..3419ef4 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -35,7 +35,7 @@
 
             :host {
                 display: flex;
-                justify-content: center;
+                margin-left: 15%;
             }
 
             .book-card {
@@ -43,7 +43,7 @@
                 border-radius: 3px;
                 box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
                 background-color: white;
-                max-width: 800px;
+                max-width: 1000px;
                 margin: 10px;
             }
 
@@ -101,7 +101,8 @@
                 background-color: var(--exlibris-app-primary-color, blue);
                 color: white;
                 height: 36px;
-                font-size: 15px;
+                font-size: 14px;
+                padding: 0 16px 0 16px;
             }
 
             paper-button.small {

From a7c89d90eccc33c1686f4fea8e07019ef9eb4231 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Thu, 5 Apr 2018 16:09:05 +0300
Subject: [PATCH 34/92] Change font style property.

---
 .idea/jsLinters/eslint.xml                               | 6 ++++++
 client-web/src/exlibris-app/menu/exlibris-menu-item.html | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .idea/jsLinters/eslint.xml

diff --git a/.idea/jsLinters/eslint.xml b/.idea/jsLinters/eslint.xml
new file mode 100644
index 0000000..26b988e
--- /dev/null
+++ b/.idea/jsLinters/eslint.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EslintConfiguration">
+    <custom-configuration-file used="true" path="D:\Projects\Exlibris\.eslintrc.json" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/client-web/src/exlibris-app/menu/exlibris-menu-item.html b/client-web/src/exlibris-app/menu/exlibris-menu-item.html
index b65d620..9af7c60 100644
--- a/client-web/src/exlibris-app/menu/exlibris-menu-item.html
+++ b/client-web/src/exlibris-app/menu/exlibris-menu-item.html
@@ -16,7 +16,7 @@
                 cursor: pointer;
                 margin: 10px;
                 align-items: center;
-                color: var(--exlibris-menu-item-title-color, var(--app-secondary-color));
+                color: var(--exlibris-menu-item-title-color, var(--exlibris-app-secondary-color));
                 font-weight: var(--exlibris-menu-item-title-font-weight, normal);
                 border-radius: var(--exlibris-menu-item-border-radius, 3px);
                 background-color: var(--exlibris-menu-item-background-color, var(--exlibris-app-background-color));

From 1787033769857093782dd36bdf9bb353ebc9e6df Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Thu, 5 Apr 2018 16:54:08 +0300
Subject: [PATCH 35/92] Add book details methods jsdocs.

---
 .../exlibris-app/exlibris-book-details.html   | 41 +++++++++++--------
 .../menu/exlibris-menu-drawer.html            | 14 +++----
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 3419ef4..3782419 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -41,7 +41,7 @@
             .book-card {
                 @apply --layout-vertical;
                 border-radius: 3px;
-                box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
+                box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
                 background-color: white;
                 max-width: 1000px;
                 margin: 10px;
@@ -60,7 +60,7 @@
                 width: 40%;
                 --iron-image-width: 100%;
                 overflow: inherit;
-                box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24);
+                box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
                 margin-left: 25px;
                 margin-top: 25px;
             }
@@ -174,8 +174,6 @@
                     padding-left: 10px;
                 }
             }
-
-
         </style>
 
         <app-route
@@ -186,7 +184,7 @@
 
         <div class="book-card">
             <div class="head-region">
-                <iron-image class$="[[_isImageLoaded(loaded)]]"
+                <iron-image class$="[[_isBookCoverLoaded(loaded)]]"
                             src="src/exlibris-app/images/cover-placeholder.png"></iron-image>
                 <iron-image preload loaded="{{loaded}}" src="[[book.image]]"></iron-image>
                 <div class="head-info">
@@ -197,7 +195,7 @@
                     </div>
                     <div class="wide-screen">
                         <paper-button on-click="_handleButtonClick"
-                                      hidden="[[_isHidden()]]">
+                                      hidden="[[_isActionButtonHidden()]]">
                             [[buttonTitle]]
                         </paper-button>
                         <div>[[actionUnsupportedMessage]]</div>
@@ -207,7 +205,7 @@
             <div class="narrow-screen">
                 <paper-button class="small"
                               on-click="_handleButtonClick"
-                              hidden="[[_isHidden()]]">
+                              hidden="[[_isActionButtonHidden()]]">
                     [[buttonTitle]]
                 </paper-button>
                 <div>[[actionUnsupportedMessage]]</div>
@@ -250,14 +248,6 @@
                 };
             }
 
-            /**
-             * Used to set custom style for the placeholder image
-             * when the original image is loaded.
-             */
-            _isImageLoaded(loaded) {
-                return loaded ? 'hidden' : '';
-            }
-
             _isReserved() {
                 return [BookStatus.READY_TO_PICK_UP, BookStatus.RESERVED].includes(this.book.status);
             }
@@ -343,7 +333,26 @@
                 }
             }
 
-            _isHidden() {
+            /**
+             * Used to set custom style for the placeholder image
+             * when the original image is loaded.
+             *
+             * @param {boolean} loaded main cover loading status.
+             * @returns {string} the iron-image custom class value.
+             * @private
+             */
+            _isBookCoverLoaded(loaded) {
+                return loaded ? 'hidden' : '';
+            }
+
+            /**
+             * Indicates the action button to set `hidden` when the
+             * button is not supported for this book status.
+             *
+             * @returns {boolean} is button displayed or not.
+             * @private
+             */
+            _isActionButtonHidden() {
                 return !this.buttonTitle;
             }
 
diff --git a/client-web/src/exlibris-app/menu/exlibris-menu-drawer.html b/client-web/src/exlibris-app/menu/exlibris-menu-drawer.html
index 09ca675..4e585d2 100644
--- a/client-web/src/exlibris-app/menu/exlibris-menu-drawer.html
+++ b/client-web/src/exlibris-app/menu/exlibris-menu-drawer.html
@@ -143,15 +143,15 @@
 
                     /**
                      * The state of the menu items count badges.
+                     *
+                     * @typedef {Object} User's books count badges.
+                     * @property {number} overdue the overdue books count.
+                     * @property {number} shouldReturnSoon the should be returned books count.
+                     * @property {number} reserved the reserved books count.
+                     * @property {number} borrowed the borrowed books count.
                      */
                     countBadges: {
-                        type: Object,
-                        value: {
-                            overdue: '',
-                            shouldReturnSoon: '',
-                            reserved: '',
-                            borrowed: ''
-                        }
+                        type: Object
                     }
                 };
             }

From 864bce71ff880730f2e153e014c8c761b6561a61 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 6 Apr 2018 11:49:06 +0300
Subject: [PATCH 36/92] Change some css classes to refer by id.

---
 .../exlibris-app/exlibris-book-details.html   | 55 ++++++++++---------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 3782419..22182e7 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -35,13 +35,13 @@
 
             :host {
                 display: flex;
-                margin-left: 15%;
+                margin-left: 100px;
             }
 
             .book-card {
                 @apply --layout-vertical;
                 border-radius: 3px;
-                box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
+                box-shadow: 4px 4px 10px #888888;
                 background-color: white;
                 max-width: 1000px;
                 margin: 10px;
@@ -57,7 +57,6 @@
             }
 
             .book-card .head-region iron-image {
-                width: 40%;
                 --iron-image-width: 100%;
                 overflow: inherit;
                 box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
@@ -84,13 +83,13 @@
                 justify-content: flex-start;
             }
 
-            .book-card .head-region .head-info .wide-screen {
+            .book-card .head-region .head-info .button-wide-screen {
                 display: block;
                 width: 100%;
                 margin: 0;
             }
 
-            .book-card .narrow-screen {
+            .book-card .button-narrow-screen {
                 display: none;
                 width: fit-content;
                 margin: 15px 0 0 15px;
@@ -98,7 +97,7 @@
 
             paper-button {
                 margin: 0;
-                background-color: var(--exlibris-app-primary-color, blue);
+                background-color: var(--exlibris-app-primary-color);
                 color: white;
                 height: 36px;
                 font-size: 14px;
@@ -109,7 +108,7 @@
                 font-size: 12px;
             }
 
-            .book-card .description {
+            #description {
                 margin-top: 30px;
                 margin-bottom: 30px;
                 padding: 0 25px 0 25px;
@@ -117,7 +116,7 @@
                 color: var(--exlibris-app-secondary-color);
             }
 
-            .book-card .head-region .head-info .head-text .title {
+            #title {
                 font-size: 25px;
                 line-height: 30px;
                 margin: 40px 15px 10px 0;
@@ -125,20 +124,24 @@
                 font-weight: normal;
             }
 
-            .book-card .head-region .head-info .head-text .author {
+            #author {
                 font-size: 12px;
                 font-weight: lighter;
                 margin: 5px 0 5px 0;
             }
 
-            .book-card .head-region .head-info .head-text .plain-text {
+            #status-message {
                 white-space: pre;
                 font-size: 15px;
                 font-weight: bold;
                 margin: 20px 0 5px 0;
             }
 
-            @media only screen and (max-width: 640px) {
+            @media only screen and (max-width: 900px) {
+                :host {
+                    margin-left: unset;
+                }
+
                 .book-card {
                     border-radius: 0;
                     box-shadow: unset;
@@ -151,28 +154,28 @@
                     margin-top: 15px;
                 }
 
-                .book-card .head-region .head-info .wide-screen {
+                .book-card .head-region .head-info .button-wide-screen {
                     display: none;
                 }
 
-                .book-card .narrow-screen {
+                .book-card .button-narrow-screen {
                     display: block;
                 }
 
-                .book-card .description {
+                .book-card .head-region .head-info {
+                    padding-left: 10px;
+                }
+
+                #description {
                     margin-top: 8px;
                     padding: 0 15px 0 15px;
                 }
 
-                .book-card .head-region .head-info .head-text .title {
+                #title {
                     font-size: 16px;
                     line-height: 15px;
                     margin: 20px 15px 5px 0;
                 }
-
-                .book-card .head-region .head-info {
-                    padding-left: 10px;
-                }
             }
         </style>
 
@@ -189,12 +192,12 @@
                 <iron-image preload loaded="{{loaded}}" src="[[book.image]]"></iron-image>
                 <div class="head-info">
                     <div class="head-text">
-                        <div class="title">[[book.title]]</div>
-                        <div class="author">[[book.author]]</div>
-                        <div class="plain-text">[[statusMessage]]</div>
+                        <div id="title">[[book.title]]</div>
+                        <div id="author">[[book.author]]</div>
+                        <div id="status-message">[[statusMessage]]</div>
                     </div>
-                    <div class="wide-screen">
-                        <paper-button on-click="_handleButtonClick"
+                    <div class="button-wide-screen">
+                        <paper-button raised on-click="_handleButtonClick"
                                       hidden="[[_isActionButtonHidden()]]">
                             [[buttonTitle]]
                         </paper-button>
@@ -202,7 +205,7 @@
                     </div>
                 </div>
             </div>
-            <div class="narrow-screen">
+            <div class="button-narrow-screen">
                 <paper-button class="small"
                               on-click="_handleButtonClick"
                               hidden="[[_isActionButtonHidden()]]">
@@ -210,7 +213,7 @@
                 </paper-button>
                 <div>[[actionUnsupportedMessage]]</div>
             </div>
-            <div class="description">
+            <div id="description">
                 [[book.description]]
             </div>
         </div>

From f825f4f0a60d19a1e9177424646021cc802b8f24 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 6 Apr 2018 12:11:57 +0300
Subject: [PATCH 37/92] Add book property docs.

---
 client-web/src/exlibris-app/exlibris-book-details.html | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 22182e7..cc99483 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -231,6 +231,15 @@
 
                     /**
                      * The book object to display.
+                     *
+                     * @typedef {Object} Book
+                     * @property {string} id
+                     * @property {string} title the title of a book
+                     * @property {string} image the book cover URL
+                     * @property {string} author string with authors of the book
+                     * @property {string} category the book category
+                     * @property {number} availableCount the number of items available for borrowing.
+                     * @property {BookStatus} status  one of the BookStatus values.
                      */
                     book: {
                         type: Object,

From 5a3450739d745e2296c562f17b31905286340559 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 6 Apr 2018 12:22:06 +0300
Subject: [PATCH 38/92] Remove unnecessary book tile click handler.

---
 client-web/src/exlibris-app/exlibris-app.html | 22 +------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 70ea936..c6e0379 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -99,8 +99,7 @@
                         selected="[[routeData.page]]"
                         attr-for-selected="data-page"
                         fallback-selection="view404"
-                        role="main"
-                        on-exlibris-book-tile-click="_handleBookClick">
+                        role="main">
                     <exlibris-book-grid data-page="all-books"
                                         books="[[allBooks]]"></exlibris-book-grid>
                     <exlibris-book-grid data-page="overdue-books"
@@ -263,25 +262,6 @@
                     this.$.drawer.toggle();
                 }
             }
-
-            /**
-             * Handles the book tile click event.
-             * Sets the route path for the specified book using the book title and the Id.
-             *
-             * @param e the book tile click event.
-             *        `e.detail` contains the book Id and the book title.
-             * @private
-             */
-            _handleBookClick(e) {
-                const bookId = e.detail.bookId;
-                const bookTitle = e.detail.bookTitle;
-                e.stopPropagation();
-                e.preventDefault();
-                if (bookId && bookTitle) {
-                    return this.set('route.path', '/book-details/' + bookTitle.replace(/\s/g, '_') + '/' + bookId);
-                }
-                this.set('route.path', '/view404');
-            }
         }
 
         window.customElements.define(ExlibrisApp.is, ExlibrisApp);

From f7e1f6877eef1e27427e41d240eef7d63842534a Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 6 Apr 2018 15:56:44 +0300
Subject: [PATCH 39/92] Add jsdocs to button identify method.

---
 .../exlibris-app/exlibris-book-details.html   | 71 +++++++++++--------
 1 file changed, 40 insertions(+), 31 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index cc99483..65472c7 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -246,38 +246,30 @@
                         statePath: 'selectedBook',
                     },
 
-                    buttonTitle: {
+                    /**
+                     * The title of the button.
+                     */
+                    button: {
                         type: String,
-                        computed: '_computeButton(book)'
+                        computed: '_identifyButton(book)'
                     },
 
+                    /**
+                     * The message about the status of the book.
+                     */
                     statusMessage: {
                         type: String,
                         computed: '_getMessage(book)'
                     },
 
+                    /**
+                     * The message about the status of the book.
+                     * Shown when the button is not supported for the book.
+                     */
                     actionUnsupportedMessage: String
                 };
             }
 
-            _isReserved() {
-                return [BookStatus.READY_TO_PICK_UP, BookStatus.RESERVED].includes(this.book.status);
-            }
-
-            _isExpected() {
-                return [BookStatus.EXPECTED, BookStatus.EXPECTED_SOON].includes(this.book.status);
-            }
-
-            _isBorrowedAndCanBeExtended() {
-                return [BookStatus.OVERDUE, BookStatus.SHOULD_RETURN_SOON].includes(this.book.status)
-                    && this.book.isAllowedLoanExtension;
-            }
-
-            _isBorrowedAndCannotBeExtended() {
-                return [BookStatus.SHOULD_RETURN_SOON, BookStatus.OVERDUE, BookStatus.BORROWED].includes(this.book.status)
-                    && !this.book.isAllowedLoanExtension;
-            }
-
             _getMessage() {
                 const book = this.book;
                 let message = '';
@@ -324,27 +316,44 @@
                 return message;
             }
 
-            _computeButton() {
-                if (this._isReserved()) {
+            /**
+             * Identifies the button title and the button click handler
+             * depending on the book status.
+             * If the button if unsupported sets the `actionUnsupportedMessage`.
+             */
+            _identifyButton() {
+                if (this.__isReserved()) {
                     this._handleButtonClick = this._requestCancelReservation;
                     return 'CANCEL RESERVATION';
-                }
-
-                if (this._isExpected()) {
+                } else if (this.__isExpected()) {
                     this._handleButtonClick = this._requestReservation;
                     return 'RESERVE';
-                }
-
-                if (this._isBorrowedAndCanBeExtended()) {
+                } else if (this.__isBorrowedAndCanBeExtended()) {
                     this._handleButtonClick = this._requestLoanExtension;
                     return 'EXTEND LOAN PERIOD';
-                }
-
-                if (this._isBorrowedAndCannotBeExtended()) {
+                } else if (this.__isBorrowedAndCannotBeExtended()) {
                     this.actionUnsupportedMessage = 'RESERVED BY ANOTHER READER';
                 }
             }
 
+            __isReserved() {
+                return [BookStatus.READY_TO_PICK_UP, BookStatus.RESERVED].includes(this.book.status);
+            }
+
+            __isExpected() {
+                return [BookStatus.EXPECTED, BookStatus.EXPECTED_SOON].includes(this.book.status);
+            }
+
+            __isBorrowedAndCanBeExtended() {
+                return [BookStatus.OVERDUE, BookStatus.SHOULD_RETURN_SOON].includes(this.book.status)
+                    && this.book.isAllowedLoanExtension;
+            }
+
+            __isBorrowedAndCannotBeExtended() {
+                return [BookStatus.SHOULD_RETURN_SOON, BookStatus.OVERDUE, BookStatus.BORROWED].includes(this.book.status)
+                    && !this.book.isAllowedLoanExtension;
+            }
+
             /**
              * Used to set custom style for the placeholder image
              * when the original image is loaded.

From ba72ed2d91b221106f6b20ad7224b8dafe5ec110 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 6 Apr 2018 16:20:29 +0300
Subject: [PATCH 40/92] Unite button title and click handler in single button
 property.

---
 .../exlibris-app/exlibris-book-details.html   | 54 +++++++++++++------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 65472c7..da661b6 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -199,7 +199,7 @@
                     <div class="button-wide-screen">
                         <paper-button raised on-click="_handleButtonClick"
                                       hidden="[[_isActionButtonHidden()]]">
-                            [[buttonTitle]]
+                            [[button.title]]
                         </paper-button>
                         <div>[[actionUnsupportedMessage]]</div>
                     </div>
@@ -209,7 +209,7 @@
                 <paper-button class="small"
                               on-click="_handleButtonClick"
                               hidden="[[_isActionButtonHidden()]]">
-                    [[buttonTitle]]
+                    [[button.title]]
                 </paper-button>
                 <div>[[actionUnsupportedMessage]]</div>
             </div>
@@ -247,10 +247,13 @@
                     },
 
                     /**
-                     * The title of the button.
+                     * The button title and click handler.
+                     *
+                     * @property {string} title the button title
+                     * @property {function} the button click handler function
                      */
                     button: {
-                        type: String,
+                        type: Object,
                         computed: '_identifyButton(book)'
                     },
 
@@ -323,15 +326,27 @@
              */
             _identifyButton() {
                 if (this.__isReserved()) {
-                    this._handleButtonClick = this._requestCancelReservation;
-                    return 'CANCEL RESERVATION';
-                } else if (this.__isExpected()) {
-                    this._handleButtonClick = this._requestReservation;
-                    return 'RESERVE';
-                } else if (this.__isBorrowedAndCanBeExtended()) {
-                    this._handleButtonClick = this._requestLoanExtension;
-                    return 'EXTEND LOAN PERIOD';
-                } else if (this.__isBorrowedAndCannotBeExtended()) {
+                    return {
+                        title: 'CANCEL RESERVATION',
+                        clickHandler: this._requestCancelReservation
+                    };
+                }
+
+                if (this.__isExpected()) {
+                    return {
+                        title: 'RESERVE',
+                        clickHandler: this._requestReservation
+                    };
+                }
+
+                if (this.__isBorrowedAndCanBeExtended()) {
+                    return {
+                        title: 'EXTEND LOAN PERIOD',
+                        clickHandler: this._requestLoanExtension
+                    };
+                }
+
+                if (this.__isBorrowedAndCannotBeExtended()) {
                     this.actionUnsupportedMessage = 'RESERVED BY ANOTHER READER';
                 }
             }
@@ -355,7 +370,7 @@
             }
 
             /**
-             * Used to set custom style for the placeholder image
+             * Used to hide the book cover placeholder image
              * when the original image is loaded.
              *
              * @param {boolean} loaded main cover loading status.
@@ -374,7 +389,16 @@
              * @private
              */
             _isActionButtonHidden() {
-                return !this.buttonTitle;
+                return !this.button;
+            }
+
+            /**
+             * Handles the button click.
+             *
+             * @private
+             */
+            _handleButtonClick() {
+                this.button.clickHandler();
             }
 
             /**

From 08a0f4e1b18720b01c242fcedb2171e7548e0525 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 6 Apr 2018 16:39:29 +0300
Subject: [PATCH 41/92] Add action dispatch on URL change.

---
 .../exlibris-app/actions/exlibris_action.html |  2 +-
 .../exlibris-app/exlibris-book-details.html   | 23 ++++++++++++++++++-
 .../reducers/exlibris_reducer.html            |  6 ++++-
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/client-web/src/exlibris-app/actions/exlibris_action.html b/client-web/src/exlibris-app/actions/exlibris_action.html
index 44b9a7e..3216ea9 100644
--- a/client-web/src/exlibris-app/actions/exlibris_action.html
+++ b/client-web/src/exlibris-app/actions/exlibris_action.html
@@ -22,6 +22,6 @@
     /* exported ElibrisActions */
 
     const ElibrisActions = {
-
+        FIND_BOOK_BY_ID : "FIND_BOOK_BY_ID",
     }
 </script>
diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index da661b6..2668522 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -28,6 +28,7 @@
 <link rel="import" href="../../bower_components/iron-image/iron-image.html">
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="./book_values.html">
+<link rel="import" href="./actions/exlibris_action.html">
 
 <dom-module id="exlibris-book-details">
     <template>
@@ -269,10 +270,30 @@
                      * The message about the status of the book.
                      * Shown when the button is not supported for the book.
                      */
-                    actionUnsupportedMessage: String
+                    actionUnsupportedMessage: String,
+
+                    routeData: {
+                        type: Object,
+                        observer: "_routeDataChanged"
+                    }
                 };
             }
 
+            static get actions() {
+                return {
+                    findBookById(bookId) {
+                        return {
+                            type: ElibrisActions.FIND_BOOK_BY_ID,
+                            bookId: bookId
+                        }
+                    }
+                }
+            }
+
+            _routeDataChanged(routeData) {
+                this.dispatch('findBookById', routeData.id);
+            }
+
             _getMessage() {
                 const book = this.book;
                 let message = '';
diff --git a/client-web/src/exlibris-app/reducers/exlibris_reducer.html b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
index b9638f5..1ed43dc 100644
--- a/client-web/src/exlibris-app/reducers/exlibris_reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
@@ -19,6 +19,7 @@
   -->
 <script src="../test_values.js"></script>
 <link rel="import" href="../book_values.html">
+<link rel="import" href="../actions/exlibris_action.html">
 
 <script>
     /* exported reducer */
@@ -35,7 +36,10 @@
     };
 
     const reducer = (state = initialState, action) => {
-        switch (action) {
+        switch (action.type) {
+            case ElibrisActions.FIND_BOOK_BY_ID: {
+                return Object.assign({}, state, {selectedBook: action.id});
+            }
             default:
                 return state;
         }

From b2995dd63334d448d66b67869b1430b80b141f12 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 10 Apr 2018 09:48:29 +0300
Subject: [PATCH 42/92] Add temp action handler to the reducer to find book by
 id.

---
 .../exlibris-app/exlibris-book-details.html   | 125 ++++++++----------
 .../reducers/exlibris_reducer.html            |  15 ++-
 2 files changed, 67 insertions(+), 73 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 2668522..be6620f 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -199,7 +199,7 @@
                     </div>
                     <div class="button-wide-screen">
                         <paper-button raised on-click="_handleButtonClick"
-                                      hidden="[[_isActionButtonHidden()]]">
+                                      hidden="[[_isButtonHidden(button)]]">
                             [[button.title]]
                         </paper-button>
                         <div>[[actionUnsupportedMessage]]</div>
@@ -209,7 +209,7 @@
             <div class="button-narrow-screen">
                 <paper-button class="small"
                               on-click="_handleButtonClick"
-                              hidden="[[_isActionButtonHidden()]]">
+                              hidden="[[_isButtonHidden(button)]]">
                     [[button.title]]
                 </paper-button>
                 <div>[[actionUnsupportedMessage]]</div>
@@ -245,6 +245,7 @@
                     book: {
                         type: Object,
                         statePath: 'selectedBook',
+                        observer: '_computeValues'
                     },
 
                     /**
@@ -254,23 +255,23 @@
                      * @property {function} the button click handler function
                      */
                     button: {
-                        type: Object,
-                        computed: '_identifyButton(book)'
+                        type: Object
                     },
 
                     /**
                      * The message about the status of the book.
                      */
                     statusMessage: {
-                        type: String,
-                        computed: '_getMessage(book)'
+                        type: String
                     },
 
                     /**
                      * The message about the status of the book.
                      * Shown when the button is not supported for the book.
                      */
-                    actionUnsupportedMessage: String,
+                    actionUnsupportedMessage: {
+                        type: String
+                    },
 
                     routeData: {
                         type: Object,
@@ -294,22 +295,31 @@
                 this.dispatch('findBookById', routeData.id);
             }
 
-            _getMessage() {
-                const book = this.book;
-                let message = '';
+            _computeValues(book) {
+                this.statusMessage = '';
+                this.button = undefined;
+                this.actionUnsupportedMessage = '';
                 switch (book.status) {
                     case BookStatus.AVAILABLE: {
-                        message = book.availableCount ? book.availableCount + ' available.\nScan QR code to borrow.' : '';
+                        this.statusMessage = book.availableCount ? book.availableCount + ' available.\nScan QR code to borrow.' : '';
                         break;
                     }
 
                     case BookStatus.EXPECTED: {
-                        message = 'Book not available.';
+                        this.statusMessage = 'Book not available.';
+                        this.button = {
+                            title: 'RESERVE',
+                            clickHandler: this._requestReservation
+                        };
                         break;
                     }
 
                     case BookStatus.EXPECTED_SOON: {
-                        message = 'Arriving to library shortly.';
+                        this.statusMessage = 'Arriving to library shortly.';
+                        this.button = {
+                            title: 'RESERVE',
+                            clickHandler: this._requestReservation
+                        };
                         break;
                     }
 
@@ -317,77 +327,50 @@
                         if (book.dueDate) {
                             const now = new Date();
                             const numberOfOverdueDays = now.getDate() - book.dueDate.getDate();
-                            message = numberOfOverdueDays + ' days overdue.';
+                            this.statusMessage = numberOfOverdueDays + ' days overdue.';
+                        }
+                        if (book.isAllowedLoanExtension) {
+                            this.button = {
+                                title: 'EXTEND LOAN PERIOD',
+                                clickHandler: this._requestLoanExtension
+                            };
+                        } else {
+                            this.actionUnsupportedMessage = 'RESERVED BY ANOTHER READER';
                         }
                         break;
                     }
 
                     case BookStatus.READY_TO_PICK_UP: {
-                        message = book.date ? 'Book is ready to pick up.\nBorrow it before ' + book.date.toLocaleDateString() : '';
+                        this.statusMessage = book.date ? 'Book is ready to pick up.\nBorrow it before ' + book.date.toLocaleDateString() : '';
+                        this.button = {
+                            title: 'CANCEL RESERVATION',
+                            clickHandler: this._requestCancelReservation
+                        };
                         break;
                     }
 
                     case BookStatus.RESERVED: {
-                        message = book.date ? 'Reserved for you.\nExpected on ' + book.date.toLocaleDateString() : '';
+                        this.statusMessage = book.date ? 'Reserved for you.\nExpected on ' + book.date.toLocaleDateString() : '';
+                        this.button = {
+                            title: 'CANCEL RESERVATION',
+                            clickHandler: this._requestCancelReservation
+                        };
                         break;
                     }
 
-                    case BookStatus.BORROWED: {
-                        message = book.dueDate ? 'Borrowed by you.\nReturn before ' + book.dueDate.toLocaleDateString() : '';
+                    case BookStatus.BORROWED: case BookStatus.SHOULD_RETURN_SOON:{
+                        this.statusMessage = book.dueDate ? 'Borrowed by you.\nReturn before ' + book.dueDate.toLocaleDateString() : '';
+                        if (book.isAllowedLoanExtension) {
+                            this.button = {
+                                title: 'EXTEND LOAN PERIOD',
+                                clickHandler: this._requestLoanExtension
+                            };
+                        } else {
+                            this.actionUnsupportedMessage = 'RESERVED BY ANOTHER READER';
+                        }
                         break;
                     }
                 }
-                return message;
-            }
-
-            /**
-             * Identifies the button title and the button click handler
-             * depending on the book status.
-             * If the button if unsupported sets the `actionUnsupportedMessage`.
-             */
-            _identifyButton() {
-                if (this.__isReserved()) {
-                    return {
-                        title: 'CANCEL RESERVATION',
-                        clickHandler: this._requestCancelReservation
-                    };
-                }
-
-                if (this.__isExpected()) {
-                    return {
-                        title: 'RESERVE',
-                        clickHandler: this._requestReservation
-                    };
-                }
-
-                if (this.__isBorrowedAndCanBeExtended()) {
-                    return {
-                        title: 'EXTEND LOAN PERIOD',
-                        clickHandler: this._requestLoanExtension
-                    };
-                }
-
-                if (this.__isBorrowedAndCannotBeExtended()) {
-                    this.actionUnsupportedMessage = 'RESERVED BY ANOTHER READER';
-                }
-            }
-
-            __isReserved() {
-                return [BookStatus.READY_TO_PICK_UP, BookStatus.RESERVED].includes(this.book.status);
-            }
-
-            __isExpected() {
-                return [BookStatus.EXPECTED, BookStatus.EXPECTED_SOON].includes(this.book.status);
-            }
-
-            __isBorrowedAndCanBeExtended() {
-                return [BookStatus.OVERDUE, BookStatus.SHOULD_RETURN_SOON].includes(this.book.status)
-                    && this.book.isAllowedLoanExtension;
-            }
-
-            __isBorrowedAndCannotBeExtended() {
-                return [BookStatus.SHOULD_RETURN_SOON, BookStatus.OVERDUE, BookStatus.BORROWED].includes(this.book.status)
-                    && !this.book.isAllowedLoanExtension;
             }
 
             /**
@@ -409,8 +392,8 @@
              * @returns {boolean} is button displayed or not.
              * @private
              */
-            _isActionButtonHidden() {
-                return !this.button;
+            _isButtonHidden(button) {
+                return !button;
             }
 
             /**
diff --git a/client-web/src/exlibris-app/reducers/exlibris_reducer.html b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
index 1ed43dc..3e48578 100644
--- a/client-web/src/exlibris-app/reducers/exlibris_reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
@@ -32,16 +32,27 @@
         reservedBooks: userTestBooks.reserved,
         allBooks: [...userTestBooks.overdue, ...libraryTestBooks],
         expectedSoonBooks: expectedSoonLibraryBooks,
-        selectedBook: userTestBooks.reserved[0]
+        selectedBook: {}
     };
 
     const reducer = (state = initialState, action) => {
         switch (action.type) {
             case ElibrisActions.FIND_BOOK_BY_ID: {
-                return Object.assign({}, state, {selectedBook: action.id});
+                const id = action.bookId;
+                const book = {
+                    ...state.allBooks.find(x => x.id === id)
+                    || state.expectedSoonBooks.find(x => x.id === id)
+                    || state.overdueBooks.find(x => x.id === id)
+                    || state.shouldReturnBooks.find(x => x.id === id)
+                    || state.borrowedBooks.find(x => x.id === id)
+                    || state.reservedBooks.find(x => x.id === id)
+                };
+                return Object.assign({}, state, {selectedBook: book});
             }
             default:
                 return state;
         }
     };
+
+
 </script>

From 3074f7d8463deb42d77973c0b5487fd588c05224 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 10 Apr 2018 10:43:12 +0300
Subject: [PATCH 43/92] Separate button, status message and action unsupported
 message compute functions.

---
 .../exlibris-app/exlibris-book-details.html   | 138 +++++++++---------
 ...t.html => exlibris-book-details_test.html} |  90 ++++--------
 2 files changed, 100 insertions(+), 128 deletions(-)
 rename client-web/test/exlibris-app/{book-dialog_test.html => exlibris-book-details_test.html} (76%)

diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index be6620f..6f18d77 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -183,8 +183,7 @@
         <app-route
                 route="{{route}}"
                 pattern="/:title/:id"
-                data="{{routeData}}"
-                active="[[routeActive]]"></app-route>
+                data="{{routeData}}"></app-route>
 
         <div class="book-card">
             <div class="head-region">
@@ -199,7 +198,7 @@
                     </div>
                     <div class="button-wide-screen">
                         <paper-button raised on-click="_handleButtonClick"
-                                      hidden="[[_isButtonHidden(button)]]">
+                                      hidden="[[!button]]">
                             [[button.title]]
                         </paper-button>
                         <div>[[actionUnsupportedMessage]]</div>
@@ -209,7 +208,7 @@
             <div class="button-narrow-screen">
                 <paper-button class="small"
                               on-click="_handleButtonClick"
-                              hidden="[[_isButtonHidden(button)]]">
+                              hidden="[[!button]]">
                     [[button.title]]
                 </paper-button>
                 <div>[[actionUnsupportedMessage]]</div>
@@ -244,25 +243,27 @@
                      */
                     book: {
                         type: Object,
-                        statePath: 'selectedBook',
-                        observer: '_computeValues'
+                        statePath: 'selectedBook'
                     },
 
                     /**
                      * The button title and click handler.
                      *
                      * @property {string} title the button title
-                     * @property {function} the button click handler function
+                     * @property {function} clickHandler the button click handler function
                      */
                     button: {
-                        type: Object
+                        type: Object,
+                        computed: '_updateButton(book)',
+                        value: null
                     },
 
                     /**
                      * The message about the status of the book.
                      */
                     statusMessage: {
-                        type: String
+                        type: String,
+                        computed: '_updateStatusMessage(book)'
                     },
 
                     /**
@@ -270,7 +271,8 @@
                      * Shown when the button is not supported for the book.
                      */
                     actionUnsupportedMessage: {
-                        type: String
+                        type: String,
+                        computed: '_updateActionUnsupportedMessage(book)'
                     },
 
                     routeData: {
@@ -295,81 +297,90 @@
                 this.dispatch('findBookById', routeData.id);
             }
 
-            _computeValues(book) {
-                this.statusMessage = '';
-                this.button = undefined;
-                this.actionUnsupportedMessage = '';
+            _updateButton(book) {
                 switch (book.status) {
-                    case BookStatus.AVAILABLE: {
-                        this.statusMessage = book.availableCount ? book.availableCount + ' available.\nScan QR code to borrow.' : '';
-                        break;
-                    }
-
+                    case BookStatus.EXPECTED_SOON:
                     case BookStatus.EXPECTED: {
-                        this.statusMessage = 'Book not available.';
-                        this.button = {
-                            title: 'RESERVE',
-                            clickHandler: this._requestReservation
-                        };
-                        break;
-                    }
-
-                    case BookStatus.EXPECTED_SOON: {
-                        this.statusMessage = 'Arriving to library shortly.';
-                        this.button = {
+                        return {
                             title: 'RESERVE',
                             clickHandler: this._requestReservation
                         };
-                        break;
                     }
 
-                    case BookStatus.OVERDUE: {
-                        if (book.dueDate) {
-                            const now = new Date();
-                            const numberOfOverdueDays = now.getDate() - book.dueDate.getDate();
-                            this.statusMessage = numberOfOverdueDays + ' days overdue.';
-                        }
+                    case BookStatus.OVERDUE:
+                    case BookStatus.BORROWED:
+                    case BookStatus.SHOULD_RETURN_SOON: {
                         if (book.isAllowedLoanExtension) {
-                            this.button = {
+                            return {
                                 title: 'EXTEND LOAN PERIOD',
                                 clickHandler: this._requestLoanExtension
                             };
-                        } else {
-                            this.actionUnsupportedMessage = 'RESERVED BY ANOTHER READER';
                         }
                         break;
                     }
 
+                    case BookStatus.RESERVED:
                     case BookStatus.READY_TO_PICK_UP: {
-                        this.statusMessage = book.date ? 'Book is ready to pick up.\nBorrow it before ' + book.date.toLocaleDateString() : '';
-                        this.button = {
+                        return {
                             title: 'CANCEL RESERVATION',
                             clickHandler: this._requestCancelReservation
                         };
-                        break;
+                    }
+                    default:
+                        return null;
+                }
+            }
+
+            _updateStatusMessage(book) {
+                switch (book.status) {
+                    case BookStatus.AVAILABLE: {
+                        return book.availableCount ? book.availableCount + ' available.\nScan QR code to borrow.' : '';
+                    }
+
+                    case BookStatus.EXPECTED: {
+                         return 'Book not available.';
+                    }
+
+                    case BookStatus.EXPECTED_SOON: {
+                        return 'Arriving to library shortly.';
+                    }
+
+                    case BookStatus.OVERDUE: {
+                        if (book.dueDate) {
+                            const now = new Date();
+                            const numberOfOverdueDays = now.getDate() - book.dueDate.getDate();
+                            return numberOfOverdueDays + ' days overdue.';
+                        }
+                    }
+
+                    case BookStatus.READY_TO_PICK_UP: {
+                        return book.date ? 'Book is ready to pick up.\nBorrow it before ' + book.date.toLocaleDateString() : '';
                     }
 
                     case BookStatus.RESERVED: {
-                        this.statusMessage = book.date ? 'Reserved for you.\nExpected on ' + book.date.toLocaleDateString() : '';
-                        this.button = {
-                            title: 'CANCEL RESERVATION',
-                            clickHandler: this._requestCancelReservation
-                        };
-                        break;
+                        return book.date ? 'Reserved for you.\nExpected on ' + book.date.toLocaleDateString() : '';
                     }
 
-                    case BookStatus.BORROWED: case BookStatus.SHOULD_RETURN_SOON:{
-                        this.statusMessage = book.dueDate ? 'Borrowed by you.\nReturn before ' + book.dueDate.toLocaleDateString() : '';
-                        if (book.isAllowedLoanExtension) {
-                            this.button = {
-                                title: 'EXTEND LOAN PERIOD',
-                                clickHandler: this._requestLoanExtension
-                            };
-                        } else {
-                            this.actionUnsupportedMessage = 'RESERVED BY ANOTHER READER';
+                    case BookStatus.BORROWED:
+                    case BookStatus.SHOULD_RETURN_SOON: {
+                        return book.dueDate ? 'Borrowed by you.\nReturn before ' + book.dueDate.toLocaleDateString() : '';
+                    }
+
+                    default: return '';
+                }
+            }
+
+            _updateActionUnsupportedMessage(book){
+                switch (book.status) {
+                    case BookStatus.BORROWED:
+                    case BookStatus.SHOULD_RETURN_SOON:
+                    case BookStatus.OVERDUE: {
+                        if (!book.isAllowedLoanExtension) {
+                            return 'RESERVED BY ANOTHER READER';
                         }
                         break;
                     }
+                    default: return '';
                 }
             }
 
@@ -385,17 +396,6 @@
                 return loaded ? 'hidden' : '';
             }
 
-            /**
-             * Indicates the action button to set `hidden` when the
-             * button is not supported for this book status.
-             *
-             * @returns {boolean} is button displayed or not.
-             * @private
-             */
-            _isButtonHidden(button) {
-                return !button;
-            }
-
             /**
              * Handles the button click.
              *
diff --git a/client-web/test/exlibris-app/book-dialog_test.html b/client-web/test/exlibris-app/exlibris-book-details_test.html
similarity index 76%
rename from client-web/test/exlibris-app/book-dialog_test.html
rename to client-web/test/exlibris-app/exlibris-book-details_test.html
index e567ecf..36cf4cd 100644
--- a/client-web/test/exlibris-app/book-dialog_test.html
+++ b/client-web/test/exlibris-app/exlibris-book-details_test.html
@@ -39,7 +39,7 @@
 
 <test-fixture id="BasicTestFixture">
     <template>
-        <book-dialog></book-dialog>
+        <exlibris-book-details></exlibris-book-details>
     </template>
 </test-fixture>
 
@@ -55,44 +55,16 @@
         const RESERVE_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-reserve-button';
         const EXTEND_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-extend-button';
         const RESERVED_BY_ANOTHER_SELECTOR = '.head-region > .head-info > .head-button > h3';
-        const CLOSE_BUTTON_SELECTOR = '.close-button > paper-icon-button';
 
-        let bookDialog;
+        let bookDetails;
         setup(() => {
-            bookDialog = fixture('BasicTestFixture');
-        });
-
-        test('should not display without open() call.', function () {
-            const modal = bookDialog.$.dialog;
-            assert.isFalse(modal.opened);
-        });
-
-        test('should display when open() called.', function () {
-            const modal = bookDialog.$.dialog;
-            assert.isFalse(modal.opened);
-            bookDialog.open();
-            assert.isTrue(modal.opened);
-        });
-
-        test('should close on close button click called. Tan fire close event.', function (done) {
-            bookDialog.addEventListener('book-dialog-closed', function () {
-                done();
-            });
-            const dialogShadowRoot = bookDialog.shadowRoot;
-            const modal = bookDialog.$.dialog;
-            assert.isFalse(modal.opened);
-            bookDialog.open();
-            assert.isTrue(modal.opened);
-
-            const closeButton = dialogShadowRoot.querySelector(CLOSE_BUTTON_SELECTOR);
-            closeButton.click();
-            assert.isFalse(modal.opened);
+            bookDetails = fixture('BasicTestFixture');
         });
 
         test('should display book image, title, author and description.', function () {
-            bookDialog.set('book', TEST_BOOK);
-            bookDialog.open();
-            const dialogShadowRoot = bookDialog.shadowRoot;
+            bookDetails.set('book', TEST_BOOK);
+            bookDetails.open();
+            const dialogShadowRoot = bookDetails.shadowRoot;
             const bookCover = dialogShadowRoot.querySelector(IMAGE_SELECTOR);
             const bookTitle = dialogShadowRoot.querySelector(BOOK_TITLE_SELECTOR);
             const bookAuthor = dialogShadowRoot.querySelector(BOOK_AUTHOR_SELECTOR);
@@ -108,15 +80,15 @@
 
         test('should display `RESERVE` button when book status is `EXPECTED` and fire event on click.', function (done) {
             const expectedBook = Object.assign(TEST_BOOK, {status: bookStatus.EXPECTED});
-            bookDialog.set('book', expectedBook);
-            bookDialog.addEventListener('book-dialog-reserve-book', function (e) {
+            bookDetails.set('book', expectedBook);
+            bookDetails.addEventListener('book-dialog-reserve-book', function (e) {
                 const bookId = e.detail.bookId;
                 assert.equal(bookId, expectedBook.id);
                 done();
             });
 
-            bookDialog.open();
-            const dialogShadowRoot = bookDialog.shadowRoot;
+            bookDetails.open();
+            const dialogShadowRoot = bookDetails.shadowRoot;
             flush(function () {
                 const reserveButton = dialogShadowRoot.querySelector(RESERVE_BUTTON_SELECTOR);
                 assert.isNotNull(reserveButton, 'Button is not displayed');
@@ -127,15 +99,15 @@
 
         test('should display `CANCEL RESERVATION` button when book status is `RESERVED` and fire event on click.', function (done) {
             const expectedBook = Object.assign(TEST_BOOK, {status: bookStatus.RESERVED});
-            bookDialog.set('book', expectedBook);
-            bookDialog.addEventListener('book-dialog-cancel-reservation', function (e) {
+            bookDetails.set('book', expectedBook);
+            bookDetails.addEventListener('book-dialog-cancel-reservation', function (e) {
                 const bookId = e.detail.bookId;
                 assert.equal(bookId, expectedBook.id);
                 done();
             });
 
-            bookDialog.open();
-            const dialogShadowRoot = bookDialog.shadowRoot;
+            bookDetails.open();
+            const dialogShadowRoot = bookDetails.shadowRoot;
             flush(function () {
                 const cancelButton = dialogShadowRoot.querySelector(RESERVE_CANCEL_BUTTON_SELECTOR);
                 assert.isNotNull(cancelButton, 'Button is not displayed');
@@ -150,15 +122,15 @@
                 status: bookStatus.SHOULD_RETURN_SOON,
                 isAllowedLoanExtension: true
             });
-            bookDialog.set('book', bookAllowedToExtend);
-            bookDialog.addEventListener('book-dialog-extend-loan', function (e) {
+            bookDetails.set('book', bookAllowedToExtend);
+            bookDetails.addEventListener('book-dialog-extend-loan', function (e) {
                 const bookId = e.detail.bookId;
                 assert.equal(bookId, bookAllowedToExtend.id);
                 done();
             });
 
-            bookDialog.open();
-            const dialogShadowRoot = bookDialog.shadowRoot;
+            bookDetails.open();
+            const dialogShadowRoot = bookDetails.shadowRoot;
             flush(function () {
                 const extendButton = dialogShadowRoot.querySelector(EXTEND_BUTTON_SELECTOR);
                 assert.isNotNull(extendButton, 'Button is not displayed');
@@ -173,15 +145,15 @@
                 status: bookStatus.OVERDUE,
                 isAllowedLoanExtension: true
             });
-            bookDialog.set('book', bookAllowedToExtend);
-            bookDialog.addEventListener('book-dialog-extend-loan', function (e) {
+            bookDetails.set('book', bookAllowedToExtend);
+            bookDetails.addEventListener('book-dialog-extend-loan', function (e) {
                 const bookId = e.detail.bookId;
                 assert.equal(bookId, bookAllowedToExtend.id);
                 done();
             });
 
-            bookDialog.open();
-            const dialogShadowRoot = bookDialog.shadowRoot;
+            bookDetails.open();
+            const dialogShadowRoot = bookDetails.shadowRoot;
             flush(function () {
                 const extendButton = dialogShadowRoot.querySelector(EXTEND_BUTTON_SELECTOR);
                 assert.isNotNull(extendButton, 'Button is not displayed');
@@ -197,10 +169,10 @@
                 status: bookStatus.BORROWED,
                 isAllowedLoanExtension: false
             });
-            bookDialog.set('book', bookNotAllowedToExtend);
-            bookDialog.open();
+            bookDetails.set('book', bookNotAllowedToExtend);
+            bookDetails.open();
 
-            const dialogShadowRoot = bookDialog.shadowRoot;
+            const dialogShadowRoot = bookDetails.shadowRoot;
             flush(function () {
                 const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
                 assert.isNotNull(reservedByAnother, 'Row is not displayed');
@@ -215,10 +187,10 @@
                 status: bookStatus.OVERDUE,
                 isAllowedLoanExtension: false
             });
-            bookDialog.set('book', bookNotAllowedToExtend);
-            bookDialog.open();
+            bookDetails.set('book', bookNotAllowedToExtend);
+            bookDetails.open();
 
-            const dialogShadowRoot = bookDialog.shadowRoot;
+            const dialogShadowRoot = bookDetails.shadowRoot;
             flush(function () {
                 const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
                 assert.isNotNull(reservedByAnother, 'Row is not displayed');
@@ -233,10 +205,10 @@
                 status: bookStatus.SHOULD_RETURN_SOON,
                 isAllowedLoanExtension: false
             });
-            bookDialog.set('book', bookNotAllowedToExtend);
-            bookDialog.open();
+            bookDetails.set('book', bookNotAllowedToExtend);
+            bookDetails.open();
 
-            const dialogShadowRoot = bookDialog.shadowRoot;
+            const dialogShadowRoot = bookDetails.shadowRoot;
             flush(function () {
                 const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
                 assert.isNotNull(reservedByAnother, 'Row is not displayed');

From a0fad931017c4bfcc7a21c5347efb432a52449e0 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 10 Apr 2018 10:57:09 +0300
Subject: [PATCH 44/92] Add book undefined check to the compute functions.

---
 .../exlibris-app/exlibris-book-details.html   | 143 ++++++++++--------
 .../reducers/exlibris_reducer.html            |   7 +-
 2 files changed, 85 insertions(+), 65 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 6f18d77..948978a 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -275,6 +275,19 @@
                         computed: '_updateActionUnsupportedMessage(book)'
                     },
 
+                    /**
+                     * The URL part that defines the book Id.
+                     * Should match the pattern `/:title/:id`
+                     *
+                     */
+                    route: String,
+
+                    /**
+                     * Contains the book Id passed in the URL.
+                     *
+                     * @property {string} title the title of the book
+                     * @property {function} id the Id of the book
+                     */
                     routeData: {
                         type: Object,
                         observer: "_routeDataChanged"
@@ -298,89 +311,97 @@
             }
 
             _updateButton(book) {
-                switch (book.status) {
-                    case BookStatus.EXPECTED_SOON:
-                    case BookStatus.EXPECTED: {
-                        return {
-                            title: 'RESERVE',
-                            clickHandler: this._requestReservation
-                        };
-                    }
-
-                    case BookStatus.OVERDUE:
-                    case BookStatus.BORROWED:
-                    case BookStatus.SHOULD_RETURN_SOON: {
-                        if (book.isAllowedLoanExtension) {
+                if (book) {
+                    switch (book.status) {
+                        case BookStatus.EXPECTED_SOON:
+                        case BookStatus.EXPECTED: {
                             return {
-                                title: 'EXTEND LOAN PERIOD',
-                                clickHandler: this._requestLoanExtension
+                                title: 'RESERVE',
+                                clickHandler: this._requestReservation
                             };
                         }
-                        break;
-                    }
 
-                    case BookStatus.RESERVED:
-                    case BookStatus.READY_TO_PICK_UP: {
-                        return {
-                            title: 'CANCEL RESERVATION',
-                            clickHandler: this._requestCancelReservation
-                        };
+                        case BookStatus.OVERDUE:
+                        case BookStatus.BORROWED:
+                        case BookStatus.SHOULD_RETURN_SOON: {
+                            if (book.isAllowedLoanExtension) {
+                                return {
+                                    title: 'EXTEND LOAN PERIOD',
+                                    clickHandler: this._requestLoanExtension
+                                };
+                            }
+                            break;
+                        }
+
+                        case BookStatus.RESERVED:
+                        case BookStatus.READY_TO_PICK_UP: {
+                            return {
+                                title: 'CANCEL RESERVATION',
+                                clickHandler: this._requestCancelReservation
+                            };
+                        }
+                        default:
+                            return null;
                     }
-                    default:
-                        return null;
                 }
             }
 
             _updateStatusMessage(book) {
-                switch (book.status) {
-                    case BookStatus.AVAILABLE: {
-                        return book.availableCount ? book.availableCount + ' available.\nScan QR code to borrow.' : '';
-                    }
+                if (book) {
+                    switch (book.status) {
+                        case BookStatus.AVAILABLE: {
+                            return book.availableCount ? book.availableCount + ' available.\nScan QR code to borrow.' : '';
+                        }
 
-                    case BookStatus.EXPECTED: {
-                         return 'Book not available.';
-                    }
+                        case BookStatus.EXPECTED: {
+                            return 'Book not available.';
+                        }
 
-                    case BookStatus.EXPECTED_SOON: {
-                        return 'Arriving to library shortly.';
-                    }
+                        case BookStatus.EXPECTED_SOON: {
+                            return 'Arriving to library shortly.';
+                        }
 
-                    case BookStatus.OVERDUE: {
-                        if (book.dueDate) {
-                            const now = new Date();
-                            const numberOfOverdueDays = now.getDate() - book.dueDate.getDate();
-                            return numberOfOverdueDays + ' days overdue.';
+                        case BookStatus.OVERDUE: {
+                            if (book.dueDate) {
+                                const now = new Date();
+                                const numberOfOverdueDays = now.getDate() - book.dueDate.getDate();
+                                return numberOfOverdueDays + ' days overdue.';
+                            }
                         }
-                    }
 
-                    case BookStatus.READY_TO_PICK_UP: {
-                        return book.date ? 'Book is ready to pick up.\nBorrow it before ' + book.date.toLocaleDateString() : '';
-                    }
+                        case BookStatus.READY_TO_PICK_UP: {
+                            return book.date ? 'Book is ready to pick up.\nBorrow it before ' + book.date.toLocaleDateString() : '';
+                        }
 
-                    case BookStatus.RESERVED: {
-                        return book.date ? 'Reserved for you.\nExpected on ' + book.date.toLocaleDateString() : '';
-                    }
+                        case BookStatus.RESERVED: {
+                            return book.date ? 'Reserved for you.\nExpected on ' + book.date.toLocaleDateString() : '';
+                        }
 
-                    case BookStatus.BORROWED:
-                    case BookStatus.SHOULD_RETURN_SOON: {
-                        return book.dueDate ? 'Borrowed by you.\nReturn before ' + book.dueDate.toLocaleDateString() : '';
-                    }
+                        case BookStatus.BORROWED:
+                        case BookStatus.SHOULD_RETURN_SOON: {
+                            return book.dueDate ? 'Borrowed by you.\nReturn before ' + book.dueDate.toLocaleDateString() : '';
+                        }
 
-                    default: return '';
+                        default:
+                            return '';
+                    }
                 }
             }
 
-            _updateActionUnsupportedMessage(book){
-                switch (book.status) {
-                    case BookStatus.BORROWED:
-                    case BookStatus.SHOULD_RETURN_SOON:
-                    case BookStatus.OVERDUE: {
-                        if (!book.isAllowedLoanExtension) {
-                            return 'RESERVED BY ANOTHER READER';
+            _updateActionUnsupportedMessage(book) {
+                if (book) {
+                    switch (book.status) {
+                        case BookStatus.BORROWED:
+                        case BookStatus.SHOULD_RETURN_SOON:
+                        case BookStatus.OVERDUE: {
+                            if (!book.isAllowedLoanExtension) {
+                                return 'RESERVED BY ANOTHER READER';
+                            }
+                            break;
                         }
-                        break;
+                        default:
+                            return '';
                     }
-                    default: return '';
                 }
             }
 
diff --git a/client-web/src/exlibris-app/reducers/exlibris_reducer.html b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
index 3e48578..841ea76 100644
--- a/client-web/src/exlibris-app/reducers/exlibris_reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
@@ -39,14 +39,13 @@
         switch (action.type) {
             case ElibrisActions.FIND_BOOK_BY_ID: {
                 const id = action.bookId;
-                const book = {
-                    ...state.allBooks.find(x => x.id === id)
+                const book =
+                    state.allBooks.find(x => x.id === id)
                     || state.expectedSoonBooks.find(x => x.id === id)
                     || state.overdueBooks.find(x => x.id === id)
                     || state.shouldReturnBooks.find(x => x.id === id)
                     || state.borrowedBooks.find(x => x.id === id)
-                    || state.reservedBooks.find(x => x.id === id)
-                };
+                    || state.reservedBooks.find(x => x.id === id);
                 return Object.assign({}, state, {selectedBook: book});
             }
             default:

From 555b33be946d9d31090e5e4ec6b872b66377dd48 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 10 Apr 2018 12:17:35 +0300
Subject: [PATCH 45/92] Add jsdocs for compute values methods.

---
 .../exlibris-app/exlibris-book-details.html   | 40 ++++++++++---------
 .../reducers/exlibris_reducer.html            |  9 +++++
 2 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 948978a..782bc29 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -65,10 +65,6 @@
                 margin-top: 25px;
             }
 
-            .book-card .head-region iron-image.hidden {
-                display: none;
-            }
-
             .book-card .head-region .head-info {
                 display: flex;
                 width: 70%;
@@ -187,9 +183,7 @@
 
         <div class="book-card">
             <div class="head-region">
-                <iron-image class$="[[_isBookCoverLoaded(loaded)]]"
-                            src="src/exlibris-app/images/cover-placeholder.png"></iron-image>
-                <iron-image preload loaded="{{loaded}}" src="[[book.image]]"></iron-image>
+                <iron-image src="[[book.image]]"></iron-image>
                 <div class="head-info">
                     <div class="head-text">
                         <div id="title">[[book.title]]</div>
@@ -239,6 +233,9 @@
                      * @property {string} author string with authors of the book
                      * @property {string} category the book category
                      * @property {number} availableCount the number of items available for borrowing.
+                     * @property {boolean} isAllowedLoanExtension is loan extension 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.
                      */
                     book: {
@@ -306,10 +303,17 @@
                 }
             }
 
+            /**
+             * Dispatches action to find book by Id specified by the `routeData`.
+             */
             _routeDataChanged(routeData) {
                 this.dispatch('findBookById', routeData.id);
             }
 
+            /**
+             * Sets the appropriate button title and click handler function
+             * according to the passed book.
+             */
             _updateButton(book) {
                 if (book) {
                     switch (book.status) {
@@ -346,6 +350,10 @@
                 }
             }
 
+            /**
+             * Sets the appropriate status message
+             * according to the passed book.
+             */
             _updateStatusMessage(book) {
                 if (book) {
                     switch (book.status) {
@@ -367,6 +375,7 @@
                                 const numberOfOverdueDays = now.getDate() - book.dueDate.getDate();
                                 return numberOfOverdueDays + ' days overdue.';
                             }
+                            break;
                         }
 
                         case BookStatus.READY_TO_PICK_UP: {
@@ -388,6 +397,10 @@
                 }
             }
 
+            /**
+             * Sets the appropriate message if the button is not supported
+             * for the passed book.
+             */
             _updateActionUnsupportedMessage(book) {
                 if (book) {
                     switch (book.status) {
@@ -405,20 +418,9 @@
                 }
             }
 
-            /**
-             * Used to hide the book cover placeholder image
-             * when the original image is loaded.
-             *
-             * @param {boolean} loaded main cover loading status.
-             * @returns {string} the iron-image custom class value.
-             * @private
-             */
-            _isBookCoverLoaded(loaded) {
-                return loaded ? 'hidden' : '';
-            }
-
             /**
              * Handles the button click.
+             * Calls the button clickHandler function.
              *
              * @private
              */
diff --git a/client-web/src/exlibris-app/reducers/exlibris_reducer.html b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
index 841ea76..4e6aeb4 100644
--- a/client-web/src/exlibris-app/reducers/exlibris_reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
@@ -38,6 +38,7 @@
     const reducer = (state = initialState, action) => {
         switch (action.type) {
             case ElibrisActions.FIND_BOOK_BY_ID: {
+                // sleep(1000);
                 const id = action.bookId;
                 const book =
                     state.allBooks.find(x => x.id === id)
@@ -53,5 +54,13 @@
         }
     };
 
+    function sleep(milliseconds) {
+        const start = new Date().getTime();
+        for (let i = 0; i < 1e7; i++) {
+            if ((new Date().getTime() - start) > milliseconds){
+                break;
+            }
+        }
+    }
 
 </script>

From cac2381effc50e34766249ecc74dbbe0d31a6201 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 10 Apr 2018 16:23:07 +0300
Subject: [PATCH 46/92] Extract book redirect link into custom element.

---
 .../exlibris-book-details-redirect-link.html  | 127 ++++++++++++++++++
 .../exlibris-app/exlibris-book-details.html   |   4 +
 client-web/src/exlibris-app/test_values.js    |  43 ++++--
 3 files changed, 161 insertions(+), 13 deletions(-)
 create mode 100644 client-web/src/exlibris-app/exlibris-book-details-redirect-link.html

diff --git a/client-web/src/exlibris-app/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/exlibris-book-details-redirect-link.html
new file mode 100644
index 0000000..4018bd7
--- /dev/null
+++ b/client-web/src/exlibris-app/exlibris-book-details-redirect-link.html
@@ -0,0 +1,127 @@
+<!--
+  ~ Copyright 2018, TeamDev Ltd. All rights reserved.
+  ~
+  ~ Redistribution and use in source and/or binary forms, with or without
+  ~ modification, must retain the above copyright notice and the following
+  ~ disclaimer.
+  ~
+  ~ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+  ~ "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+  ~ LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+  ~ A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+  ~ OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+  ~ SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+  ~ LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+  ~ DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+  ~ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+  ~ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+  ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+  -->
+
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+
+<dom-module id="exlibris-book-details-redirect-link">
+    <template>
+        <style>
+            :host {
+                display: flex;
+                font-size: 12px;
+                font-weight: lighter;
+                margin: 5px 0 5px 0;
+            }
+
+            #code-type {
+                padding-right: 5px;
+            }
+
+            #title {
+                display: flex;
+                text-decoration-style: dotted;
+            }
+
+            #title iron-icon {
+                --iron-icon-width: 10px;
+                --iron-icon-height: 10px;
+                margin-top: -2px;
+            }
+        </style>
+
+        <div id="code-type" hidden="[[!redirectValues.codeType.length]]">
+            [[redirectValues.codeType]]</div>
+        <a href="" id="title" on-click="_openInNewTab">
+            [[redirectValues.title]]
+            <iron-icon icon="open-in-new"></iron-icon>
+        </a>
+
+    </template>
+
+    <script>
+        const ISBN10Matcher = /^\d{10}$/g;
+        const ISBN13Matcher = /^\d{13}$/g;
+        const ASINMatcher = /^[\d, A-Z]{10}$/g;
+        const AMAZON_SERCH_LINK = 'https://www.amazon.com/%s/dp/%s/';
+        const PLAY_BOOKS_SEARCH_LINK = 'https://play.google.com/store/search?q=%s&c=books'
+
+        String.prototype.format = function () {
+            return [...arguments].reduce((p, c) => p.replace(/%s/, c), this);
+        };
+
+        class ExlibrisBookDetailsRedirectLink extends Polymer.Element {
+            static get is() {
+                return 'exlibris-book-details-redirect-link';
+            }
+
+            static get properties() {
+                return {
+                    bookCode: String,
+
+                    bookTitle: String,
+
+                    redirectValues: {
+                        type: Object,
+                        computed: "_handleCode(bookCode, bookTitle)"
+                    }
+                };
+            }
+
+            _handleCode(bookCode) {
+                if (bookCode && bookCode.match(ISBN10Matcher)) {
+                    return {
+                        codeType: 'ISBN:  ',
+                        title: bookCode,
+                        href: AMAZON_SERCH_LINK.format(this.bookTitle, bookCode)
+                    }
+                }
+
+                if (bookCode && bookCode.match(ISBN13Matcher)) {
+                    return {
+                        codeType: 'ISBN:',
+                        title: bookCode,
+                        href: PLAY_BOOKS_SEARCH_LINK.format(bookCode)
+                    }
+                }
+                if (bookCode && bookCode.match(ASINMatcher)) {
+                    return {
+                        codeType: 'ASIN:',
+                        title: bookCode,
+                        href: AMAZON_SERCH_LINK.format(this.bookTitle, bookCode)
+                    }
+                }
+
+                return {
+                    codeType: '',
+                    title: 'Search on Google play',
+                    href: PLAY_BOOKS_SEARCH_LINK.format(this.bookTitle.replace(' ', '%20'))
+                }
+            }
+
+            _openInNewTab() {
+                window.open(this.redirectValues.href,'_blank');
+            }
+        }
+
+        window.customElements.define(ExlibrisBookDetailsRedirectLink.is, ExlibrisBookDetailsRedirectLink);
+    </script>
+</dom-module>
diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/exlibris-book-details.html
index 782bc29..ce80b5f 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/exlibris-book-details.html
@@ -30,6 +30,8 @@
 <link rel="import" href="./book_values.html">
 <link rel="import" href="./actions/exlibris_action.html">
 
+<link rel="import" href="exlibris-book-details-redirect-link.html">
+
 <dom-module id="exlibris-book-details">
     <template>
         <style>
@@ -188,6 +190,8 @@
                     <div class="head-text">
                         <div id="title">[[book.title]]</div>
                         <div id="author">[[book.author]]</div>
+                        <exlibris-book-details-redirect-link book-code="[[book.isbn]]"
+                                                             book-title="[[book.title]]"></exlibris-book-details-redirect-link>
                         <div id="status-message">[[statusMessage]]</div>
                     </div>
                     <div class="button-wide-screen">
diff --git a/client-web/src/exlibris-app/test_values.js b/client-web/src/exlibris-app/test_values.js
index 72ab0c1..ee9a008 100644
--- a/client-web/src/exlibris-app/test_values.js
+++ b/client-web/src/exlibris-app/test_values.js
@@ -32,6 +32,7 @@ const libraryTestBooks = [
         title: "Прежде Чем Он Согрешит ",
         image: "https://books.google.com/books/content/images/frontcover/uVVMDwAAQBAJ?fife=w200-h300",
         author: "Блейк Пирс",
+        isbn: "9781640293663",
         category: "Fiction ",
         description: "Блейк Пирс, автор бестселлера «КОГДА ОНА УШЛА» (бестселлера #1 с более чем 900 отзывов с высшей оценкой), представляет книгу #7 в увлекательной серии детективных романов о Макензи Уайт.\n" +
         "В «ПРЕЖДЕ ЧЕМ ОН СОГРЕШИТ» (Загадки Макензи Уайт—Книга 7) по всему Вашингтону полиция находит тела священников, распятые перед входом в храмы. Что это, акт возмездия? Искать ли преступника среди служителей церкви? Или это серийный убийца, открывший охоту на священников и движимый более зловещими мотивами?\n" +
@@ -48,6 +49,7 @@ const libraryTestBooks = [
         title: "The Martian",
         image: "https://books.google.com/books/content/images/frontcover/gdxlAQAAQBAJ?fife=w200-h300",
         author: "Andy Weir",
+        isbn: "B017PNMYSK",
         category: "Fiction",
         description: "The Sunday Times Bestseller behind the major new film from Ridley Scott starring Matt Damon and Jessica Chastain.\n" +
         "I’m stranded on Mars.\n" +
@@ -65,10 +67,11 @@ const libraryTestBooks = [
         status: "EXPECTED"
     }, {
 
-        id: "8535902772",
+        id: "0132350882",
         title: "Clean Code: A Handbook of Agile Software Craftsmanship",
         image: "https://books.google.com/books/content/images/frontcover/_i6bDeoCQzsC?fife=w200-h300",
         author: "Robert C. Martin",
+        isbn: "0132350882",
         category: "Programming",
         description: "Even bad code can function. But if code isn’t clean, it can bring a development organization to its knees. Every year, countless hours and significant resources are lost because of poorly written code. But it doesn’t have to be that way.\n" +
         "\n" +
@@ -89,10 +92,11 @@ const libraryTestBooks = [
         availableCount: 4,
         status: "AVAILABLE"
     }, {
-        id: "8535902773",
+        id: "0596527756",
         title: "Java Generics and Collections: Speed Up the Java Development Process",
         image: "https://books.google.com/books/content/images/frontcover/zaoK0Z2STlkC?fife=w200-h300",
         author: "Maurice Naftalin",
+        isbn: "0596527756",
         category: "Java programming",
         description: "This comprehensive guide shows you how to master the most importantchanges to Java since it was first released. Generics and the greatlyexpanded collection libraries have tremendously increased the power ofJava 5 and Java 6. But they have also confused many developers whohaven't known how to take advantage of these new features.\n" +
         "Java Generics and Collections covers everything from the mostbasic uses of generics to the strangest corner cases. It teaches youeverything you need to know about the collections libraries, so you'llalways know which collection is appropriate for any given task, andhow to use it.\n" +
@@ -113,10 +117,11 @@ const libraryTestBooks = [
         status: "EXPECTED"
     }, {
 
-        id: "8535902774",
+        id: "0321563840",
         title: "The C++ Programming Language: Edition 4",
         image: "https://books.google.com/books/content/images/frontcover/PSUNAAAAQBAJ?fife=w200-h300",
         author: "Bjarne Stroustrup",
+        isbn: "0321563840",
         category: "C++",
         description: "The new C++11 standard allows programmers to express ideas more clearly, simply, and directly, and to write faster, more efficient code. Bjarne Stroustrup, the designer and original implementer of C++, has reorganized, extended, and completely rewritten his definitive reference and tutorial for programmers who want to use C++ most effectively.\n" +
         "The C++ Programming Language, Fourth Edition, delivers meticulous, richly explained, and integrated coverage of the entire language—its facilities, abstraction mechanisms, standard libraries, and key design techniques. Throughout, Stroustrup presents concise, “pure C++11” examples, which have been carefully crafted to clarify both usage and program design. To promote deeper understanding, the author provides extensive cross-references, both within the book and to the ISO standard.\n" +
@@ -141,10 +146,11 @@ const libraryTestBooks = [
         availableCount: 6,
         status: "AVAILABLE"
     }, {
-        id: "8535902776",
+        id: "0753555638",
         title: "Elon Musk: How the Billionaire CEO of SpaceX and Tesla is Shaping our Future",
         image: "https://books.google.com/books/content/images/frontcover/_LFSBgAAQBAJ?fife=w200-h300",
         author: "Ashlee Vance",
+        isbn: "0753555638",
         category: "Biography",
         description: "Explore the whole new world of web development and create responsive web apps using PolymerAbout This Book\n" +
         "Get to grips with the principles of Material Design and Google Web components\n" +
@@ -173,10 +179,11 @@ const libraryTestBooks = [
         status: "AVAILABLE"
     }, {
 
-        id: "8535902777",
+        id: "0321965515",
         title: "Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability, Edition 3",
         image: "https://books.google.com/books/content/images/frontcover/QlduAgAAQBAJ?fife=w200-h300",
         author: "Steve Krug",
+        isbn: "0321965515",
         category: "Web Design",
         description: "Since Don’t Make Me Think was first published in 2000, hundreds of thousands of Web designers and developers have relied on usability guru Steve Krug’s guide to help them understand the principles of intuitive navigation and information design. Witty, commonsensical, and eminently practical, it’s one of the best-loved and most recommended books on the subject.\n" +
         "\n" +
@@ -190,28 +197,31 @@ const libraryTestBooks = [
         availableCount: 10,
         status: "AVAILABLE"
     }, {
-        id: "8535902778",
+        id: "1617292575",
         title: "Node.js в действии. 2-е издание",
         image: "https://books.google.com/books/content/images/frontcover/s9VMDwAAQBAJ?fife=w200-h300",
         author: "Кантелон МайкХартер МаркГоловайчук TJРайлих Натан",
+        isbn: "1617292575",
         description: "Реактивное программирование - совершенно новая и многообещающая парадигма, позволяющая эффективно решать задачи, связанные с созданием распределенных систем и программированием для JVM. Эта книга расскажет, как организовать поток задач, наладить обмен сообщениями между элементами программы, обеспечить параллельную и конкурентную обработку и создавать надежные, отказоустойчивые и гибкие приложения. Перед вами - основополагающая работа по шаблонам проектирования (design patterns) этой парадигмы. Книга проиллюстрирована многочисленными примерами и ориентирована на опытных Java- и Scala-разработчиков",
         availableCount: 11,
         status: "AVAILABLE"
     }, {
 
-        id: "8535902779",
+        id: "9781491931776",
         title: "React.js. Быстрый старт",
         image: "https://books.google.com/books/content/images/frontcover/g79TDgAAQBAJ?fife=w200-h300",
         author: "Стоян Стефанов",
+        isbn: "9781491931776",
         description: "Незаменимая вводная книга по технологии React для взыскательных JavaScript-разработчиков. Все самое интересное о сверхпопулярном инструменте от компании Facebook. В книге рассмотрены основные концепции высокопроизводительного программирования при помощи React, реальные примеры кода и доступные блок-схемы. Прочитав ее, вы научитесь: • Создавать и использовать собственные компоненты React наряду с универсальными компонентами DOM • Писать компоненты для таблиц данных, позволяющие редактировать, сортировать таблицу, выполнять в ней поиск и экспортировать ее содержимое • Использовать дополнительный синтаксис JSX в качестве альтернативы для вызовов функций • Запускать низкоуровневый гибкий процесс сборки, который освободит вам время и поможет сосредоточиться на работе с React • Работать с инструментами ESLint, Flow и Jest, позволяющими проверять и тестировать код по мере разработки приложения • Обеспечивать коммуникацию между компонентами при помощи Flux В итоге у вас получится полноценное веб-приложение, позволяющее сохранять данные на стороне клиента.",
         availableCount: 0,
         status: "EXPECTED"
     }, {
 
-        id: "8535902710",
+        id: "1782168877",
         title: "Game Programming Using Qt: Beginner's Guide",
         image: "https://books.google.com/books/content/images/frontcover/6F0dDAAAQBAJ?fife=w200-h300",
         author: "Witold WysotaLorenz Haas",
+        isbn: "1782168877",
         category: "Programming",
         description: "A complete guide to designing and building fun games with Qt and Qt Quick 2 using associated toolsetsAbout This Book\n" +
         "Learn to create simple 2D to complex 3D graphics and games using all possible tools and widgets available for game development in Qt\n" +
@@ -241,19 +251,21 @@ const libraryTestBooks = [
         status: "AVAILABLE"
     }, {
 
-        id: "8535902711",
+        id: "1484228073",
         title: "Pro Spring 5: An In-Depth Guide to the Spring Framework and Its Tools, Edition 5",
         image: "https://books.google.com/books/content/images/frontcover/N-U5DwAAQBAJ?fife=w200-h300",
         author: "Iuliana CosminaRob HarropChris SchaeferClarence Ho",
+        isbn: "1484228073",
         category: "Java Programming",
         description: "",
         availableCount: 286,
         status: "AVAILABLE"
     }, {
-        id: "8535902712",
+        id: "0596517742",
         title: "JavaScript: The Good Parts: The Good Parts",
         image: "https://books.google.com/books/content/images/frontcover/PXa2bby0oQ0C?fife=w200-h300",
         author: "Douglas Crockford",
+        isbn: "0596517742",
         category: "JavaScript",
         description: "Most programming languages contain good and bad parts, but JavaScript has more than its share of the bad, having been developed and released in a hurry before it could be refined. This authoritative book scrapes away these bad features to reveal a subset of JavaScript that's more reliable, readable, and maintainable than the language as a whole—a subset you can use to create truly extensible and efficient code.\n" +
         "Considered the JavaScript expert by many people in the development community, author Douglas Crockford identifies the abundance of good ideas that make JavaScript an outstanding object-oriented programming language-ideas such as functions, loose typing, dynamic objects, and an expressive object literal notation. Unfortunately, these good ideas are mixed in with bad and downright awful ideas, like a programming model based on global variables.\n" +
@@ -275,10 +287,11 @@ const libraryTestBooks = [
         availableCount: 15,
         status: "AVAILABLE"
     }, {
-        id: "8535902713",
+        id: "9351108511",
         title: "Java in a Nutshell: A Desktop Quick Reference, Edition 6",
         image: "https://books.google.com/books/content/images/frontcover/trDXBAAAQBAJ?fife=w200-h300",
         author: "Benjamin J EvansDavid Flanagan",
+        isbn: "9351108511",
         category: "Java Programming",
         description: "The latest edition of Java in a Nutshell is designed to help experienced Java programmers get the most out of Java 7 and 8, but it’s also a learning path for new developers. Chock full of examples that demonstrate how to take complete advantage of modern Java APIs and development best practices, the first section of this thoroughly updated book provides a fast-paced, no-fluff introduction to the Java programming language and the core runtime aspects of the Java platform.\n" +
         "The second section is a reference to core concepts and APIs that shows you how to perform real programming work in the Java environment.\n" +
@@ -295,10 +308,11 @@ const libraryTestBooks = [
         availableCount: 5,
         status: "AVAILABLE"
     }, {
-        id: "8535902714",
+        id: "1491904240",
         title: "You Don't Know JS: ES6 & Beyond",
         image: "https://books.google.com/books/content/images/frontcover/iOc6CwAAQBAJ?fife=w200-h300",
         author: "Kyle Simpson",
+        isbn: '1491904240',
         category: "JavaScript",
         description: "No matter how much experience you have with JavaScript, odds are you don’t fully understand the language. As part of the \"You Don’t Know JS\" series, this compact guide focuses on new features available in ECMAScript 6 (ES6), the latest version of the standard upon which JavaScript is built.\n" +
         "Like other books in this series, You Don’t Know JS: ES6 & Beyond dives into trickier parts of the language that many JavaScript programmers either avoid or know nothing about. Armed with this knowledge, you can achieve true JavaScript mastery.\n" +
@@ -315,10 +329,11 @@ const libraryTestBooks = [
         availableCount: 1,
         status: "AVAILABLE"
     }, {
-        id: "8535902715",
+        id: "9781640293663",
         title: "Прежде Чем Он Согрешит ",
         image: "https://books.google.com/books/content/images/frontcover/uVVMDwAAQBAJ?fife=w200-h300",
         author: "Блейк Пирс",
+        isbn: "9781640293663",
         category: "Fiction ",
         description: "Блейк Пирс, автор бестселлера «КОГДА ОНА УШЛА» (бестселлера #1 с более чем 900 отзывов с высшей оценкой), представляет книгу #7 в увлекательной серии детективных романов о Макензи Уайт.\n" +
         "В «ПРЕЖДЕ ЧЕМ ОН СОГРЕШИТ» (Загадки Макензи Уайт—Книга 7) по всему Вашингтону полиция находит тела священников, распятые перед входом в храмы. Что это, акт возмездия? Искать ли преступника среди служителей церкви? Или это серийный убийца, открывший охоту на священников и движимый более зловещими мотивами?\n" +
@@ -335,6 +350,7 @@ const libraryTestBooks = [
         title: "The Martian",
         image: "https://books.google.com/books/content/images/frontcover/gdxlAQAAQBAJ?fife=w200-h300",
         author: "Andy Weir",
+        isbn: "B017PNMYSK",
         category: "Fiction ",
         description: "The Sunday Times Bestseller behind the major new film from Ridley Scott starring Matt Damon and Jessica Chastain.\n" +
         "I’m stranded on Mars.\n" +
@@ -355,6 +371,7 @@ const libraryTestBooks = [
         title: "Clean Code: A Handbook of Agile Software Craftsmanship",
         image: "https://books.google.com/books/content/images/frontcover/_i6bDeoCQzsC?fife=w200-h300",
         author: "Robert C. Martin",
+        isbn: "0132350882",
         category: "Programming",
         description: "Even bad code can function. But if code isn’t clean, it can bring a development organization to its knees. Every year, countless hours and significant resources are lost because of poorly written code. But it doesn’t have to be that way.\n" +
         "\n" +

From 60ef5f68610fe13a94ab1d7f388d995074dad8e2 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 10 Apr 2018 17:18:27 +0300
Subject: [PATCH 47/92] Complete redirect link component docs, extract enums of
 code matchers and external links.

---
 .../exlibris-book-details-redirect-link.html  | 80 +++++++++++++++----
 1 file changed, 63 insertions(+), 17 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/exlibris-book-details-redirect-link.html
index 4018bd7..3a3464c 100644
--- a/client-web/src/exlibris-app/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/exlibris-book-details-redirect-link.html
@@ -49,7 +49,8 @@
         </style>
 
         <div id="code-type" hidden="[[!redirectValues.codeType.length]]">
-            [[redirectValues.codeType]]</div>
+            [[redirectValues.codeType]]
+        </div>
         <a href="" id="title" on-click="_openInNewTab">
             [[redirectValues.title]]
             <iron-icon icon="open-in-new"></iron-icon>
@@ -58,16 +59,31 @@
     </template>
 
     <script>
-        const ISBN10Matcher = /^\d{10}$/g;
-        const ISBN13Matcher = /^\d{13}$/g;
-        const ASINMatcher = /^[\d, A-Z]{10}$/g;
-        const AMAZON_SERCH_LINK = 'https://www.amazon.com/%s/dp/%s/';
-        const PLAY_BOOKS_SEARCH_LINK = 'https://play.google.com/store/search?q=%s&c=books'
+        const BOOK_CODE_MATCHERS = {
+            ISBN_10: /^\d{10}$/g,
+            ISBN_13: /^\d{13}$/g,
+            ASIN: /^[\d, A-Z]{10}$/g
+        };
+
+        const EXTERNAL_SEARCH_LINKS = {
+            AMAZON: 'https://www.amazon.com/%s/dp/%s/',
+            PLAY_BOOKS: 'https://play.google.com/store/search?q=%s&c=books'
+        };
 
         String.prototype.format = function () {
             return [...arguments].reduce((p, c) => p.replace(/%s/, c), this);
         };
 
+        /**
+         * The book external link component.
+         *
+         * Generates the link to the one of global book services and
+         * opens it in the new tab. The external service choice depends
+         * on the book code format.
+         *
+         * @customElement
+         * @polymer
+         */
         class ExlibrisBookDetailsRedirectLink extends Polymer.Element {
             static get is() {
                 return 'exlibris-book-details-redirect-link';
@@ -75,50 +91,80 @@
 
             static get properties() {
                 return {
+                    /**
+                     * The book unique code.
+                     * Can be presented in the form of ISBN-10, ISBN-13 or ASIN.
+                     */
                     bookCode: String,
 
+                    /**
+                     * The book title.
+                     */
                     bookTitle: String,
 
+                    /**
+                     * The book external link reference, title and the code type.
+                     *
+                     * @property {string} codeType the detected book code type.
+                     * @property {string} title  the reference title.
+                     * @property {string} href  the link to open in the new tab.
+                     */
                     redirectValues: {
                         type: Object,
-                        computed: "_handleCode(bookCode, bookTitle)"
+                        computed: "_calculateReference(bookCode, bookTitle)"
                     }
                 };
             }
 
-            _handleCode(bookCode) {
-                if (bookCode && bookCode.match(ISBN10Matcher)) {
+            /**
+             * Checks for the passed book code format.
+             *
+             * If the `bookCode` matches the `ISBN-10` or `ASIN` pattern, generates
+             * the Amazon book link.
+             * If the `bookCode` matches the `ISBN-13` pattern, generates the Google Play Books
+             * search by the `ISBN-13` link.
+             * If the `bookCode` does not match any patterns, generates the Google Play Books
+             * search by the `bookTitle`.
+             */
+            _calculateReference(bookCode, bookTitle) {
+                if (bookCode && bookCode.match(BOOK_CODE_MATCHERS.ISBN_10)) {
                     return {
-                        codeType: 'ISBN:  ',
+                        codeType: 'ISBN:',
                         title: bookCode,
-                        href: AMAZON_SERCH_LINK.format(this.bookTitle, bookCode)
+                        href: EXTERNAL_SEARCH_LINKS.AMAZON.format(bookTitle, bookCode)
                     }
                 }
 
-                if (bookCode && bookCode.match(ISBN13Matcher)) {
+                if (bookCode && bookCode.match(BOOK_CODE_MATCHERS.ISBN_13)) {
                     return {
                         codeType: 'ISBN:',
                         title: bookCode,
-                        href: PLAY_BOOKS_SEARCH_LINK.format(bookCode)
+                        href: EXTERNAL_SEARCH_LINKS.PLAY_BOOKS.format(bookCode)
                     }
                 }
-                if (bookCode && bookCode.match(ASINMatcher)) {
+                if (bookCode && bookCode.match(BOOK_CODE_MATCHERS.ASIN)) {
                     return {
                         codeType: 'ASIN:',
                         title: bookCode,
-                        href: AMAZON_SERCH_LINK.format(this.bookTitle, bookCode)
+                        href: EXTERNAL_SEARCH_LINKS.AMAZON.format(bookTitle, bookCode)
                     }
                 }
 
                 return {
                     codeType: '',
                     title: 'Search on Google play',
-                    href: PLAY_BOOKS_SEARCH_LINK.format(this.bookTitle.replace(' ', '%20'))
+                    href: EXTERNAL_SEARCH_LINKS.PLAY_BOOKS.format(bookTitle.replace(' ', '%20'))
                 }
             }
 
+            /**
+             * Opens the new tab with the specified book link.
+             * @private
+             */
             _openInNewTab() {
-                window.open(this.redirectValues.href,'_blank');
+                if (this.redirectValues.href) {
+                    window.open(this.redirectValues.href, '_blank');
+                }
             }
         }
 

From 9a1626fe69458c534f5ebc3b37f0114167d370af Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 10 Apr 2018 18:30:16 +0300
Subject: [PATCH 48/92] Replace on-click handler with link using target
 property.

---
 .../exlibris-book-details-redirect-link.html       | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/client-web/src/exlibris-app/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/exlibris-book-details-redirect-link.html
index 3a3464c..9a387f9 100644
--- a/client-web/src/exlibris-app/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/exlibris-book-details-redirect-link.html
@@ -51,11 +51,11 @@
         <div id="code-type" hidden="[[!redirectValues.codeType.length]]">
             [[redirectValues.codeType]]
         </div>
-        <a href="" id="title" on-click="_openInNewTab">
+        <a id="title" target="_blank" href="[[redirectValues.href]]">
             [[redirectValues.title]]
             <iron-icon icon="open-in-new"></iron-icon>
         </a>
-
+        </div>
     </template>
 
     <script>
@@ -156,16 +156,6 @@
                     href: EXTERNAL_SEARCH_LINKS.PLAY_BOOKS.format(bookTitle.replace(' ', '%20'))
                 }
             }
-
-            /**
-             * Opens the new tab with the specified book link.
-             * @private
-             */
-            _openInNewTab() {
-                if (this.redirectValues.href) {
-                    window.open(this.redirectValues.href, '_blank');
-                }
-            }
         }
 
         window.customElements.define(ExlibrisBookDetailsRedirectLink.is, ExlibrisBookDetailsRedirectLink);

From b18c0a55b846560218a842ef88bf4448c5ba90dc Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Wed, 11 Apr 2018 15:32:03 +0300
Subject: [PATCH 49/92] Refactor namespace declaration in project.

---
 .../exlibris-app/actions/exlibris_action.html | 27 ++++++++
 .../exlibris-app/{ => book}/book_values.html  |  4 +-
 .../exlibris-book-details-redirect-link.html  |  6 +-
 .../{ => book}/exlibris-book-details.html     | 65 ++++++++++---------
 .../{ => book}/exlibris-book-grid.html        | 10 +--
 .../{ => book}/exlibris-book-tile.html        | 32 ++++-----
 client-web/src/exlibris-app/exlibris-app.html |  4 +-
 .../reducers/exlibris_reducer.html            |  8 +--
 .../src/exlibris-app/shell/redux-store.html   |  2 +-
 9 files changed, 93 insertions(+), 65 deletions(-)
 create mode 100644 client-web/src/exlibris-app/actions/exlibris_action.html
 rename client-web/src/exlibris-app/{ => book}/book_values.html (93%)
 rename client-web/src/exlibris-app/{ => book}/exlibris-book-details-redirect-link.html (96%)
 rename client-web/src/exlibris-app/{ => book}/exlibris-book-details.html (86%)
 rename client-web/src/exlibris-app/{ => book}/exlibris-book-grid.html (89%)
 rename client-web/src/exlibris-app/{ => book}/exlibris-book-tile.html (85%)

diff --git a/client-web/src/exlibris-app/actions/exlibris_action.html b/client-web/src/exlibris-app/actions/exlibris_action.html
new file mode 100644
index 0000000..dcdc46d
--- /dev/null
+++ b/client-web/src/exlibris-app/actions/exlibris_action.html
@@ -0,0 +1,27 @@
+<!--
+  ~ Copyright 2018, TeamDev Ltd. All rights reserved.
+  ~
+  ~ Redistribution and use in source and/or binary forms, with or without
+  ~ modification, must retain the above copyright notice and the following
+  ~ disclaimer.
+  ~
+  ~ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+  ~ "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+  ~ LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+  ~ A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+  ~ OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+  ~ SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+  ~ LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+  ~ DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+  ~ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+  ~ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+  ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+  -->
+
+<script>
+    /* exported ExlibrisActions */
+
+    const ExlibrisActions = {
+        FIND_BOOK_BY_ID: "FIND_BOOK_BY_ID",
+    }
+</script>
diff --git a/client-web/src/exlibris-app/book_values.html b/client-web/src/exlibris-app/book/book_values.html
similarity index 93%
rename from client-web/src/exlibris-app/book_values.html
rename to client-web/src/exlibris-app/book/book_values.html
index 2763968..f8922bb 100644
--- a/client-web/src/exlibris-app/book_values.html
+++ b/client-web/src/exlibris-app/book/book_values.html
@@ -21,9 +21,7 @@
 <script>
     /* exported BookStatus */
 
-    window.ExlibrisApplication = {} || ExlibrisApplication;
-
-    ExlibrisApplication.BookStatus = {
+    ExlibrisApp.BookStatus = {
         OVERDUE: "OVERDUE",
         BORROWED: "BORROWED",
         SHOULD_RETURN_SOON: "SHOULD_RETURN_SOON",
diff --git a/client-web/src/exlibris-app/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
similarity index 96%
rename from client-web/src/exlibris-app/exlibris-book-details-redirect-link.html
rename to client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index 9a387f9..b789dc4 100644
--- a/client-web/src/exlibris-app/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -18,9 +18,9 @@
   ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   -->
 
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
-<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
+<link rel="import" href="../../../bower_components/iron-icons/iron-icons.html">
 
 <dom-module id="exlibris-book-details-redirect-link">
     <template>
diff --git a/client-web/src/exlibris-app/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
similarity index 86%
rename from client-web/src/exlibris-app/exlibris-book-details.html
rename to client-web/src/exlibris-app/book/exlibris-book-details.html
index ce80b5f..202c992 100644
--- a/client-web/src/exlibris-app/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -18,19 +18,22 @@
   ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   -->
 
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">
-<link rel="import" href="../../bower_components/app-route/app-route.html">
-<link rel="import" href="../../bower_components/paper-styles/color.html">
-<link rel="import" href="../../bower_components/paper-button/paper-button.html">
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
-<link rel="import" href="../../bower_components/iron-image/iron-image.html">
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<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="../shell/redux-store.html">
+<link rel="import" href="../../../bower_components/polymer/lib/elements/dom-if.html">
+<link rel="import" href="../../../bower_components/app-route/app-route.html">
+<link rel="import" href="../../../bower_components/paper-styles/color.html">
+<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../../bower_components/iron-icons/iron-icons.html">
+<link rel="import" href="../../../bower_components/iron-image/iron-image.html">
+<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="./book_values.html">
-<link rel="import" href="./actions/exlibris_action.html">
+<link rel="import" href="../actions/exlibris_action.html">
 
-<link rel="import" href="exlibris-book-details-redirect-link.html">
+<link rel="import" href="./exlibris-book-details-redirect-link.html">
 
 <dom-module id="exlibris-book-details">
     <template>
@@ -219,7 +222,7 @@
 
     <script>
 
-        class ExlibrisBookDetails extends window.ExlibrisApplication.ReduxMixin(Polymer.Element) {
+        class ExlibrisBookDetails extends ExlibrisApp.ReduxMixin(Polymer.Element) {
             static get is() {
                 return 'exlibris-book-details';
             }
@@ -300,7 +303,7 @@
                 return {
                     findBookById(bookId) {
                         return {
-                            type: ElibrisActions.FIND_BOOK_BY_ID,
+                            type: ExlibrisActions.FIND_BOOK_BY_ID,
                             bookId: bookId
                         }
                     }
@@ -321,17 +324,17 @@
             _updateButton(book) {
                 if (book) {
                     switch (book.status) {
-                        case BookStatus.EXPECTED_SOON:
-                        case BookStatus.EXPECTED: {
+                        case ExlibrisApp.BookStatus.EXPECTED_SOON:
+                        case ExlibrisApp.BookStatus.EXPECTED: {
                             return {
                                 title: 'RESERVE',
                                 clickHandler: this._requestReservation
                             };
                         }
 
-                        case BookStatus.OVERDUE:
-                        case BookStatus.BORROWED:
-                        case BookStatus.SHOULD_RETURN_SOON: {
+                        case ExlibrisApp.BookStatus.OVERDUE:
+                        case ExlibrisApp.BookStatus.BORROWED:
+                        case ExlibrisApp.BookStatus.SHOULD_RETURN_SOON: {
                             if (book.isAllowedLoanExtension) {
                                 return {
                                     title: 'EXTEND LOAN PERIOD',
@@ -341,8 +344,8 @@
                             break;
                         }
 
-                        case BookStatus.RESERVED:
-                        case BookStatus.READY_TO_PICK_UP: {
+                        case ExlibrisApp.BookStatus.RESERVED:
+                        case ExlibrisApp.BookStatus.READY_TO_PICK_UP: {
                             return {
                                 title: 'CANCEL RESERVATION',
                                 clickHandler: this._requestCancelReservation
@@ -361,19 +364,19 @@
             _updateStatusMessage(book) {
                 if (book) {
                     switch (book.status) {
-                        case BookStatus.AVAILABLE: {
+                        case ExlibrisApp.BookStatus.AVAILABLE: {
                             return book.availableCount ? book.availableCount + ' available.\nScan QR code to borrow.' : '';
                         }
 
-                        case BookStatus.EXPECTED: {
+                        case ExlibrisApp.BookStatus.EXPECTED: {
                             return 'Book not available.';
                         }
 
-                        case BookStatus.EXPECTED_SOON: {
+                        case ExlibrisApp.BookStatus.EXPECTED_SOON: {
                             return 'Arriving to library shortly.';
                         }
 
-                        case BookStatus.OVERDUE: {
+                        case ExlibrisApp.BookStatus.OVERDUE: {
                             if (book.dueDate) {
                                 const now = new Date();
                                 const numberOfOverdueDays = now.getDate() - book.dueDate.getDate();
@@ -382,16 +385,16 @@
                             break;
                         }
 
-                        case BookStatus.READY_TO_PICK_UP: {
+                        case ExlibrisApp.BookStatus.READY_TO_PICK_UP: {
                             return book.date ? 'Book is ready to pick up.\nBorrow it before ' + book.date.toLocaleDateString() : '';
                         }
 
-                        case BookStatus.RESERVED: {
+                        case ExlibrisApp.BookStatus.RESERVED: {
                             return book.date ? 'Reserved for you.\nExpected on ' + book.date.toLocaleDateString() : '';
                         }
 
-                        case BookStatus.BORROWED:
-                        case BookStatus.SHOULD_RETURN_SOON: {
+                        case ExlibrisApp.BookStatus.BORROWED:
+                        case ExlibrisApp.BookStatus.SHOULD_RETURN_SOON: {
                             return book.dueDate ? 'Borrowed by you.\nReturn before ' + book.dueDate.toLocaleDateString() : '';
                         }
 
@@ -408,9 +411,9 @@
             _updateActionUnsupportedMessage(book) {
                 if (book) {
                     switch (book.status) {
-                        case BookStatus.BORROWED:
-                        case BookStatus.SHOULD_RETURN_SOON:
-                        case BookStatus.OVERDUE: {
+                        case ExlibrisApp.BookStatus.BORROWED:
+                        case ExlibrisApp.BookStatus.SHOULD_RETURN_SOON:
+                        case ExlibrisApp.BookStatus.OVERDUE: {
                             if (!book.isAllowedLoanExtension) {
                                 return 'RESERVED BY ANOTHER READER';
                             }
diff --git a/client-web/src/exlibris-app/exlibris-book-grid.html b/client-web/src/exlibris-app/book/exlibris-book-grid.html
similarity index 89%
rename from client-web/src/exlibris-app/exlibris-book-grid.html
rename to client-web/src/exlibris-app/book/exlibris-book-grid.html
index 11b6010..071351e 100644
--- a/client-web/src/exlibris-app/exlibris-book-grid.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-grid.html
@@ -18,11 +18,11 @@
   ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   -->
 
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">
-<link rel="import" href="../../bower_components/iron-list/iron-list.html">
-<link rel="import" href="../exlibris-app/exlibris-book-tile.html">
-<link rel="import" href="./book_values.html">
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../bower_components/polymer/lib/elements/dom-if.html">
+<link rel="import" href="../../../bower_components/iron-list/iron-list.html">
+<link rel="import" href="exlibris-book-tile.html">
+<link rel="import" href="book_values.html">
 
 
 <dom-module id="exlibris-book-grid">
diff --git a/client-web/src/exlibris-app/exlibris-book-tile.html b/client-web/src/exlibris-app/book/exlibris-book-tile.html
similarity index 85%
rename from client-web/src/exlibris-app/exlibris-book-tile.html
rename to client-web/src/exlibris-app/book/exlibris-book-tile.html
index 962de7f..fd4a057 100644
--- a/client-web/src/exlibris-app/exlibris-book-tile.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-tile.html
@@ -17,13 +17,13 @@
   ~ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
   ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   -->
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../../bower_components/iron-image/iron-image.html">
-<link rel="import" href="../../bower_components/iron-scroll-threshold/iron-scroll-threshold.html">
-<link rel="import" href="../../bower_components/iron-list/iron-list.html">
-<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">
-<link rel="import" href="./book_values.html">
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../../bower_components/iron-image/iron-image.html">
+<link rel="import" href="../../../bower_components/iron-scroll-threshold/iron-scroll-threshold.html">
+<link rel="import" href="../../../bower_components/iron-list/iron-list.html">
+<link rel="import" href="../../../bower_components/polymer/lib/elements/dom-if.html">
+<link rel="import" href="book_values.html">
 
 <dom-module id="exlibris-book-tile">
     <template>
@@ -172,10 +172,10 @@
              * @private
              */
             _computeClassForStatusMessage(status) {
-                if (status === ExlibrisApplication.BookStatus.OVERDUE) {
+                if (status === ExlibrisApp.BookStatus.OVERDUE) {
                     return "warn";
                 }
-                if (status === ExlibrisApplication.BookStatus.BORROWED || status === ExlibrisApplication.BookStatus.SHOULD_RETURN_SOON) {
+                if (status === ExlibrisApp.BookStatus.BORROWED || status === ExlibrisApp.BookStatus.SHOULD_RETURN_SOON) {
                     return "active";
                 }
             }
@@ -189,27 +189,27 @@
              */
             _computeBookStatusMessage(book) {
                 switch (book.status) {
-                    case ExlibrisApplication.BookStatus.OVERDUE: {
+                    case ExlibrisApp.BookStatus.OVERDUE: {
                         const MILLISECONDS_IN_ONE_DAY = 86400000;
                         const numberOfOverdueDays = Math.floor((new Date() - book.dueDate) / MILLISECONDS_IN_ONE_DAY);
                         return numberOfOverdueDays + " DAYS OVERDUE";
                     }
-                    case ExlibrisApplication.BookStatus.BORROWED: {
+                    case ExlibrisApp.BookStatus.BORROWED: {
                         return "DUE ON " + book.dueDate.toLocaleDateString();
                     }
-                    case ExlibrisApplication.BookStatus.READY_TO_PICK_UP: {
+                    case ExlibrisApp.BookStatus.READY_TO_PICK_UP: {
                         return "READY TO PICK UP";
                     }
-                    case ExlibrisApplication.BookStatus.RESERVED: {
+                    case ExlibrisApp.BookStatus.RESERVED: {
                         return "EXPECTED ON " + book.date.toLocaleDateString();
                     }
-                    case ExlibrisApplication.BookStatus.EXPECTED_SOON: {
+                    case ExlibrisApp.BookStatus.EXPECTED_SOON: {
                         return "EXPECTED SOON";
                     }
-                    case ExlibrisApplication.BookStatus.AVAILABLE: {
+                    case ExlibrisApp.BookStatus.AVAILABLE: {
                         return book.availableCount + " AVAILABLE";
                     }
-                    case ExlibrisApplication.BookStatus.EXPECTED: {
+                    case ExlibrisApp.BookStatus.EXPECTED: {
                         return "EXPECTED";
                     }
                 }
diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index fab0d4c..df500a6 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -40,9 +40,9 @@
 <link rel="import" href="./menu/exlibris-menu-drawer.html">
 <link rel="import" href="./shell/redux-store.html">
 <link rel="import" href="./global-style.html">
-<link rel="import" href="./exlibris-book-details.html">
+<link rel="import" href="./book/exlibris-book-details.html">
 <link rel="import" href="./menu/exlibris-menu-drawer.html">
-<link rel="import" href="./exlibris-book-grid.html">
+<link rel="import" href="./book/exlibris-book-grid.html">
 <dom-module id="exlibris-app">
     <template>
         <style>
diff --git a/client-web/src/exlibris-app/reducers/exlibris_reducer.html b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
index bb9051b..1b93a79 100644
--- a/client-web/src/exlibris-app/reducers/exlibris_reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
@@ -18,7 +18,7 @@
   ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   -->
 <script src="../test_values.js"></script>
-<link rel="import" href="../book_values.html">
+<link rel="import" href="../book/book_values.html">
 <link rel="import" href="../actions/exlibris_action.html">
 
 <script>
@@ -35,9 +35,9 @@
             selectedBook: {}
         };
 
-        ExlibrisApplication.reducer = (state = initialState, action) => {
-            switch (action) {
-                case ElibrisActions.FIND_BOOK_BY_ID: {
+        ExlibrisApp.reducer = (state = initialState, action) => {
+            switch (action.type) {
+                case ExlibrisActions.FIND_BOOK_BY_ID: {
                     // sleep(1000);
                     const id = action.bookId;
                     const book =
diff --git a/client-web/src/exlibris-app/shell/redux-store.html b/client-web/src/exlibris-app/shell/redux-store.html
index 43b3d21..8118670 100644
--- a/client-web/src/exlibris-app/shell/redux-store.html
+++ b/client-web/src/exlibris-app/shell/redux-store.html
@@ -5,7 +5,7 @@
 <script>
     {
         /*global Redux PolymerRedux ReduxMixin:true*/
-        const store = Redux.createStore(ExlibrisApplication.reducer);
+        const store = Redux.createStore(ExlibrisApp.reducer);
 
         /**
          * The Redux store of the Exlibris application state.

From 6221e9b1e608311d9a339919b62c81464314f341 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Wed, 11 Apr 2018 17:24:22 +0300
Subject: [PATCH 50/92] Fix exlibris-app test store mock issue. Fix test files
 imports due to structure change.

---
 .../book/exlibris-book-details.html           |   4 +-
 .../book/exlibris-book-details_test.html      | 224 ++++++++++++++++++
 .../{ => book}/exlibris-book-tile_test.html   |  30 ++-
 .../exlibris-app/exlibris-app_store_test.html |  13 +-
 .../exlibris-book-details_test.html           | 223 -----------------
 5 files changed, 258 insertions(+), 236 deletions(-)
 create mode 100644 client-web/test/exlibris-app/book/exlibris-book-details_test.html
 rename client-web/test/exlibris-app/{ => book}/exlibris-book-tile_test.html (56%)
 delete mode 100644 client-web/test/exlibris-app/exlibris-book-details_test.html

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 202c992..43b0ba0 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -314,7 +314,9 @@
              * Dispatches action to find book by Id specified by the `routeData`.
              */
             _routeDataChanged(routeData) {
-                this.dispatch('findBookById', routeData.id);
+                if (this.routeData.id) {
+                    this.dispatch('findBookById', routeData.id);
+                }
             }
 
             /**
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details_test.html b/client-web/test/exlibris-app/book/exlibris-book-details_test.html
new file mode 100644
index 0000000..fd95bc3
--- /dev/null
+++ b/client-web/test/exlibris-app/book/exlibris-book-details_test.html
@@ -0,0 +1,224 @@
+<!doctype html>
+<!--
+  ~ Copyright 2018, TeamDev Ltd. All rights reserved.
+  ~
+  ~ Redistribution and use in source and/or binary forms, with or without
+  ~ modification, must retain the above copyright notice and the following
+  ~ disclaimer.
+  ~
+  ~ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+  ~ "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+  ~ LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+  ~ A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+  ~ OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+  ~ SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+  ~ LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+  ~ DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+  ~ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+  ~ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+  ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+  -->
+
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport"
+          content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>book-grid test</title>
+
+    <script src="../../../bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../../bower_components/web-component-tester/browser.js"></script>
+    <script src="../../../node_modules/redux/dist/redux.js"></script>
+    <script src="../test_variables.js"></script>
+
+    <link rel="import" href="../../../src/exlibris-app/book/exlibris-book-details.html">
+    <link rel="import" href="../test_variables.js">
+    <link rel="import" href="../../../src/exlibris-app/book/book_values.html">
+</head>
+<body>
+
+<test-fixture id="BasicTestFixture">
+    <template>
+        <exlibris-book-details></exlibris-book-details>
+    </template>
+</test-fixture>
+
+<script>
+    suite('book-dialog', function () {
+        // const TEST_BOOK = TEST_BOOKS[0];
+        const IMAGE_SELECTOR = 'iron-image';
+        const BOOK_TITLE_SELECTOR = '.head-region > .head-info > .head-text > h1';
+        const BOOK_AUTHOR_SELECTOR = '.head-region > .head-info > .head-text > h3';
+        const BOOK_FULL_STATUS_MESSAGE_SELECTOR = '.head-region > .head-info > .head-text > h2';
+        const BOOK_DESCRIPTION = '.book-description';
+        const RESERVE_CANCEL_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-cancel-button';
+        const RESERVE_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-reserve-button';
+        const EXTEND_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-extend-button';
+        const RESERVED_BY_ANOTHER_SELECTOR = '.head-region > .head-info > .head-button > h3';
+
+        // let bookDetails;
+        // setup(() => {
+        //     bookDetails = fixture('BasicTestFixture');
+        // });
+        //
+        // test('should display book image, title, author and description.', function () {
+        //     bookDetails.set('book', TEST_BOOK);
+        //     bookDetails.open();
+        //     const dialogShadowRoot = bookDetails.shadowRoot;
+        //     const bookCover = dialogShadowRoot.querySelector(IMAGE_SELECTOR);
+        //     const bookTitle = dialogShadowRoot.querySelector(BOOK_TITLE_SELECTOR);
+        //     const bookAuthor = dialogShadowRoot.querySelector(BOOK_AUTHOR_SELECTOR);
+        //     const bookFullStatusMessage = dialogShadowRoot.querySelector(BOOK_FULL_STATUS_MESSAGE_SELECTOR);
+        //     const bookDescription = dialogShadowRoot.querySelector(BOOK_DESCRIPTION);
+        //
+        //     assert.equal(bookCover.src, TEST_BOOK.image);
+        //     assert.equal(bookTitle.innerHTML, TEST_BOOK.title);
+        //     assert.equal(bookAuthor.innerHTML, TEST_BOOK.author);
+        //     assert.equal(bookFullStatusMessage.innerHTML, TEST_BOOK.fullStatusMessage);
+        //     assert.equal(bookDescription.innerHTML, TEST_BOOK.description);
+        // });
+        //
+        // test('should display `RESERVE` button when book status is `EXPECTED` and fire event on click.', function (done) {
+        //     const expectedBook = Object.assign(TEST_BOOK, {status: bookStatus.EXPECTED});
+        //     bookDetails.set('book', expectedBook);
+        //     bookDetails.addEventListener('book-dialog-reserve-book', function (e) {
+        //         const bookId = e.detail.bookId;
+        //         assert.equal(bookId, expectedBook.id);
+        //         done();
+        //     });
+        //
+        //     bookDetails.open();
+        //     const dialogShadowRoot = bookDetails.shadowRoot;
+        //     flush(function () {
+        //         const reserveButton = dialogShadowRoot.querySelector(RESERVE_BUTTON_SELECTOR);
+        //         assert.isNotNull(reserveButton, 'Button is not displayed');
+        //         assert.equal(reserveButton.innerHTML.trim(), 'RESERVE');
+        //         reserveButton.click();
+        //     });
+        // });
+        //
+        // test('should display `CANCEL RESERVATION` button when book status is `RESERVED` and fire event on click.', function (done) {
+        //     const expectedBook = Object.assign(TEST_BOOK, {status: bookStatus.RESERVED});
+        //     bookDetails.set('book', expectedBook);
+        //     bookDetails.addEventListener('book-dialog-cancel-reservation', function (e) {
+        //         const bookId = e.detail.bookId;
+        //         assert.equal(bookId, expectedBook.id);
+        //         done();
+        //     });
+        //
+        //     bookDetails.open();
+        //     const dialogShadowRoot = bookDetails.shadowRoot;
+        //     flush(function () {
+        //         const cancelButton = dialogShadowRoot.querySelector(RESERVE_CANCEL_BUTTON_SELECTOR);
+        //         assert.isNotNull(cancelButton, 'Button is not displayed');
+        //         assert.equal(cancelButton.innerHTML.trim(), 'CANCEL RESERVATION');
+        //         cancelButton.click();
+        //     });
+        // });
+        //
+        // test('should display `EXTEND FOR TWO WEEKS` button when book status is `SHOULD_RETURN_SOON`' +
+        //     ' and available for extension. Than fire event on click.', function (done) {
+        //     const bookAllowedToExtend = Object.assign(TEST_BOOK, {
+        //         status: bookStatus.SHOULD_RETURN_SOON,
+        //         isAllowedLoanExtension: true
+        //     });
+        //     bookDetails.set('book', bookAllowedToExtend);
+        //     bookDetails.addEventListener('book-dialog-extend-loan', function (e) {
+        //         const bookId = e.detail.bookId;
+        //         assert.equal(bookId, bookAllowedToExtend.id);
+        //         done();
+        //     });
+        //
+        //     bookDetails.open();
+        //     const dialogShadowRoot = bookDetails.shadowRoot;
+        //     flush(function () {
+        //         const extendButton = dialogShadowRoot.querySelector(EXTEND_BUTTON_SELECTOR);
+        //         assert.isNotNull(extendButton, 'Button is not displayed');
+        //         assert.equal(extendButton.innerHTML.trim(), 'EXTEND FOR TWO WEEKS');
+        //         extendButton.click();
+        //     });
+        // });
+        //
+        // test('should display `EXTEND FOR TWO WEEKS` button when book status is `OVERDUE`' +
+        //     ' and available for extension. Than fire event on click.', function (done) {
+        //     const bookAllowedToExtend = Object.assign(TEST_BOOK, {
+        //         status: bookStatus.OVERDUE,
+        //         isAllowedLoanExtension: true
+        //     });
+        //     bookDetails.set('book', bookAllowedToExtend);
+        //     bookDetails.addEventListener('book-dialog-extend-loan', function (e) {
+        //         const bookId = e.detail.bookId;
+        //         assert.equal(bookId, bookAllowedToExtend.id);
+        //         done();
+        //     });
+        //
+        //     bookDetails.open();
+        //     const dialogShadowRoot = bookDetails.shadowRoot;
+        //     flush(function () {
+        //         const extendButton = dialogShadowRoot.querySelector(EXTEND_BUTTON_SELECTOR);
+        //         assert.isNotNull(extendButton, 'Button is not displayed');
+        //         assert.equal(extendButton.innerHTML.trim(), 'EXTEND FOR TWO WEEKS');
+        //         extendButton.click();
+        //     });
+        // });
+        //
+        //
+        // test('should display `RESERVED BY ANOTHER READER` when book status is `BORROWED`' +
+        //     ' and extension not allowed.', function (done) {
+        //     const bookNotAllowedToExtend = Object.assign(TEST_BOOK, {
+        //         status: bookStatus.BORROWED,
+        //         isAllowedLoanExtension: false
+        //     });
+        //     bookDetails.set('book', bookNotAllowedToExtend);
+        //     bookDetails.open();
+        //
+        //     const dialogShadowRoot = bookDetails.shadowRoot;
+        //     flush(function () {
+        //         const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
+        //         assert.isNotNull(reservedByAnother, 'Row is not displayed');
+        //         assert.equal(reservedByAnother.innerHTML.trim(), 'RESERVED BY ANOTHER READER');
+        //         done();
+        //     });
+        // });
+        //
+        // test('should display `RESERVED BY ANOTHER READER` when book status is `OVERDUE`' +
+        //     ' and extension not allowed.', function (done) {
+        //     const bookNotAllowedToExtend = Object.assign(TEST_BOOK, {
+        //         status: bookStatus.OVERDUE,
+        //         isAllowedLoanExtension: false
+        //     });
+        //     bookDetails.set('book', bookNotAllowedToExtend);
+        //     bookDetails.open();
+        //
+        //     const dialogShadowRoot = bookDetails.shadowRoot;
+        //     flush(function () {
+        //         const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
+        //         assert.isNotNull(reservedByAnother, 'Row is not displayed');
+        //         assert.equal(reservedByAnother.innerHTML.trim(), 'RESERVED BY ANOTHER READER');
+        //         done();
+        //     });
+        // });
+        //
+        // test('should display `RESERVED BY ANOTHER READER` when book status is `SHOULD_RETURN_SOON`' +
+        //     ' and extension not allowed.', function (done) {
+        //     const bookNotAllowedToExtend = Object.assign(TEST_BOOK, {
+        //         status: bookStatus.SHOULD_RETURN_SOON,
+        //         isAllowedLoanExtension: false
+        //     });
+        //     bookDetails.set('book', bookNotAllowedToExtend);
+        //     bookDetails.open();
+        //
+        //     const dialogShadowRoot = bookDetails.shadowRoot;
+        //     flush(function () {
+        //         const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
+        //         assert.isNotNull(reservedByAnother, 'Row is not displayed');
+        //         assert.equal(reservedByAnother.innerHTML.trim(), 'RESERVED BY ANOTHER READER');
+        //         done();
+        //     });
+        // });
+
+    });
+</script>
+</body>
+</html>
diff --git a/client-web/test/exlibris-app/exlibris-book-tile_test.html b/client-web/test/exlibris-app/book/exlibris-book-tile_test.html
similarity index 56%
rename from client-web/test/exlibris-app/exlibris-book-tile_test.html
rename to client-web/test/exlibris-app/book/exlibris-book-tile_test.html
index 16e5217..0953978 100644
--- a/client-web/test/exlibris-app/exlibris-book-tile_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-tile_test.html
@@ -1,4 +1,24 @@
 <!doctype html>
+<!--
+  ~ Copyright 2018, TeamDev Ltd. All rights reserved.
+  ~
+  ~ Redistribution and use in source and/or binary forms, with or without
+  ~ modification, must retain the above copyright notice and the following
+  ~ disclaimer.
+  ~
+  ~ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+  ~ "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+  ~ LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+  ~ A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+  ~ OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+  ~ SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+  ~ LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+  ~ DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+  ~ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+  ~ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+  ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+  -->
+
 <html lang="en">
 <head>
     <meta charset="utf-8">
@@ -7,12 +27,12 @@
 
     <title>exlibris-book-tile test</title>
 
-    <link rel="import" href="../../src/exlibris-app/shell/exlibris-app-namespace.html">
-    <script src="./test_variables.js"></script>
-    <script src="./../../bower_components/webcomponentsjs/webcomponents-loader.js"></script>
-    <script src="./../../bower_components/web-component-tester/browser.js"></script>
+    <link rel="import" href="../../../src/exlibris-app/shell/exlibris-app-namespace.html">
+    <script src="../test_variables.js"></script>
+    <script src="../../../bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../../bower_components/web-component-tester/browser.js"></script>
 
-    <link rel="import" href="../../src/exlibris-app/exlibris-book-tile.html">
+    <link rel="import" href="../../../src/exlibris-app/book/exlibris-book-tile.html">
 </head>
 <body>
 
diff --git a/client-web/test/exlibris-app/exlibris-app_store_test.html b/client-web/test/exlibris-app/exlibris-app_store_test.html
index 13d292f..04f9500 100644
--- a/client-web/test/exlibris-app/exlibris-app_store_test.html
+++ b/client-web/test/exlibris-app/exlibris-app_store_test.html
@@ -35,38 +35,37 @@
         });
 
         test('should set allBooks value from state', function () {
-            mock.expects("getState").returns({allBooks: [...ExlibrisAppTest.BOOKS]});
+            mock.expects("getState").returns({allBooks: [...ExlibrisAppTest.BOOKS]}).atLeast(1);
             const element = fixture('BasicTestFixture');
             assert.deepEqual(element.allBooks, ExlibrisAppTest.BOOKS);
             mock.verify();
         });
         test('should set borrowedBooks value from state', function () {
-            mock.expects("getState").returns({borrowedBooks: [...ExlibrisAppTest.BOOKS]});
+            mock.expects("getState").returns({borrowedBooks: [...ExlibrisAppTest.BOOKS]}).atLeast(1);
             const element = fixture('BasicTestFixture');
             assert.deepEqual(element.borrowedBooks, ExlibrisAppTest.BOOKS);
             mock.verify();
         });
         test('should set reservedBooks value from state', function () {
-            mock.expects("getState").returns({reservedBooks: [...ExlibrisAppTest.BOOKS]});
+            mock.expects("getState").returns({reservedBooks: [...ExlibrisAppTest.BOOKS]}).atLeast(1);
             const element = fixture('BasicTestFixture');
             assert.deepEqual(element.reservedBooks, ExlibrisAppTest.BOOKS);
             mock.verify();
         });
         test('should set shouldReturnBooks value from state', function () {
-            mock.expects("getState").returns({shouldReturnBooks: [...ExlibrisAppTest.BOOKS]});
+            mock.expects("getState").returns({shouldReturnBooks: [...ExlibrisAppTest.BOOKS]}).atLeast(1);
             const element = fixture('BasicTestFixture');
             assert.deepEqual(element.shouldReturnBooks, ExlibrisAppTest.BOOKS);
             mock.verify();
         });
         test('should set overdueBooks value from state', function () {
-            mock.expects("getState").returns({overdueBooks: [...ExlibrisAppTest.BOOKS]});
+            mock.expects("getState").returns({overdueBooks: [...ExlibrisAppTest.BOOKS]}).atLeast(1);
             const element = fixture('BasicTestFixture');
             assert.deepEqual(element.overdueBooks, ExlibrisAppTest.BOOKS);
             mock.verify();
-            mock.restore();
         });
         test('should set expectedSoonBooks value from state', function () {
-            mock.expects("getState").returns({expectedSoonBooks: [...ExlibrisAppTest.BOOKS]});
+            mock.expects("getState").returns({expectedSoonBooks: [...ExlibrisAppTest.BOOKS]}).atLeast(1);
             const element = fixture('BasicTestFixture');
             assert.deepEqual(element.expectedSoonBooks, ExlibrisAppTest.BOOKS);
             mock.verify();
diff --git a/client-web/test/exlibris-app/exlibris-book-details_test.html b/client-web/test/exlibris-app/exlibris-book-details_test.html
deleted file mode 100644
index 36cf4cd..0000000
--- a/client-web/test/exlibris-app/exlibris-book-details_test.html
+++ /dev/null
@@ -1,223 +0,0 @@
-<!doctype html>
-<!--
-  ~ Copyright 2018, TeamDev Ltd. All rights reserved.
-  ~
-  ~ Redistribution and use in source and/or binary forms, with or without
-  ~ modification, must retain the above copyright notice and the following
-  ~ disclaimer.
-  ~
-  ~ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-  ~ "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-  ~ LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-  ~ A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-  ~ OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-  ~ SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-  ~ LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-  ~ DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-  ~ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-  ~ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-  ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-  -->
-
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport"
-          content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-
-    <title>book-grid test</title>
-
-    <script src="./../../bower_components/webcomponentsjs/webcomponents-loader.js"></script>
-    <script src="./../../bower_components/web-component-tester/browser.js"></script>
-    <script src="./test_variables.js"></script>
-
-    <link rel="import" href="../../src/exlibris-app/exlibris-book-details.html">
-    <link rel="import" href="./test_variables.js">
-    <link rel="import" href="../../src/exlibris-app/book_values.html">
-</head>
-<body>
-
-<test-fixture id="BasicTestFixture">
-    <template>
-        <exlibris-book-details></exlibris-book-details>
-    </template>
-</test-fixture>
-
-<script>
-    suite('book-dialog', function () {
-        const TEST_BOOK = TEST_BOOKS[0];
-        const IMAGE_SELECTOR = 'iron-image';
-        const BOOK_TITLE_SELECTOR = '.head-region > .head-info > .head-text > h1';
-        const BOOK_AUTHOR_SELECTOR = '.head-region > .head-info > .head-text > h3';
-        const BOOK_FULL_STATUS_MESSAGE_SELECTOR = '.head-region > .head-info > .head-text > h2';
-        const BOOK_DESCRIPTION = '.book-description';
-        const RESERVE_CANCEL_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-cancel-button';
-        const RESERVE_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-reserve-button';
-        const EXTEND_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-extend-button';
-        const RESERVED_BY_ANOTHER_SELECTOR = '.head-region > .head-info > .head-button > h3';
-
-        let bookDetails;
-        setup(() => {
-            bookDetails = fixture('BasicTestFixture');
-        });
-
-        test('should display book image, title, author and description.', function () {
-            bookDetails.set('book', TEST_BOOK);
-            bookDetails.open();
-            const dialogShadowRoot = bookDetails.shadowRoot;
-            const bookCover = dialogShadowRoot.querySelector(IMAGE_SELECTOR);
-            const bookTitle = dialogShadowRoot.querySelector(BOOK_TITLE_SELECTOR);
-            const bookAuthor = dialogShadowRoot.querySelector(BOOK_AUTHOR_SELECTOR);
-            const bookFullStatusMessage = dialogShadowRoot.querySelector(BOOK_FULL_STATUS_MESSAGE_SELECTOR);
-            const bookDescription = dialogShadowRoot.querySelector(BOOK_DESCRIPTION);
-
-            assert.equal(bookCover.src, TEST_BOOK.image);
-            assert.equal(bookTitle.innerHTML, TEST_BOOK.title);
-            assert.equal(bookAuthor.innerHTML, TEST_BOOK.author);
-            assert.equal(bookFullStatusMessage.innerHTML, TEST_BOOK.fullStatusMessage);
-            assert.equal(bookDescription.innerHTML, TEST_BOOK.description);
-        });
-
-        test('should display `RESERVE` button when book status is `EXPECTED` and fire event on click.', function (done) {
-            const expectedBook = Object.assign(TEST_BOOK, {status: bookStatus.EXPECTED});
-            bookDetails.set('book', expectedBook);
-            bookDetails.addEventListener('book-dialog-reserve-book', function (e) {
-                const bookId = e.detail.bookId;
-                assert.equal(bookId, expectedBook.id);
-                done();
-            });
-
-            bookDetails.open();
-            const dialogShadowRoot = bookDetails.shadowRoot;
-            flush(function () {
-                const reserveButton = dialogShadowRoot.querySelector(RESERVE_BUTTON_SELECTOR);
-                assert.isNotNull(reserveButton, 'Button is not displayed');
-                assert.equal(reserveButton.innerHTML.trim(), 'RESERVE');
-                reserveButton.click();
-            });
-        });
-
-        test('should display `CANCEL RESERVATION` button when book status is `RESERVED` and fire event on click.', function (done) {
-            const expectedBook = Object.assign(TEST_BOOK, {status: bookStatus.RESERVED});
-            bookDetails.set('book', expectedBook);
-            bookDetails.addEventListener('book-dialog-cancel-reservation', function (e) {
-                const bookId = e.detail.bookId;
-                assert.equal(bookId, expectedBook.id);
-                done();
-            });
-
-            bookDetails.open();
-            const dialogShadowRoot = bookDetails.shadowRoot;
-            flush(function () {
-                const cancelButton = dialogShadowRoot.querySelector(RESERVE_CANCEL_BUTTON_SELECTOR);
-                assert.isNotNull(cancelButton, 'Button is not displayed');
-                assert.equal(cancelButton.innerHTML.trim(), 'CANCEL RESERVATION');
-                cancelButton.click();
-            });
-        });
-
-        test('should display `EXTEND FOR TWO WEEKS` button when book status is `SHOULD_RETURN_SOON`' +
-            ' and available for extension. Than fire event on click.', function (done) {
-            const bookAllowedToExtend = Object.assign(TEST_BOOK, {
-                status: bookStatus.SHOULD_RETURN_SOON,
-                isAllowedLoanExtension: true
-            });
-            bookDetails.set('book', bookAllowedToExtend);
-            bookDetails.addEventListener('book-dialog-extend-loan', function (e) {
-                const bookId = e.detail.bookId;
-                assert.equal(bookId, bookAllowedToExtend.id);
-                done();
-            });
-
-            bookDetails.open();
-            const dialogShadowRoot = bookDetails.shadowRoot;
-            flush(function () {
-                const extendButton = dialogShadowRoot.querySelector(EXTEND_BUTTON_SELECTOR);
-                assert.isNotNull(extendButton, 'Button is not displayed');
-                assert.equal(extendButton.innerHTML.trim(), 'EXTEND FOR TWO WEEKS');
-                extendButton.click();
-            });
-        });
-
-        test('should display `EXTEND FOR TWO WEEKS` button when book status is `OVERDUE`' +
-            ' and available for extension. Than fire event on click.', function (done) {
-            const bookAllowedToExtend = Object.assign(TEST_BOOK, {
-                status: bookStatus.OVERDUE,
-                isAllowedLoanExtension: true
-            });
-            bookDetails.set('book', bookAllowedToExtend);
-            bookDetails.addEventListener('book-dialog-extend-loan', function (e) {
-                const bookId = e.detail.bookId;
-                assert.equal(bookId, bookAllowedToExtend.id);
-                done();
-            });
-
-            bookDetails.open();
-            const dialogShadowRoot = bookDetails.shadowRoot;
-            flush(function () {
-                const extendButton = dialogShadowRoot.querySelector(EXTEND_BUTTON_SELECTOR);
-                assert.isNotNull(extendButton, 'Button is not displayed');
-                assert.equal(extendButton.innerHTML.trim(), 'EXTEND FOR TWO WEEKS');
-                extendButton.click();
-            });
-        });
-
-
-        test('should display `RESERVED BY ANOTHER READER` when book status is `BORROWED`' +
-            ' and extension not allowed.', function (done) {
-            const bookNotAllowedToExtend = Object.assign(TEST_BOOK, {
-                status: bookStatus.BORROWED,
-                isAllowedLoanExtension: false
-            });
-            bookDetails.set('book', bookNotAllowedToExtend);
-            bookDetails.open();
-
-            const dialogShadowRoot = bookDetails.shadowRoot;
-            flush(function () {
-                const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
-                assert.isNotNull(reservedByAnother, 'Row is not displayed');
-                assert.equal(reservedByAnother.innerHTML.trim(), 'RESERVED BY ANOTHER READER');
-                done();
-            });
-        });
-
-        test('should display `RESERVED BY ANOTHER READER` when book status is `OVERDUE`' +
-            ' and extension not allowed.', function (done) {
-            const bookNotAllowedToExtend = Object.assign(TEST_BOOK, {
-                status: bookStatus.OVERDUE,
-                isAllowedLoanExtension: false
-            });
-            bookDetails.set('book', bookNotAllowedToExtend);
-            bookDetails.open();
-
-            const dialogShadowRoot = bookDetails.shadowRoot;
-            flush(function () {
-                const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
-                assert.isNotNull(reservedByAnother, 'Row is not displayed');
-                assert.equal(reservedByAnother.innerHTML.trim(), 'RESERVED BY ANOTHER READER');
-                done();
-            });
-        });
-
-        test('should display `RESERVED BY ANOTHER READER` when book status is `SHOULD_RETURN_SOON`' +
-            ' and extension not allowed.', function (done) {
-            const bookNotAllowedToExtend = Object.assign(TEST_BOOK, {
-                status: bookStatus.SHOULD_RETURN_SOON,
-                isAllowedLoanExtension: false
-            });
-            bookDetails.set('book', bookNotAllowedToExtend);
-            bookDetails.open();
-
-            const dialogShadowRoot = bookDetails.shadowRoot;
-            flush(function () {
-                const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
-                assert.isNotNull(reservedByAnother, 'Row is not displayed');
-                assert.equal(reservedByAnother.innerHTML.trim(), 'RESERVED BY ANOTHER READER');
-                done();
-            });
-        });
-
-    });
-</script>
-</body>
-</html>

From 21bb4b165df1a0cdb379481d23485365abbecfe5 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Thu, 12 Apr 2018 12:01:40 +0300
Subject: [PATCH 51/92] Change color declarations to paper-color values.

---
 .../exlibris-app/book/exlibris-book-details.html   | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 43b0ba0..f36d710 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -38,7 +38,6 @@
 <dom-module id="exlibris-book-details">
     <template>
         <style>
-
             :host {
                 display: flex;
                 margin-left: 100px;
@@ -47,8 +46,8 @@
             .book-card {
                 @apply --layout-vertical;
                 border-radius: 3px;
-                box-shadow: 4px 4px 10px #888888;
-                background-color: white;
+                box-shadow: 4px 4px 10px var(--paper-grey-500);
+                background-color: var(--paper-grey-50);
                 max-width: 1000px;
                 margin: 10px;
             }
@@ -65,7 +64,7 @@
             .book-card .head-region iron-image {
                 --iron-image-width: 100%;
                 overflow: inherit;
-                box-shadow: 0 -1px 0 #e0e0e0, 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
+                box-shadow: 0 -1px 0 var(--paper-grey-300), 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
                 margin-left: 25px;
                 margin-top: 25px;
             }
@@ -100,7 +99,7 @@
             paper-button {
                 margin: 0;
                 background-color: var(--exlibris-app-primary-color);
-                color: white;
+                color: var(--paper-grey-50);
                 height: 36px;
                 font-size: 14px;
                 padding: 0 16px 0 16px;
@@ -198,7 +197,8 @@
                         <div id="status-message">[[statusMessage]]</div>
                     </div>
                     <div class="button-wide-screen">
-                        <paper-button raised on-click="_handleButtonClick"
+                        <paper-button raised
+                                      on-click="_handleButtonClick"
                                       hidden="[[!button]]">
                             [[button.title]]
                         </paper-button>
@@ -429,7 +429,7 @@
 
             /**
              * Handles the button click.
-             * Calls the button clickHandler function.
+             * Calls the button clickHandler` function.
              *
              * @private
              */

From d185e104a263fb591840dca2bb102ea813eb9fa8 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Thu, 12 Apr 2018 13:11:37 +0300
Subject: [PATCH 52/92] Add book-details work with store tests.

---
 .../book/exlibris-book-details_test.html      | 129 ++++++++++--------
 1 file changed, 70 insertions(+), 59 deletions(-)

diff --git a/client-web/test/exlibris-app/book/exlibris-book-details_test.html b/client-web/test/exlibris-app/book/exlibris-book-details_test.html
index fd95bc3..6b7ee0e 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details_test.html
@@ -33,8 +33,9 @@
     <script src="../test_variables.js"></script>
 
     <link rel="import" href="../../../src/exlibris-app/book/exlibris-book-details.html">
-    <link rel="import" href="../test_variables.js">
     <link rel="import" href="../../../src/exlibris-app/book/book_values.html">
+    <link rel="import" href="../../../src/exlibris-app/actions/exlibris_action.html">
+
 </head>
 <body>
 
@@ -45,51 +46,61 @@
 </test-fixture>
 
 <script>
-    suite('book-dialog', function () {
-        // const TEST_BOOK = TEST_BOOKS[0];
-        const IMAGE_SELECTOR = 'iron-image';
-        const BOOK_TITLE_SELECTOR = '.head-region > .head-info > .head-text > h1';
-        const BOOK_AUTHOR_SELECTOR = '.head-region > .head-info > .head-text > h3';
-        const BOOK_FULL_STATUS_MESSAGE_SELECTOR = '.head-region > .head-info > .head-text > h2';
-        const BOOK_DESCRIPTION = '.book-description';
-        const RESERVE_CANCEL_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-cancel-button';
-        const RESERVE_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-reserve-button';
-        const EXTEND_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-extend-button';
-        const RESERVED_BY_ANOTHER_SELECTOR = '.head-region > .head-info > .head-button > h3';
-
-        // let bookDetails;
-        // setup(() => {
-        //     bookDetails = fixture('BasicTestFixture');
-        // });
-        //
-        // test('should display book image, title, author and description.', function () {
-        //     bookDetails.set('book', TEST_BOOK);
-        //     bookDetails.open();
-        //     const dialogShadowRoot = bookDetails.shadowRoot;
-        //     const bookCover = dialogShadowRoot.querySelector(IMAGE_SELECTOR);
-        //     const bookTitle = dialogShadowRoot.querySelector(BOOK_TITLE_SELECTOR);
-        //     const bookAuthor = dialogShadowRoot.querySelector(BOOK_AUTHOR_SELECTOR);
-        //     const bookFullStatusMessage = dialogShadowRoot.querySelector(BOOK_FULL_STATUS_MESSAGE_SELECTOR);
-        //     const bookDescription = dialogShadowRoot.querySelector(BOOK_DESCRIPTION);
-        //
-        //     assert.equal(bookCover.src, TEST_BOOK.image);
-        //     assert.equal(bookTitle.innerHTML, TEST_BOOK.title);
-        //     assert.equal(bookAuthor.innerHTML, TEST_BOOK.author);
-        //     assert.equal(bookFullStatusMessage.innerHTML, TEST_BOOK.fullStatusMessage);
-        //     assert.equal(bookDescription.innerHTML, TEST_BOOK.description);
-        // });
+    suite('exlibris-book-details', function () {
+        const TEST_BOOK = ExlibrisAppTest.BOOKS[0];
+        const TEST_BOOK_ROUTE_DATA = {title: TEST_BOOK.title, id: TEST_BOOK.id};
+
+        // const IMAGE_SELECTOR = 'iron-image';
+        // const BOOK_TITLE_SELECTOR = '.head-region > .head-info > .head-text > h1';
+        // const BOOK_AUTHOR_SELECTOR = '.head-region > .head-info > .head-text > h3';
+        // const BOOK_FULL_STATUS_MESSAGE_SELECTOR = '.head-region > .head-info > .head-text > h2';
+        // const BOOK_DESCRIPTION = '.book-description';
+        // const RESERVE_CANCEL_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-cancel-button';
+        // const RESERVE_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-reserve-button';
+        // const EXTEND_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-extend-button';
+        // const RESERVED_BY_ANOTHER_SELECTOR = '.head-region > .head-info > .head-button > h3';
+
+        let mockStore;
+
+        setup(() => {
+            mockStore = sinon.mock(ExlibrisApp.store);
+        });
+
+        teardown(() => {
+            mockStore.restore();
+        });
+
+        test('should receive the selectedBook from the store.', function () {
+            const testState = {selectedBook: TEST_BOOK};
+            mockStore.expects("getState").returns(testState);
+
+            const element = fixture('BasicTestFixture');
+
+            assert.deepEqual(element.book, TEST_BOOK);
+            mockStore.verify();
+        });
+
+        test('should react on routeData change and dispatch action to the store.', function () {
+            const expectedAction = {type: ExlibrisActions.FIND_BOOK_BY_ID, bookId: TEST_BOOK.id};
+            mockStore.expects("dispatch").once().withArgs(expectedAction);
+
+            const element = fixture('BasicTestFixture');
+            element.set('routeData', TEST_BOOK_ROUTE_DATA);
+
+            mockStore.verify();
+        });
         //
         // test('should display `RESERVE` button when book status is `EXPECTED` and fire event on click.', function (done) {
         //     const expectedBook = Object.assign(TEST_BOOK, {status: bookStatus.EXPECTED});
-        //     bookDetails.set('book', expectedBook);
-        //     bookDetails.addEventListener('book-dialog-reserve-book', function (e) {
+        //     element.set('book', expectedBook);
+        //     element.addEventListener('book-dialog-reserve-book', function (e) {
         //         const bookId = e.detail.bookId;
         //         assert.equal(bookId, expectedBook.id);
         //         done();
         //     });
         //
-        //     bookDetails.open();
-        //     const dialogShadowRoot = bookDetails.shadowRoot;
+        //     element.open();
+        //     const dialogShadowRoot = element.shadowRoot;
         //     flush(function () {
         //         const reserveButton = dialogShadowRoot.querySelector(RESERVE_BUTTON_SELECTOR);
         //         assert.isNotNull(reserveButton, 'Button is not displayed');
@@ -100,15 +111,15 @@
         //
         // test('should display `CANCEL RESERVATION` button when book status is `RESERVED` and fire event on click.', function (done) {
         //     const expectedBook = Object.assign(TEST_BOOK, {status: bookStatus.RESERVED});
-        //     bookDetails.set('book', expectedBook);
-        //     bookDetails.addEventListener('book-dialog-cancel-reservation', function (e) {
+        //     element.set('book', expectedBook);
+        //     element.addEventListener('book-dialog-cancel-reservation', function (e) {
         //         const bookId = e.detail.bookId;
         //         assert.equal(bookId, expectedBook.id);
         //         done();
         //     });
         //
-        //     bookDetails.open();
-        //     const dialogShadowRoot = bookDetails.shadowRoot;
+        //     element.open();
+        //     const dialogShadowRoot = element.shadowRoot;
         //     flush(function () {
         //         const cancelButton = dialogShadowRoot.querySelector(RESERVE_CANCEL_BUTTON_SELECTOR);
         //         assert.isNotNull(cancelButton, 'Button is not displayed');
@@ -123,15 +134,15 @@
         //         status: bookStatus.SHOULD_RETURN_SOON,
         //         isAllowedLoanExtension: true
         //     });
-        //     bookDetails.set('book', bookAllowedToExtend);
-        //     bookDetails.addEventListener('book-dialog-extend-loan', function (e) {
+        //     element.set('book', bookAllowedToExtend);
+        //     element.addEventListener('book-dialog-extend-loan', function (e) {
         //         const bookId = e.detail.bookId;
         //         assert.equal(bookId, bookAllowedToExtend.id);
         //         done();
         //     });
         //
-        //     bookDetails.open();
-        //     const dialogShadowRoot = bookDetails.shadowRoot;
+        //     element.open();
+        //     const dialogShadowRoot = element.shadowRoot;
         //     flush(function () {
         //         const extendButton = dialogShadowRoot.querySelector(EXTEND_BUTTON_SELECTOR);
         //         assert.isNotNull(extendButton, 'Button is not displayed');
@@ -146,15 +157,15 @@
         //         status: bookStatus.OVERDUE,
         //         isAllowedLoanExtension: true
         //     });
-        //     bookDetails.set('book', bookAllowedToExtend);
-        //     bookDetails.addEventListener('book-dialog-extend-loan', function (e) {
+        //     element.set('book', bookAllowedToExtend);
+        //     element.addEventListener('book-dialog-extend-loan', function (e) {
         //         const bookId = e.detail.bookId;
         //         assert.equal(bookId, bookAllowedToExtend.id);
         //         done();
         //     });
         //
-        //     bookDetails.open();
-        //     const dialogShadowRoot = bookDetails.shadowRoot;
+        //     element.open();
+        //     const dialogShadowRoot = element.shadowRoot;
         //     flush(function () {
         //         const extendButton = dialogShadowRoot.querySelector(EXTEND_BUTTON_SELECTOR);
         //         assert.isNotNull(extendButton, 'Button is not displayed');
@@ -170,10 +181,10 @@
         //         status: bookStatus.BORROWED,
         //         isAllowedLoanExtension: false
         //     });
-        //     bookDetails.set('book', bookNotAllowedToExtend);
-        //     bookDetails.open();
+        //     element.set('book', bookNotAllowedToExtend);
+        //     element.open();
         //
-        //     const dialogShadowRoot = bookDetails.shadowRoot;
+        //     const dialogShadowRoot = element.shadowRoot;
         //     flush(function () {
         //         const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
         //         assert.isNotNull(reservedByAnother, 'Row is not displayed');
@@ -188,10 +199,10 @@
         //         status: bookStatus.OVERDUE,
         //         isAllowedLoanExtension: false
         //     });
-        //     bookDetails.set('book', bookNotAllowedToExtend);
-        //     bookDetails.open();
+        //     element.set('book', bookNotAllowedToExtend);
+        //     element.open();
         //
-        //     const dialogShadowRoot = bookDetails.shadowRoot;
+        //     const dialogShadowRoot = element.shadowRoot;
         //     flush(function () {
         //         const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
         //         assert.isNotNull(reservedByAnother, 'Row is not displayed');
@@ -206,10 +217,10 @@
         //         status: bookStatus.SHOULD_RETURN_SOON,
         //         isAllowedLoanExtension: false
         //     });
-        //     bookDetails.set('book', bookNotAllowedToExtend);
-        //     bookDetails.open();
+        //     element.set('book', bookNotAllowedToExtend);
+        //     element.open();
         //
-        //     const dialogShadowRoot = bookDetails.shadowRoot;
+        //     const dialogShadowRoot = element.shadowRoot;
         //     flush(function () {
         //         const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
         //         assert.isNotNull(reservedByAnother, 'Row is not displayed');

From 30e6f32094daaaffa7a57003543fd8b7f371fa14 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Thu, 12 Apr 2018 15:55:41 +0300
Subject: [PATCH 53/92] Complete book-details store and buttons tests.

---
 .../book/exlibris-book-details.html           |   4 +-
 .../exlibris-book-details-buttons_test.html   | 175 +++++++++++++
 .../exlibris-book-details-store_test.html     |  82 ++++++
 .../book/exlibris-book-details_test.html      | 235 ------------------
 4 files changed, 259 insertions(+), 237 deletions(-)
 create mode 100644 client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
 create mode 100644 client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
 delete mode 100644 client-web/test/exlibris-app/book/exlibris-book-details_test.html

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index f36d710..01ed3da 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -202,7 +202,7 @@
                                       hidden="[[!button]]">
                             [[button.title]]
                         </paper-button>
-                        <div>[[actionUnsupportedMessage]]</div>
+                        <div class="button-place-message">[[actionUnsupportedMessage]]</div>
                     </div>
                 </div>
             </div>
@@ -212,7 +212,7 @@
                               hidden="[[!button]]">
                     [[button.title]]
                 </paper-button>
-                <div>[[actionUnsupportedMessage]]</div>
+                <div class="button-place-message">[[actionUnsupportedMessage]]</div>
             </div>
             <div id="description">
                 [[book.description]]
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
new file mode 100644
index 0000000..2798713
--- /dev/null
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
@@ -0,0 +1,175 @@
+<!doctype html>
+<!--
+  ~ Copyright 2018, TeamDev Ltd. All rights reserved.
+  ~
+  ~ Redistribution and use in source and/or binary forms, with or without
+  ~ modification, must retain the above copyright notice and the following
+  ~ disclaimer.
+  ~
+  ~ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+  ~ "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+  ~ LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+  ~ A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+  ~ OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+  ~ SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+  ~ LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+  ~ DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+  ~ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+  ~ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+  ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+  -->
+
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport"
+          content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>exlibris-book-details buttons test</title>
+
+    <script src="../../../bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../../bower_components/web-component-tester/browser.js"></script>
+    <script src="../../../node_modules/redux/dist/redux.js"></script>
+    <script src="../test_variables.js"></script>
+
+    <link rel="import" href="../../../src/exlibris-app/book/exlibris-book-details.html">
+    <link rel="import" href="../../../src/exlibris-app/book/book_values.html">
+
+</head>
+<body>
+
+<test-fixture id="BasicTestFixture">
+    <template>
+        <exlibris-book-details></exlibris-book-details>
+    </template>
+</test-fixture>
+
+<script>
+    suite('exlibris-book-details', function () {
+
+        const BUTTON_TITLES = {
+            RESERVE: 'RESERVE',
+            CANCEL_RESERVATION: 'CANCEL RESERVATION',
+            EXTEND_LOAN_PERIOD: 'EXTEND LOAN PERIOD'
+        };
+
+        const ACTION_UNSUPPORTED_MESSAGE = 'RESERVED BY ANOTHER READER';
+
+        const BOOK_DETAILS_SELECTORS = {
+            WIDE_SCREEN_BUTTON: '.book-card .head-region .head-info .button-wide-screen paper-button',
+            NARROW_SCREEN_BUTTON: '.book-card .button-narrow-screen paper-button',
+            WIDE_SCREEN_MESSAGE: '.book-card .head-region .head-info .button-wide-screen .button-place-message',
+            NARROW_SCREEN_MESSAGE: '.book-card .button-narrow-screen .button-place-message'
+        };
+
+        const BOOKS_AND_BUTTONS_COMBINATIONS = [
+            {
+                book: {status: ExlibrisApp.BookStatus.EXPECTED},
+                button: BUTTON_TITLES.RESERVE,
+                actionUnsupportedMessage: ''
+            },
+            {
+                book: {status: ExlibrisApp.BookStatus.EXPECTED_SOON},
+                button: BUTTON_TITLES.RESERVE,
+                actionUnsupportedMessage: ''
+            },
+            {
+                book: {status: ExlibrisApp.BookStatus.AVAILABLE},
+                button: '',
+                actionUnsupportedMessage: ''
+            },
+            {
+                book: {
+                    status: ExlibrisApp.BookStatus.BORROWED,
+                    isAllowedLoanExtension: true
+                },
+                button: BUTTON_TITLES.EXTEND_LOAN_PERIOD,
+                actionUnsupportedMessage: ''
+            },
+            {
+                book: {
+                    status: ExlibrisApp.BookStatus.OVERDUE,
+                    isAllowedLoanExtension: true
+                },
+                button: BUTTON_TITLES.EXTEND_LOAN_PERIOD,
+                actionUnsupportedMessage: ''
+            },
+            {
+                book: {
+                    status: ExlibrisApp.BookStatus.SHOULD_RETURN_SOON,
+                    isAllowedLoanExtension: true
+                },
+                button: BUTTON_TITLES.EXTEND_LOAN_PERIOD,
+                actionUnsupportedMessage: ''
+            },
+            {
+                book: {
+                    status: ExlibrisApp.BookStatus.BORROWED,
+                    isAllowedLoanExtension: false
+                },
+                button: '',
+                actionUnsupportedMessage: ACTION_UNSUPPORTED_MESSAGE
+            },
+            {
+                book: {
+                    status: ExlibrisApp.BookStatus.OVERDUE,
+                    isAllowedLoanExtension: false
+                },
+                button: '',
+                actionUnsupportedMessage: ACTION_UNSUPPORTED_MESSAGE
+            },
+            {
+                book: {
+                    status: ExlibrisApp.BookStatus.SHOULD_RETURN_SOON,
+                    isAllowedLoanExtension: false
+                },
+                button: '',
+                actionUnsupportedMessage: ACTION_UNSUPPORTED_MESSAGE
+            },
+            {
+                book: {status: ExlibrisApp.BookStatus.RESERVED},
+                button: BUTTON_TITLES.CANCEL_RESERVATION,
+                actionUnsupportedMessage: ''
+            },
+            {
+                book: {status: ExlibrisApp.BookStatus.READY_TO_PICK_UP},
+                button: BUTTON_TITLES.CANCEL_RESERVATION,
+                actionUnsupportedMessage: ''
+            }
+        ];
+
+        const testElements = [];
+
+        BOOKS_AND_BUTTONS_COMBINATIONS.forEach(function (combination) {
+            const element = fixture('BasicTestFixture');
+            element.set('book', combination.book);
+            testElements.push(element);
+        });
+
+        test('should display book action button with appropriate title.', function (done) {
+            flush(function () {
+                testElements.forEach(function (element, index) {
+                    const wideScreenButton = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.WIDE_SCREEN_BUTTON);
+                    const narrowScreenButton = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.NARROW_SCREEN_BUTTON);
+                    assert.equal(wideScreenButton.innerHTML.trim(), BOOKS_AND_BUTTONS_COMBINATIONS[index].button);
+                    assert.equal(narrowScreenButton.innerHTML.trim(), BOOKS_AND_BUTTONS_COMBINATIONS[index].button);
+                });
+                done();
+            });
+        });
+
+        test('should display appropriate message when actions with book are unsupported.', function (done) {
+            flush(function () {
+                testElements.forEach(function (element, index) {
+                    const wideScreenMessage = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.WIDE_SCREEN_MESSAGE);
+                    const narrowScreenMessage = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.NARROW_SCREEN_MESSAGE);
+                    assert.equal(wideScreenMessage.innerHTML, BOOKS_AND_BUTTONS_COMBINATIONS[index].actionUnsupportedMessage);
+                    assert.equal(narrowScreenMessage.innerHTML, BOOKS_AND_BUTTONS_COMBINATIONS[index].actionUnsupportedMessage);
+                });
+                done();
+            });
+        });
+    });
+</script>
+</body>
+</html>
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
new file mode 100644
index 0000000..0e3e80f
--- /dev/null
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
@@ -0,0 +1,82 @@
+<!doctype html>
+<!--
+  ~ Copyright 2018, TeamDev Ltd. All rights reserved.
+  ~
+  ~ Redistribution and use in source and/or binary forms, with or without
+  ~ modification, must retain the above copyright notice and the following
+  ~ disclaimer.
+  ~
+  ~ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+  ~ "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+  ~ LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+  ~ A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+  ~ OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+  ~ SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+  ~ LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+  ~ DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+  ~ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+  ~ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+  ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+  -->
+
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport"
+          content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>exlibris-book-details store test</title>
+
+    <script src="../../../bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../../bower_components/web-component-tester/browser.js"></script>
+    <script src="../../../node_modules/redux/dist/redux.js"></script>
+    <script src="../test_variables.js"></script>
+
+    <link rel="import" href="../../../src/exlibris-app/book/exlibris-book-details.html">
+    <link rel="import" href="../../../src/exlibris-app/book/book_values.html">
+    <link rel="import" href="../../../src/exlibris-app/actions/exlibris_action.html">
+
+</head>
+<body>
+
+<test-fixture id="BasicTestFixture">
+    <template>
+        <exlibris-book-details></exlibris-book-details>
+    </template>
+</test-fixture>
+
+<script>
+    suite('exlibris-book-details', function () {
+        const TEST_BOOK = ExlibrisAppTest.BOOKS[0];
+        const TEST_BOOK_ROUTE_DATA = {title: TEST_BOOK.title, id: TEST_BOOK.id};
+        let mockStore;
+
+        setup(() => {
+            mockStore = sinon.mock(ExlibrisApp.store);
+        });
+
+        teardown(() => {
+            mockStore.restore();
+        });
+
+        test('should receive the selectedBook from the store.', function () {
+            const testState = {selectedBook: TEST_BOOK};
+            mockStore.expects("getState").returns(testState);
+            const element = fixture('BasicTestFixture');
+
+            assert.deepEqual(element.book, TEST_BOOK);
+            mockStore.verify();
+        });
+
+        test('should react on routeData change and dispatch action to the store.', function () {
+            const expectedAction = {type: ExlibrisActions.FIND_BOOK_BY_ID, bookId: TEST_BOOK.id};
+            mockStore.expects("dispatch").once().withArgs(expectedAction);
+            const element = fixture('BasicTestFixture');
+            element.set('routeData', TEST_BOOK_ROUTE_DATA);
+
+            mockStore.verify();
+        });
+    });
+</script>
+</body>
+</html>
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details_test.html b/client-web/test/exlibris-app/book/exlibris-book-details_test.html
deleted file mode 100644
index 6b7ee0e..0000000
--- a/client-web/test/exlibris-app/book/exlibris-book-details_test.html
+++ /dev/null
@@ -1,235 +0,0 @@
-<!doctype html>
-<!--
-  ~ Copyright 2018, TeamDev Ltd. All rights reserved.
-  ~
-  ~ Redistribution and use in source and/or binary forms, with or without
-  ~ modification, must retain the above copyright notice and the following
-  ~ disclaimer.
-  ~
-  ~ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-  ~ "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-  ~ LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-  ~ A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-  ~ OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-  ~ SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-  ~ LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-  ~ DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-  ~ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-  ~ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-  ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-  -->
-
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport"
-          content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-
-    <title>book-grid test</title>
-
-    <script src="../../../bower_components/webcomponentsjs/webcomponents-loader.js"></script>
-    <script src="../../../bower_components/web-component-tester/browser.js"></script>
-    <script src="../../../node_modules/redux/dist/redux.js"></script>
-    <script src="../test_variables.js"></script>
-
-    <link rel="import" href="../../../src/exlibris-app/book/exlibris-book-details.html">
-    <link rel="import" href="../../../src/exlibris-app/book/book_values.html">
-    <link rel="import" href="../../../src/exlibris-app/actions/exlibris_action.html">
-
-</head>
-<body>
-
-<test-fixture id="BasicTestFixture">
-    <template>
-        <exlibris-book-details></exlibris-book-details>
-    </template>
-</test-fixture>
-
-<script>
-    suite('exlibris-book-details', function () {
-        const TEST_BOOK = ExlibrisAppTest.BOOKS[0];
-        const TEST_BOOK_ROUTE_DATA = {title: TEST_BOOK.title, id: TEST_BOOK.id};
-
-        // const IMAGE_SELECTOR = 'iron-image';
-        // const BOOK_TITLE_SELECTOR = '.head-region > .head-info > .head-text > h1';
-        // const BOOK_AUTHOR_SELECTOR = '.head-region > .head-info > .head-text > h3';
-        // const BOOK_FULL_STATUS_MESSAGE_SELECTOR = '.head-region > .head-info > .head-text > h2';
-        // const BOOK_DESCRIPTION = '.book-description';
-        // const RESERVE_CANCEL_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-cancel-button';
-        // const RESERVE_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-reserve-button';
-        // const EXTEND_BUTTON_SELECTOR = '.head-region > .head-info > .head-button > #book-dialog-extend-button';
-        // const RESERVED_BY_ANOTHER_SELECTOR = '.head-region > .head-info > .head-button > h3';
-
-        let mockStore;
-
-        setup(() => {
-            mockStore = sinon.mock(ExlibrisApp.store);
-        });
-
-        teardown(() => {
-            mockStore.restore();
-        });
-
-        test('should receive the selectedBook from the store.', function () {
-            const testState = {selectedBook: TEST_BOOK};
-            mockStore.expects("getState").returns(testState);
-
-            const element = fixture('BasicTestFixture');
-
-            assert.deepEqual(element.book, TEST_BOOK);
-            mockStore.verify();
-        });
-
-        test('should react on routeData change and dispatch action to the store.', function () {
-            const expectedAction = {type: ExlibrisActions.FIND_BOOK_BY_ID, bookId: TEST_BOOK.id};
-            mockStore.expects("dispatch").once().withArgs(expectedAction);
-
-            const element = fixture('BasicTestFixture');
-            element.set('routeData', TEST_BOOK_ROUTE_DATA);
-
-            mockStore.verify();
-        });
-        //
-        // test('should display `RESERVE` button when book status is `EXPECTED` and fire event on click.', function (done) {
-        //     const expectedBook = Object.assign(TEST_BOOK, {status: bookStatus.EXPECTED});
-        //     element.set('book', expectedBook);
-        //     element.addEventListener('book-dialog-reserve-book', function (e) {
-        //         const bookId = e.detail.bookId;
-        //         assert.equal(bookId, expectedBook.id);
-        //         done();
-        //     });
-        //
-        //     element.open();
-        //     const dialogShadowRoot = element.shadowRoot;
-        //     flush(function () {
-        //         const reserveButton = dialogShadowRoot.querySelector(RESERVE_BUTTON_SELECTOR);
-        //         assert.isNotNull(reserveButton, 'Button is not displayed');
-        //         assert.equal(reserveButton.innerHTML.trim(), 'RESERVE');
-        //         reserveButton.click();
-        //     });
-        // });
-        //
-        // test('should display `CANCEL RESERVATION` button when book status is `RESERVED` and fire event on click.', function (done) {
-        //     const expectedBook = Object.assign(TEST_BOOK, {status: bookStatus.RESERVED});
-        //     element.set('book', expectedBook);
-        //     element.addEventListener('book-dialog-cancel-reservation', function (e) {
-        //         const bookId = e.detail.bookId;
-        //         assert.equal(bookId, expectedBook.id);
-        //         done();
-        //     });
-        //
-        //     element.open();
-        //     const dialogShadowRoot = element.shadowRoot;
-        //     flush(function () {
-        //         const cancelButton = dialogShadowRoot.querySelector(RESERVE_CANCEL_BUTTON_SELECTOR);
-        //         assert.isNotNull(cancelButton, 'Button is not displayed');
-        //         assert.equal(cancelButton.innerHTML.trim(), 'CANCEL RESERVATION');
-        //         cancelButton.click();
-        //     });
-        // });
-        //
-        // test('should display `EXTEND FOR TWO WEEKS` button when book status is `SHOULD_RETURN_SOON`' +
-        //     ' and available for extension. Than fire event on click.', function (done) {
-        //     const bookAllowedToExtend = Object.assign(TEST_BOOK, {
-        //         status: bookStatus.SHOULD_RETURN_SOON,
-        //         isAllowedLoanExtension: true
-        //     });
-        //     element.set('book', bookAllowedToExtend);
-        //     element.addEventListener('book-dialog-extend-loan', function (e) {
-        //         const bookId = e.detail.bookId;
-        //         assert.equal(bookId, bookAllowedToExtend.id);
-        //         done();
-        //     });
-        //
-        //     element.open();
-        //     const dialogShadowRoot = element.shadowRoot;
-        //     flush(function () {
-        //         const extendButton = dialogShadowRoot.querySelector(EXTEND_BUTTON_SELECTOR);
-        //         assert.isNotNull(extendButton, 'Button is not displayed');
-        //         assert.equal(extendButton.innerHTML.trim(), 'EXTEND FOR TWO WEEKS');
-        //         extendButton.click();
-        //     });
-        // });
-        //
-        // test('should display `EXTEND FOR TWO WEEKS` button when book status is `OVERDUE`' +
-        //     ' and available for extension. Than fire event on click.', function (done) {
-        //     const bookAllowedToExtend = Object.assign(TEST_BOOK, {
-        //         status: bookStatus.OVERDUE,
-        //         isAllowedLoanExtension: true
-        //     });
-        //     element.set('book', bookAllowedToExtend);
-        //     element.addEventListener('book-dialog-extend-loan', function (e) {
-        //         const bookId = e.detail.bookId;
-        //         assert.equal(bookId, bookAllowedToExtend.id);
-        //         done();
-        //     });
-        //
-        //     element.open();
-        //     const dialogShadowRoot = element.shadowRoot;
-        //     flush(function () {
-        //         const extendButton = dialogShadowRoot.querySelector(EXTEND_BUTTON_SELECTOR);
-        //         assert.isNotNull(extendButton, 'Button is not displayed');
-        //         assert.equal(extendButton.innerHTML.trim(), 'EXTEND FOR TWO WEEKS');
-        //         extendButton.click();
-        //     });
-        // });
-        //
-        //
-        // test('should display `RESERVED BY ANOTHER READER` when book status is `BORROWED`' +
-        //     ' and extension not allowed.', function (done) {
-        //     const bookNotAllowedToExtend = Object.assign(TEST_BOOK, {
-        //         status: bookStatus.BORROWED,
-        //         isAllowedLoanExtension: false
-        //     });
-        //     element.set('book', bookNotAllowedToExtend);
-        //     element.open();
-        //
-        //     const dialogShadowRoot = element.shadowRoot;
-        //     flush(function () {
-        //         const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
-        //         assert.isNotNull(reservedByAnother, 'Row is not displayed');
-        //         assert.equal(reservedByAnother.innerHTML.trim(), 'RESERVED BY ANOTHER READER');
-        //         done();
-        //     });
-        // });
-        //
-        // test('should display `RESERVED BY ANOTHER READER` when book status is `OVERDUE`' +
-        //     ' and extension not allowed.', function (done) {
-        //     const bookNotAllowedToExtend = Object.assign(TEST_BOOK, {
-        //         status: bookStatus.OVERDUE,
-        //         isAllowedLoanExtension: false
-        //     });
-        //     element.set('book', bookNotAllowedToExtend);
-        //     element.open();
-        //
-        //     const dialogShadowRoot = element.shadowRoot;
-        //     flush(function () {
-        //         const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
-        //         assert.isNotNull(reservedByAnother, 'Row is not displayed');
-        //         assert.equal(reservedByAnother.innerHTML.trim(), 'RESERVED BY ANOTHER READER');
-        //         done();
-        //     });
-        // });
-        //
-        // test('should display `RESERVED BY ANOTHER READER` when book status is `SHOULD_RETURN_SOON`' +
-        //     ' and extension not allowed.', function (done) {
-        //     const bookNotAllowedToExtend = Object.assign(TEST_BOOK, {
-        //         status: bookStatus.SHOULD_RETURN_SOON,
-        //         isAllowedLoanExtension: false
-        //     });
-        //     element.set('book', bookNotAllowedToExtend);
-        //     element.open();
-        //
-        //     const dialogShadowRoot = element.shadowRoot;
-        //     flush(function () {
-        //         const reservedByAnother = dialogShadowRoot.querySelector(RESERVED_BY_ANOTHER_SELECTOR);
-        //         assert.isNotNull(reservedByAnother, 'Row is not displayed');
-        //         assert.equal(reservedByAnother.innerHTML.trim(), 'RESERVED BY ANOTHER READER');
-        //         done();
-        //     });
-        // });
-
-    });
-</script>
-</body>
-</html>

From ce0e8e8cfc2adfa3d36c6b014f7d2ead209fd503 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Thu, 12 Apr 2018 17:57:19 +0300
Subject: [PATCH 54/92] Add route check before dispatching the `findBookById`
 action.

---
 .../exlibris-book-details-redirect-link.html  | 45 ++++++++++---------
 .../book/exlibris-book-details.html           |  3 +-
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index b789dc4..df3f279 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -127,34 +127,37 @@
              * search by the `bookTitle`.
              */
             _calculateReference(bookCode, bookTitle) {
-                if (bookCode && bookCode.match(BOOK_CODE_MATCHERS.ISBN_10)) {
-                    return {
-                        codeType: 'ISBN:',
-                        title: bookCode,
-                        href: EXTERNAL_SEARCH_LINKS.AMAZON.format(bookTitle, bookCode)
+                if (bookCode && bookTitle) {
+                    if (bookCode.match(BOOK_CODE_MATCHERS.ISBN_10)) {
+                        return {
+                            codeType: 'ISBN:',
+                            title: bookCode,
+                            href: EXTERNAL_SEARCH_LINKS.AMAZON.format(bookTitle, bookCode)
+                        }
                     }
-                }
 
-                if (bookCode && bookCode.match(BOOK_CODE_MATCHERS.ISBN_13)) {
-                    return {
-                        codeType: 'ISBN:',
-                        title: bookCode,
-                        href: EXTERNAL_SEARCH_LINKS.PLAY_BOOKS.format(bookCode)
+                    if (bookCode.match(BOOK_CODE_MATCHERS.ISBN_13)) {
+                        return {
+                            codeType: 'ISBN:',
+                            title: bookCode,
+                            href: EXTERNAL_SEARCH_LINKS.PLAY_BOOKS.format(bookCode)
+                        }
+                    }
+                    if (bookCode.match(BOOK_CODE_MATCHERS.ASIN)) {
+                        return {
+                            codeType: 'ASIN:',
+                            title: bookCode,
+                            href: EXTERNAL_SEARCH_LINKS.AMAZON.format(bookTitle, bookCode)
+                        }
                     }
                 }
-                if (bookCode && bookCode.match(BOOK_CODE_MATCHERS.ASIN)) {
+                if (bookTitle) {
                     return {
-                        codeType: 'ASIN:',
-                        title: bookCode,
-                        href: EXTERNAL_SEARCH_LINKS.AMAZON.format(bookTitle, bookCode)
+                        codeType: '',
+                        title: 'Search on Google play',
+                        href: EXTERNAL_SEARCH_LINKS.PLAY_BOOKS.format(bookTitle)
                     }
                 }
-
-                return {
-                    codeType: '',
-                    title: 'Search on Google play',
-                    href: EXTERNAL_SEARCH_LINKS.PLAY_BOOKS.format(bookTitle.replace(' ', '%20'))
-                }
             }
         }
 
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 01ed3da..ef77c54 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -314,7 +314,8 @@
              * Dispatches action to find book by Id specified by the `routeData`.
              */
             _routeDataChanged(routeData) {
-                if (this.routeData.id) {
+                if (this.route && this.route.prefix === '/book-details' && this.routeData.id) {
+                    console.log('dispatch');
                     this.dispatch('findBookById', routeData.id);
                 }
             }

From 2dd3c1e91423f54ba1a75fc695b1ec48d1eac507 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 13 Apr 2018 13:43:07 +0300
Subject: [PATCH 55/92] Apply paper-styles to book-details page.

---
 .../book/exlibris-book-details.html           | 64 ++++++++++---------
 client-web/src/exlibris-app/global-style.html |  2 +-
 2 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index ef77c54..a5efa36 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -24,7 +24,6 @@
 <link rel="import" href="../shell/redux-store.html">
 <link rel="import" href="../../../bower_components/polymer/lib/elements/dom-if.html">
 <link rel="import" href="../../../bower_components/app-route/app-route.html">
-<link rel="import" href="../../../bower_components/paper-styles/color.html">
 <link rel="import" href="../../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../../bower_components/iron-icons/iron-icons.html">
@@ -45,11 +44,12 @@
 
             .book-card {
                 @apply --layout-vertical;
+                @apply --shadow-elevation-8dp;
                 border-radius: 3px;
-                box-shadow: 4px 4px 10px var(--paper-grey-500);
-                background-color: var(--paper-grey-50);
-                max-width: 1000px;
                 margin: 10px;
+                max-width: 700px;
+                background-color: var(--primary-background-color);
+                color: var(--light-theme-text-color);
             }
 
             .book-card .head-region {
@@ -62,10 +62,9 @@
             }
 
             .book-card .head-region iron-image {
+                @apply --shadow-elevation-4dp;
                 --iron-image-width: 100%;
-                overflow: inherit;
-                box-shadow: 0 -1px 0 var(--paper-grey-300), 0 0 2px rgba(0, 0, 0, .12), 0 2px 4px rgba(0, 0, 0, .24);
-                margin-left: 25px;
+                margin-left: 36px;
                 margin-top: 25px;
             }
 
@@ -74,6 +73,7 @@
                 width: 70%;
                 height: 100%;
                 padding-left: 30px;
+                padding-right: 35px;
                 flex-direction: column;
                 justify-content: space-between;
             }
@@ -82,6 +82,7 @@
                 display: flex;
                 flex-direction: column;
                 justify-content: flex-start;
+                padding-top: 35px;
             }
 
             .book-card .head-region .head-info .button-wide-screen {
@@ -96,45 +97,41 @@
                 margin: 15px 0 0 15px;
             }
 
+            .button-place-message {
+                @apply --paper-font-button;
+                color: var(--light-theme-secondary-color);
+            }
+
             paper-button {
+                @apply --paper-font-button;
                 margin: 0;
                 background-color: var(--exlibris-app-primary-color);
-                color: var(--paper-grey-50);
+                color: var(--dark-theme-text-color);
                 height: 36px;
-                font-size: 14px;
                 padding: 0 16px 0 16px;
             }
 
-            paper-button.small {
-                font-size: 12px;
-            }
-
             #description {
+                @apply --paper-font-body1;
+                color: var(--exlibris-app-secondary-color);
                 margin-top: 30px;
                 margin-bottom: 30px;
-                padding: 0 25px 0 25px;
-                text-align: justify;
-                color: var(--exlibris-app-secondary-color);
+                padding: 0 36px 0 36px;
             }
 
             #title {
-                font-size: 25px;
-                line-height: 30px;
-                margin: 40px 15px 10px 0;
+                @apply --paper-font-headline;
                 text-align: left;
-                font-weight: normal;
             }
 
             #author {
-                font-size: 12px;
-                font-weight: lighter;
-                margin: 5px 0 5px 0;
+                @apply --paper-font-subhead;
+                color: var(--light-theme-secondary-color);
             }
 
             #status-message {
+                @apply --paper-font-body2;
                 white-space: pre;
-                font-size: 15px;
-                font-weight: bold;
                 margin: 20px 0 5px 0;
             }
 
@@ -146,7 +143,7 @@
                 .book-card {
                     border-radius: 0;
                     box-shadow: unset;
-                    background-color: initial;
+                    background-color: unset;
                     margin: 0;
                 }
 
@@ -165,6 +162,11 @@
 
                 .book-card .head-region .head-info {
                     padding-left: 10px;
+                    padding-right: 15px;
+                }
+
+                .book-card .head-region .head-info .head-text {
+                    padding-top: 15px;
                 }
 
                 #description {
@@ -173,9 +175,11 @@
                 }
 
                 #title {
-                    font-size: 16px;
-                    line-height: 15px;
-                    margin: 20px 15px 5px 0;
+                    @apply --paper-font-subhead;
+                }
+
+                #author {
+                    @apply --paper-font-body1;
                 }
             }
         </style>
@@ -196,7 +200,7 @@
                                                              book-title="[[book.title]]"></exlibris-book-details-redirect-link>
                         <div id="status-message">[[statusMessage]]</div>
                     </div>
-                    <div class="button-wide-screen">
+                    <div class="button-wide-screen" hidden="true">
                         <paper-button raised
                                       on-click="_handleButtonClick"
                                       hidden="[[!button]]">
diff --git a/client-web/src/exlibris-app/global-style.html b/client-web/src/exlibris-app/global-style.html
index c7b90dc..c90b1b0 100644
--- a/client-web/src/exlibris-app/global-style.html
+++ b/client-web/src/exlibris-app/global-style.html
@@ -18,7 +18,7 @@
   ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   -->
 
-<link rel="import" href="../../bower_components/paper-styles/color.html">
+<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
 <link rel="import" href="../../bower_components/polymer/lib/elements/custom-style.html">
 
 <custom-style>

From 2659219b4ad82bf9620ce8054fcff834b83216ea Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 13 Apr 2018 14:30:02 +0300
Subject: [PATCH 56/92] Remove icon from the redirect link.

---
 .../exlibris-book-details-redirect-link.html  | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index df3f279..31ec877 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -26,10 +26,10 @@
     <template>
         <style>
             :host {
+                @apply --paper-font-body1;
                 display: flex;
-                font-size: 12px;
-                font-weight: lighter;
                 margin: 5px 0 5px 0;
+
             }
 
             #code-type {
@@ -38,22 +38,17 @@
 
             #title {
                 display: flex;
-                text-decoration-style: dotted;
+                color: var(--exlibris-app-primary-color);
+                font-weight: 700;
             }
 
-            #title iron-icon {
-                --iron-icon-width: 10px;
-                --iron-icon-height: 10px;
-                margin-top: -2px;
-            }
         </style>
 
-        <div id="code-type" hidden="[[!redirectValues.codeType.length]]">
-            [[redirectValues.codeType]]
-        </div>
         <a id="title" target="_blank" href="[[redirectValues.href]]">
+            <div id="code-type" hidden="[[!redirectValues.codeType.length]]">
+                [[redirectValues.codeType]]
+            </div>
             [[redirectValues.title]]
-            <iron-icon icon="open-in-new"></iron-icon>
         </a>
         </div>
     </template>

From 4cbe1178d14baf52c3545f131aee7fd188aca0f3 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 13 Apr 2018 15:44:10 +0300
Subject: [PATCH 57/92] Simplify redirect-link template and styles.

---
 .../exlibris-book-details-redirect-link.html  | 57 ++++++-------------
 1 file changed, 18 insertions(+), 39 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index 31ec877..6b82100 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -19,42 +19,34 @@
   -->
 
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
-<link rel="import" href="../../../bower_components/iron-icons/iron-icons.html">
 
 <dom-module id="exlibris-book-details-redirect-link">
     <template>
         <style>
             :host {
-                @apply --paper-font-body1;
                 display: flex;
                 margin: 5px 0 5px 0;
-
             }
 
-            #code-type {
-                padding-right: 5px;
-            }
-
-            #title {
+            #link {
+                @apply --paper-font-body1;
                 display: flex;
-                color: var(--exlibris-app-primary-color);
-                font-weight: 700;
+                text-decoration: none;
+                color: var(--paper-blue-600);
             }
 
+            #link:hover {
+                text-decoration: underline;
+            }
         </style>
 
-        <a id="title" target="_blank" href="[[redirectValues.href]]">
-            <div id="code-type" hidden="[[!redirectValues.codeType.length]]">
-                [[redirectValues.codeType]]
-            </div>
+        <a id="link" target="_blank" href="[[redirectValues.href]]">
             [[redirectValues.title]]
         </a>
-        </div>
     </template>
 
     <script>
-        const BOOK_CODE_MATCHERS = {
+        const BOOK_CODE_PATTERNS = {
             ISBN_10: /^\d{10}$/g,
             ISBN_13: /^\d{13}$/g,
             ASIN: /^[\d, A-Z]{10}$/g
@@ -100,7 +92,6 @@
                     /**
                      * The book external link reference, title and the code type.
                      *
-                     * @property {string} codeType the detected book code type.
                      * @property {string} title  the reference title.
                      * @property {string} href  the link to open in the new tab.
                      */
@@ -115,44 +106,32 @@
              * Checks for the passed book code format.
              *
              * If the `bookCode` matches the `ISBN-10` or `ASIN` pattern, generates
-             * the Amazon book link.
+             * the Amazon book search link.
+             *
              * If the `bookCode` matches the `ISBN-13` pattern, generates the Google Play Books
-             * search by the `ISBN-13` link.
-             * If the `bookCode` does not match any patterns, generates the Google Play Books
-             * search by the `bookTitle`.
+             * search link.
              */
             _calculateReference(bookCode, bookTitle) {
                 if (bookCode && bookTitle) {
-                    if (bookCode.match(BOOK_CODE_MATCHERS.ISBN_10)) {
+                    if (bookCode.match(BOOK_CODE_PATTERNS.ISBN_10)) {
                         return {
-                            codeType: 'ISBN:',
-                            title: bookCode,
+                            title: 'ISBN: ' + bookCode,
                             href: EXTERNAL_SEARCH_LINKS.AMAZON.format(bookTitle, bookCode)
                         }
                     }
-
-                    if (bookCode.match(BOOK_CODE_MATCHERS.ISBN_13)) {
+                    if (bookCode.match(BOOK_CODE_PATTERNS.ISBN_13)) {
                         return {
-                            codeType: 'ISBN:',
-                            title: bookCode,
+                            title: 'ISBN: ' + bookCode,
                             href: EXTERNAL_SEARCH_LINKS.PLAY_BOOKS.format(bookCode)
                         }
                     }
-                    if (bookCode.match(BOOK_CODE_MATCHERS.ASIN)) {
+                    if (bookCode.match(BOOK_CODE_PATTERNS.ASIN)) {
                         return {
-                            codeType: 'ASIN:',
-                            title: bookCode,
+                            title: 'ASIN: ' + bookCode,
                             href: EXTERNAL_SEARCH_LINKS.AMAZON.format(bookTitle, bookCode)
                         }
                     }
                 }
-                if (bookTitle) {
-                    return {
-                        codeType: '',
-                        title: 'Search on Google play',
-                        href: EXTERNAL_SEARCH_LINKS.PLAY_BOOKS.format(bookTitle)
-                    }
-                }
             }
         }
 

From 138558cd71570389e655277bc753006f587d9107 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 13 Apr 2018 16:16:06 +0300
Subject: [PATCH 58/92] Change book-details methods naming.

---
 .../book/exlibris-book-details.html           | 32 ++++++-------------
 1 file changed, 10 insertions(+), 22 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index a5efa36..853422a 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -262,7 +262,7 @@
                      */
                     button: {
                         type: Object,
-                        computed: '_updateButton(book)',
+                        computed: '_chooseButton(book)',
                         value: null
                     },
 
@@ -271,7 +271,7 @@
                      */
                     statusMessage: {
                         type: String,
-                        computed: '_updateStatusMessage(book)'
+                        computed: '_calculateStatusMessage(book)'
                     },
 
                     /**
@@ -280,7 +280,7 @@
                      */
                     actionUnsupportedMessage: {
                         type: String,
-                        computed: '_updateActionUnsupportedMessage(book)'
+                        computed: '_calculateActionUnsupportedMessage(book)'
                     },
 
                     /**
@@ -319,7 +319,6 @@
              */
             _routeDataChanged(routeData) {
                 if (this.route && this.route.prefix === '/book-details' && this.routeData.id) {
-                    console.log('dispatch');
                     this.dispatch('findBookById', routeData.id);
                 }
             }
@@ -328,7 +327,7 @@
              * Sets the appropriate button title and click handler function
              * according to the passed book.
              */
-            _updateButton(book) {
+            _chooseButton(book) {
                 if (book) {
                     switch (book.status) {
                         case ExlibrisApp.BookStatus.EXPECTED_SOON:
@@ -368,7 +367,7 @@
              * Sets the appropriate status message
              * according to the passed book.
              */
-            _updateStatusMessage(book) {
+            _calculateStatusMessage(book) {
                 if (book) {
                     switch (book.status) {
                         case ExlibrisApp.BookStatus.AVAILABLE: {
@@ -404,9 +403,6 @@
                         case ExlibrisApp.BookStatus.SHOULD_RETURN_SOON: {
                             return book.dueDate ? 'Borrowed by you.\nReturn before ' + book.dueDate.toLocaleDateString() : '';
                         }
-
-                        default:
-                            return '';
                     }
                 }
             }
@@ -415,20 +411,12 @@
              * Sets the appropriate message if the button is not supported
              * for the passed book.
              */
-            _updateActionUnsupportedMessage(book) {
+            _calculateActionUnsupportedMessage(book) {
                 if (book) {
-                    switch (book.status) {
-                        case ExlibrisApp.BookStatus.BORROWED:
-                        case ExlibrisApp.BookStatus.SHOULD_RETURN_SOON:
-                        case ExlibrisApp.BookStatus.OVERDUE: {
-                            if (!book.isAllowedLoanExtension) {
-                                return 'RESERVED BY ANOTHER READER';
-                            }
-                            break;
-                        }
-                        default:
-                            return '';
-                    }
+                    if ([ExlibrisApp.BookStatus.BORROWED,
+                            ExlibrisApp.BookStatus.SHOULD_RETURN_SOON,
+                            ExlibrisApp.BookStatus.OVERDUE].includes(book.status) &&
+                        !book.isAllowedLoanExtension) return 'RESERVED BY ANOTHER READER';
                 }
             }
 

From d40efc65c3e23089d30db8734c3c383a3cccd22f Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 13 Apr 2018 17:57:57 +0300
Subject: [PATCH 59/92] Fix details-page tests.

---
 .../src/exlibris-app/book/exlibris-book-details.html       | 2 +-
 .../book/exlibris-book-details-buttons_test.html           | 4 ++--
 .../book/exlibris-book-details-store_test.html             | 7 +++++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 853422a..6d2bcf9 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -39,7 +39,7 @@
         <style>
             :host {
                 display: flex;
-                margin-left: 100px;
+                justify-content: center;
             }
 
             .book-card {
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
index 2798713..a91c4ad 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
@@ -163,8 +163,8 @@
                 testElements.forEach(function (element, index) {
                     const wideScreenMessage = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.WIDE_SCREEN_MESSAGE);
                     const narrowScreenMessage = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.NARROW_SCREEN_MESSAGE);
-                    assert.equal(wideScreenMessage.innerHTML, BOOKS_AND_BUTTONS_COMBINATIONS[index].actionUnsupportedMessage);
-                    assert.equal(narrowScreenMessage.innerHTML, BOOKS_AND_BUTTONS_COMBINATIONS[index].actionUnsupportedMessage);
+                    assert.equal(wideScreenMessage.innerHTML.trim(), BOOKS_AND_BUTTONS_COMBINATIONS[index].actionUnsupportedMessage);
+                    assert.equal(narrowScreenMessage.innerHTML.trim(), BOOKS_AND_BUTTONS_COMBINATIONS[index].actionUnsupportedMessage);
                 });
                 done();
             });
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
index 0e3e80f..9b3e672 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
@@ -48,7 +48,10 @@
 <script>
     suite('exlibris-book-details', function () {
         const TEST_BOOK = ExlibrisAppTest.BOOKS[0];
-        const TEST_BOOK_ROUTE_DATA = {title: TEST_BOOK.title, id: TEST_BOOK.id};
+        const TEST_BOOK_ROUTE = {
+            prefix: '/book-details',
+            path: '/' + TEST_BOOK.title.replace(/\s/g, '_') + '/' + TEST_BOOK.id
+        };
         let mockStore;
 
         setup(() => {
@@ -72,7 +75,7 @@
             const expectedAction = {type: ExlibrisActions.FIND_BOOK_BY_ID, bookId: TEST_BOOK.id};
             mockStore.expects("dispatch").once().withArgs(expectedAction);
             const element = fixture('BasicTestFixture');
-            element.set('routeData', TEST_BOOK_ROUTE_DATA);
+            element.set('route', TEST_BOOK_ROUTE);
 
             mockStore.verify();
         });

From 4c0be8c6c0f3e4c05755c51a19bfab45a27c64f2 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 16 Apr 2018 10:37:57 +0300
Subject: [PATCH 60/92] Resolve import path issues, fix tests to meet IE
 requirements.

---
 .../book/exlibris-book-details.html           |  6 ++--
 .../exlibris-app/book/exlibris-book-grid.html |  6 ++--
 .../exlibris-app/book/exlibris-book-tile.html | 12 ++++----
 .../exlibris-book-details-buttons_test.html   | 28 +++++++++++--------
 4 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 6d2bcf9..22e59c7 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -413,9 +413,9 @@
              */
             _calculateActionUnsupportedMessage(book) {
                 if (book) {
-                    if ([ExlibrisApp.BookStatus.BORROWED,
-                            ExlibrisApp.BookStatus.SHOULD_RETURN_SOON,
-                            ExlibrisApp.BookStatus.OVERDUE].includes(book.status) &&
+                    if ((ExlibrisApp.BookStatus.BORROWED === book.status
+                            || ExlibrisApp.BookStatus.SHOULD_RETURN_SOON === book.status
+                            || ExlibrisApp.BookStatus.OVERDUE === book.status) &&
                         !book.isAllowedLoanExtension) return 'RESERVED BY ANOTHER READER';
                 }
             }
diff --git a/client-web/src/exlibris-app/book/exlibris-book-grid.html b/client-web/src/exlibris-app/book/exlibris-book-grid.html
index 61538fc..433a8c2 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-grid.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-grid.html
@@ -18,9 +18,9 @@
   ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   -->
 
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">
-<link rel="import" href="../../bower_components/iron-list/iron-list.html">
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../bower_components/polymer/lib/elements/dom-if.html">
+<link rel="import" href="../../../bower_components/iron-list/iron-list.html">
 <link rel="import" href="./exlibris-book-tile.html">
 <link rel="import" href="./book_values.html">
 
diff --git a/client-web/src/exlibris-app/book/exlibris-book-tile.html b/client-web/src/exlibris-app/book/exlibris-book-tile.html
index 74605e3..2cb76d6 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-tile.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-tile.html
@@ -17,12 +17,12 @@
   ~ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
   ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   -->
-<link rel="import" href="../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="../../bower_components/iron-image/iron-image.html">
-<link rel="import" href="../../bower_components/iron-scroll-threshold/iron-scroll-threshold.html">
-<link rel="import" href="../../bower_components/iron-list/iron-list.html">
-<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../../bower_components/iron-image/iron-image.html">
+<link rel="import" href="../../../bower_components/iron-scroll-threshold/iron-scroll-threshold.html">
+<link rel="import" href="../../../bower_components/iron-list/iron-list.html">
+<link rel="import" href="../../../bower_components/polymer/lib/elements/dom-if.html">
 <link rel="import" href="./book_values.html">
 
 <dom-module id="exlibris-book-tile">
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
index a91c4ad..321f083 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
@@ -34,7 +34,6 @@
 
     <link rel="import" href="../../../src/exlibris-app/book/exlibris-book-details.html">
     <link rel="import" href="../../../src/exlibris-app/book/book_values.html">
-
 </head>
 <body>
 
@@ -47,6 +46,7 @@
 <script>
     suite('exlibris-book-details', function () {
 
+
         const BUTTON_TITLES = {
             RESERVE: 'RESERVE',
             CANCEL_RESERVATION: 'CANCEL RESERVATION',
@@ -62,7 +62,11 @@
             NARROW_SCREEN_MESSAGE: '.book-card .button-narrow-screen .button-place-message'
         };
 
-        const BOOKS_AND_BUTTONS_COMBINATIONS = [
+        let booksAndButtonsCombinations;
+        let testElements;
+
+        setup(() => {
+         booksAndButtonsCombinations = [
             {
                 book: {status: ExlibrisApp.BookStatus.EXPECTED},
                 button: BUTTON_TITLES.RESERVE,
@@ -137,13 +141,13 @@
                 actionUnsupportedMessage: ''
             }
         ];
+            testElements = [];
 
-        const testElements = [];
-
-        BOOKS_AND_BUTTONS_COMBINATIONS.forEach(function (combination) {
-            const element = fixture('BasicTestFixture');
-            element.set('book', combination.book);
-            testElements.push(element);
+            booksAndButtonsCombinations.forEach(function (combination) {
+                const element = fixture('BasicTestFixture');
+                element.set('book', combination.book);
+                testElements.push(element);
+            });
         });
 
         test('should display book action button with appropriate title.', function (done) {
@@ -151,8 +155,8 @@
                 testElements.forEach(function (element, index) {
                     const wideScreenButton = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.WIDE_SCREEN_BUTTON);
                     const narrowScreenButton = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.NARROW_SCREEN_BUTTON);
-                    assert.equal(wideScreenButton.innerHTML.trim(), BOOKS_AND_BUTTONS_COMBINATIONS[index].button);
-                    assert.equal(narrowScreenButton.innerHTML.trim(), BOOKS_AND_BUTTONS_COMBINATIONS[index].button);
+                    assert.equal(wideScreenButton.innerHTML.trim(), booksAndButtonsCombinations[index].button);
+                    assert.equal(narrowScreenButton.innerHTML.trim(), booksAndButtonsCombinations[index].button);
                 });
                 done();
             });
@@ -163,8 +167,8 @@
                 testElements.forEach(function (element, index) {
                     const wideScreenMessage = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.WIDE_SCREEN_MESSAGE);
                     const narrowScreenMessage = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.NARROW_SCREEN_MESSAGE);
-                    assert.equal(wideScreenMessage.innerHTML.trim(), BOOKS_AND_BUTTONS_COMBINATIONS[index].actionUnsupportedMessage);
-                    assert.equal(narrowScreenMessage.innerHTML.trim(), BOOKS_AND_BUTTONS_COMBINATIONS[index].actionUnsupportedMessage);
+                    assert.equal(wideScreenMessage.innerHTML.trim(), booksAndButtonsCombinations[index].actionUnsupportedMessage);
+                    assert.equal(narrowScreenMessage.innerHTML.trim(), booksAndButtonsCombinations[index].actionUnsupportedMessage);
                 });
                 done();
             });

From 836a76c0d9832cafefc14b54de1880241b7871db Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 16 Apr 2018 13:36:05 +0300
Subject: [PATCH 61/92] Add book details loading status.

---
 .../book/exlibris-book-details.html           | 30 ++++++++++++++++--
 client-web/src/exlibris-app/exlibris-app.html |  7 ++++-
 .../reducers/exlibris_reducer.html            | 31 ++++++++++++-------
 .../exlibris-app/reducers/loading-status.js   | 27 ++++++++++++++++
 .../exlibris-book-details-store_test.html     |  2 +-
 5 files changed, 80 insertions(+), 17 deletions(-)
 create mode 100644 client-web/src/exlibris-app/reducers/loading-status.js

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 22e59c7..cd3c17c 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -31,9 +31,10 @@
 <link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="./book_values.html">
 <link rel="import" href="../actions/exlibris_action.html">
-
 <link rel="import" href="./exlibris-book-details-redirect-link.html">
 
+<script src="../reducers/loading-status.js"></script>
+
 <dom-module id="exlibris-book-details">
     <template>
         <style>
@@ -188,7 +189,6 @@
                 route="{{route}}"
                 pattern="/:title/:id"
                 data="{{routeData}}"></app-route>
-
         <div class="book-card">
             <div class="head-region">
                 <iron-image src="[[book.image]]"></iron-image>
@@ -251,7 +251,13 @@
                      */
                     book: {
                         type: Object,
-                        statePath: 'selectedBook'
+                        statePath: 'bookDetails.book'
+                    },
+
+                    loadingStatus: {
+                        type: Object,
+                        statePath: "bookDetails.loadingStatus",
+                        observer: "_loadingStatusChanged"
                     },
 
                     /**
@@ -420,6 +426,24 @@
                 }
             }
 
+            _loadingStatusChanged(loadingStatus) {
+                console.log(loadingStatus);
+                switch (loadingStatus) {
+                    case ExlibrisApp.LoadingStatus.NOT_FOUND: {
+                        this.dispatchEvent(new CustomEvent('exlibris-book-details-not-found', {detail: {message: 'Book not found.'}}));
+                        break;
+                    }
+                    case ExlibrisApp.LoadingStatus.IN_PROGRESS: {
+                        //TODO:2018-35-16:yegor.udovchenko: Show loading progress
+                        break;
+                    }
+                    case ExlibrisApp.LoadingStatus.COMPLETED: {
+                        //TODO:2018-36-16:yegor.udovchenko: End display `loading in progress` view
+                        break;
+                    }
+                }
+            }
+
             /**
              * Handles the button click.
              * Calls the button clickHandler` function.
diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 7cef923..fafeaa0 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -122,7 +122,8 @@
                                         type-of-books="should return soon"
                                         message="[[bookMessage.SHOULD_RETURN_SOON]]"></exlibris-book-grid>
                     <exlibris-book-details data-page="book-details"
-                                           route="[[subRoute]]"></exlibris-book-details>
+                                           route="[[subRoute]]"
+                                            on-exlibris-book-details-not-found="_showView404"></exlibris-book-details>
                     <div data-page="view404">View404</div>
                 </iron-pages>
             </app-header-layout>
@@ -280,6 +281,10 @@
                     this.$.drawer.toggle();
                 }
             }
+
+            _showView404(){
+                this.$.pages.select('view404');
+            }
         }
 
         window.customElements.define(ExlibrisMainApp.is, ExlibrisMainApp);
diff --git a/client-web/src/exlibris-app/reducers/exlibris_reducer.html b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
index 1b93a79..1b7fc68 100644
--- a/client-web/src/exlibris-app/reducers/exlibris_reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
@@ -18,6 +18,7 @@
   ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   -->
 <script src="../test_values.js"></script>
+<script src="./loading-status.js"></script>
 <link rel="import" href="../book/book_values.html">
 <link rel="import" href="../actions/exlibris_action.html">
 
@@ -32,13 +33,15 @@
             reservedBooks: userTestBooks.reserved,
             allBooks: [...userTestBooks.overdue, ...libraryTestBooks],
             expectedSoonBooks: expectedSoonLibraryBooks,
-            selectedBook: {}
+            bookDetails: {
+                book: {},
+                loadingStatus: {}
+            }
         };
 
         ExlibrisApp.reducer = (state = initialState, action) => {
             switch (action.type) {
                 case ExlibrisActions.FIND_BOOK_BY_ID: {
-                    // sleep(1000);
                     const id = action.bookId;
                     const book =
                         state.allBooks.find(x => x.id === id)
@@ -47,20 +50,24 @@
                         || state.shouldReturnBooks.find(x => x.id === id)
                         || state.borrowedBooks.find(x => x.id === id)
                         || state.reservedBooks.find(x => x.id === id);
-                    return Object.assign({}, state, {selectedBook: book});
+                    if (book) {
+                        return Object.assign({}, state, {
+                            bookDetails: {
+                                book: book,
+                                loadingStatus: ExlibrisApp.LoadingStatus.COMPLETED
+                            }
+                        });
+                    }
+                    return Object.assign({}, state, {
+                        bookDetails: {
+                            book: {},
+                            loadingStatus: ExlibrisApp.LoadingStatus.NOT_FOUND
+                        }
+                    });
                 }
                 default:
                     return state;
             }
         };
-
-        function sleep(milliseconds) {
-            const start = new Date().getTime();
-            for (let i = 0; i < 1e7; i++) {
-                if ((new Date().getTime() - start) > milliseconds){
-                    break;
-                }
-            }
-        }
     }
 </script>
diff --git a/client-web/src/exlibris-app/reducers/loading-status.js b/client-web/src/exlibris-app/reducers/loading-status.js
new file mode 100644
index 0000000..3b469ef
--- /dev/null
+++ b/client-web/src/exlibris-app/reducers/loading-status.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2018, TeamDev Ltd. All rights reserved.
+ *
+ * Redistribution and use in source and/or binary forms, with or without
+ * modification, must retain the above copyright notice and the following
+ * disclaimer.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/* exported LoadingStatus */
+
+ExlibrisApp.LoadingStatus = {
+    IN_PROGRESS: "IN_PROGRESS",
+    COMPLETED: "COMPLETED",
+    NOT_FOUND: "NOT_FOUND"
+};
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
index 9b3e672..1b63bdd 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
@@ -63,7 +63,7 @@
         });
 
         test('should receive the selectedBook from the store.', function () {
-            const testState = {selectedBook: TEST_BOOK};
+            const testState = {bookDetails: {book: TEST_BOOK}};
             mockStore.expects("getState").returns(testState);
             const element = fixture('BasicTestFixture');
 

From 0e63862cce39610545aa91e43e4163a530db7d1a Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 16 Apr 2018 14:24:11 +0300
Subject: [PATCH 62/92] Create book-details fires event test.

---
 .../exlibris-book-details-store_test.html     | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
index 1b63bdd..0311058 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
@@ -62,12 +62,13 @@
             mockStore.restore();
         });
 
-        test('should receive the selectedBook from the store.', function () {
-            const testState = {bookDetails: {book: TEST_BOOK}};
+        test('should receive the selected book from the store.', function () {
+            const testState = {bookDetails: {book: TEST_BOOK, loadingStatus: ExlibrisApp.LoadingStatus.COMPLETED}};
             mockStore.expects("getState").returns(testState);
             const element = fixture('BasicTestFixture');
 
             assert.deepEqual(element.book, TEST_BOOK);
+            assert.equal(element.loadingStatus, ExlibrisApp.LoadingStatus.COMPLETED);
             mockStore.verify();
         });
 
@@ -79,6 +80,20 @@
 
             mockStore.verify();
         });
+
+        test('should react on `loadingStatus` change and dispatch the custom event when the value is `LoadingStatus.NOT_FOUND`.', function (done) {
+            const testState = {bookDetails: {book: {}, loadingStatus: ExlibrisApp.LoadingStatus.NOT_FOUND}};
+            const stub = sinon.stub(ExlibrisApp.store, "getState");
+            stub.onFirstCall().returns({}).onSecondCall().returns(testState);
+
+            const element = fixture('BasicTestFixture');
+            element.addEventListener('exlibris-book-details-not-found', () => {
+                done();
+            });
+            element.set('route', TEST_BOOK_ROUTE);
+
+            stub.restore();
+        });
     });
 </script>
 </body>

From 05a3248d929ebe0ac3be477ac99bc0de6eac19ed Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 16 Apr 2018 14:30:31 +0300
Subject: [PATCH 63/92] Move book code patterns and redirect link templates to
 the book_values.

---
 .../src/exlibris-app/book/book_values.html    | 13 +++++++++-
 .../exlibris-book-details-redirect-link.html  | 24 ++++++-------------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/client-web/src/exlibris-app/book/book_values.html b/client-web/src/exlibris-app/book/book_values.html
index d13d875..06987e2 100644
--- a/client-web/src/exlibris-app/book/book_values.html
+++ b/client-web/src/exlibris-app/book/book_values.html
@@ -19,7 +19,7 @@
   -->
 
 <script>
-    /* exported BookStatus EmptyArrayMessage */
+    /* exported BookStatus EmptyArrayMessage BookCodePatterns*/
 
     ExlibrisApp.BookStatus = {
         OVERDUE: "OVERDUE",
@@ -40,4 +40,15 @@
         EXPECTED_SOON: "In the near future, the supply of new books to the library is not expected.",
         ALL: "There are no books in the library."
     };
+
+    ExlibrisApp.BookCodePatterns = {
+        ISBN_10: /^\d{10}$/g,
+        ISBN_13: /^\d{13}$/g,
+        ASIN: /^[\d, A-Z]{10}$/g
+    };
+
+    ExlibrisApp.ExternalLinkTemplates = {
+        AMAZON: 'https://www.amazon.com/%s/dp/%s/',
+        PLAY_BOOKS: 'https://play.google.com/store/search?q=%s&c=books'
+    };
 </script>
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index 6b82100..63bdcb0 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -19,6 +19,7 @@
   -->
 
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="./book_values.html">
 
 <dom-module id="exlibris-book-details-redirect-link">
     <template>
@@ -46,17 +47,6 @@
     </template>
 
     <script>
-        const BOOK_CODE_PATTERNS = {
-            ISBN_10: /^\d{10}$/g,
-            ISBN_13: /^\d{13}$/g,
-            ASIN: /^[\d, A-Z]{10}$/g
-        };
-
-        const EXTERNAL_SEARCH_LINKS = {
-            AMAZON: 'https://www.amazon.com/%s/dp/%s/',
-            PLAY_BOOKS: 'https://play.google.com/store/search?q=%s&c=books'
-        };
-
         String.prototype.format = function () {
             return [...arguments].reduce((p, c) => p.replace(/%s/, c), this);
         };
@@ -113,22 +103,22 @@
              */
             _calculateReference(bookCode, bookTitle) {
                 if (bookCode && bookTitle) {
-                    if (bookCode.match(BOOK_CODE_PATTERNS.ISBN_10)) {
+                    if (bookCode.match(ExlibrisApp.BookCodePatterns.ISBN_10)) {
                         return {
                             title: 'ISBN: ' + bookCode,
-                            href: EXTERNAL_SEARCH_LINKS.AMAZON.format(bookTitle, bookCode)
+                            href: ExlibrisApp.ExternalLinkTemplates.AMAZON.format(bookTitle, bookCode)
                         }
                     }
-                    if (bookCode.match(BOOK_CODE_PATTERNS.ISBN_13)) {
+                    if (bookCode.match(ExlibrisApp.BookCodePatterns.ISBN_13)) {
                         return {
                             title: 'ISBN: ' + bookCode,
-                            href: EXTERNAL_SEARCH_LINKS.PLAY_BOOKS.format(bookCode)
+                            href: ExlibrisApp.ExternalLinkTemplates.PLAY_BOOKS.format(bookCode)
                         }
                     }
-                    if (bookCode.match(BOOK_CODE_PATTERNS.ASIN)) {
+                    if (bookCode.match(ExlibrisApp.BookCodePatterns.ASIN)) {
                         return {
                             title: 'ASIN: ' + bookCode,
-                            href: EXTERNAL_SEARCH_LINKS.AMAZON.format(bookTitle, bookCode)
+                            href: ExlibrisApp.ExternalLinkTemplates.AMAZON.format(bookTitle, bookCode)
                         }
                     }
                 }

From e103a88b0c8f1f54c74aefac6376d1a4d3fbcd27 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 16 Apr 2018 16:01:37 +0300
Subject: [PATCH 64/92] Replace Array.find() with function to add IE support.

---
 .../src/exlibris-app/book/book_values.html    |  2 +
 .../reducers/exlibris_reducer.html            | 32 +++---
 ...ibris-book-details-redirect-link_test.html | 99 +++++++++++++++++++
 3 files changed, 122 insertions(+), 11 deletions(-)
 create mode 100644 client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html

diff --git a/client-web/src/exlibris-app/book/book_values.html b/client-web/src/exlibris-app/book/book_values.html
index 06987e2..e5a1ea4 100644
--- a/client-web/src/exlibris-app/book/book_values.html
+++ b/client-web/src/exlibris-app/book/book_values.html
@@ -18,6 +18,8 @@
   ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   -->
 
+<link rel="import" href="../../../src/exlibris-app/shell/exlibris-app-namespace.html">
+
 <script>
     /* exported BookStatus EmptyArrayMessage BookCodePatterns*/
 
diff --git a/client-web/src/exlibris-app/reducers/exlibris_reducer.html b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
index 1b7fc68..c17bf2b 100644
--- a/client-web/src/exlibris-app/reducers/exlibris_reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris_reducer.html
@@ -27,12 +27,12 @@
     /*global userTestBooks libraryTestBooks expectedSoonLibraryBooks*/
     {
         const initialState = {
-            overdueBooks: userTestBooks.overdue,
+            overdueBooks: [...userTestBooks.overdue],
             borrowedBooks: [...userTestBooks.overdue, ...userTestBooks.borrowed],
-            shouldReturnBooks: userTestBooks.shouldReturnSoon,
-            reservedBooks: userTestBooks.reserved,
+            shouldReturnBooks: [...userTestBooks.shouldReturnSoon],
+            reservedBooks: [...userTestBooks.reserved],
             allBooks: [...userTestBooks.overdue, ...libraryTestBooks],
-            expectedSoonBooks: expectedSoonLibraryBooks,
+            expectedSoonBooks: [...expectedSoonLibraryBooks],
             bookDetails: {
                 book: {},
                 loadingStatus: {}
@@ -43,13 +43,7 @@
             switch (action.type) {
                 case ExlibrisActions.FIND_BOOK_BY_ID: {
                     const id = action.bookId;
-                    const book =
-                        state.allBooks.find(x => x.id === id)
-                        || state.expectedSoonBooks.find(x => x.id === id)
-                        || state.overdueBooks.find(x => x.id === id)
-                        || state.shouldReturnBooks.find(x => x.id === id)
-                        || state.borrowedBooks.find(x => x.id === id)
-                        || state.reservedBooks.find(x => x.id === id);
+                    const book = findElement(id, state.allBooks, state.expectedSoonBooks, state.borrowedBooks, state.reservedBooks);
                     if (book) {
                         return Object.assign({}, state, {
                             bookDetails: {
@@ -69,5 +63,21 @@
                     return state;
             }
         };
+
+        function findElement(id) {
+            let element;
+            let i = 1;
+            while (!element && i < arguments.length) {
+                if (Array.isArray(arguments[i])) {
+                    const filteredArray = arguments[i].filter(x => x.id === id);
+                    if (filteredArray.length > 0) {
+                        element = filteredArray[0];
+                    }
+                }
+                i++;
+            }
+            return element;
+        }
+
     }
 </script>
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
new file mode 100644
index 0000000..026f911
--- /dev/null
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<!--
+  ~ Copyright 2018, TeamDev Ltd. All rights reserved.
+  ~
+  ~ Redistribution and use in source and/or binary forms, with or without
+  ~ modification, must retain the above copyright notice and the following
+  ~ disclaimer.
+  ~
+  ~ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+  ~ "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+  ~ LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+  ~ A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+  ~ OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+  ~ SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+  ~ LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+  ~ DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+  ~ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+  ~ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+  ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+  -->
+
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport"
+          content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>exlibris-book-details-redirect-link test</title>
+
+    <script src="../../../bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../../bower_components/web-component-tester/browser.js"></script>
+
+    <link rel="import"
+          href="../../../src/exlibris-app/book/exlibris-book-details-redirect-link.html">
+    <link rel="import" href="../../../src/exlibris-app/book/book_values.html">
+</head>
+<body>
+
+<test-fixture id="BasicTestFixture">
+    <template>
+        <exlibris-book-details-redirect-link></exlibris-book-details-redirect-link>
+    </template>
+</test-fixture>
+
+<script>
+    suite('exlibris-book-details-redirect-link', function () {
+        let element;
+
+        const TEST_BOOK_CODES = {
+            ISBN_10: '1234567890',
+            ISBN_13: '1234567890000',
+            ASIN: 'A12345678A',
+            INVALID: 'CODE'
+        };
+        const TEST_BOOK_TITLE = 'TITLE';
+        const LINK_SELECTOR = '#link';
+
+        setup(() => {
+            element = fixture('BasicTestFixture');
+        });
+
+        test('should contain Amazon redirect link when code matches the `ISBN_10` pattern.', function () {
+            element.bookCode = TEST_BOOK_CODES.ISBN_10;
+            element.bookTitle = TEST_BOOK_TITLE;
+            const expectedLink = ExlibrisApp.ExternalLinkTemplates.AMAZON.format(TEST_BOOK_TITLE, TEST_BOOK_CODES.ISBN_10);
+
+            const link = element.shadowRoot.querySelector(LINK_SELECTOR);
+            assert.equal(link.href, expectedLink);
+        });
+
+        test('should contain Play Books redirect link when code matches the `ISBN_13` pattern.', function () {
+            element.bookCode = TEST_BOOK_CODES.ISBN_13;
+            element.bookTitle = TEST_BOOK_TITLE;
+            const expectedLink = ExlibrisApp.ExternalLinkTemplates.PLAY_BOOKS.format(TEST_BOOK_CODES.ISBN_13);
+
+            const link = element.shadowRoot.querySelector(LINK_SELECTOR);
+            assert.equal(link.href, expectedLink);
+        });
+
+        test('should contain Amazon redirect link when code matches the `ASIN` pattern.', function () {
+            element.bookCode = TEST_BOOK_CODES.ASIN;
+            element.bookTitle = TEST_BOOK_TITLE;
+            const expectedLink = ExlibrisApp.ExternalLinkTemplates.AMAZON.format(TEST_BOOK_TITLE, TEST_BOOK_CODES.ASIN);
+
+            const link = element.shadowRoot.querySelector(LINK_SELECTOR);
+            assert.equal(link.href, expectedLink);
+        });
+
+        test('should not contain link when the passed code does not match any pattern.', function () {
+            element.bookCode = TEST_BOOK_CODES.INVALID;
+            element.bookTitle = TEST_BOOK_TITLE;
+
+            const link = element.shadowRoot.querySelector(LINK_SELECTOR);
+            assert.equal(link.href, '');
+        });
+    });
+</script>
+</body>
+</html>

From b9d814fa14397d4aab4eaed2192be84595f1497a Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 16 Apr 2018 16:20:07 +0300
Subject: [PATCH 65/92] Remove temporal functions.

---
 client-web/src/exlibris-app/book/exlibris-book-details.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index cd3c17c..ac7daf8 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -427,7 +427,6 @@
             }
 
             _loadingStatusChanged(loadingStatus) {
-                console.log(loadingStatus);
                 switch (loadingStatus) {
                     case ExlibrisApp.LoadingStatus.NOT_FOUND: {
                         this.dispatchEvent(new CustomEvent('exlibris-book-details-not-found', {detail: {message: 'Book not found.'}}));

From 24bb392954e3774bb0472f56aa78e22c504a6f7b Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 16 Apr 2018 16:26:02 +0300
Subject: [PATCH 66/92] Change files naming to dash case.

---
 .../actions/{exlibris_action.html => exlibris-action.html}    | 0
 .../exlibris-app/book/{book_values.html => book-values.html}  | 0
 .../book/exlibris-book-details-redirect-link.html             | 2 +-
 client-web/src/exlibris-app/book/exlibris-book-details.html   | 4 ++--
 client-web/src/exlibris-app/book/exlibris-book-grid.html      | 2 +-
 client-web/src/exlibris-app/book/exlibris-book-tile.html      | 2 +-
 client-web/src/exlibris-app/reducers/exlibris-reducer.html    | 4 ++--
 .../exlibris-app/book/exlibris-book-details-buttons_test.html | 2 +-
 .../book/exlibris-book-details-redirect-link_test.html        | 2 +-
 .../exlibris-app/book/exlibris-book-details-store_test.html   | 4 ++--
 10 files changed, 11 insertions(+), 11 deletions(-)
 rename client-web/src/exlibris-app/actions/{exlibris_action.html => exlibris-action.html} (100%)
 rename client-web/src/exlibris-app/book/{book_values.html => book-values.html} (100%)

diff --git a/client-web/src/exlibris-app/actions/exlibris_action.html b/client-web/src/exlibris-app/actions/exlibris-action.html
similarity index 100%
rename from client-web/src/exlibris-app/actions/exlibris_action.html
rename to client-web/src/exlibris-app/actions/exlibris-action.html
diff --git a/client-web/src/exlibris-app/book/book_values.html b/client-web/src/exlibris-app/book/book-values.html
similarity index 100%
rename from client-web/src/exlibris-app/book/book_values.html
rename to client-web/src/exlibris-app/book/book-values.html
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index 63bdcb0..4c9d549 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -19,7 +19,7 @@
   -->
 
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="./book_values.html">
+<link rel="import" href="book-values.html">
 
 <dom-module id="exlibris-book-details-redirect-link">
     <template>
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index ac7daf8..bc4a04f 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -29,8 +29,8 @@
 <link rel="import" href="../../../bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="../../../bower_components/iron-image/iron-image.html">
 <link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="./book_values.html">
-<link rel="import" href="../actions/exlibris_action.html">
+<link rel="import" href="book-values.html">
+<link rel="import" href="../actions/exlibris-action.html">
 <link rel="import" href="./exlibris-book-details-redirect-link.html">
 
 <script src="../reducers/loading-status.js"></script>
diff --git a/client-web/src/exlibris-app/book/exlibris-book-grid.html b/client-web/src/exlibris-app/book/exlibris-book-grid.html
index 433a8c2..743dd79 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-grid.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-grid.html
@@ -22,7 +22,7 @@
 <link rel="import" href="../../../bower_components/polymer/lib/elements/dom-if.html">
 <link rel="import" href="../../../bower_components/iron-list/iron-list.html">
 <link rel="import" href="./exlibris-book-tile.html">
-<link rel="import" href="./book_values.html">
+<link rel="import" href="book-values.html">
 
 <dom-module id="exlibris-book-grid">
     <template>
diff --git a/client-web/src/exlibris-app/book/exlibris-book-tile.html b/client-web/src/exlibris-app/book/exlibris-book-tile.html
index 2cb76d6..dc97e35 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-tile.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-tile.html
@@ -23,7 +23,7 @@
 <link rel="import" href="../../../bower_components/iron-scroll-threshold/iron-scroll-threshold.html">
 <link rel="import" href="../../../bower_components/iron-list/iron-list.html">
 <link rel="import" href="../../../bower_components/polymer/lib/elements/dom-if.html">
-<link rel="import" href="./book_values.html">
+<link rel="import" href="book-values.html">
 
 <dom-module id="exlibris-book-tile">
     <template>
diff --git a/client-web/src/exlibris-app/reducers/exlibris-reducer.html b/client-web/src/exlibris-app/reducers/exlibris-reducer.html
index c17bf2b..c87c7df 100644
--- a/client-web/src/exlibris-app/reducers/exlibris-reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris-reducer.html
@@ -19,8 +19,8 @@
   -->
 <script src="../test_values.js"></script>
 <script src="./loading-status.js"></script>
-<link rel="import" href="../book/book_values.html">
-<link rel="import" href="../actions/exlibris_action.html">
+<link rel="import" href="../book/book-values.html">
+<link rel="import" href="../actions/exlibris-action.html">
 
 <script>
     /* exported reducer */
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
index 321f083..5085b8c 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
@@ -33,7 +33,7 @@
     <script src="../test_variables.js"></script>
 
     <link rel="import" href="../../../src/exlibris-app/book/exlibris-book-details.html">
-    <link rel="import" href="../../../src/exlibris-app/book/book_values.html">
+    <link rel="import" href="../../../src/exlibris-app/book/book-values.html">
 </head>
 <body>
 
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
index 026f911..1c37501 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
@@ -32,7 +32,7 @@
 
     <link rel="import"
           href="../../../src/exlibris-app/book/exlibris-book-details-redirect-link.html">
-    <link rel="import" href="../../../src/exlibris-app/book/book_values.html">
+    <link rel="import" href="../../../src/exlibris-app/book/book-values.html">
 </head>
 <body>
 
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
index 0311058..08d0ddf 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
@@ -33,8 +33,8 @@
     <script src="../test_variables.js"></script>
 
     <link rel="import" href="../../../src/exlibris-app/book/exlibris-book-details.html">
-    <link rel="import" href="../../../src/exlibris-app/book/book_values.html">
-    <link rel="import" href="../../../src/exlibris-app/actions/exlibris_action.html">
+    <link rel="import" href="../../../src/exlibris-app/book/book-values.html">
+    <link rel="import" href="../../../src/exlibris-app/actions/exlibris-action.html">
 
 </head>
 <body>

From d32e32e2edd4ffed097295c5b346a92031a511f6 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 16 Apr 2018 16:37:03 +0300
Subject: [PATCH 67/92] Remove unnecessary dependencies.

---
 .idea/jsLinters/eslint.xml                       |   2 +-
 client-web/bower.json                            |   5 +----
 .../src/exlibris-app/book/book-values.html       |   2 +-
 .../exlibris-app/images/cover-placeholder.png    | Bin 4916 -> 0 bytes
 .../exlibris-app/reducers/exlibris-reducer.html  |   8 ++++----
 5 files changed, 7 insertions(+), 10 deletions(-)
 delete mode 100644 client-web/src/exlibris-app/images/cover-placeholder.png

diff --git a/.idea/jsLinters/eslint.xml b/.idea/jsLinters/eslint.xml
index 26b988e..af3bf2c 100644
--- a/.idea/jsLinters/eslint.xml
+++ b/.idea/jsLinters/eslint.xml
@@ -3,4 +3,4 @@
   <component name="EslintConfiguration">
     <custom-configuration-file used="true" path="D:\Projects\Exlibris\.eslintrc.json" />
   </component>
-</project>
\ No newline at end of file
+</project>
diff --git a/client-web/bower.json b/client-web/bower.json
index b2c5f1d..3d5de59 100644
--- a/client-web/bower.json
+++ b/client-web/bower.json
@@ -13,10 +13,7 @@
     "iron-image": "PolymerElements/iron-image#^2.2.0",
     "iron-scroll-threshold": "PolymerElements/iron-scroll-threshold#^2.0.0",
     "iron-list": "PolymerElements/iron-list#^2.0.13",
-    "paper-dialog": "PolymerElements/paper-dialog#^2.1.1",
-    "paper-button": "PolymerElements/paper-button#^2.1.0",
-    "paper-dialog-behavior": "PolymerElements/paper-dialog-behavior#^2.2.0",
-    "paper-dialog-scrollable": "PolymerElements/paper-dialog-scrollable#^2.2.0"
+    "paper-button": "PolymerElements/paper-button#^2.1.0"
   },
   "devDependencies": {
     "web-component-tester": "Polymer/web-component-tester#^6.0.0",
diff --git a/client-web/src/exlibris-app/book/book-values.html b/client-web/src/exlibris-app/book/book-values.html
index e5a1ea4..4c387fa 100644
--- a/client-web/src/exlibris-app/book/book-values.html
+++ b/client-web/src/exlibris-app/book/book-values.html
@@ -21,7 +21,7 @@
 <link rel="import" href="../../../src/exlibris-app/shell/exlibris-app-namespace.html">
 
 <script>
-    /* exported BookStatus EmptyArrayMessage BookCodePatterns*/
+    /* exported BookStatus EmptyArrayMessage BookCodePatterns ExternalLinkTemplates*/
 
     ExlibrisApp.BookStatus = {
         OVERDUE: "OVERDUE",
diff --git a/client-web/src/exlibris-app/images/cover-placeholder.png b/client-web/src/exlibris-app/images/cover-placeholder.png
deleted file mode 100644
index b6822c36259cb21f455039e2be3893fc636ff673..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4916
zcmbtYdpr~D+n*Wc5HqJq*tC!)Gg(ft7TM$w;i2@H(?nCsIjYUf`IJKsIph?T(`KQf
zGD*eI(}<O`CnCqlA>`fjd*6TFKi<FIzwYb0ug~?p?)!TmKG$_6owc{#C$V1w008VG
z5-gnrV>19CBo7t{0NY=i0tEo_KWTRo0AOWE?s$m^bhr<}$qoRxp$Py`;{bqPf+^}Z
z03Zwv0L+m90FyibKq<KJxucoDAQnorvl5#WR)vUa@52-Sg#&t@v9<*4C1h}40RT`l
zqUA|vnDPMUWX7SvsL_?Z)#7tuOACw2*O7M`%3+E7I)tPmWnu2f<%pHRA64&<N*?U4
z@qSBP09B%F4rCedMw;geH?ED;ExN{QB>YM69$3<1pW&E`Y|GD|V><l5gs%}?xMDV*
z)8&z<g$4ad@|!)V9FxagqMgKjJ}tq*R3aE16=0T;Iv_<Rdu!w#0|H(_7J=}Sv^2>p
zwHuU(`-P~N4quzOH64NDgRPg6txCO)29iBD|LC31uZ#Gj%GoXE?AMJpEG@I7;c@<p
zpNoA(lG}jOjJst<+ihYlx4OADH74hm-@RLnDV~X$;ug>T1&bp?Vlfqt$uiYD=^`X%
zNO5JrqW}C8Wo;Me62xg4Gl!NkH2;3XRLx@xoj+FRt59?PDlh8Z>SbITXH%mQyiyK}
zza~}ObJHZf_J<c{Pqaz0f@i*bl~=hsJhK|Ah=2GwKOjL~_G5-ipsp3CoDy^|`j+AL
zvby84SMCy7D(R>jh{0IsI7pgme~bXd<OUVb+-0BBIMIMMKjNMEp<4TtDoMc3J8W}t
zy#ae;O(ARZ&)g+VkSGOFOpyQfoGRKG{AFg=tY??1PlohL5oHhIEnIV;2(>(+OSLn9
zEY|+K!qVp8+ha1iBG8j%%sG^lQ0G}rZP-R(Rlq&=8QE(eRKXn{31_8#RybW2Hvumr
zb8)S`Sci~qX|Oh&W|GC-cob8$21GDQmTMYESI=zBpSW4=WTP5qz~&!M)|S1Y?_4@g
z<R~35dezcmdR!${8KNXEdd?BPdO{~dz<FwHZjoE>X!Nf}_C~Q9!&%4Le`zK(XCe}o
zppolzL}_tkKSxP;?NiI1kT@|;9_r71Ln^$R2Kx6nO~G7zer+T7c>as#HEM-WnBK>;
z@zqmCcaOB?b!qV8wR5e=OS605Z%xRF(wTDT^CcY~Fp;tPAF7rGz309+3&K9vaSr@e
z`vLfum)U{%NTDGkw=kp?t|@MGbS=unA;dzQNY~WG7v6zDk&-L88k9L9ez2a2af>Rh
zeDw9gOuIQXj%mQIs_zaqIuL&y00J{vkjZwLE8C$jEgW`1(6S->FTzWbu0<|IKYwH&
zDR$erEfwgS7Se-#iP0^3VaFRDi-kPznlGv-XB_r3J0NrFFp7dovbK)~HTd-!JMj7&
zBoEt5cvhGu;>cm-L$0|4ZpQ$ksb1utouuUvvyPr>o$Z(%t(cb)mHYG-icicsX;<ja
z8A%(SenNFuqN)>Rh3dD>iuytnzvPnvh)g%II3m<L?9JS}$IPxzsTT^QM8_KTONkaB
zJa=pQn~%TT`<1d1+EsjaGEH8eFzEQ!>!D-hw1{x;C~xrThV84_pyKII^$!wX6VtUD
z<0MKy053v@>_gtp-5t<#yZJ_^4JO()E_Xz@lW=XYWVH2nLB`(X(&)>WAh`!~GG+ax
zcQfV9-f@fT&RYi0j9ysUdZv#Z{P|ewfn~M^klP-7c{p`xS){p%ce+*2?IQbm%Kqg2
z1~4vnj>-v^K5y`|`;RHly@A`cx3`xR8l?>*eTU~Q2@h<-$=wxa!oZJUKIQYf!x$bv
z+JUaL`E6deMFu4$tN{`bM>b@c;QNjV!)*P+M13;lV{hDySQXn_cDTLnNhTVx6U917
zQBSrD-(Qf5XLH7*eY6xO%VZ_rpsWbPa$%^CMPTAEEl#^8YeT{HO<g<L%eFzHZQLf6
z{_xar&Ts40vEiI+FnnlXer1%Quqa6M90bqJ>Vl*H44$M(_Fgf_<0_w~XuVw5uxqe!
zoxFL%v}{H;^`sdF7E^h?l5AY~%)+C^kS;`vblnOUPVqhDRZQ>zLyo!nk1EBqQ~+r1
ziT<J>JpXbJ6<nZt2PgEvNZ%AegWIY$9O3^(^$PY5KLwR|cq*K0Pw)WsPj<}5gFu!;
z^U3hw-ETofDyFhmR<1=*lY8n2piAHK=NXP*e20F}dOHCDoE$RX%P=gd(kHTCpq+5w
zPFuEm7M$wM{SyYVl&fD{O2EpUE!#jQqg525BIv5I67PHCNF4#;ctT00@x-xc1TKy%
z9>JCa((v!aH+=PwiZtbG_il<GrL5!O@at6dpNFU8Y?IYlj@P5_6p<XWN6=6RDqWQ=
zcNz*x`CjR(m8Bg^y2eABdfAYG+%PSE5)ue*t4imKpFzc1*>UY*tVHItgJ$!mB&hfI
z_<+!AP)R0Vh6TnMew=3@;efQid+gmf8j$_v1x08Yf(k2Vt3Xpoj^za}GTq|zX?)3p
z=u%DTs=}-OQ%@|{krFBo)*YqONTpe1y$&n*hth%(NFo!SUMtvykk?7$MqfS9|LAyN
zJ4$+Fp79jS*2YF_1TNI=d<)|CSY4NRPx&jO+z$`dnQo`t@6gC3RnUXb7qn<#q>*uu
zB6$^g5GY>vjpW1abO*|!Vk*9nxYJ1~qzQVqqz|^Y9T)6~&btUvqHz*@EH=QDSS~m#
zt?S&8HDkBLK&B8Y44R0Br{xDIdVfb|0+~iX*MLcBY)~>9R&=8>4cTN5l*g5wGucO=
z6bjSZNk+b($ugk$F8ZVhLGUPU5^k9wk|^04mx|g?tC~0LSB966LJ;eSjyKw0;H<F8
zlT?T`CI~lAJ)6jI=(44EbP~N~;n~(7u~|bxrGQjx%)iKy5Y#_i?eo^hz%o8T7zW>p
zD4)N;DvG)UAu^dR6s|M~4sL_^kUvvA6-cp+M{jLakl4B|RIF{V@w#onf{LFHP*3|U
z_sL0$N3M_<7UEO6&-=TMsHvNR4_lb#?wtFmH}`w<i@0mACy>5aYk0rdLl9}18nk|p
zA{E7bvd>$+ojBRLm@mqbn?NG2VuI*H3BhlT>J51F)+FeUya1J?n_#J-0m=1)+Qj0d
ze4<Y!vJI=kGpRk$pe6x#QSotZCAGx0CA!$r?G8ZwEBM;9!lO0q`MrzR=X=%i(x8bI
z%;fnI{^6?PMa%^Sg1t`lyW;;Cj~4v5k^7{@$F{JYk^{mrT*f7}11?bR;$W;~_Kz!b
zGqdF_#ed6`T2pMlryZ!g>^dRRtA<MD>j-7Jx%eOFPd^56UB#0;t973b{JQz3lX5T8
z)j#amGv@~^S(QWL#F{zVa@!)BWz&%MO0h}H;TgUa7F%%WL##{CvA@Y8qNt`bJLg{*
zVr_l9x2Jjro!0DiDYo}Qo>{26yZETk(M?0gRvv0%u@YKtlpMfHjb@WRBBGGvO2nHz
zQl(5KQZl_?$3;5J`KYw3`Xj$oh)fb2S!t^F!OVb3M}Z_ne-oeN-$>VAn}`7juHVrg
zJ4=!BL$LW^?+#bu=}AYsw(%NW)(}b@spdlG_%5iX)HcK&QgiW<`X@6@zTl9uNJb#A
z^U}L?ejOwZrRGfMJoU};u10w!Sqq8MU%$WA-$5eS6=pOkIC*0=uVhRW(z*2Uq<=&T
zG*`4Eq1QFZ)yN|q<>SP-3-@ZX(1*A>krhzB9NQ79>FdhL1~)(9>v-AZxhy09vBjQg
z&l1=*_(PO@bTw0m$PZJ)q?4))_<5iD61Ltrw>~zL>m*lq;LRk8U9{eliEu#-*O6Ir
zIcg%)UBtm-WS~c|D^7VAd(Qs2%2xm~MJ(5Upy=3zL(E91S$0}axbg}T*%n?X^Y_vj
z8O%WfR`aahDOXocJ5?6Oau;2xxF;Fn#lEPB_-OW!goaH#8PYi@^8WFDw9zS>f(4AM
z{YnY2lhhW#a%=+M;n3SUsj}EFerGh?T~^!3URXQK^hv@Hf1A})WnfH{&>e#P_0;rh
zzZ*e9EuW!_?QSR05s|(rwrm#+xO-?Q*IGRM-a-SD<Ke9Kz^an3!_U$UDeWqM5-i|K
zS6SH?tfqV?pvgwmYYQlr!ELAHF`l6{rSH`GU#;ELoG5gSE5yQ+($H2@Ermforjg!?
zWHBk{;-O6P_f&wG!^d&o?NqyEq#TBCLg#Sgw0s+)u<>2lAWC=}hGRhQ`IIl#Xu>hN
zy#Bfc+e|y%L20sbL>|9Plh0!EFzsY54Sc&jg~?AcdHR6Gay&nON_B)M-h~>Pw^V(P
zJQ!4N%aRETz3l#+LhrHf|9mDXllkUWfAzOo|Bq!G&=XadOzq7R2Gwo(O)_wh!E=)N
zbl8!fw@6-dA7oT9m#>Decgi5$L?+vfipV4{IrioJ8`3~aRf@=olxyUroi^J_-ciEi
zZ}zNA>D`e*pVo(X=wm--j&4;kj4Ok5cYjDYrr3GVh!+!84y%)1(#bmOq8wZh5{Q?b
z6w9gsw)kjT<$&!7gq^%Cqi}Tw(pgdjbEf-3T()|m8}Zwu2o_uaPV)BF>Dy*6Yt_dz
z5Cb|^+MSDEG@Fyu34R0e5Bd{}SGNSoHCvD@2k!DFc(1J|UBOA`E2JEId6~Win>2aX
zpqJ4b>kGR(N9WMehPTdlPOTUz4n)7IdrO3$4T5#eMsDt8*WWV69&f0QE_^@@WkRc!
zFJ?9=Af_aNahd2QA`u~5VUWg9gt3FQyYRJrye+d0Pru8n!#~`l-}2Pczslj@xX4)T
zHV-K3q1p4@l-oN4-JS<5URa12E{>(OI@IV)dgFS{H<U<<8}Be`sqXS{5%Gsq^q&WC
z;L5GvBP|gd3qd(1{m}ZZV54*&V?j-#1r!1b{;xcjuYbE3?<TxziT=4&<x>~}-;DP)
zG-CVTNOTG`^gqf4d+Q%$RItHBFvy#0-WSrhH}WOQr1^JQdKJ&1^M-;SEHFv$L+nl#
zqeKG&hm?q5GjuZ2J!LGme=IGv96p7$HyB$)1!VS*_{#$iBgv`y!o5#+^`j=9Ic#jq
zJlgYk&<|Z98W-BXJ@vwhfc_HHbkonjZ!IYoBv@c+W?Q0Iu64w5-tPUF-y0Sy@^3Lc
z(<-t4NeGHnPF~Rq|6hkB7)HMLXP(XM&GB}3cl$l>t^}Kn=2)biPblrw?KHpd9|vJD
zO3Sqql_6(OCNgl4ECJ@P<j@<}%tr_B@5%hW{>>cyKwfB;G~n){7_W#hPP0)BOsfC9
zwYa`MY>|zZjX5v#$6%F@9o^kXFQy%KF4!au0)EWNQ*;azFOmg<!17KgZ7?y{`t9J#
zWKW94?tRal&=>>tgIl7kdoDJQWZ%xOZv7s<GPAm{uyE5f=k;vp4fj1{{IvrKgpJW(
zFQSf7ZE&CM3*>Z;q6M{tT{6_^_!YMDe~<|z*2h08c;PKkC#Ef?_I{83-dxyvcOqGE
zi=KPCd=8C>INo?Wv@d5Zdm?mq@|QD%rvy_m!2^+2gngz#Ix-$;6383jn(HrM^W+_Q
zs6y!*Jt2Dc%{yZ;QL9^f&$jyXUK%M?oJ|yd+H8EA-`m{WJoBj=ttNeH$5Cp^tLAGO
z2j{QQ+E)`h28Vd()||$bfM}UGs)7;*SXz%3t$Z|oyuSYT^8LMacE;XLRkMY9M&roK
z7u#h;Rq2y&f?J<GGv5bB=HXBhqNf@pUKVX?(r`5$T~x?LI2=GbeOM6~_hAqwd{1n<
zr#{_tZ+<ytZ-f7;b<1I9+qmvZdex0qlcLU#2GL8iz)pB;TRDfsmJp=Nrb57#hs?)t
z2#^M#wQ1v>;E-R?R741K?3Vt^5_RdN&kmza&(0-W*ZX_sk-z0(!!>CJJ~UJaCPh|g
ztzW(f0<r|JFpdO>L*r3vR0;5`uITH35YKL(7=AIoptG2FCb#O*ML%fcUGXnT)}YuV
z7ZSR!V_Ra(3SOK)AcTP9z*1mG5xg_5Bwb&r(dxE=y+v7b*`)w$T_bkYf-sCL{5nzp
zDV39$8|lf!j3FU?CP(NvE*vBd_Hso)-kEii)SkYwP#rf*wpyY;Wx5@Lrby#GV5gS7
zrd2?bgMzvlrB;F45zS|~Us7XcjeB$#D4DVDY}!rZNoY>9!I4!vAk96=MFY|&m8dn1
zhyVZjG`v?p(}I+i@QUVtyGn;bt=vL=y+Zv=e6ITm1^@=FZ={Ph(8U-#>mM^gV@-~s
pkDxIoXtYwB$D{w{5OmcyfE@LIJCKY1Q4lx)h*tKNb$C+je*utH)q?;4

diff --git a/client-web/src/exlibris-app/reducers/exlibris-reducer.html b/client-web/src/exlibris-app/reducers/exlibris-reducer.html
index c87c7df..2e3c322 100644
--- a/client-web/src/exlibris-app/reducers/exlibris-reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris-reducer.html
@@ -27,12 +27,12 @@
     /*global userTestBooks libraryTestBooks expectedSoonLibraryBooks*/
     {
         const initialState = {
-            overdueBooks: [...userTestBooks.overdue],
+            overdueBooks: userTestBooks.overdue,
             borrowedBooks: [...userTestBooks.overdue, ...userTestBooks.borrowed],
-            shouldReturnBooks: [...userTestBooks.shouldReturnSoon],
-            reservedBooks: [...userTestBooks.reserved],
+            shouldReturnBooks: userTestBooks.shouldReturnSoon,
+            reservedBooks: userTestBooks.reserved,
             allBooks: [...userTestBooks.overdue, ...libraryTestBooks],
-            expectedSoonBooks: [...expectedSoonLibraryBooks],
+            expectedSoonBooks: expectedSoonLibraryBooks,
             bookDetails: {
                 book: {},
                 loadingStatus: {}

From ed67f4b01468b2868c61568675ead1fd19da2f99 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 16 Apr 2018 16:39:17 +0300
Subject: [PATCH 68/92] Remove idea files.

---
 .idea/jsLinters/eslint.xml | 6 ------
 1 file changed, 6 deletions(-)
 delete mode 100644 .idea/jsLinters/eslint.xml

diff --git a/.idea/jsLinters/eslint.xml b/.idea/jsLinters/eslint.xml
deleted file mode 100644
index af3bf2c..0000000
--- a/.idea/jsLinters/eslint.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="EslintConfiguration">
-    <custom-configuration-file used="true" path="D:\Projects\Exlibris\.eslintrc.json" />
-  </component>
-</project>

From d198beb43dfe01ed5d74818fa50533ae65f9d447 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 16 Apr 2018 17:18:25 +0300
Subject: [PATCH 69/92] Add jsdocs parameter definitions.

---
 .../book/exlibris-book-details-redirect-link.html        | 3 +++
 .../src/exlibris-app/book/exlibris-book-details.html     | 9 +++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index 4c9d549..a8f1f04 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -100,6 +100,9 @@
              *
              * If the `bookCode` matches the `ISBN-13` pattern, generates the Google Play Books
              * search link.
+             * @param {string} bookCode the book unique code (ISBN, ASIN).
+             * @param {string} bookTitle the book title.
+             * @returns {Object} the title and the value of link.
              */
             _calculateReference(bookCode, bookTitle) {
                 if (bookCode && bookTitle) {
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index bc4a04f..dd01875 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -322,16 +322,21 @@
 
             /**
              * Dispatches action to find book by Id specified by the `routeData`.
+             *
+             * @param {Object} routeData the resolved route parameters. Contains book Id and the book title.
              */
             _routeDataChanged(routeData) {
-                if (this.route && this.route.prefix === '/book-details' && this.routeData.id) {
+                if (this.route && this.route.prefix === '/book-details' && routeData.id) {
                     this.dispatch('findBookById', routeData.id);
                 }
             }
 
             /**
-             * Sets the appropriate button title and click handler function
+             * Sets the appropriate button title and the click handler function
              * according to the passed book.
+             *
+             * @param {Book} book the book object to choose a button.
+             * @returns {Object} the title and the click function of the button for the specified book.
              */
             _chooseButton(book) {
                 if (book) {

From 8d4b54082afcb1390d3cb9582633f1ae0f6e5e4c Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 16 Apr 2018 18:01:06 +0300
Subject: [PATCH 70/92] Move redax actions to ExliprisApp namespace, improve
 book-details docs.

---
 .../exlibris-app/actions/exlibris-action.html |  2 +-
 .../exlibris-book-details-redirect-link.html  |  1 +
 .../book/exlibris-book-details.html           | 44 ++++++++++++++++++-
 .../reducers/exlibris-reducer.html            |  2 +-
 .../exlibris-book-details-store_test.html     |  2 +-
 5 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/client-web/src/exlibris-app/actions/exlibris-action.html b/client-web/src/exlibris-app/actions/exlibris-action.html
index dcdc46d..34f25b6 100644
--- a/client-web/src/exlibris-app/actions/exlibris-action.html
+++ b/client-web/src/exlibris-app/actions/exlibris-action.html
@@ -21,7 +21,7 @@
 <script>
     /* exported ExlibrisActions */
 
-    const ExlibrisActions = {
+    ExlibrisApp.ExlibrisActions = {
         FIND_BOOK_BY_ID: "FIND_BOOK_BY_ID",
     }
 </script>
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index a8f1f04..3b1287a 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -103,6 +103,7 @@
              * @param {string} bookCode the book unique code (ISBN, ASIN).
              * @param {string} bookTitle the book title.
              * @returns {Object} the title and the value of link.
+             * @private
              */
             _calculateReference(bookCode, bookTitle) {
                 if (bookCode && bookTitle) {
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index dd01875..1dcdba6 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -226,6 +226,17 @@
 
     <script>
 
+        /**
+         * The book details page component.
+         *
+         * This component allows to display book details page with the book
+         * specific messages and the button when it is supported.
+         * The book is specified by the route which contains the book Id.
+         *
+         * @customElement
+         * @polymer
+         * @appliesMixin ExlibrisApp.ReduxMixin
+         */
         class ExlibrisBookDetails extends ExlibrisApp.ReduxMixin(Polymer.Element) {
             static get is() {
                 return 'exlibris-book-details';
@@ -233,6 +244,12 @@
 
             static get properties() {
                 return {
+                    /**
+                     * Fired when the book loading process has completed with failure.
+                     *
+                     * @event exlibris-book-details-not-found
+                     * @param {detail.path} the route which caused the book loading failure.
+                     */
 
                     /**
                      * The book object to display.
@@ -254,6 +271,11 @@
                         statePath: 'bookDetails.book'
                     },
 
+                    /**
+                     * The book loading status.
+                     *
+                     * @typedef {ExlibrisApp.LoadingStatus}
+                     */
                     loadingStatus: {
                         type: Object,
                         statePath: "bookDetails.loadingStatus",
@@ -313,7 +335,7 @@
                 return {
                     findBookById(bookId) {
                         return {
-                            type: ExlibrisActions.FIND_BOOK_BY_ID,
+                            type: ExlibrisApp.ExlibrisActions.FIND_BOOK_BY_ID,
                             bookId: bookId
                         }
                     }
@@ -324,6 +346,7 @@
              * Dispatches action to find book by Id specified by the `routeData`.
              *
              * @param {Object} routeData the resolved route parameters. Contains book Id and the book title.
+             * @private
              */
             _routeDataChanged(routeData) {
                 if (this.route && this.route.prefix === '/book-details' && routeData.id) {
@@ -337,6 +360,7 @@
              *
              * @param {Book} book the book object to choose a button.
              * @returns {Object} the title and the click function of the button for the specified book.
+             * @private
              */
             _chooseButton(book) {
                 if (book) {
@@ -377,6 +401,10 @@
             /**
              * Sets the appropriate status message
              * according to the passed book.
+             *
+             * @param {Book} book the book object.
+             * @returns {string} the status message for the specified book.
+             * @private
              */
             _calculateStatusMessage(book) {
                 if (book) {
@@ -421,6 +449,11 @@
             /**
              * Sets the appropriate message if the button is not supported
              * for the passed book.
+             *
+             * @param {Book} book the book object.
+             * @returns {string} the message to show when the action button is not supported
+             *                   for the specified book.
+             * @private
              */
             _calculateActionUnsupportedMessage(book) {
                 if (book) {
@@ -431,10 +464,17 @@
                 }
             }
 
+            /**
+             * Observes the loading status of the book to choose the appropriate
+             * way to display book details page.
+             *
+             * @param {ExlibrisApp.LoadingStatus} loadingStatus the status of the book loading.
+             * @private
+             */
             _loadingStatusChanged(loadingStatus) {
                 switch (loadingStatus) {
                     case ExlibrisApp.LoadingStatus.NOT_FOUND: {
-                        this.dispatchEvent(new CustomEvent('exlibris-book-details-not-found', {detail: {message: 'Book not found.'}}));
+                        this.dispatchEvent(new CustomEvent('exlibris-book-details-not-found', {detail: {path: this.route.path}}));
                         break;
                     }
                     case ExlibrisApp.LoadingStatus.IN_PROGRESS: {
diff --git a/client-web/src/exlibris-app/reducers/exlibris-reducer.html b/client-web/src/exlibris-app/reducers/exlibris-reducer.html
index 2e3c322..58d38d8 100644
--- a/client-web/src/exlibris-app/reducers/exlibris-reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris-reducer.html
@@ -41,7 +41,7 @@
 
         ExlibrisApp.reducer = (state = initialState, action) => {
             switch (action.type) {
-                case ExlibrisActions.FIND_BOOK_BY_ID: {
+                case ExlibrisApp.ExlibrisActions.FIND_BOOK_BY_ID: {
                     const id = action.bookId;
                     const book = findElement(id, state.allBooks, state.expectedSoonBooks, state.borrowedBooks, state.reservedBooks);
                     if (book) {
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
index 08d0ddf..c04f909 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
@@ -73,7 +73,7 @@
         });
 
         test('should react on routeData change and dispatch action to the store.', function () {
-            const expectedAction = {type: ExlibrisActions.FIND_BOOK_BY_ID, bookId: TEST_BOOK.id};
+            const expectedAction = {type: ExlibrisApp.ExlibrisActions.FIND_BOOK_BY_ID, bookId: TEST_BOOK.id};
             mockStore.expects("dispatch").once().withArgs(expectedAction);
             const element = fixture('BasicTestFixture');
             element.set('route', TEST_BOOK_ROUTE);

From 3850a5b6a82864396683bd42dfc749949c05a748 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 16 Apr 2018 18:43:13 +0300
Subject: [PATCH 71/92] Refactor book-details docs.

---
 .../exlibris-book-details-redirect-link.html  | 23 +++++++-------
 .../book/exlibris-book-details.html           | 31 +++++++++----------
 2 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index 3b1287a..91a288d 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -41,8 +41,8 @@
             }
         </style>
 
-        <a id="link" target="_blank" href="[[redirectValues.href]]">
-            [[redirectValues.title]]
+        <a id="link" target="_blank" href="[[reference.value]]">
+            [[reference.title]]
         </a>
     </template>
 
@@ -54,8 +54,8 @@
         /**
          * The book external link component.
          *
-         * Generates the link to the one of global book services and
-         * opens it in the new tab. The external service choice depends
+         * Generates the link to the one of the global book services to
+         * open it in the new tab. The external service choice depends
          * on the book code format.
          *
          * @customElement
@@ -80,12 +80,12 @@
                     bookTitle: String,
 
                     /**
-                     * The book external link reference, title and the code type.
+                     * The book external link reference and its title.
                      *
-                     * @property {string} title  the reference title.
-                     * @property {string} href  the link to open in the new tab.
+                     * @property {string} title the reference title.
+                     * @property {string} value  the link to open in the new tab.
                      */
-                    redirectValues: {
+                    reference: {
                         type: Object,
                         computed: "_calculateReference(bookCode, bookTitle)"
                     }
@@ -100,6 +100,7 @@
              *
              * If the `bookCode` matches the `ISBN-13` pattern, generates the Google Play Books
              * search link.
+             *
              * @param {string} bookCode the book unique code (ISBN, ASIN).
              * @param {string} bookTitle the book title.
              * @returns {Object} the title and the value of link.
@@ -110,19 +111,19 @@
                     if (bookCode.match(ExlibrisApp.BookCodePatterns.ISBN_10)) {
                         return {
                             title: 'ISBN: ' + bookCode,
-                            href: ExlibrisApp.ExternalLinkTemplates.AMAZON.format(bookTitle, bookCode)
+                            value: ExlibrisApp.ExternalLinkTemplates.AMAZON.format(bookTitle, bookCode)
                         }
                     }
                     if (bookCode.match(ExlibrisApp.BookCodePatterns.ISBN_13)) {
                         return {
                             title: 'ISBN: ' + bookCode,
-                            href: ExlibrisApp.ExternalLinkTemplates.PLAY_BOOKS.format(bookCode)
+                            value: ExlibrisApp.ExternalLinkTemplates.PLAY_BOOKS.format(bookCode)
                         }
                     }
                     if (bookCode.match(ExlibrisApp.BookCodePatterns.ASIN)) {
                         return {
                             title: 'ASIN: ' + bookCode,
-                            href: ExlibrisApp.ExternalLinkTemplates.AMAZON.format(bookTitle, bookCode)
+                            value: ExlibrisApp.ExternalLinkTemplates.AMAZON.format(bookTitle, bookCode)
                         }
                     }
                 }
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 1dcdba6..07c5353 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -225,12 +225,11 @@
     </template>
 
     <script>
-
         /**
          * The book details page component.
          *
-         * This component allows to display book details page with the book
-         * specific messages and the button when it is supported.
+         * This component allows to display the book details page with the book
+         * specific messages, the book cover  and the button when it is supported.
          * The book is specified by the route which contains the book Id.
          *
          * @customElement
@@ -248,7 +247,7 @@
                      * Fired when the book loading process has completed with failure.
                      *
                      * @event exlibris-book-details-not-found
-                     * @param {detail.path} the route which caused the book loading failure.
+                     * @param {detail.path} the route path which caused the book loading failure.
                      */
 
                     /**
@@ -258,10 +257,10 @@
                      * @property {string} id
                      * @property {string} title the title of a book
                      * @property {string} image the book cover URL
-                     * @property {string} author string with authors of the book
+                     * @property {string} author authors of the book
                      * @property {string} category the book category
                      * @property {number} availableCount the number of items available for borrowing.
-                     * @property {boolean} isAllowedLoanExtension is loan extension provided.
+                     * @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.
@@ -283,15 +282,14 @@
                     },
 
                     /**
-                     * The button title and click handler.
+                     * The book details button.
                      *
                      * @property {string} title the button title
                      * @property {function} clickHandler the button click handler function
                      */
                     button: {
                         type: Object,
-                        computed: '_chooseButton(book)',
-                        value: null
+                        computed: '_chooseButton(book)'
                     },
 
                     /**
@@ -304,7 +302,7 @@
 
                     /**
                      * The message about the status of the book.
-                     * Shown when the button is not supported for the book.
+                     * Shown instead of the button when it is not supported for the book.
                      */
                     actionUnsupportedMessage: {
                         type: String,
@@ -314,15 +312,14 @@
                     /**
                      * The URL part that defines the book Id.
                      * Should match the pattern `/:title/:id`
-                     *
                      */
                     route: String,
 
                     /**
-                     * Contains the book Id passed in the URL.
+                     * Contains the book Id passed in the route.
                      *
                      * @property {string} title the title of the book
-                     * @property {function} id the Id of the book
+                     * @property {string} id the Id of the book
                      */
                     routeData: {
                         type: Object,
@@ -343,9 +340,9 @@
             }
 
             /**
-             * Dispatches action to find book by Id specified by the `routeData`.
+             * Dispatches the action to find the book by Id.
              *
-             * @param {Object} routeData the resolved route parameters. Contains book Id and the book title.
+             * @param {Object} routeData the resolved route parameters.
              * @private
              */
             _routeDataChanged(routeData) {
@@ -399,7 +396,7 @@
             }
 
             /**
-             * Sets the appropriate status message
+             * Calculates the appropriate status message
              * according to the passed book.
              *
              * @param {Book} book the book object.
@@ -447,7 +444,7 @@
             }
 
             /**
-             * Sets the appropriate message if the button is not supported
+             * Calculates the appropriate message if the button is not supported
              * for the passed book.
              *
              * @param {Book} book the book object.

From 5a524506e2106ad5680382334d446ca9529fbbf8 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 17 Apr 2018 10:11:24 +0300
Subject: [PATCH 72/92] Refactor book-details css classes names, fix test query
 selectors due to this change.

---
 .../exlibris-book-details-redirect-link.html  |   2 +-
 .../book/exlibris-book-details.html           |  47 +++---
 .../exlibris-book-details-buttons_test.html   | 153 +++++++++---------
 ...ibris-book-details-redirect-link_test.html |   8 +-
 .../exlibris-book-details-store_test.html     |  23 +--
 5 files changed, 107 insertions(+), 126 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index 91a288d..a66ec34 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -19,7 +19,7 @@
   -->
 
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="book-values.html">
+<link rel="import" href="./book-values.html">
 
 <dom-module id="exlibris-book-details-redirect-link">
     <template>
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 07c5353..219921b 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -21,18 +21,17 @@
 <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="../shell/redux-store.html">
 <link rel="import" href="../../../bower_components/polymer/lib/elements/dom-if.html">
 <link rel="import" href="../../../bower_components/app-route/app-route.html">
 <link rel="import" href="../../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../../bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="../../../bower_components/iron-image/iron-image.html">
-<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
-<link rel="import" href="book-values.html">
+
+<link rel="import" href="../shell/redux-store.html">
+<link rel="import" href="./book-values.html">
 <link rel="import" href="../actions/exlibris-action.html">
 <link rel="import" href="./exlibris-book-details-redirect-link.html">
-
 <script src="../reducers/loading-status.js"></script>
 
 <dom-module id="exlibris-book-details">
@@ -53,7 +52,7 @@
                 color: var(--light-theme-text-color);
             }
 
-            .book-card .head-region {
+            .book-card .head-part {
                 display: flex;
                 flex-direction: row;
                 justify-content: flex-start;
@@ -62,14 +61,14 @@
                 height: fit-content;
             }
 
-            .book-card .head-region iron-image {
+            #book-cover {
                 @apply --shadow-elevation-4dp;
                 --iron-image-width: 100%;
                 margin-left: 36px;
                 margin-top: 25px;
             }
 
-            .book-card .head-region .head-info {
+            .book-card .head-part .book-details {
                 display: flex;
                 width: 70%;
                 height: 100%;
@@ -79,26 +78,26 @@
                 justify-content: space-between;
             }
 
-            .book-card .head-region .head-info .head-text {
+            .book-card .head-part .book-details .details-text-part {
                 display: flex;
                 flex-direction: column;
                 justify-content: flex-start;
                 padding-top: 35px;
             }
 
-            .book-card .head-region .head-info .button-wide-screen {
+            .book-card .head-part .book-details .details-action-part {
                 display: block;
                 width: 100%;
                 margin: 0;
             }
 
-            .book-card .button-narrow-screen {
+            .book-card .narrow-screen-action-part {
                 display: none;
                 width: fit-content;
                 margin: 15px 0 0 15px;
             }
 
-            .button-place-message {
+            .action-part-message {
                 @apply --paper-font-button;
                 color: var(--light-theme-secondary-color);
             }
@@ -148,25 +147,25 @@
                     margin: 0;
                 }
 
-                .book-card .head-region iron-image {
+                #book-cover {
                     margin-left: 15px;
                     margin-top: 15px;
                 }
 
-                .book-card .head-region .head-info .button-wide-screen {
+                .book-card .head-part .book-details .details-action-part {
                     display: none;
                 }
 
-                .book-card .button-narrow-screen {
+                .book-card .narrow-screen-action-part {
                     display: block;
                 }
 
-                .book-card .head-region .head-info {
+                .book-card .head-part .book-details {
                     padding-left: 10px;
                     padding-right: 15px;
                 }
 
-                .book-card .head-region .head-info .head-text {
+                .book-card .head-part .book-details .details-text-part {
                     padding-top: 15px;
                 }
 
@@ -190,33 +189,33 @@
                 pattern="/:title/:id"
                 data="{{routeData}}"></app-route>
         <div class="book-card">
-            <div class="head-region">
-                <iron-image src="[[book.image]]"></iron-image>
-                <div class="head-info">
-                    <div class="head-text">
+            <div class="head-part">
+                <iron-image id="book-cover" src="[[book.image]]"></iron-image>
+                <div class="book-details">
+                    <div class="details-text-part">
                         <div id="title">[[book.title]]</div>
                         <div id="author">[[book.author]]</div>
                         <exlibris-book-details-redirect-link book-code="[[book.isbn]]"
                                                              book-title="[[book.title]]"></exlibris-book-details-redirect-link>
                         <div id="status-message">[[statusMessage]]</div>
                     </div>
-                    <div class="button-wide-screen" hidden="true">
+                    <div class="details-action-part" hidden="true">
                         <paper-button raised
                                       on-click="_handleButtonClick"
                                       hidden="[[!button]]">
                             [[button.title]]
                         </paper-button>
-                        <div class="button-place-message">[[actionUnsupportedMessage]]</div>
+                        <div class="action-part-message">[[actionUnsupportedMessage]]</div>
                     </div>
                 </div>
             </div>
-            <div class="button-narrow-screen">
+            <div class="narrow-screen-action-part">
                 <paper-button class="small"
                               on-click="_handleButtonClick"
                               hidden="[[!button]]">
                     [[button.title]]
                 </paper-button>
-                <div class="button-place-message">[[actionUnsupportedMessage]]</div>
+                <div class="action-part-message">[[actionUnsupportedMessage]]</div>
             </div>
             <div id="description">
                 [[book.description]]
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
index 5085b8c..b2300e9 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
@@ -30,8 +30,8 @@
     <script src="../../../bower_components/webcomponentsjs/webcomponents-loader.js"></script>
     <script src="../../../bower_components/web-component-tester/browser.js"></script>
     <script src="../../../node_modules/redux/dist/redux.js"></script>
-    <script src="../test_variables.js"></script>
 
+    <script src="../test_variables.js"></script>
     <link rel="import" href="../../../src/exlibris-app/book/exlibris-book-details.html">
     <link rel="import" href="../../../src/exlibris-app/book/book-values.html">
 </head>
@@ -46,7 +46,6 @@
 <script>
     suite('exlibris-book-details', function () {
 
-
         const BUTTON_TITLES = {
             RESERVE: 'RESERVE',
             CANCEL_RESERVATION: 'CANCEL RESERVATION',
@@ -56,91 +55,91 @@
         const ACTION_UNSUPPORTED_MESSAGE = 'RESERVED BY ANOTHER READER';
 
         const BOOK_DETAILS_SELECTORS = {
-            WIDE_SCREEN_BUTTON: '.book-card .head-region .head-info .button-wide-screen paper-button',
-            NARROW_SCREEN_BUTTON: '.book-card .button-narrow-screen paper-button',
-            WIDE_SCREEN_MESSAGE: '.book-card .head-region .head-info .button-wide-screen .button-place-message',
-            NARROW_SCREEN_MESSAGE: '.book-card .button-narrow-screen .button-place-message'
+            WIDE_SCREEN_BUTTON: '.book-card .head-part .book-details .details-action-part paper-button',
+            NARROW_SCREEN_BUTTON: '.book-card .narrow-screen-action-part paper-button',
+            WIDE_SCREEN_MESSAGE: '.book-card .head-part .book-details .details-action-part .action-part-message',
+            NARROW_SCREEN_MESSAGE: '.book-card .narrow-screen-action-part .action-part-message'
         };
 
         let booksAndButtonsCombinations;
         let testElements;
 
         setup(() => {
-         booksAndButtonsCombinations = [
-            {
-                book: {status: ExlibrisApp.BookStatus.EXPECTED},
-                button: BUTTON_TITLES.RESERVE,
-                actionUnsupportedMessage: ''
-            },
-            {
-                book: {status: ExlibrisApp.BookStatus.EXPECTED_SOON},
-                button: BUTTON_TITLES.RESERVE,
-                actionUnsupportedMessage: ''
-            },
-            {
-                book: {status: ExlibrisApp.BookStatus.AVAILABLE},
-                button: '',
-                actionUnsupportedMessage: ''
-            },
-            {
-                book: {
-                    status: ExlibrisApp.BookStatus.BORROWED,
-                    isAllowedLoanExtension: true
+            booksAndButtonsCombinations = [
+                {
+                    book: {status: ExlibrisApp.BookStatus.EXPECTED},
+                    button: BUTTON_TITLES.RESERVE,
+                    actionUnsupportedMessage: ''
+                },
+                {
+                    book: {status: ExlibrisApp.BookStatus.EXPECTED_SOON},
+                    button: BUTTON_TITLES.RESERVE,
+                    actionUnsupportedMessage: ''
+                },
+                {
+                    book: {status: ExlibrisApp.BookStatus.AVAILABLE},
+                    button: '',
+                    actionUnsupportedMessage: ''
+                },
+                {
+                    book: {
+                        status: ExlibrisApp.BookStatus.BORROWED,
+                        isAllowedLoanExtension: true
+                    },
+                    button: BUTTON_TITLES.EXTEND_LOAN_PERIOD,
+                    actionUnsupportedMessage: ''
+                },
+                {
+                    book: {
+                        status: ExlibrisApp.BookStatus.OVERDUE,
+                        isAllowedLoanExtension: true
+                    },
+                    button: BUTTON_TITLES.EXTEND_LOAN_PERIOD,
+                    actionUnsupportedMessage: ''
                 },
-                button: BUTTON_TITLES.EXTEND_LOAN_PERIOD,
-                actionUnsupportedMessage: ''
-            },
-            {
-                book: {
-                    status: ExlibrisApp.BookStatus.OVERDUE,
-                    isAllowedLoanExtension: true
+                {
+                    book: {
+                        status: ExlibrisApp.BookStatus.SHOULD_RETURN_SOON,
+                        isAllowedLoanExtension: true
+                    },
+                    button: BUTTON_TITLES.EXTEND_LOAN_PERIOD,
+                    actionUnsupportedMessage: ''
                 },
-                button: BUTTON_TITLES.EXTEND_LOAN_PERIOD,
-                actionUnsupportedMessage: ''
-            },
-            {
-                book: {
-                    status: ExlibrisApp.BookStatus.SHOULD_RETURN_SOON,
-                    isAllowedLoanExtension: true
+                {
+                    book: {
+                        status: ExlibrisApp.BookStatus.BORROWED,
+                        isAllowedLoanExtension: false
+                    },
+                    button: '',
+                    actionUnsupportedMessage: ACTION_UNSUPPORTED_MESSAGE
                 },
-                button: BUTTON_TITLES.EXTEND_LOAN_PERIOD,
-                actionUnsupportedMessage: ''
-            },
-            {
-                book: {
-                    status: ExlibrisApp.BookStatus.BORROWED,
-                    isAllowedLoanExtension: false
+                {
+                    book: {
+                        status: ExlibrisApp.BookStatus.OVERDUE,
+                        isAllowedLoanExtension: false
+                    },
+                    button: '',
+                    actionUnsupportedMessage: ACTION_UNSUPPORTED_MESSAGE
                 },
-                button: '',
-                actionUnsupportedMessage: ACTION_UNSUPPORTED_MESSAGE
-            },
-            {
-                book: {
-                    status: ExlibrisApp.BookStatus.OVERDUE,
-                    isAllowedLoanExtension: false
+                {
+                    book: {
+                        status: ExlibrisApp.BookStatus.SHOULD_RETURN_SOON,
+                        isAllowedLoanExtension: false
+                    },
+                    button: '',
+                    actionUnsupportedMessage: ACTION_UNSUPPORTED_MESSAGE
                 },
-                button: '',
-                actionUnsupportedMessage: ACTION_UNSUPPORTED_MESSAGE
-            },
-            {
-                book: {
-                    status: ExlibrisApp.BookStatus.SHOULD_RETURN_SOON,
-                    isAllowedLoanExtension: false
+                {
+                    book: {status: ExlibrisApp.BookStatus.RESERVED},
+                    button: BUTTON_TITLES.CANCEL_RESERVATION,
+                    actionUnsupportedMessage: ''
                 },
-                button: '',
-                actionUnsupportedMessage: ACTION_UNSUPPORTED_MESSAGE
-            },
-            {
-                book: {status: ExlibrisApp.BookStatus.RESERVED},
-                button: BUTTON_TITLES.CANCEL_RESERVATION,
-                actionUnsupportedMessage: ''
-            },
-            {
-                book: {status: ExlibrisApp.BookStatus.READY_TO_PICK_UP},
-                button: BUTTON_TITLES.CANCEL_RESERVATION,
-                actionUnsupportedMessage: ''
-            }
-        ];
+                {
+                    book: {status: ExlibrisApp.BookStatus.READY_TO_PICK_UP},
+                    button: BUTTON_TITLES.CANCEL_RESERVATION,
+                    actionUnsupportedMessage: ''
+                }
+            ];
             testElements = [];
 
             booksAndButtonsCombinations.forEach(function (combination) {
@@ -151,7 +150,7 @@
         });
 
         test('should display book action button with appropriate title.', function (done) {
-            flush(function () {
+            flush(() => {
                 testElements.forEach(function (element, index) {
                     const wideScreenButton = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.WIDE_SCREEN_BUTTON);
                     const narrowScreenButton = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.NARROW_SCREEN_BUTTON);
@@ -163,7 +162,7 @@
         });
 
         test('should display appropriate message when actions with book are unsupported.', function (done) {
-            flush(function () {
+            flush(() => {
                 testElements.forEach(function (element, index) {
                     const wideScreenMessage = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.WIDE_SCREEN_MESSAGE);
                     const narrowScreenMessage = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.NARROW_SCREEN_MESSAGE);
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
index 1c37501..ddd5917 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
@@ -59,7 +59,7 @@
             element = fixture('BasicTestFixture');
         });
 
-        test('should contain Amazon redirect link when code matches the `ISBN_10` pattern.', function () {
+        test('should generate Amazon redirect link when code matches the `ISBN_10` pattern.', function () {
             element.bookCode = TEST_BOOK_CODES.ISBN_10;
             element.bookTitle = TEST_BOOK_TITLE;
             const expectedLink = ExlibrisApp.ExternalLinkTemplates.AMAZON.format(TEST_BOOK_TITLE, TEST_BOOK_CODES.ISBN_10);
@@ -68,7 +68,7 @@
             assert.equal(link.href, expectedLink);
         });
 
-        test('should contain Play Books redirect link when code matches the `ISBN_13` pattern.', function () {
+        test('should generate Play Books redirect link when code matches the `ISBN_13` pattern.', function () {
             element.bookCode = TEST_BOOK_CODES.ISBN_13;
             element.bookTitle = TEST_BOOK_TITLE;
             const expectedLink = ExlibrisApp.ExternalLinkTemplates.PLAY_BOOKS.format(TEST_BOOK_CODES.ISBN_13);
@@ -77,7 +77,7 @@
             assert.equal(link.href, expectedLink);
         });
 
-        test('should contain Amazon redirect link when code matches the `ASIN` pattern.', function () {
+        test('should generate Amazon redirect link when code matches the `ASIN` pattern.', function () {
             element.bookCode = TEST_BOOK_CODES.ASIN;
             element.bookTitle = TEST_BOOK_TITLE;
             const expectedLink = ExlibrisApp.ExternalLinkTemplates.AMAZON.format(TEST_BOOK_TITLE, TEST_BOOK_CODES.ASIN);
@@ -86,7 +86,7 @@
             assert.equal(link.href, expectedLink);
         });
 
-        test('should not contain link when the passed code does not match any pattern.', function () {
+        test('should not generate link when the passed code does not match to any pattern.', function () {
             element.bookCode = TEST_BOOK_CODES.INVALID;
             element.bookTitle = TEST_BOOK_TITLE;
 
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
index c04f909..f3c21c4 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
@@ -52,33 +52,16 @@
             prefix: '/book-details',
             path: '/' + TEST_BOOK.title.replace(/\s/g, '_') + '/' + TEST_BOOK.id
         };
-        let mockStore;
 
-        setup(() => {
-            mockStore = sinon.mock(ExlibrisApp.store);
-        });
-
-        teardown(() => {
-            mockStore.restore();
-        });
-
-        test('should receive the selected book from the store.', function () {
-            const testState = {bookDetails: {book: TEST_BOOK, loadingStatus: ExlibrisApp.LoadingStatus.COMPLETED}};
-            mockStore.expects("getState").returns(testState);
-            const element = fixture('BasicTestFixture');
-
-            assert.deepEqual(element.book, TEST_BOOK);
-            assert.equal(element.loadingStatus, ExlibrisApp.LoadingStatus.COMPLETED);
-            mockStore.verify();
-        });
-
-        test('should react on routeData change and dispatch action to the store.', function () {
+        test('should react on route change and dispatch `FIND_BOOK_BY_ID` action to the store.', function () {
+            const mockStore = sinon.mock(ExlibrisApp.store);
             const expectedAction = {type: ExlibrisApp.ExlibrisActions.FIND_BOOK_BY_ID, bookId: TEST_BOOK.id};
             mockStore.expects("dispatch").once().withArgs(expectedAction);
             const element = fixture('BasicTestFixture');
             element.set('route', TEST_BOOK_ROUTE);
 
             mockStore.verify();
+            mockStore.restore();
         });
 
         test('should react on `loadingStatus` change and dispatch the custom event when the value is `LoadingStatus.NOT_FOUND`.', function (done) {

From 9b997608617c2ff61cf57440bc8eef83d8701a70 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 17 Apr 2018 17:53:13 +0300
Subject: [PATCH 73/92] Refactor import statements.

---
 .../exlibris-app/actions/exlibris-action.html | 27 -------------------
 .../actions/exlibris-actions.html             |  1 +
 .../book/exlibris-book-details.html           |  2 +-
 .../reducers/exlibris-reducer.html            |  2 +-
 .../exlibris-book-details-store_test.html     |  2 +-
 .../exlibris-app/exlibris-app_store_test.html |  0
 6 files changed, 4 insertions(+), 30 deletions(-)
 delete mode 100644 client-web/src/exlibris-app/actions/exlibris-action.html
 delete mode 100644 client-web/test/exlibris-app/exlibris-app_store_test.html

diff --git a/client-web/src/exlibris-app/actions/exlibris-action.html b/client-web/src/exlibris-app/actions/exlibris-action.html
deleted file mode 100644
index 34f25b6..0000000
--- a/client-web/src/exlibris-app/actions/exlibris-action.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!--
-  ~ Copyright 2018, TeamDev Ltd. All rights reserved.
-  ~
-  ~ Redistribution and use in source and/or binary forms, with or without
-  ~ modification, must retain the above copyright notice and the following
-  ~ disclaimer.
-  ~
-  ~ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-  ~ "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-  ~ LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-  ~ A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-  ~ OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-  ~ SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-  ~ LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-  ~ DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-  ~ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-  ~ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-  ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-  -->
-
-<script>
-    /* exported ExlibrisActions */
-
-    ExlibrisApp.ExlibrisActions = {
-        FIND_BOOK_BY_ID: "FIND_BOOK_BY_ID",
-    }
-</script>
diff --git a/client-web/src/exlibris-app/actions/exlibris-actions.html b/client-web/src/exlibris-app/actions/exlibris-actions.html
index 9bfff66..125f8e5 100644
--- a/client-web/src/exlibris-app/actions/exlibris-actions.html
+++ b/client-web/src/exlibris-app/actions/exlibris-actions.html
@@ -21,5 +21,6 @@
 <script>
     ExlibrisApp.ExlibrisActions = {
         DOWNLOAD_MORE_BOOKS: "DOWNLOAD_MORE_BOOKS",
+        FIND_BOOK_BY_ID: "FIND_BOOK_BY_ID"
     }
 </script>
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 219921b..3c2f7d6 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -30,7 +30,7 @@
 
 <link rel="import" href="../shell/redux-store.html">
 <link rel="import" href="./book-values.html">
-<link rel="import" href="../actions/exlibris-action.html">
+<link rel="import" href="../actions/exlibris-actions.html">
 <link rel="import" href="./exlibris-book-details-redirect-link.html">
 <script src="../reducers/loading-status.js"></script>
 
diff --git a/client-web/src/exlibris-app/reducers/exlibris-reducer.html b/client-web/src/exlibris-app/reducers/exlibris-reducer.html
index c37c220..c65d09c 100644
--- a/client-web/src/exlibris-app/reducers/exlibris-reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris-reducer.html
@@ -20,7 +20,7 @@
 <script src="../test_values.js"></script>
 <script src="./loading-status.js"></script>
 <link rel="import" href="../book/book-values.html">
-<link rel="import" href="../actions/exlibris-action.html">
+<link rel="import" href="../actions/exlibris-actions.html">
 
 <script>
     /*global userTestBooks libraryTestBooks expectedSoonLibraryBooks*/
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
index f3c21c4..92ca467 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
@@ -34,7 +34,7 @@
 
     <link rel="import" href="../../../src/exlibris-app/book/exlibris-book-details.html">
     <link rel="import" href="../../../src/exlibris-app/book/book-values.html">
-    <link rel="import" href="../../../src/exlibris-app/actions/exlibris-action.html">
+    <link rel="import" href="../../../src/exlibris-app/actions/exlibris-actions.html">
 
 </head>
 <body>
diff --git a/client-web/test/exlibris-app/exlibris-app_store_test.html b/client-web/test/exlibris-app/exlibris-app_store_test.html
deleted file mode 100644
index e69de29..0000000

From 27fc865e219622589ece0ae741b4817b7c665959 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Wed, 18 Apr 2018 11:24:16 +0300
Subject: [PATCH 74/92] Add actions dispatch on details-page buttons click,
 cover with tests.

---
 .../actions/exlibris-actions.html             |  5 +-
 .../book/exlibris-book-details.html           | 35 +++++--
 .../reducers/exlibris-reducer.html            | 18 +++-
 .../exlibris-book-details-store_test.html     | 92 ++++++++++++++++++-
 4 files changed, 134 insertions(+), 16 deletions(-)

diff --git a/client-web/src/exlibris-app/actions/exlibris-actions.html b/client-web/src/exlibris-app/actions/exlibris-actions.html
index 125f8e5..b30e6af 100644
--- a/client-web/src/exlibris-app/actions/exlibris-actions.html
+++ b/client-web/src/exlibris-app/actions/exlibris-actions.html
@@ -21,6 +21,9 @@
 <script>
     ExlibrisApp.ExlibrisActions = {
         DOWNLOAD_MORE_BOOKS: "DOWNLOAD_MORE_BOOKS",
-        FIND_BOOK_BY_ID: "FIND_BOOK_BY_ID"
+        FIND_BOOK_BY_ID: "FIND_BOOK_BY_ID",
+        CANCEL_BOOK_RESERVATION: "CANCEL_BOOK_RESERVATION",
+        RESERVE_BOOK: "RESERVE_BOOK",
+        EXTEND_LOAN_PERIOD: "EXTEND_LOAN_PERIOD"
     }
 </script>
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 3c2f7d6..50add32 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -334,6 +334,24 @@
                             type: ExlibrisApp.ExlibrisActions.FIND_BOOK_BY_ID,
                             bookId: bookId
                         }
+                    },
+                    reserveBook(bookId) {
+                        return {
+                            type: ExlibrisApp.ExlibrisActions.RESERVE_BOOK,
+                            bookId: bookId
+                        }
+                    },
+                    cancelBookReservation(bookId) {
+                        return {
+                            type: ExlibrisApp.ExlibrisActions.CANCEL_BOOK_RESERVATION,
+                            bookId: bookId
+                        }
+                    },
+                    extendBookLoanPeriod(bookId) {
+                        return {
+                            type: ExlibrisApp.ExlibrisActions.EXTEND_LOAN_PERIOD,
+                            bookId: bookId
+                        }
                     }
                 }
             }
@@ -365,7 +383,7 @@
                         case ExlibrisApp.BookStatus.EXPECTED: {
                             return {
                                 title: 'RESERVE',
-                                clickHandler: this._requestReservation
+                                clickHandler: this._requestReservation.bind(this)
                             };
                         }
 
@@ -375,7 +393,7 @@
                             if (book.isAllowedLoanExtension) {
                                 return {
                                     title: 'EXTEND LOAN PERIOD',
-                                    clickHandler: this._requestLoanExtension
+                                    clickHandler: this._requestLoanExtension.bind(this)
                                 };
                             }
                             break;
@@ -385,7 +403,7 @@
                         case ExlibrisApp.BookStatus.READY_TO_PICK_UP: {
                             return {
                                 title: 'CANCEL RESERVATION',
-                                clickHandler: this._requestCancelReservation
+                                clickHandler: this._requestCancelReservation.bind(this)
                             };
                         }
                         default:
@@ -500,8 +518,7 @@
              * @private
              */
             _requestCancelReservation() {
-                alert('Reservation canceled!');
-                //Request someone to cancel reservation
+                this.dispatch('cancelBookReservation', this.book.id);
             }
 
             /**
@@ -510,18 +527,16 @@
              * @private
              */
             _requestReservation() {
-                alert('Book reserved!');
-                //Request someone to make reservation
+                this.dispatch('reserveBook', this.book.id);
             }
 
             /**
-             * Handles the `EXTEND FOR TWO WEEKS` button click.
+             * Handles the `EXTEND LOAN PERIOD` button click.
              *
              * @private
              */
             _requestLoanExtension() {
-                alert('Loan period extended!');
-                //Request someone to extend loan period
+                this.dispatch('extendBookLoanPeriod', this.book.id);
             }
         }
 
diff --git a/client-web/src/exlibris-app/reducers/exlibris-reducer.html b/client-web/src/exlibris-app/reducers/exlibris-reducer.html
index c65d09c..8e61087 100644
--- a/client-web/src/exlibris-app/reducers/exlibris-reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris-reducer.html
@@ -58,10 +58,27 @@
                         }
                     });
                 }
+
+                case ExlibrisApp.ExlibrisActions.RESERVE_BOOK: {
+                    //TODO:2018-21-18:yegor.udovchenko: request reservation
+                    return state;
+                }
+
+                case ExlibrisApp.ExlibrisActions.CANCEL_BOOK_RESERVATION: {
+                    //TODO:2018-21-18:yegor.udovchenko: request cancel reservation
+                    return state;
+                }
+
+                case ExlibrisApp.ExlibrisActions.EXTEND_LOAN_PERIOD: {
+                    //TODO:2018-22-18:yegor.udovchenko: request loan extension
+                    return state;
+                }
+
                 case ExlibrisApp.ExlibrisActions.DOWNLOAD_MORE_BOOKS: {
                     //TODO:2018-55-17:yurii.haidamaka add data loading from the server
                     return state;
                 }
+
                 default:
                     return state;
             }
@@ -81,6 +98,5 @@
             }
             return element;
         }
-
     }
 </script>
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
index 92ca467..175ec60 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
@@ -53,19 +53,103 @@
             path: '/' + TEST_BOOK.title.replace(/\s/g, '_') + '/' + TEST_BOOK.id
         };
 
+        const BOOK_DETAILS_SELECTORS = {
+            WIDE_SCREEN_BUTTON: '.book-card .head-part .book-details .details-action-part paper-button',
+        };
+
+        let mockStore;
+
+        setup(() => {
+            mockStore = sinon.mock(ExlibrisApp.store);
+        });
+
+        teardown(() => {
+            mockStore.restore();
+        });
+
         test('should react on route change and dispatch `FIND_BOOK_BY_ID` action to the store.', function () {
-            const mockStore = sinon.mock(ExlibrisApp.store);
-            const expectedAction = {type: ExlibrisApp.ExlibrisActions.FIND_BOOK_BY_ID, bookId: TEST_BOOK.id};
+            const expectedAction = {
+                type: ExlibrisApp.ExlibrisActions.FIND_BOOK_BY_ID,
+                bookId: TEST_BOOK.id
+            };
             mockStore.expects("dispatch").once().withArgs(expectedAction);
             const element = fixture('BasicTestFixture');
             element.set('route', TEST_BOOK_ROUTE);
 
             mockStore.verify();
-            mockStore.restore();
+        });
+
+        test('should dispatch `RESERVE_BOOK` action to the store on `RESERVE` button click.', function () {
+            const expectedAction = {
+                type: ExlibrisApp.ExlibrisActions.RESERVE_BOOK,
+                bookId: TEST_BOOK.id
+            };
+            const bookForReservation = Object.assign({}, TEST_BOOK, {status: ExlibrisApp.BookStatus.EXPECTED});
+            const testState = {
+                bookDetails: {
+                    book: bookForReservation
+                }
+            };
+
+            mockStore.expects("getState").returns(testState);
+            mockStore.expects("dispatch").once().withArgs(expectedAction);
+            const element = fixture('BasicTestFixture');
+
+            const wideScreenButton = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.WIDE_SCREEN_BUTTON);
+            wideScreenButton.click();
+            mockStore.verify();
+        });
+
+        test('should dispatch `CANCEL_BOOK_RESERVATION` action to the store on `CANCEL RESERVATION` button click.', function () {
+            const expectedAction = {
+                type: ExlibrisApp.ExlibrisActions.CANCEL_BOOK_RESERVATION,
+                bookId: TEST_BOOK.id
+            };
+            const bookForReservation = Object.assign({}, TEST_BOOK, {status: ExlibrisApp.BookStatus.RESERVED});
+            const testState = {
+                bookDetails: {
+                    book: bookForReservation
+                }
+            };
+
+            mockStore.expects("getState").returns(testState);
+            mockStore.expects("dispatch").once().withArgs(expectedAction);
+            const element = fixture('BasicTestFixture');
+
+            const wideScreenButton = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.WIDE_SCREEN_BUTTON);
+            wideScreenButton.click();
+            mockStore.verify();
+        });
+
+        test('should dispatch `EXTEND_LOAN_PERIOD` action to the store on `EXTEND LOAN PERIOD` button click.', function () {
+            const expectedAction = {
+                type: ExlibrisApp.ExlibrisActions.EXTEND_LOAN_PERIOD,
+                bookId: TEST_BOOK.id
+            };
+            const bookForReservation = Object.assign({}, TEST_BOOK, {status: ExlibrisApp.BookStatus.BORROWED, isAllowedLoanExtension: true});
+            const testState = {
+                bookDetails: {
+                    book: bookForReservation,
+                    loadingStatus: ExlibrisApp.LoadingStatus.COMPLETED
+                }
+            };
+
+            mockStore.expects("getState").returns(testState);
+            mockStore.expects("dispatch").once().withArgs(expectedAction);
+            const element = fixture('BasicTestFixture');
+
+            const wideScreenButton = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.WIDE_SCREEN_BUTTON);
+            wideScreenButton.click();
+            mockStore.verify();
         });
 
         test('should react on `loadingStatus` change and dispatch the custom event when the value is `LoadingStatus.NOT_FOUND`.', function (done) {
-            const testState = {bookDetails: {book: {}, loadingStatus: ExlibrisApp.LoadingStatus.NOT_FOUND}};
+            const testState = {
+                bookDetails: {
+                    book: {},
+                    loadingStatus: ExlibrisApp.LoadingStatus.NOT_FOUND
+                }
+            };
             const stub = sinon.stub(ExlibrisApp.store, "getState");
             stub.onFirstCall().returns({}).onSecondCall().returns(testState);
 

From f8e9154216cdb8e217ec5d97de31eec2b0d8aea6 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 4 May 2018 11:05:09 +0300
Subject: [PATCH 75/92] Move book code patterns and link templates to redirect
 link component.

---
 .../src/exlibris-app/book/book-values.html    |  12 --
 .../exlibris-book-details-redirect-link.html  | 172 ++++++++++--------
 .../book/exlibris-book-details.html           |   2 +-
 3 files changed, 102 insertions(+), 84 deletions(-)

diff --git a/client-web/src/exlibris-app/book/book-values.html b/client-web/src/exlibris-app/book/book-values.html
index 8a5a127..8dd0a6d 100644
--- a/client-web/src/exlibris-app/book/book-values.html
+++ b/client-web/src/exlibris-app/book/book-values.html
@@ -19,7 +19,6 @@
   -->
 
 <script>
-
     ExlibrisApp.BookStatus = {
         OVERDUE: "OVERDUE",
         BORROWED: "BORROWED",
@@ -30,15 +29,4 @@
         EXPECTED: "EXPECTED",
         READY_TO_PICK_UP: "READY_TO_PICK_UP",
     };
-
-    ExlibrisApp.BookCodePatterns = {
-        ISBN_10: /^\d{10}$/g,
-        ISBN_13: /^\d{13}$/g,
-        ASIN: /^[\d, A-Z]{10}$/g
-    };
-
-    ExlibrisApp.ExternalLinkTemplates = {
-        AMAZON: 'https://www.amazon.com/%s/dp/%s/',
-        PLAY_BOOKS: 'https://play.google.com/store/search?q=%s&c=books'
-    };
 </script>
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index a66ec34..2b3f15a 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -47,89 +47,119 @@
     </template>
 
     <script>
-        String.prototype.format = function () {
-            return [...arguments].reduce((p, c) => p.replace(/%s/, c), this);
-        };
-
-        /**
-         * The book external link component.
-         *
-         * Generates the link to the one of the global book services to
-         * open it in the new tab. The external service choice depends
-         * on the book code format.
-         *
-         * @customElement
-         * @polymer
-         */
-        class ExlibrisBookDetailsRedirectLink extends Polymer.Element {
-            static get is() {
-                return 'exlibris-book-details-redirect-link';
-            }
+        {
+            String.prototype.format = function () {
+                return [...arguments].reduce((p, c) => p.replace(/%s/, c), this);
+            };
 
-            static get properties() {
-                return {
-                    /**
-                     * The book unique code.
-                     * Can be presented in the form of ISBN-10, ISBN-13 or ASIN.
-                     */
-                    bookCode: String,
-
-                    /**
-                     * The book title.
-                     */
-                    bookTitle: String,
-
-                    /**
-                     * The book external link reference and its title.
-                     *
-                     * @property {string} title the reference title.
-                     * @property {string} value  the link to open in the new tab.
-                     */
-                    reference: {
-                        type: Object,
-                        computed: "_calculateReference(bookCode, bookTitle)"
-                    }
-                };
-            }
+            const BookCodePattern = {
+                ISBN_10: /^\d{10}$/g,
+                ISBN_13: /^\d{13}$/g,
+                ASIN: /^[\d, A-Z]{10}$/g
+            };
+
+            const ExternalLinkTemplate = {
+                AMAZON: 'https://www.amazon.com/%s/dp/%s/',
+                PLAY_BOOKS: 'https://play.google.com/store/search?q=%s&c=books'
+            };
 
             /**
-             * Checks for the passed book code format.
-             *
-             * If the `bookCode` matches the `ISBN-10` or `ASIN` pattern, generates
-             * the Amazon book search link.
+             * The book external link component.
              *
-             * If the `bookCode` matches the `ISBN-13` pattern, generates the Google Play Books
-             * search link.
+             * Generates the link to the one of the global book services to
+             * open it in the new tab. The external service choice depends
+             * on the book code format.
              *
-             * @param {string} bookCode the book unique code (ISBN, ASIN).
-             * @param {string} bookTitle the book title.
-             * @returns {Object} the title and the value of link.
-             * @private
+             * @customElement
+             * @polymer
              */
-            _calculateReference(bookCode, bookTitle) {
-                if (bookCode && bookTitle) {
-                    if (bookCode.match(ExlibrisApp.BookCodePatterns.ISBN_10)) {
-                        return {
-                            title: 'ISBN: ' + bookCode,
-                            value: ExlibrisApp.ExternalLinkTemplates.AMAZON.format(bookTitle, bookCode)
+            class ExlibrisBookDetailsRedirectLink extends Polymer.Element {
+                static get is() {
+                    return 'exlibris-book-details-redirect-link';
+                }
+
+                static get properties() {
+                    return {
+                        /**
+                         * The book unique code.
+                         * Can be presented in the form of ISBN-10, ISBN-13 or ASIN.
+                         */
+                        bookCode: String,
+
+                        /**
+                         * The book title.
+                         */
+                        bookTitle: String,
+
+                        /**
+                         * The enum of book code patterns for ISBN10, ISBN13 and ASIN.
+                         */
+                        bookCodePattern: {
+                            type: Object,
+                            value: BookCodePattern
+                        },
+
+                        /**
+                         * The enum of external links patterns. Each value is used to
+                         * generate redirect link depending on book code format.
+                         */
+                        externalLinkTemplate: {
+                            type: Object,
+                            value: ExternalLinkTemplate
+                        },
+
+                        /**
+                         * The book external link reference and its title.
+                         *
+                         * @property {string} title the reference title.
+                         * @property {string} value  the link to open in the new tab.
+                         */
+                        reference: {
+                            type: Object,
+                            computed: "_calculateReference(bookCode, bookTitle)"
                         }
-                    }
-                    if (bookCode.match(ExlibrisApp.BookCodePatterns.ISBN_13)) {
-                        return {
-                            title: 'ISBN: ' + bookCode,
-                            value: ExlibrisApp.ExternalLinkTemplates.PLAY_BOOKS.format(bookCode)
+                    };
+                }
+
+                /**
+                 * Checks for the passed book code format.
+                 *
+                 * If the `bookCode` matches the `ISBN-10` or `ASIN` pattern, generates
+                 * the Amazon book search link.
+                 *
+                 * If the `bookCode` matches the `ISBN-13` pattern, generates the Google Play Books
+                 * search link.
+                 *
+                 * @param {string} bookCode the book unique code (ISBN, ASIN).
+                 * @param {string} bookTitle the book title.
+                 * @returns {Object} the title and the value of link.
+                 * @private
+                 */
+                _calculateReference(bookCode, bookTitle) {
+                    if (bookCode && bookTitle) {
+                        if (bookCode.match(this.bookCodePattern.ISBN_10)) {
+                            return {
+                                title: 'ISBN: ' + bookCode,
+                                value: this.externalLinkTemplate.AMAZON.format(bookTitle, bookCode)
+                            }
                         }
-                    }
-                    if (bookCode.match(ExlibrisApp.BookCodePatterns.ASIN)) {
-                        return {
-                            title: 'ASIN: ' + bookCode,
-                            value: ExlibrisApp.ExternalLinkTemplates.AMAZON.format(bookTitle, bookCode)
+                        if (bookCode.match(this.bookCodePattern.ISBN_13)) {
+                            return {
+                                title: 'ISBN: ' + bookCode,
+                                value: this.externalLinkTemplate.PLAY_BOOKS.format(bookCode)
+                            }
+                        }
+                        if (bookCode.match(this.bookCodePattern.ASIN)) {
+                            return {
+                                title: 'ASIN: ' + bookCode,
+                                value: this.externalLinkTemplate.AMAZON.format(bookTitle, bookCode)
+                            }
                         }
                     }
                 }
             }
-        }
 
-        window.customElements.define(ExlibrisBookDetailsRedirectLink.is, ExlibrisBookDetailsRedirectLink);
+            window.customElements.define(ExlibrisBookDetailsRedirectLink.is, ExlibrisBookDetailsRedirectLink);
+        }
     </script>
 </dom-module>
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 50add32..9222371 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -186,7 +186,7 @@
 
         <app-route
                 route="{{route}}"
-                pattern="/:title/:id"
+                pattern="/:id/:title"
                 data="{{routeData}}"></app-route>
         <div class="book-card">
             <div class="head-part">

From 2345bbd5e8a7d47b0052804c52e61cb58900e688 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 4 May 2018 11:16:05 +0300
Subject: [PATCH 76/92] Fix tests due to constants moved from book values.

---
 .../book/exlibris-book-details-redirect-link.html          | 1 -
 .../book/exlibris-book-details-redirect-link_test.html     | 7 +++----
 .../book/exlibris-book-details-store_test.html             | 2 +-
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index 2b3f15a..3608ef8 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -19,7 +19,6 @@
   -->
 
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
-<link rel="import" href="./book-values.html">
 
 <dom-module id="exlibris-book-details-redirect-link">
     <template>
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
index ddd5917..3421a35 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
@@ -32,7 +32,6 @@
 
     <link rel="import"
           href="../../../src/exlibris-app/book/exlibris-book-details-redirect-link.html">
-    <link rel="import" href="../../../src/exlibris-app/book/book-values.html">
 </head>
 <body>
 
@@ -62,7 +61,7 @@
         test('should generate Amazon redirect link when code matches the `ISBN_10` pattern.', function () {
             element.bookCode = TEST_BOOK_CODES.ISBN_10;
             element.bookTitle = TEST_BOOK_TITLE;
-            const expectedLink = ExlibrisApp.ExternalLinkTemplates.AMAZON.format(TEST_BOOK_TITLE, TEST_BOOK_CODES.ISBN_10);
+            const expectedLink = 'https://www.amazon.com/' + TEST_BOOK_TITLE + '/dp/' + TEST_BOOK_CODES.ISBN_10 + '/';
 
             const link = element.shadowRoot.querySelector(LINK_SELECTOR);
             assert.equal(link.href, expectedLink);
@@ -71,7 +70,7 @@
         test('should generate Play Books redirect link when code matches the `ISBN_13` pattern.', function () {
             element.bookCode = TEST_BOOK_CODES.ISBN_13;
             element.bookTitle = TEST_BOOK_TITLE;
-            const expectedLink = ExlibrisApp.ExternalLinkTemplates.PLAY_BOOKS.format(TEST_BOOK_CODES.ISBN_13);
+            const expectedLink = 'https://play.google.com/store/search?q=' + TEST_BOOK_CODES.ISBN_13 + '&c=books'
 
             const link = element.shadowRoot.querySelector(LINK_SELECTOR);
             assert.equal(link.href, expectedLink);
@@ -80,7 +79,7 @@
         test('should generate Amazon redirect link when code matches the `ASIN` pattern.', function () {
             element.bookCode = TEST_BOOK_CODES.ASIN;
             element.bookTitle = TEST_BOOK_TITLE;
-            const expectedLink = ExlibrisApp.ExternalLinkTemplates.AMAZON.format(TEST_BOOK_TITLE, TEST_BOOK_CODES.ASIN);
+            const expectedLink = 'https://www.amazon.com/' + TEST_BOOK_TITLE + '/dp/' + TEST_BOOK_CODES.ASIN + '/';
 
             const link = element.shadowRoot.querySelector(LINK_SELECTOR);
             assert.equal(link.href, expectedLink);
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
index 175ec60..70ed623 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
@@ -50,7 +50,7 @@
         const TEST_BOOK = ExlibrisAppTest.BOOKS[0];
         const TEST_BOOK_ROUTE = {
             prefix: '/book-details',
-            path: '/' + TEST_BOOK.title.replace(/\s/g, '_') + '/' + TEST_BOOK.id
+            path: '/' + TEST_BOOK.id + '/' + TEST_BOOK.title.replace(/\s/g, '_')
         };
 
         const BOOK_DETAILS_SELECTORS = {

From 463350d3073df79dbc3ec1c4e77338152c9973b6 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 4 May 2018 11:21:47 +0300
Subject: [PATCH 77/92] Fix test constants.

---
 client-web/test/exlibris-app/test_variables.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client-web/test/exlibris-app/test_variables.js b/client-web/test/exlibris-app/test_variables.js
index e161b40..7b3ebd5 100644
--- a/client-web/test/exlibris-app/test_variables.js
+++ b/client-web/test/exlibris-app/test_variables.js
@@ -30,7 +30,7 @@
         category: "Biography",
         description: "В основу этой биографии легли беседы с самим Стивом Джобсом, а также с его родственниками, друзьями, врагами, соперниками и коллегами. Джобс никак не контролировал автора. Он откровенно отвечал на все вопросы и ждал такой же честности от остальных. Это рассказ о жизни, полной падений и взлетов, о сильном человеке и талантливом бизнесмене, который одним из первых понял: чтобы добиться успеха в XXI веке, нужно соединить креативность и технологии.",
         status: "AVAILABLE",
-        statusMessage: "3 AVAILABLE",
+        statusMessage: "3 available",
         availableCount: 3
     }, {
         id: "123456790",

From 805ab83028cb44ff651c6f8e5a17cd7b485d015b Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 4 May 2018 11:44:05 +0300
Subject: [PATCH 78/92] Improve docs.

---
 .../book/exlibris-book-details-redirect-link.html           | 6 +++---
 client-web/src/exlibris-app/book/exlibris-book-details.html | 4 ++--
 client-web/src/exlibris-app/exlibris-app.html               | 3 ++-
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index 3608ef8..5df0e32 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -81,7 +81,7 @@
                     return {
                         /**
                          * The book unique code.
-                         * Can be presented in the form of ISBN-10, ISBN-13 or ASIN.
+                         * Can be presented in the form of ISBN10, ISBN13 or ASIN.
                          */
                         bookCode: String,
 
@@ -123,10 +123,10 @@
                 /**
                  * Checks for the passed book code format.
                  *
-                 * If the `bookCode` matches the `ISBN-10` or `ASIN` pattern, generates
+                 * If the `bookCode` matches the `ISBN10` or `ASIN` pattern, generates
                  * the Amazon book search link.
                  *
-                 * If the `bookCode` matches the `ISBN-13` pattern, generates the Google Play Books
+                 * If the `bookCode` matches the `ISBN13` pattern, generates the Google Play Books
                  * search link.
                  *
                  * @param {string} bookCode the book unique code (ISBN, ASIN).
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 9222371..912e06d 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -370,7 +370,7 @@
 
             /**
              * Sets the appropriate button title and the click handler function
-             * according to the passed book.
+             * according to the passed book parameters.
              *
              * @param {Book} book the book object to choose a button.
              * @returns {Object} the title and the click function of the button for the specified book.
@@ -504,7 +504,7 @@
 
             /**
              * Handles the button click.
-             * Calls the button clickHandler` function.
+             * Calls the button `clickHandler` function.
              *
              * @private
              */
diff --git a/client-web/src/exlibris-app/exlibris-app.html b/client-web/src/exlibris-app/exlibris-app.html
index 77db3c6..d7bcfb9 100644
--- a/client-web/src/exlibris-app/exlibris-app.html
+++ b/client-web/src/exlibris-app/exlibris-app.html
@@ -242,7 +242,8 @@
                                 ['borrowed-books']: 'Borrowed Books',
                                 ['reserved-books']: 'Reserved Books',
                                 ['should-return-books']: 'Should Return Books',
-                                ['overdue-books']: 'Overdue Books'
+                                ['overdue-books']: 'Overdue Books',
+                                ['book-details']: 'Book Details'
                             }
                         }
                     };

From 577108f7e295e04a6cfeaf589d0a10fd69f062c4 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Fri, 4 May 2018 18:19:41 +0300
Subject: [PATCH 79/92] Add missing import.

---
 client-web/src/exlibris-app/book/exlibris-book-grid.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-grid.html b/client-web/src/exlibris-app/book/exlibris-book-grid.html
index e87ca5b..0b1a161 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-grid.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-grid.html
@@ -21,6 +21,8 @@
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
 <link rel="import" href="../../../bower_components/polymer/lib/elements/dom-if.html">
 <link rel="import" href="../../../bower_components/iron-list/iron-list.html">
+<link rel="import"
+      href="../../../bower_components/iron-scroll-threshold/iron-scroll-threshold.html">
 <link rel="import" href="./exlibris-book-tile.html">
 <link rel="import" href="./book-values.html">
 
@@ -42,7 +44,7 @@
 
         <iron-list items="[[books]]" as="book" scroll-target="document" grid>
             <template>
-                    <exlibris-book-tile book="[[book]]"></exlibris-book-tile>
+                <exlibris-book-tile book="[[book]]"></exlibris-book-tile>
             </template>
         </iron-list>
 

From adde348338ba5956c5d8752343694f77be4f7448 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 7 May 2018 09:51:29 +0300
Subject: [PATCH 80/92] Remove redundant `hidden` property.

---
 client-web/src/exlibris-app/actions/exlibris-actions.html   | 2 ++
 client-web/src/exlibris-app/book/exlibris-book-details.html | 4 ++--
 client-web/src/exlibris-app/reducers/loading-status.js      | 2 --
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client-web/src/exlibris-app/actions/exlibris-actions.html b/client-web/src/exlibris-app/actions/exlibris-actions.html
index 3f6a5bd..c9be260 100644
--- a/client-web/src/exlibris-app/actions/exlibris-actions.html
+++ b/client-web/src/exlibris-app/actions/exlibris-actions.html
@@ -19,6 +19,7 @@
   -->
 
 <script>
+
     ExlibrisApp.ExlibrisActions = {
         FETCH_BOOKS: "FETCH_BOOKS",
         FIND_BOOK_BY_ID: "FIND_BOOK_BY_ID",
@@ -26,4 +27,5 @@
         RESERVE_BOOK: "RESERVE_BOOK",
         EXTEND_LOAN_PERIOD: "EXTEND_LOAN_PERIOD"
     }
+
 </script>
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 912e06d..ac8d53b 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -199,7 +199,7 @@
                                                              book-title="[[book.title]]"></exlibris-book-details-redirect-link>
                         <div id="status-message">[[statusMessage]]</div>
                     </div>
-                    <div class="details-action-part" hidden="true">
+                    <div class="details-action-part">
                         <paper-button raised
                                       on-click="_handleButtonClick"
                                       hidden="[[!button]]">
@@ -310,7 +310,7 @@
 
                     /**
                      * The URL part that defines the book Id.
-                     * Should match the pattern `/:title/:id`
+                     * Should match the pattern `/:id/:title`
                      */
                     route: String,
 
diff --git a/client-web/src/exlibris-app/reducers/loading-status.js b/client-web/src/exlibris-app/reducers/loading-status.js
index 3b469ef..e98dead 100644
--- a/client-web/src/exlibris-app/reducers/loading-status.js
+++ b/client-web/src/exlibris-app/reducers/loading-status.js
@@ -18,8 +18,6 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-/* exported LoadingStatus */
-
 ExlibrisApp.LoadingStatus = {
     IN_PROGRESS: "IN_PROGRESS",
     COMPLETED: "COMPLETED",

From a8aabca37f479233bbf11ddbfd00375e179d557b Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Wed, 6 Jun 2018 15:33:52 +0300
Subject: [PATCH 81/92] Remove book loading status. Improve docs.

---
 .../book/exlibris-book-details.html           | 198 +++++++++---------
 .../reducers/exlibris-reducer.html            |  12 +-
 .../exlibris-app/reducers/loading-status.js   |  25 ---
 3 files changed, 99 insertions(+), 136 deletions(-)
 delete mode 100644 client-web/src/exlibris-app/reducers/loading-status.js

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index ac8d53b..ca9e22c 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -27,12 +27,12 @@
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../../bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="../../../bower_components/iron-image/iron-image.html">
+<link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
 
 <link rel="import" href="../shell/redux-store.html">
 <link rel="import" href="./book-values.html">
 <link rel="import" href="../actions/exlibris-actions.html">
 <link rel="import" href="./exlibris-book-details-redirect-link.html">
-<script src="../reducers/loading-status.js"></script>
 
 <dom-module id="exlibris-book-details">
     <template>
@@ -187,38 +187,38 @@
         <app-route
                 route="{{route}}"
                 pattern="/:id/:title"
-                data="{{routeData}}"></app-route>
+                data="{{_routeData}}"></app-route>
         <div class="book-card">
             <div class="head-part">
-                <iron-image id="book-cover" src="[[book.image]]"></iron-image>
+                <iron-image id="book-cover" src="[[_book.image]]"></iron-image>
                 <div class="book-details">
                     <div class="details-text-part">
-                        <div id="title">[[book.title]]</div>
-                        <div id="author">[[book.author]]</div>
-                        <exlibris-book-details-redirect-link book-code="[[book.isbn]]"
-                                                             book-title="[[book.title]]"></exlibris-book-details-redirect-link>
-                        <div id="status-message">[[statusMessage]]</div>
+                        <div id="title">[[_book.title]]</div>
+                        <div id="author">[[_book.author]]</div>
+                        <exlibris-book-details-redirect-link book-code="[[_book.isbn]]"
+                                                             book-title="[[_book.title]]"></exlibris-book-details-redirect-link>
+                        <div id="status-message">[[_statusMessage]]</div>
                     </div>
                     <div class="details-action-part">
                         <paper-button raised
                                       on-click="_handleButtonClick"
-                                      hidden="[[!button]]">
-                            [[button.title]]
+                                      hidden="[[!_button]]">
+                            [[_button.title]]
                         </paper-button>
-                        <div class="action-part-message">[[actionUnsupportedMessage]]</div>
+                        <div class="action-part-message">[[_actionUnsupportedMessage]]</div>
                     </div>
                 </div>
             </div>
             <div class="narrow-screen-action-part">
                 <paper-button class="small"
                               on-click="_handleButtonClick"
-                              hidden="[[!button]]">
-                    [[button.title]]
+                              hidden="[[!_button]]">
+                    [[_button.title]]
                 </paper-button>
-                <div class="action-part-message">[[actionUnsupportedMessage]]</div>
+                <div class="action-part-message">[[_actionUnsupportedMessage]]</div>
             </div>
             <div id="description">
-                [[book.description]]
+                [[_book.description]]
             </div>
         </div>
     </template>
@@ -240,87 +240,86 @@
                 return 'exlibris-book-details';
             }
 
+            static get observers() {
+                return ['_loadingStatusChanged(_book.*, _loaded)'];
+            }
+
             static get properties() {
                 return {
                     /**
                      * Fired when the book loading process has completed with failure.
                      *
                      * @event exlibris-book-details-not-found
-                     * @param {detail.path} the route path which caused the book loading failure.
+                     * @param {{detail.path: string}} the route path which caused the book loading failure.
                      */
 
+                    /**
+                     * The URL part that defines the book Id.
+                     * Should match the pattern `/:id/:title`
+                     */
+                    route: String,
+
                     /**
                      * The book object to display.
                      *
-                     * @typedef {Object} Book
-                     * @property {string} id
-                     * @property {string} title the title of a book
-                     * @property {string} image the book cover URL
-                     * @property {string} author authors of the book
-                     * @property {string} category the book category
-                     * @property {number} availableCount the number of items available for borrowing.
-                     * @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.
+                     * @type {{
+                     *          id: string,
+                     *          title: string,
+                     *          image: string,
+                     *          author: string,
+                     *          category: string,
+                     *          availableCount: number,
+                     *          isAllowedLoanExtension: boolean|undefined,
+                     *          date: Date|undefined,
+                     *          dueDate: Date|undefined,
+                     *          status: string
+                     *        }}
                      */
-                    book: {
-                        type: Object,
+                    _book: {
                         statePath: 'bookDetails.book'
                     },
 
                     /**
                      * The book loading status.
-                     *
-                     * @typedef {ExlibrisApp.LoadingStatus}
                      */
-                    loadingStatus: {
-                        type: Object,
-                        statePath: "bookDetails.loadingStatus",
-                        observer: "_loadingStatusChanged"
+                    _loaded: {
+                        type: Boolean,
+                        statePath: "bookDetails.loaded"
                     },
 
                     /**
                      * The book details button.
                      *
-                     * @property {string} title the button title
-                     * @property {function} clickHandler the button click handler function
+                     * @type {{title: string, clickHandler: function} | null}
                      */
-                    button: {
+                    _button: {
                         type: Object,
-                        computed: '_chooseButton(book)'
+                        computed: '_chooseButton(_book.status, _book.isAllowedLoanExtension)'
                     },
 
                     /**
-                     * The message about the status of the book.
+                     * The message reflecting the status of the book.
                      */
-                    statusMessage: {
+                    _statusMessage: {
                         type: String,
-                        computed: '_calculateStatusMessage(book)'
+                        computed: '_calculateStatusMessage(_book)'
                     },
 
                     /**
                      * The message about the status of the book.
                      * Shown instead of the button when it is not supported for the book.
                      */
-                    actionUnsupportedMessage: {
+                    _actionUnsupportedMessage: {
                         type: String,
-                        computed: '_calculateActionUnsupportedMessage(book)'
+                        computed: '_calculateActionUnsupportedMessage(_book)'
                     },
 
                     /**
-                     * The URL part that defines the book Id.
-                     * Should match the pattern `/:id/:title`
-                     */
-                    route: String,
-
-                    /**
-                     * Contains the book Id passed in the route.
+                     * Contains the resolved route parameters.
                      *
-                     * @property {string} title the title of the book
-                     * @property {string} id the Id of the book
+                     * @type {{title: string, id: string} | null}
                      */
-                    routeData: {
+                    _routeData: {
                         type: Object,
                         observer: "_routeDataChanged"
                     }
@@ -359,7 +358,7 @@
             /**
              * Dispatches the action to find the book by Id.
              *
-             * @param {Object} routeData the resolved route parameters.
+             * @param {{title: string, id: string}} routeData the resolved route parameters.
              * @private
              */
             _routeDataChanged(routeData) {
@@ -372,43 +371,46 @@
              * Sets the appropriate button title and the click handler function
              * according to the passed book parameters.
              *
-             * @param {Book} book the book object to choose a button.
-             * @returns {Object} the title and the click function of the button for the specified book.
+             * @param {string} status
+             *              the book status represented by one of the ExlibrisApp.BookStatus values.
+             * @param {boolean} isAllowedLoanExtension
+             *              indicates loan extension possibility for borrowed books.
+             * @returns {{title: string, clickHandler: function}}
+             *              the title and the click handler function of the button for the specified
+             *              book parameters.
              * @private
              */
-            _chooseButton(book) {
-                if (book) {
-                    switch (book.status) {
-                        case ExlibrisApp.BookStatus.EXPECTED_SOON:
-                        case ExlibrisApp.BookStatus.EXPECTED: {
-                            return {
-                                title: 'RESERVE',
-                                clickHandler: this._requestReservation.bind(this)
-                            };
-                        }
-
-                        case ExlibrisApp.BookStatus.OVERDUE:
-                        case ExlibrisApp.BookStatus.BORROWED:
-                        case ExlibrisApp.BookStatus.SHOULD_RETURN_SOON: {
-                            if (book.isAllowedLoanExtension) {
-                                return {
-                                    title: 'EXTEND LOAN PERIOD',
-                                    clickHandler: this._requestLoanExtension.bind(this)
-                                };
-                            }
-                            break;
-                        }
+            _chooseButton(status, isAllowedLoanExtension) {
+                switch (status) {
+                    case ExlibrisApp.BookStatus.EXPECTED_SOON:
+                    case ExlibrisApp.BookStatus.EXPECTED: {
+                        return {
+                            title: 'RESERVE',
+                            clickHandler: this._requestReservation.bind(this)
+                        };
+                    }
 
-                        case ExlibrisApp.BookStatus.RESERVED:
-                        case ExlibrisApp.BookStatus.READY_TO_PICK_UP: {
+                    case ExlibrisApp.BookStatus.OVERDUE:
+                    case ExlibrisApp.BookStatus.BORROWED:
+                    case ExlibrisApp.BookStatus.SHOULD_RETURN_SOON: {
+                        if (isAllowedLoanExtension) {
                             return {
-                                title: 'CANCEL RESERVATION',
-                                clickHandler: this._requestCancelReservation.bind(this)
+                                title: 'EXTEND LOAN PERIOD',
+                                clickHandler: this._requestLoanExtension.bind(this)
                             };
                         }
-                        default:
-                            return null;
+                        break;
                     }
+
+                    case ExlibrisApp.BookStatus.RESERVED:
+                    case ExlibrisApp.BookStatus.READY_TO_PICK_UP: {
+                        return {
+                            title: 'CANCEL RESERVATION',
+                            clickHandler: this._requestCancelReservation.bind(this)
+                        };
+                    }
+                    default:
+                        return null;
                 }
             }
 
@@ -485,20 +487,10 @@
              * @param {ExlibrisApp.LoadingStatus} loadingStatus the status of the book loading.
              * @private
              */
-            _loadingStatusChanged(loadingStatus) {
-                switch (loadingStatus) {
-                    case ExlibrisApp.LoadingStatus.NOT_FOUND: {
-                        this.dispatchEvent(new CustomEvent('exlibris-book-details-not-found', {detail: {path: this.route.path}}));
-                        break;
-                    }
-                    case ExlibrisApp.LoadingStatus.IN_PROGRESS: {
-                        //TODO:2018-35-16:yegor.udovchenko: Show loading progress
-                        break;
-                    }
-                    case ExlibrisApp.LoadingStatus.COMPLETED: {
-                        //TODO:2018-36-16:yegor.udovchenko: End display `loading in progress` view
-                        break;
-                    }
+            _loadingStatusChanged(book, loaded) {
+                if (!book.id && !loaded) {
+                    this.dispatchEvent(new CustomEvent('exlibris-book-details-not-found', {detail: {path: this.route.path}}));
+                    console.log('not found');
                 }
             }
 
@@ -509,7 +501,7 @@
              * @private
              */
             _handleButtonClick() {
-                this.button.clickHandler();
+                this._button.clickHandler();
             }
 
             /**
@@ -518,7 +510,7 @@
              * @private
              */
             _requestCancelReservation() {
-                this.dispatch('cancelBookReservation', this.book.id);
+                this.dispatch('cancelBookReservation', this._book.id);
             }
 
             /**
@@ -527,7 +519,7 @@
              * @private
              */
             _requestReservation() {
-                this.dispatch('reserveBook', this.book.id);
+                this.dispatch('reserveBook', this._book.id);
             }
 
             /**
@@ -536,7 +528,7 @@
              * @private
              */
             _requestLoanExtension() {
-                this.dispatch('extendBookLoanPeriod', this.book.id);
+                this.dispatch('extendBookLoanPeriod', this._book.id);
             }
         }
 
diff --git a/client-web/src/exlibris-app/reducers/exlibris-reducer.html b/client-web/src/exlibris-app/reducers/exlibris-reducer.html
index aef17df..4317d98 100644
--- a/client-web/src/exlibris-app/reducers/exlibris-reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris-reducer.html
@@ -18,7 +18,6 @@
   ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   -->
 <script src="../test_values.js"></script>
-<script src="./loading-status.js"></script>
 <link rel="import" href="../book/book-values.html">
 <link rel="import" href="../actions/exlibris-actions.html">
 
@@ -34,7 +33,7 @@
             expectedSoonBooks: expectedSoonLibraryBooks,
             bookDetails: {
                 book: {},
-                loadingStatus: {}
+                loaded: false
             }
         };
 
@@ -51,14 +50,14 @@
                         return Object.assign({}, state, {
                             bookDetails: {
                                 book: book,
-                                loadingStatus: ExlibrisApp.LoadingStatus.COMPLETED
+                                loaded: true
                             }
                         });
                     }
                     return Object.assign({}, state, {
                         bookDetails: {
                             book: {},
-                            loadingStatus: ExlibrisApp.LoadingStatus.NOT_FOUND
+                            loaded: false
                         }
                     });
                 }
@@ -88,10 +87,7 @@
             let i = 1;
             while (!element && i < arguments.length) {
                 if (Array.isArray(arguments[i])) {
-                    const filteredArray = arguments[i].filter(x => x.id === id);
-                    if (filteredArray.length > 0) {
-                        element = filteredArray[0];
-                    }
+                    element = arguments[i].find(el => el.id === id);
                 }
                 i++;
             }
diff --git a/client-web/src/exlibris-app/reducers/loading-status.js b/client-web/src/exlibris-app/reducers/loading-status.js
deleted file mode 100644
index e98dead..0000000
--- a/client-web/src/exlibris-app/reducers/loading-status.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * Copyright 2018, TeamDev Ltd. All rights reserved.
- *
- * Redistribution and use in source and/or binary forms, with or without
- * modification, must retain the above copyright notice and the following
- * disclaimer.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
- * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
- * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
- * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
- * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
- * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
- * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
- * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-ExlibrisApp.LoadingStatus = {
-    IN_PROGRESS: "IN_PROGRESS",
-    COMPLETED: "COMPLETED",
-    NOT_FOUND: "NOT_FOUND"
-};

From cbc7e170833cddd753ecbb1a2d311afd97033824 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Thu, 7 Jun 2018 11:17:07 +0300
Subject: [PATCH 82/92] Improve book-details styles.

---
 .../book/exlibris-book-details.html           | 104 ++++++------------
 1 file changed, 34 insertions(+), 70 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index ca9e22c..ec224bb 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -38,68 +38,44 @@
     <template>
         <style>
             :host {
-                display: flex;
-                justify-content: center;
+                @apply --layout;
+                @apply --layout-center-justified;
+                margin-top: 10px;
             }
 
-            .book-card {
+            #book-card {
                 @apply --layout-vertical;
                 @apply --shadow-elevation-8dp;
                 border-radius: 3px;
-                margin: 10px;
+                padding: 25px 36px 30px;
                 max-width: 700px;
                 background-color: var(--primary-background-color);
                 color: var(--light-theme-text-color);
             }
 
-            .book-card .head-part {
-                display: flex;
-                flex-direction: row;
-                justify-content: flex-start;
-                align-items: flex-start;
-                width: 100%;
-                height: fit-content;
+            #head-part {
+                @apply --layout-horizontal;
             }
 
             #book-cover {
                 @apply --shadow-elevation-4dp;
                 --iron-image-width: 100%;
-                margin-left: 36px;
-                margin-top: 25px;
             }
 
-            .book-card .head-part .book-details {
-                display: flex;
+            #book-details {
+                @apply --layout-vertical;
+                @apply --layout-justified;
                 width: 70%;
-                height: 100%;
                 padding-left: 30px;
-                padding-right: 35px;
-                flex-direction: column;
-                justify-content: space-between;
-            }
-
-            .book-card .head-part .book-details .details-text-part {
-                display: flex;
-                flex-direction: column;
-                justify-content: flex-start;
-                padding-top: 35px;
             }
 
-            .book-card .head-part .book-details .details-action-part {
-                display: block;
-                width: 100%;
-                margin: 0;
+            #narrow-screen-action-part, #wide-screen-action-part {
+                @apply --paper-font-button;
+                color: var(--light-theme-secondary-color);
             }
 
-            .book-card .narrow-screen-action-part {
+            #narrow-screen-action-part {
                 display: none;
-                width: fit-content;
-                margin: 15px 0 0 15px;
-            }
-
-            .action-part-message {
-                @apply --paper-font-button;
-                color: var(--light-theme-secondary-color);
             }
 
             paper-button {
@@ -115,13 +91,10 @@
                 @apply --paper-font-body1;
                 color: var(--exlibris-app-secondary-color);
                 margin-top: 30px;
-                margin-bottom: 30px;
-                padding: 0 36px 0 36px;
             }
 
             #title {
                 @apply --paper-font-headline;
-                text-align: left;
             }
 
             #author {
@@ -132,46 +105,37 @@
             #status-message {
                 @apply --paper-font-body2;
                 white-space: pre;
-                margin: 20px 0 5px 0;
+                margin-top: 20px;
             }
 
             @media only screen and (max-width: 900px) {
                 :host {
-                    margin-left: unset;
+                    margin-top: unset;
                 }
 
-                .book-card {
+                #book-card {
                     border-radius: 0;
                     box-shadow: unset;
                     background-color: unset;
-                    margin: 0;
+                    padding: 15px 15px 0;
                 }
 
-                #book-cover {
-                    margin-left: 15px;
-                    margin-top: 15px;
+                #book-details {
+                    padding-left: 12px;
                 }
 
-                .book-card .head-part .book-details .details-action-part {
+                #wide-screen-action-part {
                     display: none;
                 }
 
-                .book-card .narrow-screen-action-part {
+                #narrow-screen-action-part {
                     display: block;
-                }
-
-                .book-card .head-part .book-details {
-                    padding-left: 10px;
-                    padding-right: 15px;
-                }
-
-                .book-card .head-part .book-details .details-text-part {
-                    padding-top: 15px;
+                    margin-top: 15px;
                 }
 
                 #description {
                     margin-top: 8px;
-                    padding: 0 15px 0 15px;
+                    color: var(--light-theme-text-color);
                 }
 
                 #title {
@@ -180,6 +144,7 @@
 
                 #author {
                     @apply --paper-font-body1;
+                    color: var(--light-theme-text-color);
                 }
             }
         </style>
@@ -188,34 +153,33 @@
                 route="{{route}}"
                 pattern="/:id/:title"
                 data="{{_routeData}}"></app-route>
-        <div class="book-card">
-            <div class="head-part">
+        <div id="book-card">
+            <div id="head-part">
                 <iron-image id="book-cover" src="[[_book.image]]"></iron-image>
-                <div class="book-details">
-                    <div class="details-text-part">
+                <div id="book-details">
+                    <div>
                         <div id="title">[[_book.title]]</div>
                         <div id="author">[[_book.author]]</div>
                         <exlibris-book-details-redirect-link book-code="[[_book.isbn]]"
                                                              book-title="[[_book.title]]"></exlibris-book-details-redirect-link>
                         <div id="status-message">[[_statusMessage]]</div>
                     </div>
-                    <div class="details-action-part">
+                    <div id="wide-screen-action-part">
                         <paper-button raised
                                       on-click="_handleButtonClick"
                                       hidden="[[!_button]]">
                             [[_button.title]]
                         </paper-button>
-                        <div class="action-part-message">[[_actionUnsupportedMessage]]</div>
+                        [[_actionUnsupportedMessage]]
                     </div>
                 </div>
             </div>
-            <div class="narrow-screen-action-part">
-                <paper-button class="small"
-                              on-click="_handleButtonClick"
+            <div id="narrow-screen-action-part">
+                <paper-button on-click="_handleButtonClick"
                               hidden="[[!_button]]">
                     [[_button.title]]
                 </paper-button>
-                <div class="action-part-message">[[_actionUnsupportedMessage]]</div>
+                [[_actionUnsupportedMessage]]
             </div>
             <div id="description">
                 [[_book.description]]

From ea59f0454b0e5ca39bdb569b02d838df02fa5180 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Thu, 7 Jun 2018 12:51:45 +0300
Subject: [PATCH 83/92] Improve redirect-link component, add fallback content
 section when the book code doesn't match any pattern.

---
 .../exlibris-book-details-redirect-link.html  | 58 +++++++++++--------
 .../book/exlibris-book-details.html           | 28 ++++-----
 client-web/src/exlibris-app/test_values.js    |  2 +-
 3 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index 5df0e32..0303097 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -19,30 +19,36 @@
   -->
 
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../bower_components/polymer/lib/elements/dom-if.html">
 
 <dom-module id="exlibris-book-details-redirect-link">
     <template>
         <style>
             :host {
-                display: flex;
+                @apply --paper-font-body1;
+                white-space: nowrap;
                 margin: 5px 0 5px 0;
             }
 
             #link {
-                @apply --paper-font-body1;
-                display: flex;
                 text-decoration: none;
                 color: var(--paper-blue-600);
             }
 
             #link:hover {
                 text-decoration: underline;
+                text-underline-position: under;
             }
         </style>
 
-        <a id="link" target="_blank" href="[[reference.value]]">
-            [[reference.title]]
-        </a>
+        <template is="dom-if" if="[[_reference.value]]">
+            <a id="link" target="_blank" href="[[_reference.value]]">
+                [[_reference.title]]
+            </a>
+        </template>
+        <template is="dom-if" if="[[!_reference.value]]">
+            [[_reference.title]]
+        </template>
     </template>
 
     <script>
@@ -51,13 +57,13 @@
                 return [...arguments].reduce((p, c) => p.replace(/%s/, c), this);
             };
 
-            const BookCodePattern = {
+            const BOOK_CODE_PATTERN = {
                 ISBN_10: /^\d{10}$/g,
                 ISBN_13: /^\d{13}$/g,
                 ASIN: /^[\d, A-Z]{10}$/g
             };
 
-            const ExternalLinkTemplate = {
+            const EXTERNAL_LINK_TEMPLATE = {
                 AMAZON: 'https://www.amazon.com/%s/dp/%s/',
                 PLAY_BOOKS: 'https://play.google.com/store/search?q=%s&c=books'
             };
@@ -93,18 +99,18 @@
                         /**
                          * The enum of book code patterns for ISBN10, ISBN13 and ASIN.
                          */
-                        bookCodePattern: {
+                        _bookCodePattern: {
                             type: Object,
-                            value: BookCodePattern
+                            value: BOOK_CODE_PATTERN
                         },
 
                         /**
                          * The enum of external links patterns. Each value is used to
                          * generate redirect link depending on book code format.
                          */
-                        externalLinkTemplate: {
+                        _externalLinkTemplate: {
                             type: Object,
-                            value: ExternalLinkTemplate
+                            value: EXTERNAL_LINK_TEMPLATE
                         },
 
                         /**
@@ -113,7 +119,7 @@
                          * @property {string} title the reference title.
                          * @property {string} value  the link to open in the new tab.
                          */
-                        reference: {
+                        _reference: {
                             type: Object,
                             computed: "_calculateReference(bookCode, bookTitle)"
                         }
@@ -129,31 +135,35 @@
                  * If the `bookCode` matches the `ISBN13` pattern, generates the Google Play Books
                  * search link.
                  *
+                 * If the `bookCode` doesn't match any pattern, returns reference title and
+                 * value of `undefined`.
+                 *
                  * @param {string} bookCode the book unique code (ISBN, ASIN).
                  * @param {string} bookTitle the book title.
-                 * @returns {Object} the title and the value of link.
+                 * @returns {{title: string, value: string|undefined}} the title and the value of link.
                  * @private
                  */
                 _calculateReference(bookCode, bookTitle) {
-                    if (bookCode && bookTitle) {
-                        if (bookCode.match(this.bookCodePattern.ISBN_10)) {
+                    if (bookCode) {
+                        if (bookCode.match(this._bookCodePattern.ISBN_10)) {
                             return {
                                 title: 'ISBN: ' + bookCode,
-                                value: this.externalLinkTemplate.AMAZON.format(bookTitle, bookCode)
-                            }
+                                value: this._externalLinkTemplate.AMAZON.format(bookTitle, bookCode)
+                            };
                         }
-                        if (bookCode.match(this.bookCodePattern.ISBN_13)) {
+                        if (bookCode.match(this._bookCodePattern.ISBN_13)) {
                             return {
                                 title: 'ISBN: ' + bookCode,
-                                value: this.externalLinkTemplate.PLAY_BOOKS.format(bookCode)
-                            }
+                                value: this._externalLinkTemplate.PLAY_BOOKS.format(bookCode)
+                            };
                         }
-                        if (bookCode.match(this.bookCodePattern.ASIN)) {
+                        if (bookCode.match(this._bookCodePattern.ASIN)) {
                             return {
                                 title: 'ASIN: ' + bookCode,
-                                value: this.externalLinkTemplate.AMAZON.format(bookTitle, bookCode)
-                            }
+                                value: this._externalLinkTemplate.AMAZON.format(bookTitle, bookCode)
+                            };
                         }
+                        return {title: 'ISBN: ' + bookCode};
                     }
                 }
             }
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index ec224bb..a958eaf 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -18,10 +18,8 @@
   ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
   -->
 
-<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">
 <link rel="import" href="../../../bower_components/app-route/app-route.html">
 <link rel="import" href="../../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
@@ -30,8 +28,8 @@
 <link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
 
 <link rel="import" href="../shell/redux-store.html">
-<link rel="import" href="./book-values.html">
 <link rel="import" href="../actions/exlibris-actions.html">
+<link rel="import" href="./book-values.html">
 <link rel="import" href="./exlibris-book-details-redirect-link.html">
 
 <dom-module id="exlibris-book-details">
@@ -205,7 +203,7 @@
             }
 
             static get observers() {
-                return ['_loadingStatusChanged(_book.*, _loaded)'];
+                return ['_loadingStatusChanged(_book.*, _loading)'];
             }
 
             static get properties() {
@@ -240,13 +238,14 @@
                      *        }}
                      */
                     _book: {
+                        type: Object,
                         statePath: 'bookDetails.book'
                     },
 
                     /**
                      * The book loading status.
                      */
-                    _loaded: {
+                    _loading: {
                         type: Boolean,
                         statePath: "bookDetails.loaded"
                     },
@@ -353,7 +352,6 @@
                             clickHandler: this._requestReservation.bind(this)
                         };
                     }
-
                     case ExlibrisApp.BookStatus.OVERDUE:
                     case ExlibrisApp.BookStatus.BORROWED:
                     case ExlibrisApp.BookStatus.SHOULD_RETURN_SOON: {
@@ -365,7 +363,6 @@
                         }
                         break;
                     }
-
                     case ExlibrisApp.BookStatus.RESERVED:
                     case ExlibrisApp.BookStatus.READY_TO_PICK_UP: {
                         return {
@@ -392,15 +389,12 @@
                         case ExlibrisApp.BookStatus.AVAILABLE: {
                             return book.availableCount ? book.availableCount + ' available.\nScan QR code to borrow.' : '';
                         }
-
                         case ExlibrisApp.BookStatus.EXPECTED: {
                             return 'Book not available.';
                         }
-
                         case ExlibrisApp.BookStatus.EXPECTED_SOON: {
                             return 'Arriving to library shortly.';
                         }
-
                         case ExlibrisApp.BookStatus.OVERDUE: {
                             if (book.dueDate) {
                                 const now = new Date();
@@ -409,15 +403,12 @@
                             }
                             break;
                         }
-
                         case ExlibrisApp.BookStatus.READY_TO_PICK_UP: {
                             return book.date ? 'Book is ready to pick up.\nBorrow it before ' + book.date.toLocaleDateString() : '';
                         }
-
                         case ExlibrisApp.BookStatus.RESERVED: {
                             return book.date ? 'Reserved for you.\nExpected on ' + book.date.toLocaleDateString() : '';
                         }
-
                         case ExlibrisApp.BookStatus.BORROWED:
                         case ExlibrisApp.BookStatus.SHOULD_RETURN_SOON: {
                             return book.dueDate ? 'Borrowed by you.\nReturn before ' + book.dueDate.toLocaleDateString() : '';
@@ -448,19 +439,20 @@
              * Observes the loading status of the book to choose the appropriate
              * way to display book details page.
              *
-             * @param {ExlibrisApp.LoadingStatus} loadingStatus the status of the book loading.
+             * @param {Book} book the received book.
+             * @param {boolean} loading the book loading status
              * @private
              */
-            _loadingStatusChanged(book, loaded) {
-                if (!book.id && !loaded) {
+            // TODO:2018-06-07:yegor.udovchenko: Add book loading status handling
+            _loadingStatusChanged(book, loading) {
+                if (!book.id && !loading) {
                     this.dispatchEvent(new CustomEvent('exlibris-book-details-not-found', {detail: {path: this.route.path}}));
-                    console.log('not found');
                 }
             }
 
             /**
              * Handles the button click.
-             * Calls the button `clickHandler` function.
+             * Calls the button's `clickHandler` function.
              *
              * @private
              */
diff --git a/client-web/src/exlibris-app/test_values.js b/client-web/src/exlibris-app/test_values.js
index c1a4dd5..b800dc3 100644
--- a/client-web/src/exlibris-app/test_values.js
+++ b/client-web/src/exlibris-app/test_values.js
@@ -32,7 +32,7 @@ const libraryTestBooks = [
         title: "Прежде Чем Он Согрешит ",
         image: "https://books.google.com/books/content/images/frontcover/uVVMDwAAQBAJ?fife=w200-h300",
         author: "Блейк Пирс",
-        isbn: "9781640293663",
+        isbn: "9781640293663dsd",
         category: "Fiction ",
         description: "Блейк Пирс, автор бестселлера «КОГДА ОНА УШЛА» (бестселлера #1 с более чем 900 отзывов с высшей оценкой), представляет книгу #7 в увлекательной серии детективных романов о Макензи Уайт.\n" +
         "В «ПРЕЖДЕ ЧЕМ ОН СОГРЕШИТ» (Загадки Макензи Уайт—Книга 7) по всему Вашингтону полиция находит тела священников, распятые перед входом в храмы. Что это, акт возмездия? Искать ли преступника среди служителей церкви? Или это серийный убийца, открывший охоту на священников и движимый более зловещими мотивами?\n" +

From 45313a704697762577bcdcac5e7ca3f264ef7b09 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 11 Jun 2018 13:49:46 +0300
Subject: [PATCH 84/92] Implement book loading process imitation. Add
 `notFound` bool property showing the loading failure.

---
 .../actions/exlibris-actions.html             |  2 +
 .../book/exlibris-book-details.html           | 53 ++++++++++++++-----
 .../reducers/exlibris-reducer.html            | 41 +++++++++-----
 3 files changed, 71 insertions(+), 25 deletions(-)

diff --git a/client-web/src/exlibris-app/actions/exlibris-actions.html b/client-web/src/exlibris-app/actions/exlibris-actions.html
index c9be260..8dcdf5b 100644
--- a/client-web/src/exlibris-app/actions/exlibris-actions.html
+++ b/client-web/src/exlibris-app/actions/exlibris-actions.html
@@ -23,6 +23,8 @@
     ExlibrisApp.ExlibrisActions = {
         FETCH_BOOKS: "FETCH_BOOKS",
         FIND_BOOK_BY_ID: "FIND_BOOK_BY_ID",
+        BOOK_RECEIVED: "BOOK_RECEIVED",
+        BOOK_NOT_FOUND: "BOOK_NOT_FOUND",
         CANCEL_BOOK_RESERVATION: "CANCEL_BOOK_RESERVATION",
         RESERVE_BOOK: "RESERVE_BOOK",
         EXTEND_LOAN_PERIOD: "EXTEND_LOAN_PERIOD"
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index a958eaf..565c254 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -51,6 +51,10 @@
                 color: var(--light-theme-text-color);
             }
 
+            #book-card[hidden] {
+                display: none;
+            }
+
             #head-part {
                 @apply --layout-horizontal;
             }
@@ -151,7 +155,8 @@
                 route="{{route}}"
                 pattern="/:id/:title"
                 data="{{_routeData}}"></app-route>
-        <div id="book-card">
+        <div hidden="[[!_loading]]">Loading</div>
+        <div id="book-card" hidden="[[_loading]]">
             <div id="head-part">
                 <iron-image id="book-cover" src="[[_book.image]]"></iron-image>
                 <div id="book-details">
@@ -202,10 +207,6 @@
                 return 'exlibris-book-details';
             }
 
-            static get observers() {
-                return ['_loadingStatusChanged(_book.*, _loading)'];
-            }
-
             static get properties() {
                 return {
                     /**
@@ -247,7 +248,16 @@
                      */
                     _loading: {
                         type: Boolean,
-                        statePath: "bookDetails.loaded"
+                        statePath: "bookDetails.loading"
+                    },
+
+                    /**
+                     * Indicates the book loading failure.
+                     */
+                    _notFound: {
+                        type: Boolean,
+                        statePath: "bookDetails.notFound",
+                        observer: "_notFoundChanged"
                     },
 
                     /**
@@ -327,6 +337,7 @@
             _routeDataChanged(routeData) {
                 if (this.route && this.route.prefix === '/book-details' && routeData.id) {
                     this.dispatch('findBookById', routeData.id);
+                    this.__imitateServerResponse(routeData.id);
                 }
             }
 
@@ -436,16 +447,13 @@
             }
 
             /**
-             * Observes the loading status of the book to choose the appropriate
-             * way to display book details page.
+             * Fires the custom event when the book loading process has completed with failure.
              *
-             * @param {Book} book the received book.
-             * @param {boolean} loading the book loading status
+             * @param {boolean} notFound shows is the book loading process has completed with failure.
              * @private
              */
-            // TODO:2018-06-07:yegor.udovchenko: Add book loading status handling
-            _loadingStatusChanged(book, loading) {
-                if (!book.id && !loading) {
+            _notFoundChanged(notFound) {
+                if (notFound) {
                     this.dispatchEvent(new CustomEvent('exlibris-book-details-not-found', {detail: {path: this.route.path}}));
                 }
             }
@@ -486,6 +494,25 @@
             _requestLoanExtension() {
                 this.dispatch('extendBookLoanPeriod', this._book.id);
             }
+
+            // The temporary server response imitation
+            __imitateServerResponse(bookId) {
+                const random = Math.floor(Math.random() * 4) + 1;
+                if (random % 4 === 0) {
+                    setTimeout(() => {
+                        this.dispatch({
+                            type: ExlibrisApp.ExlibrisActions.BOOK_NOT_FOUND,
+                        });
+                    }, 1000);
+                } else {
+                    setTimeout(() => {
+                        this.dispatch({
+                            type: ExlibrisApp.ExlibrisActions.BOOK_RECEIVED,
+                            bookId: bookId
+                        });
+                    }, 1000);
+                }
+            }
         }
 
         window.customElements.define(ExlibrisBookDetails.is, ExlibrisBookDetails);
diff --git a/client-web/src/exlibris-app/reducers/exlibris-reducer.html b/client-web/src/exlibris-app/reducers/exlibris-reducer.html
index 4317d98..b4799be 100644
--- a/client-web/src/exlibris-app/reducers/exlibris-reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris-reducer.html
@@ -32,8 +32,9 @@
             allBooks: [...userTestBooks.overdue, ...libraryTestBooks],
             expectedSoonBooks: expectedSoonLibraryBooks,
             bookDetails: {
-                book: {},
-                loaded: false
+                book: null,
+                loading: false,
+                notFound: false
             }
         };
 
@@ -44,20 +45,36 @@
                     return state;
                 }
                 case ExlibrisApp.ExlibrisActions.FIND_BOOK_BY_ID: {
+                    // TODO:2018-06-11:yegor.udovchenko: Request book from the server by id
+                    return Object.assign({}, state, {
+                        bookDetails: {
+                            book: null,
+                            loading: true,
+                            notFound: false
+                        }
+                    });
+                }
+
+                case ExlibrisApp.ExlibrisActions.BOOK_RECEIVED: {
+                    // 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);
-                    if (book) {
-                        return Object.assign({}, state, {
-                            bookDetails: {
-                                book: book,
-                                loaded: true
-                            }
-                        });
-                    }
                     return Object.assign({}, state, {
                         bookDetails: {
-                            book: {},
-                            loaded: false
+                            book: book,
+                            loading: false,
+                            notFound: false
+                        }
+                    });
+                }
+
+                case ExlibrisApp.ExlibrisActions.BOOK_NOT_FOUND: {
+                    return Object.assign({}, state, {
+                        bookDetails: {
+                            book: null,
+                            loading: false,
+                            notFound: true
                         }
                     });
                 }

From 8d43d95a72b46c076774b7d044e77d45060aeeb1 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 11 Jun 2018 14:55:10 +0300
Subject: [PATCH 85/92] Add spinner display while book is loading.

---
 client-web/bower.json                         |  3 +-
 .../book/exlibris-book-details.html           | 37 +++++++++++++++++--
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/client-web/bower.json b/client-web/bower.json
index 3d5de59..ef2cfc2 100644
--- a/client-web/bower.json
+++ b/client-web/bower.json
@@ -13,7 +13,8 @@
     "iron-image": "PolymerElements/iron-image#^2.2.0",
     "iron-scroll-threshold": "PolymerElements/iron-scroll-threshold#^2.0.0",
     "iron-list": "PolymerElements/iron-list#^2.0.13",
-    "paper-button": "PolymerElements/paper-button#^2.1.0"
+    "paper-button": "PolymerElements/paper-button#^2.1.0",
+    "paper-spinner": "PolymerElements/paper-spinner#^2.1.0"
   },
   "devDependencies": {
     "web-component-tester": "Polymer/web-component-tester#^6.0.0",
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 565c254..161b224 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -26,6 +26,7 @@
 <link rel="import" href="../../../bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="../../../bower_components/iron-image/iron-image.html">
 <link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../../../bower_components/paper-spinner/paper-spinner-lite.html">
 
 <link rel="import" href="../shell/redux-store.html">
 <link rel="import" href="../actions/exlibris-actions.html">
@@ -55,6 +56,9 @@
                 display: none;
             }
 
+            #loading-spinner {
+                margin-top: 20%;
+            }
             #head-part {
                 @apply --layout-horizontal;
             }
@@ -155,10 +159,12 @@
                 route="{{route}}"
                 pattern="/:id/:title"
                 data="{{_routeData}}"></app-route>
-        <div hidden="[[!_loading]]">Loading</div>
-        <div id="book-card" hidden="[[_loading]]">
+        <paper-spinner-lite id="loading-spinner" class="thick"
+                            active="[[!_isBookReadyToDisplay]]"></paper-spinner-lite>
+        <div id="book-card" hidden="[[!_isBookReadyToDisplay]]">
             <div id="head-part">
-                <iron-image id="book-cover" src="[[_book.image]]"></iron-image>
+                <iron-image id="book-cover" src="[[_book.image]]"
+                            on-loading-changed="_coverLoadingChanged"></iron-image>
                 <div id="book-details">
                     <div>
                         <div id="title">[[_book.title]]</div>
@@ -295,6 +301,16 @@
                     _routeData: {
                         type: Object,
                         observer: "_routeDataChanged"
+                    },
+
+                    /**
+                     * Indicates that the book was loaded and its cover image is ready to be displayed.
+                     *
+                     * Used as a trigger to show `loading in progress` spinner.
+                     */
+                    _isBookReadyToDisplay: {
+                        type: Boolean,
+                        value: false
                     }
                 };
             }
@@ -458,6 +474,21 @@
                 }
             }
 
+            /**
+             * Monitors the book cover loading changes.
+             *
+             * This process is the most time-consuming after the book has been received. Sets the
+             * `_isBookReadyToDisplay` property to `true` when the book is received without failures
+             * and the cover loading process has finished.
+             *
+             * @param {CustomEvent} e fired when the book cover `loading` property changes.
+             * @private
+             */
+            _coverLoadingChanged(e) {
+                const imageIsLoading = e.detail.value;
+                this._isBookReadyToDisplay = !this._loading && !this._notFound && this._book && !imageIsLoading;
+            }
+
             /**
              * Handles the button click.
              * Calls the button's `clickHandler` function.

From dab8a0483f97ec9947ae3bfd6e0b7acfc827830f Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 11 Jun 2018 15:19:50 +0300
Subject: [PATCH 86/92] Fix `book-redirect-link-tests`.

---
 .../exlibris-book-details-redirect-link.html  |  4 +-
 ...ibris-book-details-redirect-link_test.html | 52 ++++++++++++++-----
 2 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index 0303097..debbfe1 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -47,7 +47,7 @@
             </a>
         </template>
         <template is="dom-if" if="[[!_reference.value]]">
-            [[_reference.title]]
+            <span>[[_reference.title]]</span>
         </template>
     </template>
 
@@ -75,6 +75,8 @@
              * open it in the new tab. The external service choice depends
              * on the book code format.
              *
+             * If the passed code does not satisfy any pattern, shows it as a plain text.
+             *
              * @customElement
              * @polymer
              */
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
index 3421a35..95a66a8 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
@@ -53,44 +53,72 @@
         };
         const TEST_BOOK_TITLE = 'TITLE';
         const LINK_SELECTOR = '#link';
+        const TEXT_SELECTOR = 'span';
 
         setup(() => {
             element = fixture('BasicTestFixture');
         });
 
-        test('should generate Amazon redirect link when code matches the `ISBN_10` pattern.', function () {
+        test('should generate Amazon redirect link when code matches the `ISBN_10` pattern.', function (done) {
             element.bookCode = TEST_BOOK_CODES.ISBN_10;
             element.bookTitle = TEST_BOOK_TITLE;
             const expectedLink = 'https://www.amazon.com/' + TEST_BOOK_TITLE + '/dp/' + TEST_BOOK_CODES.ISBN_10 + '/';
 
-            const link = element.shadowRoot.querySelector(LINK_SELECTOR);
-            assert.equal(link.href, expectedLink);
+            flush(() => {
+                const link = element.shadowRoot.querySelector(LINK_SELECTOR);
+                const text = element.shadowRoot.querySelector(TEXT_SELECTOR);
+
+                assert.isNull(text);
+                assert.equal(link.innerHTML.trim(), 'ISBN: ' + TEST_BOOK_CODES.ISBN_10);
+                assert.equal(link.href, expectedLink);
+                done();
+            });
         });
 
-        test('should generate Play Books redirect link when code matches the `ISBN_13` pattern.', function () {
+        test('should generate Play Books redirect link when code matches the `ISBN_13` pattern.', function (done) {
             element.bookCode = TEST_BOOK_CODES.ISBN_13;
             element.bookTitle = TEST_BOOK_TITLE;
             const expectedLink = 'https://play.google.com/store/search?q=' + TEST_BOOK_CODES.ISBN_13 + '&c=books'
 
-            const link = element.shadowRoot.querySelector(LINK_SELECTOR);
-            assert.equal(link.href, expectedLink);
+            flush(() => {
+                const link = element.shadowRoot.querySelector(LINK_SELECTOR);
+                const text = element.shadowRoot.querySelector(TEXT_SELECTOR);
+
+                assert.isNull(text);
+                assert.equal(link.innerHTML.trim(), 'ISBN: ' + TEST_BOOK_CODES.ISBN_13);
+                assert.equal(link.href, expectedLink);
+                done();
+            });
         });
 
-        test('should generate Amazon redirect link when code matches the `ASIN` pattern.', function () {
+        test('should generate Amazon redirect link when code matches the `ASIN` pattern.', function (done) {
             element.bookCode = TEST_BOOK_CODES.ASIN;
             element.bookTitle = TEST_BOOK_TITLE;
             const expectedLink = 'https://www.amazon.com/' + TEST_BOOK_TITLE + '/dp/' + TEST_BOOK_CODES.ASIN + '/';
 
-            const link = element.shadowRoot.querySelector(LINK_SELECTOR);
-            assert.equal(link.href, expectedLink);
+            flush(() => {
+                const link = element.shadowRoot.querySelector(LINK_SELECTOR);
+                const text = element.shadowRoot.querySelector(TEXT_SELECTOR);
+
+                assert.isNull(text);
+                assert.equal(link.innerHTML.trim(), 'ASIN: ' + TEST_BOOK_CODES.ASIN);
+                assert.equal(link.href, expectedLink);
+                done();
+            });
         });
 
-        test('should not generate link when the passed code does not match to any pattern.', function () {
+        test('should not display link and display the text label when the passed code does not match to any pattern.', function (done) {
             element.bookCode = TEST_BOOK_CODES.INVALID;
             element.bookTitle = TEST_BOOK_TITLE;
 
-            const link = element.shadowRoot.querySelector(LINK_SELECTOR);
-            assert.equal(link.href, '');
+            flush(() => {
+                const link = element.shadowRoot.querySelector(LINK_SELECTOR);
+                const text = element.shadowRoot.querySelector(TEXT_SELECTOR);
+
+                assert.isNull(link);
+                assert.equal(text.innerHTML, 'ISBN: ' + TEST_BOOK_CODES.INVALID);
+                done();
+            });
         });
     });
 </script>

From 221208af8be5a879e84b6c4470e3e46ea2e422c5 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 11 Jun 2018 17:45:17 +0300
Subject: [PATCH 87/92] Fix `book-details` buttons test, add test for
 `book-details` component content.

---
 .../book/exlibris-book-details.html           |   4 +-
 .../exlibris-book-details-buttons_test.html   |  49 +++-----
 .../exlibris-book-details-store_test.html     |  10 +-
 .../book/exlibris-book-details_test.html      | 110 ++++++++++++++++++
 .../test/exlibris-app/test_variables.js       |   1 +
 5 files changed, 136 insertions(+), 38 deletions(-)
 create mode 100644 client-web/test/exlibris-app/book/exlibris-book-details_test.html

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 161b224..8840ebc 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -179,7 +179,7 @@
                                       hidden="[[!_button]]">
                             [[_button.title]]
                         </paper-button>
-                        [[_actionUnsupportedMessage]]
+                        <span>[[_actionUnsupportedMessage]]</span>
                     </div>
                 </div>
             </div>
@@ -188,7 +188,7 @@
                               hidden="[[!_button]]">
                     [[_button.title]]
                 </paper-button>
-                [[_actionUnsupportedMessage]]
+                <span>[[_actionUnsupportedMessage]]</span>
             </div>
             <div id="description">
                 [[_book.description]]
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
index b2300e9..171c455 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
@@ -31,7 +31,6 @@
     <script src="../../../bower_components/web-component-tester/browser.js"></script>
     <script src="../../../node_modules/redux/dist/redux.js"></script>
 
-    <script src="../test_variables.js"></script>
     <link rel="import" href="../../../src/exlibris-app/book/exlibris-book-details.html">
     <link rel="import" href="../../../src/exlibris-app/book/book-values.html">
 </head>
@@ -55,14 +54,13 @@
         const ACTION_UNSUPPORTED_MESSAGE = 'RESERVED BY ANOTHER READER';
 
         const BOOK_DETAILS_SELECTORS = {
-            WIDE_SCREEN_BUTTON: '.book-card .head-part .book-details .details-action-part paper-button',
-            NARROW_SCREEN_BUTTON: '.book-card .narrow-screen-action-part paper-button',
-            WIDE_SCREEN_MESSAGE: '.book-card .head-part .book-details .details-action-part .action-part-message',
-            NARROW_SCREEN_MESSAGE: '.book-card .narrow-screen-action-part .action-part-message'
+            WIDE_SCREEN_BUTTON: '#wide-screen-action-part paper-button',
+            NARROW_SCREEN_BUTTON: '#narrow-screen-action-part paper-button',
+            WIDE_SCREEN_MESSAGE: '#wide-screen-action-part span',
+            NARROW_SCREEN_MESSAGE: '#narrow-screen-action-part span'
         };
 
         let booksAndButtonsCombinations;
-        let testElements;
 
         setup(() => {
             booksAndButtonsCombinations = [
@@ -140,36 +138,27 @@
                     actionUnsupportedMessage: ''
                 }
             ];
-            testElements = [];
+        });
 
+        test('should display the book action button with the appropriate title.', function () {
             booksAndButtonsCombinations.forEach(function (combination) {
                 const element = fixture('BasicTestFixture');
-                element.set('book', combination.book);
-                testElements.push(element);
-            });
-        });
-
-        test('should display book action button with appropriate title.', function (done) {
-            flush(() => {
-                testElements.forEach(function (element, index) {
-                    const wideScreenButton = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.WIDE_SCREEN_BUTTON);
-                    const narrowScreenButton = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.NARROW_SCREEN_BUTTON);
-                    assert.equal(wideScreenButton.innerHTML.trim(), booksAndButtonsCombinations[index].button);
-                    assert.equal(narrowScreenButton.innerHTML.trim(), booksAndButtonsCombinations[index].button);
-                });
-                done();
+                element.set('_book', combination.book);
+                const wideScreenButton = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.WIDE_SCREEN_BUTTON);
+                const narrowScreenButton = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.NARROW_SCREEN_BUTTON);
+                assert.equal(wideScreenButton.innerHTML.trim(), combination.button);
+                assert.equal(narrowScreenButton.innerHTML.trim(), combination.button);
             });
         });
 
-        test('should display appropriate message when actions with book are unsupported.', function (done) {
-            flush(() => {
-                testElements.forEach(function (element, index) {
-                    const wideScreenMessage = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.WIDE_SCREEN_MESSAGE);
-                    const narrowScreenMessage = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.NARROW_SCREEN_MESSAGE);
-                    assert.equal(wideScreenMessage.innerHTML.trim(), booksAndButtonsCombinations[index].actionUnsupportedMessage);
-                    assert.equal(narrowScreenMessage.innerHTML.trim(), booksAndButtonsCombinations[index].actionUnsupportedMessage);
-                });
-                done();
+        test('should display the appropriate message when actions with the book are unsupported.', function () {
+            booksAndButtonsCombinations.forEach(function (combination) {
+                const element = fixture('BasicTestFixture');
+                element.set('_book', combination.book);
+                const wideScreenMessage = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.WIDE_SCREEN_MESSAGE);
+                const narrowScreenMessage = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.NARROW_SCREEN_MESSAGE);
+                assert.equal(wideScreenMessage.innerHTML.trim(), combination.actionUnsupportedMessage);
+                assert.equal(narrowScreenMessage.innerHTML.trim(), combination.actionUnsupportedMessage);
             });
         });
     });
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
index 70ed623..b86156f 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-store_test.html
@@ -54,7 +54,7 @@
         };
 
         const BOOK_DETAILS_SELECTORS = {
-            WIDE_SCREEN_BUTTON: '.book-card .head-part .book-details .details-action-part paper-button',
+            WIDE_SCREEN_BUTTON: '#wide-screen-action-part paper-button',
         };
 
         let mockStore;
@@ -129,8 +129,7 @@
             const bookForReservation = Object.assign({}, TEST_BOOK, {status: ExlibrisApp.BookStatus.BORROWED, isAllowedLoanExtension: true});
             const testState = {
                 bookDetails: {
-                    book: bookForReservation,
-                    loadingStatus: ExlibrisApp.LoadingStatus.COMPLETED
+                    book: bookForReservation
                 }
             };
 
@@ -143,11 +142,10 @@
             mockStore.verify();
         });
 
-        test('should react on `loadingStatus` change and dispatch the custom event when the value is `LoadingStatus.NOT_FOUND`.', function (done) {
+        test('should react on `notFound` change and dispatch the custom event when the value is `true`.', function (done) {
             const testState = {
                 bookDetails: {
-                    book: {},
-                    loadingStatus: ExlibrisApp.LoadingStatus.NOT_FOUND
+                    notFound: true
                 }
             };
             const stub = sinon.stub(ExlibrisApp.store, "getState");
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details_test.html b/client-web/test/exlibris-app/book/exlibris-book-details_test.html
new file mode 100644
index 0000000..bbbe30e
--- /dev/null
+++ b/client-web/test/exlibris-app/book/exlibris-book-details_test.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<!--
+  ~ Copyright 2018, TeamDev Ltd. All rights reserved.
+  ~
+  ~ Redistribution and use in source and/or binary forms, with or without
+  ~ modification, must retain the above copyright notice and the following
+  ~ disclaimer.
+  ~
+  ~ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+  ~ "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+  ~ LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+  ~ A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+  ~ OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+  ~ SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+  ~ LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+  ~ DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+  ~ THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+  ~ (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+  ~ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+  -->
+
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport"
+          content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>exlibris-book-details test</title>
+
+    <script src="../../../bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+    <script src="../../../bower_components/web-component-tester/browser.js"></script>
+    <script src="../../../node_modules/redux/dist/redux.js"></script>
+    <script src="../test_variables.js"></script>
+    <link rel="import" href="../../../src/exlibris-app/book/exlibris-book-details.html">
+</head>
+<body>
+
+<test-fixture id="BasicTestFixture">
+    <template>
+        <exlibris-book-details></exlibris-book-details>
+    </template>
+</test-fixture>
+
+<script>
+    suite('exlibris-book-details', function () {
+        let element;
+        let testBook;
+        const BOOK_DETAILS_SELECTORS = {
+            LOADING_IN_PROGRESS_CONTENT: '#loading-spinner',
+            BOOK_DETAILS_CARD: '#book-card',
+            BOOK_COVER: '#book-cover',
+            BOOK_TITLE: '#title',
+            BOOK_AUTHOR: '#author',
+            BOOK_CODE_LINK: 'exlibris-book-details-redirect-link',
+            STATUS_MESSAGE: '#status-message',
+            BOOK_DESCRIPTION: '#description'
+        };
+
+        setup(() => {
+            element = fixture('BasicTestFixture');
+            testBook = ExlibrisAppTest.BOOKS[0];
+        });
+
+        test('should display the loading spinner when the book is not ready to display.', function () {
+            const loadingSpinner = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.LOADING_IN_PROGRESS_CONTENT);
+            const bookDetailsContent = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.BOOK_DETAILS_CARD);
+
+            assert.isTrue(loadingSpinner.active, 'Expecting spinner to be active.');
+            assert.isTrue(bookDetailsContent.hidden, 'Expecting book details card to be hidden.');
+        });
+
+        test('should hide the loading spinner and show book details card when the responsible bool property changed', function () {
+            element.set('_isBookReadyToDisplay', true);
+
+            const loadingSpinner = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.LOADING_IN_PROGRESS_CONTENT);
+            const bookDetailsContent = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.BOOK_DETAILS_CARD);
+
+            assert.isFalse(loadingSpinner.active, 'Expecting spinner to be inactive.');
+            assert.isFalse(bookDetailsContent.hidden, 'Expecting book details card to be rendered.');
+        });
+
+        test('component content is correct.', function () {
+            element.set('_book', testBook);
+            element.set('_isBookReadyToDisplay', true);
+            const shadowRoot = element.shadowRoot;
+
+            const bookCover = shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.BOOK_COVER);
+            assert.equal(bookCover.src, testBook.image, 'Expecting the correct image to be rendered.');
+
+            const bookTitle = shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.BOOK_TITLE);
+            assert.equal(bookTitle.innerHTML.trim(), testBook.title, 'Expecting the correct title to be rendered.');
+
+            const bookAuthor = shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.BOOK_AUTHOR);
+            assert.equal(bookAuthor.innerHTML.trim(), testBook.author, 'Expecting the correct author to be rendered.');
+
+            const bookCodeLink = shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.BOOK_CODE_LINK);
+            assert.equal(bookCodeLink.bookCode, testBook.isbn, 'Expecting the correct isbn to be set.');
+            assert.equal(bookCodeLink.bookTitle, testBook.title, 'Expecting the correct title to be set.');
+
+            const bookStatusMessage = shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.STATUS_MESSAGE);
+            assert.equal(bookStatusMessage.innerHTML.trim(), '3 available.\nScan QR code to borrow.',
+                'Expecting the correct status message to be rendered.');
+
+            const bookDescription = shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.BOOK_DESCRIPTION);
+            assert.equal(bookDescription.innerHTML.trim(), testBook.description, 'Expecting the correct description to be rendered.');
+        });
+    });
+</script>
+</body>
+</html>
diff --git a/client-web/test/exlibris-app/test_variables.js b/client-web/test/exlibris-app/test_variables.js
index 7b3ebd5..7e252eb 100644
--- a/client-web/test/exlibris-app/test_variables.js
+++ b/client-web/test/exlibris-app/test_variables.js
@@ -27,6 +27,7 @@
         title: "Стив Джобс",
         image: "https://books.google.com/books/content/images/frontcover/xSWOMjMSzi8C?fife=w200-h300",
         author: "Уолтер Айзексон",
+        isbn: "0132350882",
         category: "Biography",
         description: "В основу этой биографии легли беседы с самим Стивом Джобсом, а также с его родственниками, друзьями, врагами, соперниками и коллегами. Джобс никак не контролировал автора. Он откровенно отвечал на все вопросы и ждал такой же честности от остальных. Это рассказ о жизни, полной падений и взлетов, о сильном человеке и талантливом бизнесмене, который одним из первых понял: чтобы добиться успеха в XXI веке, нужно соединить креативность и технологии.",
         status: "AVAILABLE",

From 12ddb9fa338d4fd2b2e4d4b3bbf83aae3e4a3ff6 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 11 Jun 2018 18:46:50 +0300
Subject: [PATCH 88/92] Separate `book-details` buttons test.

---
 .../book/exlibris-book-details.html           |  22 +--
 .../exlibris-book-details-buttons_test.html   | 154 +++++++++---------
 ...ibris-book-details-redirect-link_test.html |   3 +-
 .../book/exlibris-book-details_test.html      |  17 +-
 4 files changed, 95 insertions(+), 101 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 8840ebc..553ec1c 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -19,11 +19,8 @@
   -->
 
 <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/app-route/app-route.html">
 <link rel="import" href="../../../bower_components/paper-button/paper-button.html">
-<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../../../bower_components/iron-icons/iron-icons.html">
 <link rel="import" href="../../../bower_components/iron-image/iron-image.html">
 <link rel="import" href="../../../bower_components/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../../../bower_components/paper-spinner/paper-spinner-lite.html">
@@ -123,7 +120,7 @@
                     border-radius: 0;
                     box-shadow: unset;
                     background-color: unset;
-                    padding: 15px 15px 0;
+                    padding: 15px;
                 }
 
                 #book-details {
@@ -290,7 +287,7 @@
                      */
                     _actionUnsupportedMessage: {
                         type: String,
-                        computed: '_calculateActionUnsupportedMessage(_book)'
+                        computed: '_calculateActionUnsupportedMessage(_book.status, _book.isAllowedLoanExtension)'
                     },
 
                     /**
@@ -448,18 +445,17 @@
              * Calculates the appropriate message if the button is not supported
              * for the passed book.
              *
-             * @param {Book} book the book object.
+             * @param {string} bookStatus the book status represented by one of the ExlibrisApp.BookStatus values.
+             * @param {boolean} isAllowedLoanExtension indicates is there ability to extend loan or not.
              * @returns {string} the message to show when the action button is not supported
              *                   for the specified book.
              * @private
              */
-            _calculateActionUnsupportedMessage(book) {
-                if (book) {
-                    if ((ExlibrisApp.BookStatus.BORROWED === book.status
-                            || ExlibrisApp.BookStatus.SHOULD_RETURN_SOON === book.status
-                            || ExlibrisApp.BookStatus.OVERDUE === book.status) &&
-                        !book.isAllowedLoanExtension) return 'RESERVED BY ANOTHER READER';
-                }
+            _calculateActionUnsupportedMessage(bookStatus, isAllowedLoanExtension) {
+                if ((ExlibrisApp.BookStatus.BORROWED === bookStatus
+                        || ExlibrisApp.BookStatus.SHOULD_RETURN_SOON === bookStatus
+                        || ExlibrisApp.BookStatus.OVERDUE === bookStatus) &&
+                    !isAllowedLoanExtension) return 'RESERVED BY ANOTHER READER';
             }
 
             /**
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
index 171c455..8c9a65f 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-buttons_test.html
@@ -60,105 +60,105 @@
             NARROW_SCREEN_MESSAGE: '#narrow-screen-action-part span'
         };
 
-        let booksAndButtonsCombinations;
-
-        setup(() => {
-            booksAndButtonsCombinations = [
-                {
-                    book: {status: ExlibrisApp.BookStatus.EXPECTED},
-                    button: BUTTON_TITLES.RESERVE,
-                    actionUnsupportedMessage: ''
-                },
-                {
-                    book: {status: ExlibrisApp.BookStatus.EXPECTED_SOON},
-                    button: BUTTON_TITLES.RESERVE,
-                    actionUnsupportedMessage: ''
-                },
-                {
-                    book: {status: ExlibrisApp.BookStatus.AVAILABLE},
-                    button: '',
-                    actionUnsupportedMessage: ''
+        const BOOKS_AND_BUTTONS_COMBINATIONS = [
+            {
+                book: {status: ExlibrisApp.BookStatus.EXPECTED},
+                button: BUTTON_TITLES.RESERVE,
+                actionUnsupportedMessage: ''
+            },
+            {
+                book: {status: ExlibrisApp.BookStatus.EXPECTED_SOON},
+                button: BUTTON_TITLES.RESERVE,
+                actionUnsupportedMessage: ''
+            },
+            {
+                book: {status: ExlibrisApp.BookStatus.AVAILABLE},
+                button: '',
+                actionUnsupportedMessage: ''
+            },
+            {
+                book: {
+                    status: ExlibrisApp.BookStatus.BORROWED,
+                    isAllowedLoanExtension: true
                 },
-                {
-                    book: {
-                        status: ExlibrisApp.BookStatus.BORROWED,
-                        isAllowedLoanExtension: true
-                    },
-                    button: BUTTON_TITLES.EXTEND_LOAN_PERIOD,
-                    actionUnsupportedMessage: ''
+                button: BUTTON_TITLES.EXTEND_LOAN_PERIOD,
+                actionUnsupportedMessage: ''
+            },
+            {
+                book: {
+                    status: ExlibrisApp.BookStatus.OVERDUE,
+                    isAllowedLoanExtension: true
                 },
-                {
-                    book: {
-                        status: ExlibrisApp.BookStatus.OVERDUE,
-                        isAllowedLoanExtension: true
-                    },
-                    button: BUTTON_TITLES.EXTEND_LOAN_PERIOD,
-                    actionUnsupportedMessage: ''
+                button: BUTTON_TITLES.EXTEND_LOAN_PERIOD,
+                actionUnsupportedMessage: ''
+            },
+            {
+                book: {
+                    status: ExlibrisApp.BookStatus.SHOULD_RETURN_SOON,
+                    isAllowedLoanExtension: true
                 },
-                {
-                    book: {
-                        status: ExlibrisApp.BookStatus.SHOULD_RETURN_SOON,
-                        isAllowedLoanExtension: true
-                    },
-                    button: BUTTON_TITLES.EXTEND_LOAN_PERIOD,
-                    actionUnsupportedMessage: ''
+                button: BUTTON_TITLES.EXTEND_LOAN_PERIOD,
+                actionUnsupportedMessage: ''
+            },
+            {
+                book: {
+                    status: ExlibrisApp.BookStatus.BORROWED,
+                    isAllowedLoanExtension: false
                 },
-                {
-                    book: {
-                        status: ExlibrisApp.BookStatus.BORROWED,
-                        isAllowedLoanExtension: false
-                    },
-                    button: '',
-                    actionUnsupportedMessage: ACTION_UNSUPPORTED_MESSAGE
+                button: '',
+                actionUnsupportedMessage: ACTION_UNSUPPORTED_MESSAGE
+            },
+            {
+                book: {
+                    status: ExlibrisApp.BookStatus.OVERDUE,
+                    isAllowedLoanExtension: false
                 },
-                {
-                    book: {
-                        status: ExlibrisApp.BookStatus.OVERDUE,
-                        isAllowedLoanExtension: false
-                    },
-                    button: '',
-                    actionUnsupportedMessage: ACTION_UNSUPPORTED_MESSAGE
+                button: '',
+                actionUnsupportedMessage: ACTION_UNSUPPORTED_MESSAGE
+            },
+            {
+                book: {
+                    status: ExlibrisApp.BookStatus.SHOULD_RETURN_SOON,
+                    isAllowedLoanExtension: false
                 },
-                {
-                    book: {
-                        status: ExlibrisApp.BookStatus.SHOULD_RETURN_SOON,
-                        isAllowedLoanExtension: false
-                    },
-                    button: '',
-                    actionUnsupportedMessage: ACTION_UNSUPPORTED_MESSAGE
-                },
-                {
-                    book: {status: ExlibrisApp.BookStatus.RESERVED},
-                    button: BUTTON_TITLES.CANCEL_RESERVATION,
-                    actionUnsupportedMessage: ''
-                },
-                {
-                    book: {status: ExlibrisApp.BookStatus.READY_TO_PICK_UP},
-                    button: BUTTON_TITLES.CANCEL_RESERVATION,
-                    actionUnsupportedMessage: ''
-                }
-            ];
-        });
+                button: '',
+                actionUnsupportedMessage: ACTION_UNSUPPORTED_MESSAGE
+            },
+            {
+                book: {status: ExlibrisApp.BookStatus.RESERVED},
+                button: BUTTON_TITLES.CANCEL_RESERVATION,
+                actionUnsupportedMessage: ''
+            },
+            {
+                book: {status: ExlibrisApp.BookStatus.READY_TO_PICK_UP},
+                button: BUTTON_TITLES.CANCEL_RESERVATION,
+                actionUnsupportedMessage: ''
+            }
+        ];
 
-        test('should display the book action button with the appropriate title.', function () {
-            booksAndButtonsCombinations.forEach(function (combination) {
+        BOOKS_AND_BUTTONS_COMBINATIONS.forEach(function (combination) {
+            const testMessagePart = combination.button ? combination.button : 'empty';
+            test(`should have ${testMessagePart} button title for the book with status ${combination.book.status}`, done => {
                 const element = fixture('BasicTestFixture');
                 element.set('_book', combination.book);
                 const wideScreenButton = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.WIDE_SCREEN_BUTTON);
                 const narrowScreenButton = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.NARROW_SCREEN_BUTTON);
                 assert.equal(wideScreenButton.innerHTML.trim(), combination.button);
                 assert.equal(narrowScreenButton.innerHTML.trim(), combination.button);
+                done();
             });
         });
 
-        test('should display the appropriate message when actions with the book are unsupported.', function () {
-            booksAndButtonsCombinations.forEach(function (combination) {
+        BOOKS_AND_BUTTONS_COMBINATIONS.forEach(function (combination) {
+            const testMessagePart = combination.actionUnsupportedMessage ? combination.actionUnsupportedMessage : 'empty';
+            test(`should have ${testMessagePart} action unsupported message for the book with status ${combination.book.status}`, done => {
                 const element = fixture('BasicTestFixture');
                 element.set('_book', combination.book);
                 const wideScreenMessage = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.WIDE_SCREEN_MESSAGE);
                 const narrowScreenMessage = element.shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.NARROW_SCREEN_MESSAGE);
                 assert.equal(wideScreenMessage.innerHTML.trim(), combination.actionUnsupportedMessage);
                 assert.equal(narrowScreenMessage.innerHTML.trim(), combination.actionUnsupportedMessage);
+                done();
             });
         });
     });
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html b/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
index 95a66a8..a804108 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details-redirect-link_test.html
@@ -29,7 +29,6 @@
 
     <script src="../../../bower_components/webcomponentsjs/webcomponents-loader.js"></script>
     <script src="../../../bower_components/web-component-tester/browser.js"></script>
-
     <link rel="import"
           href="../../../src/exlibris-app/book/exlibris-book-details-redirect-link.html">
 </head>
@@ -78,7 +77,7 @@
         test('should generate Play Books redirect link when code matches the `ISBN_13` pattern.', function (done) {
             element.bookCode = TEST_BOOK_CODES.ISBN_13;
             element.bookTitle = TEST_BOOK_TITLE;
-            const expectedLink = 'https://play.google.com/store/search?q=' + TEST_BOOK_CODES.ISBN_13 + '&c=books'
+            const expectedLink = 'https://play.google.com/store/search?q=' + TEST_BOOK_CODES.ISBN_13 + '&c=books';
 
             flush(() => {
                 const link = element.shadowRoot.querySelector(LINK_SELECTOR);
diff --git a/client-web/test/exlibris-app/book/exlibris-book-details_test.html b/client-web/test/exlibris-app/book/exlibris-book-details_test.html
index bbbe30e..50e417e 100644
--- a/client-web/test/exlibris-app/book/exlibris-book-details_test.html
+++ b/client-web/test/exlibris-app/book/exlibris-book-details_test.html
@@ -44,7 +44,7 @@
 <script>
     suite('exlibris-book-details', function () {
         let element;
-        let testBook;
+        const TEST_BOOK = ExlibrisAppTest.BOOKS[0];
         const BOOK_DETAILS_SELECTORS = {
             LOADING_IN_PROGRESS_CONTENT: '#loading-spinner',
             BOOK_DETAILS_CARD: '#book-card',
@@ -58,7 +58,6 @@
 
         setup(() => {
             element = fixture('BasicTestFixture');
-            testBook = ExlibrisAppTest.BOOKS[0];
         });
 
         test('should display the loading spinner when the book is not ready to display.', function () {
@@ -80,29 +79,29 @@
         });
 
         test('component content is correct.', function () {
-            element.set('_book', testBook);
+            element.set('_book', TEST_BOOK);
             element.set('_isBookReadyToDisplay', true);
             const shadowRoot = element.shadowRoot;
 
             const bookCover = shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.BOOK_COVER);
-            assert.equal(bookCover.src, testBook.image, 'Expecting the correct image to be rendered.');
+            assert.equal(bookCover.src, TEST_BOOK.image, 'Expecting the correct image to be rendered.');
 
             const bookTitle = shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.BOOK_TITLE);
-            assert.equal(bookTitle.innerHTML.trim(), testBook.title, 'Expecting the correct title to be rendered.');
+            assert.equal(bookTitle.innerHTML.trim(), TEST_BOOK.title, 'Expecting the correct title to be rendered.');
 
             const bookAuthor = shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.BOOK_AUTHOR);
-            assert.equal(bookAuthor.innerHTML.trim(), testBook.author, 'Expecting the correct author to be rendered.');
+            assert.equal(bookAuthor.innerHTML.trim(), TEST_BOOK.author, 'Expecting the correct author to be rendered.');
 
             const bookCodeLink = shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.BOOK_CODE_LINK);
-            assert.equal(bookCodeLink.bookCode, testBook.isbn, 'Expecting the correct isbn to be set.');
-            assert.equal(bookCodeLink.bookTitle, testBook.title, 'Expecting the correct title to be set.');
+            assert.equal(bookCodeLink.bookCode, TEST_BOOK.isbn, 'Expecting the correct isbn to be set.');
+            assert.equal(bookCodeLink.bookTitle, TEST_BOOK.title, 'Expecting the correct title to be set.');
 
             const bookStatusMessage = shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.STATUS_MESSAGE);
             assert.equal(bookStatusMessage.innerHTML.trim(), '3 available.\nScan QR code to borrow.',
                 'Expecting the correct status message to be rendered.');
 
             const bookDescription = shadowRoot.querySelector(BOOK_DETAILS_SELECTORS.BOOK_DESCRIPTION);
-            assert.equal(bookDescription.innerHTML.trim(), testBook.description, 'Expecting the correct description to be rendered.');
+            assert.equal(bookDescription.innerHTML.trim(), TEST_BOOK.description, 'Expecting the correct description to be rendered.');
         });
     });
 </script>

From 5da31a1e8a312c00ec9ecf97f5ceb548df5ff01d Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 12 Jun 2018 11:53:50 +0300
Subject: [PATCH 89/92] Fix ES-lint issues, wrap loading spinner into `dom-if`
 to prevent `paper-spinner` hiding delay.

---
 .../exlibris-book-details-redirect-link.html  |  2 +-
 .../book/exlibris-book-details.html           | 21 ++++++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index debbfe1..3060166 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -142,7 +142,7 @@
                  *
                  * @param {string} bookCode the book unique code (ISBN, ASIN).
                  * @param {string} bookTitle the book title.
-                 * @returns {{title: string, value: string|undefined}} the title and the value of link.
+                 * @returns {Object} the title and the value of link.
                  * @private
                  */
                 _calculateReference(bookCode, bookTitle) {
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 553ec1c..531c5fc 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -19,6 +19,7 @@
   -->
 
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../bower_components/polymer/lib/elements/dom-if.html">
 <link rel="import" href="../../../bower_components/app-route/app-route.html">
 <link rel="import" href="../../../bower_components/paper-button/paper-button.html">
 <link rel="import" href="../../../bower_components/iron-image/iron-image.html">
@@ -54,8 +55,9 @@
             }
 
             #loading-spinner {
-                margin-top: 20%;
+                margin-top: 10%;
             }
+
             #head-part {
                 @apply --layout-horizontal;
             }
@@ -156,8 +158,10 @@
                 route="{{route}}"
                 pattern="/:id/:title"
                 data="{{_routeData}}"></app-route>
-        <paper-spinner-lite id="loading-spinner" class="thick"
-                            active="[[!_isBookReadyToDisplay]]"></paper-spinner-lite>
+
+        <template is="dom-if" if="[[!_isBookReadyToDisplay]]">
+            <paper-spinner-lite id="loading-spinner" class="thick" active></paper-spinner-lite>
+        </template>
         <div id="book-card" hidden="[[!_isBookReadyToDisplay]]">
             <div id="head-part">
                 <iron-image id="book-cover" src="[[_book.image]]"
@@ -191,6 +195,8 @@
                 [[_book.description]]
             </div>
         </div>
+
+
     </template>
 
     <script>
@@ -524,20 +530,21 @@
 
             // The temporary server response imitation
             __imitateServerResponse(bookId) {
-                const random = Math.floor(Math.random() * 4) + 1;
-                if (random % 4 === 0) {
+                const random = Math.round(Math.random());
+                const SERVER_RESPONSE_DELAY = 1000;
+                if (random) {
                     setTimeout(() => {
                         this.dispatch({
                             type: ExlibrisApp.ExlibrisActions.BOOK_NOT_FOUND,
                         });
-                    }, 1000);
+                    }, SERVER_RESPONSE_DELAY);
                 } else {
                     setTimeout(() => {
                         this.dispatch({
                             type: ExlibrisApp.ExlibrisActions.BOOK_RECEIVED,
                             bookId: bookId
                         });
-                    }, 1000);
+                    }, SERVER_RESPONSE_DELAY);
                 }
             }
         }

From 70015248b44a009fb77cde3331b7f4b2b0083a57 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Tue, 12 Jun 2018 12:47:28 +0300
Subject: [PATCH 90/92] Fix several code formatting mistakes.

---
 client-web/src/exlibris-app/actions/exlibris-actions.html    | 2 --
 .../book/exlibris-book-details-redirect-link.html            | 5 ++---
 client-web/src/exlibris-app/book/exlibris-book-details.html  | 2 --
 3 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/client-web/src/exlibris-app/actions/exlibris-actions.html b/client-web/src/exlibris-app/actions/exlibris-actions.html
index 8dcdf5b..fa6cfe1 100644
--- a/client-web/src/exlibris-app/actions/exlibris-actions.html
+++ b/client-web/src/exlibris-app/actions/exlibris-actions.html
@@ -19,7 +19,6 @@
   -->
 
 <script>
-
     ExlibrisApp.ExlibrisActions = {
         FETCH_BOOKS: "FETCH_BOOKS",
         FIND_BOOK_BY_ID: "FIND_BOOK_BY_ID",
@@ -29,5 +28,4 @@
         RESERVE_BOOK: "RESERVE_BOOK",
         EXTEND_LOAN_PERIOD: "EXTEND_LOAN_PERIOD"
     }
-
 </script>
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
index 3060166..edd7aab 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details-redirect-link.html
@@ -73,9 +73,8 @@
              *
              * Generates the link to the one of the global book services to
              * open it in the new tab. The external service choice depends
-             * on the book code format.
-             *
-             * If the passed code does not satisfy any pattern, shows it as a plain text.
+             * on the book code format. If the passed code does not satisfy
+             * any pattern, shows it as a plain text.
              *
              * @customElement
              * @polymer
diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 531c5fc..80772b9 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -195,8 +195,6 @@
                 [[_book.description]]
             </div>
         </div>
-
-
     </template>
 
     <script>

From 6a1d2451f84cf90d570cd2e4df67fc73e6b9ff2d Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 18 Jun 2018 11:05:09 +0300
Subject: [PATCH 91/92] Make required changes.

---
 .../book/exlibris-book-details.html            |  2 +-
 .../reducers/exlibris-reducer.html             | 18 +++++-------------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 80772b9..0757faf 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -202,7 +202,7 @@
          * 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.
+         * specific messages, the book cover and the button when it is supported.
          * The book is specified by the route which contains the book Id.
          *
          * @customElement
diff --git a/client-web/src/exlibris-app/reducers/exlibris-reducer.html b/client-web/src/exlibris-app/reducers/exlibris-reducer.html
index b4799be..08e0d24 100644
--- a/client-web/src/exlibris-app/reducers/exlibris-reducer.html
+++ b/client-web/src/exlibris-app/reducers/exlibris-reducer.html
@@ -59,7 +59,11 @@
                     // 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);
+                    const book = [
+                        ...state.allBooks,
+                        ...state.expectedSoonBooks,
+                        ...state.borrowedBooks,
+                        ...state.reservedBooks].find((item) => item.id === id);
                     return Object.assign({}, state, {
                         bookDetails: {
                             book: book,
@@ -98,17 +102,5 @@
                     return state;
             }
         };
-
-        function findElement(id) {
-            let element;
-            let i = 1;
-            while (!element && i < arguments.length) {
-                if (Array.isArray(arguments[i])) {
-                    element = arguments[i].find(el => el.id === id);
-                }
-                i++;
-            }
-            return element;
-        }
     }
 </script>

From 3e5a75ad39a45c9e4bff20684e56815dad6e01c2 Mon Sep 17 00:00:00 2001
From: "yegor.udovchenko" <yegor.udovchenko@teamdev.com>
Date: Mon, 18 Jun 2018 11:22:59 +0300
Subject: [PATCH 92/92] Improve docs.

---
 .../book/exlibris-book-details.html           | 54 +++++++++----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/client-web/src/exlibris-app/book/exlibris-book-details.html b/client-web/src/exlibris-app/book/exlibris-book-details.html
index 0757faf..36b621f 100644
--- a/client-web/src/exlibris-app/book/exlibris-book-details.html
+++ b/client-web/src/exlibris-app/book/exlibris-book-details.html
@@ -201,9 +201,9 @@
         /**
          * 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.
-         * The book is specified by the route which contains the book Id.
+         * This component allows to display a book details page with a book
+         * specific messages, a book cover and a button when it is supported.
+         * A book is specified by a route which contains a book Id.
          *
          * @customElement
          * @polymer
@@ -220,17 +220,17 @@
                      * Fired when the book loading process has completed with failure.
                      *
                      * @event exlibris-book-details-not-found
-                     * @param {{detail.path: string}} the route path which caused the book loading failure.
+                     * @param {{detail.path: string}} a route path which caused a book loading failure.
                      */
 
                     /**
-                     * The URL part that defines the book Id.
+                     * A URL part that defines the book Id.
                      * Should match the pattern `/:id/:title`
                      */
                     route: String,
 
                     /**
-                     * The book object to display.
+                     * A book object to display.
                      *
                      * @type {{
                      *          id: string,
@@ -251,7 +251,7 @@
                     },
 
                     /**
-                     * The book loading status.
+                     * A book loading status.
                      */
                     _loading: {
                         type: Boolean,
@@ -259,7 +259,7 @@
                     },
 
                     /**
-                     * Indicates the book loading failure.
+                     * Indicates a book loading failure.
                      */
                     _notFound: {
                         type: Boolean,
@@ -268,7 +268,7 @@
                     },
 
                     /**
-                     * The book details button.
+                     * A book details button.
                      *
                      * @type {{title: string, clickHandler: function} | null}
                      */
@@ -278,7 +278,7 @@
                     },
 
                     /**
-                     * The message reflecting the status of the book.
+                     * A message reflecting a status of a book.
                      */
                     _statusMessage: {
                         type: String,
@@ -286,8 +286,8 @@
                     },
 
                     /**
-                     * The message about the status of the book.
-                     * Shown instead of the button when it is not supported for the book.
+                     * A message about a status of a book.
+                     * Shown instead of a button when it is not supported for a book.
                      */
                     _actionUnsupportedMessage: {
                         type: String,
@@ -295,7 +295,7 @@
                     },
 
                     /**
-                     * Contains the resolved route parameters.
+                     * Contains a resolved route parameters.
                      *
                      * @type {{title: string, id: string} | null}
                      */
@@ -346,7 +346,7 @@
             }
 
             /**
-             * Dispatches the action to find the book by Id.
+             * Dispatches an action to find the book by Id.
              *
              * @param {{title: string, id: string}} routeData the resolved route parameters.
              * @private
@@ -359,15 +359,15 @@
             }
 
             /**
-             * Sets the appropriate button title and the click handler function
+             * Sets an appropriate button title and a click handler function
              * according to the passed book parameters.
              *
              * @param {string} status
-             *              the book status represented by one of the ExlibrisApp.BookStatus values.
+             *              a book status represented by one of the ExlibrisApp.BookStatus values.
              * @param {boolean} isAllowedLoanExtension
              *              indicates loan extension possibility for borrowed books.
              * @returns {{title: string, clickHandler: function}}
-             *              the title and the click handler function of the button for the specified
+             *              a title and a click handler function of a button for the specified
              *              book parameters.
              * @private
              */
@@ -404,11 +404,11 @@
             }
 
             /**
-             * Calculates the appropriate status message
+             * Calculates an appropriate status message
              * according to the passed book.
              *
-             * @param {Book} book the book object.
-             * @returns {string} the status message for the specified book.
+             * @param {Book} book a book object.
+             * @returns {string} a status message for the specified book.
              * @private
              */
             _calculateStatusMessage(book) {
@@ -446,12 +446,12 @@
             }
 
             /**
-             * Calculates the appropriate message if the button is not supported
+             * Calculates an appropriate message if a button is not supported
              * for the passed book.
              *
-             * @param {string} bookStatus the book status represented by one of the ExlibrisApp.BookStatus values.
+             * @param {string} bookStatus a book status represented by one of the ExlibrisApp.BookStatus values.
              * @param {boolean} isAllowedLoanExtension indicates is there ability to extend loan or not.
-             * @returns {string} the message to show when the action button is not supported
+             * @returns {string} a message to show when an action button is not supported
              *                   for the specified book.
              * @private
              */
@@ -463,9 +463,9 @@
             }
 
             /**
-             * Fires the custom event when the book loading process has completed with failure.
+             * Fires a custom event when a book loading process has completed with failure.
              *
-             * @param {boolean} notFound shows is the book loading process has completed with failure.
+             * @param {boolean} notFound shows is a book loading process has completed with failure.
              * @private
              */
             _notFoundChanged(notFound) {
@@ -475,13 +475,13 @@
             }
 
             /**
-             * Monitors the book cover loading changes.
+             * Monitors a book cover loading changes.
              *
              * This process is the most time-consuming after the book has been received. Sets the
              * `_isBookReadyToDisplay` property to `true` when the book is received without failures
              * and the cover loading process has finished.
              *
-             * @param {CustomEvent} e fired when the book cover `loading` property changes.
+             * @param {CustomEvent} e fired when a book cover `loading` property changes.
              * @private
              */
             _coverLoadingChanged(e) {