ui: enable autocomplete search input

* Adds new assets bundle for the search-bar autocomplete. * Renames assets admin bundle. * Standardize the autocomplete search input template code. * Fixes search view by injecting the viewcode. * Uses rero-ils-ui version 0.0.3. Signed-off-by: Johnny Mariéthoz <[email protected]>
rero · Dec 3, 2019 · 4fbb351 · 4fbb351
1 parent bf96f11
commit 4fbb351
Show file tree

Hide file tree

Showing 9 changed files with 33 additions and 68 deletions.
diff --git a/rero_ils/bundles.py b/rero_ils/bundles.py
@@ -77,7 +77,7 @@ def catalog(domain):
     'node_modules/@rero/rero-ils-ui/dist/admin/main.*.js',
     output='gen/rero_ils_admin_ui.%(version)s.js',
     npm={
-        '@rero/rero-ils-ui': '~0.0.2'
+        '@rero/rero-ils-ui': '~0.0.3'
     }
 )
 
@@ -89,6 +89,15 @@ def catalog(domain):
     'node_modules/@rero/rero-ils-ui/dist/public-search/main.*.js',
     output='gen/rero_ils_public-search_ui.%(version)s.js',
     npm={
-        '@rero/rero-ils-ui': '~0.0.2'
+        '@rero/rero-ils-ui': '~0.0.3'
+    }
+)
+
+search_bar_ui_js = NpmBundle(
+    'node_modules/@rero/rero-ils-ui/dist/search-bar/polyfills.*.js',
+    'node_modules/@rero/rero-ils-ui/dist/search-bar/main.*.js',
+    output='gen/rero_ils_search-bar_ui.%(version)s.js',
+    npm={
+        '@rero/rero-ils-ui': '~0.0.3'
     }
 )
diff --git a/rero_ils/templates/rero_ils/frontpage.html b/rero_ils/templates/rero_ils/frontpage.html
@@ -31,25 +31,15 @@
       <h1>{{ _('Get into your library') }}</h1>
       <h2>{{ _('A wealth of knowledge just a click away') }}</h2>
     </header>
-    <!-- <div class="container d-none d-md-block">
-    <search-autocomplete placeholder="{{ _('What\'s on your mind?') }}" action="/{{ viewcode }}{{config.RERO_ILS_THEME_SEARCH_ENDPOINT}}" size="large" viewcode="{{ viewcode }}"></search-autocomplete>
+
+    <div class="container d-none d-md-block">
+      <main-search-bar placeholder="{{ _('What\'s on your mind?') }}" size="large" viewcode="{{ viewcode or config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE }}"></main-search-bar>
     </div>
+
     <div class="container d-block d-md-none">
-      <search-autocomplete placeholder="{{ _('What\'s on your mind?') }}" action="/{{ viewcode }}{{config.RERO_ILS_THEME_SEARCH_ENDPOINT}}" viewcode="{{ viewcode }}"></search-autocomplete>
-    </div> -->
-    <!-- remove this once we have the autocomplete working -->
-    <div class="container">
-      <form action="/{{ viewcode|default(config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE) }}{{config.RERO_ILS_THEME_SEARCH_ENDPOINT}}" class="form-inline">
-        <div class="input-group input-group-lg w-100">
-          <input class="form-control" type="search" name="q" placeholder="{{_('Search')}}" aria-label="Search" aria-describedby="button-search">
-          <div class="input-group-append">
-            <button class="btn btn-light" type="submit" id="button-search"><i class="fa fa-search"></i></button>
-          </div>
-        </div>
-      </form>
+      <main-search-bar placeholder="{{ _('What\'s on your mind?') }}" viewcode="{{ viewcode or config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE }}"></main-search-bar>
     </div>
 
-    <!-- <app-root></app-root> -->
     <footer class="text-center bg-danger text-white">
       <p class="py-2 mb-0">
         {{ _('Software under development') }}

diff --git a/rero_ils/templates/rero_ils/header.html b/rero_ils/templates/rero_ils/header.html
@@ -32,20 +32,13 @@
             </div>
           {%- endif %}
         {%- endblock navbar_brand %}
+
         {%- block navbar_search %}
-          {%- if config.THEME_SEARCHBAR %}
-            <div class="align-self-center pr-2 flex-grow-1">
-              <form action="/{{ viewcode|default(config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE) }}{{config.RERO_ILS_THEME_SEARCH_ENDPOINT}}" class="form-inline">
-                <div class="input-group input-group-sm w-100">
-                  <input class="form-control" type="search" name="q" placeholder="{{_('Search')}}" aria-label="Search" aria-describedby="button-search">
-                  <div class="input-group-append">
-                    <button class="btn btn-light" type="submit" id="button-search"><i class="fa fa-search"></i></button>
-                  </div>
-                </div>
-              </form>
-            </div>
-          {%- endif %}
+          <div class="align-self-center pr-2 flex-grow-1">
+            <main-search-bar placeholder="{{ _('Search') }}" viewcode="{{ viewcode or config.RERO_ILS_SEARCH_GLOBAL_VIEW_CODE }}"></main-search-bar>
+          </div>
         {%- endblock navbar_search %}
+
         {%- block navbar_menus %}
           <div class="align-self-center">
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

diff --git a/rero_ils/templates/rero_ils/javascript.html b/rero_ils/templates/rero_ils/javascript.html
@@ -17,5 +17,12 @@
 
 #}
 {%- block javascript %}
-{% assets "rero_ils_main_js" %}<script src="{{ ASSET_URL }}"></script>{% endassets %}
+{% assets "rero_ils_main_js" %}
+  <script src="{{ ASSET_URL }}"></script>
+{% endassets %}
+
+{% assets "rero_ils_search_bar_ui_js" %}
+  <script src="{{ ASSET_URL }}"></script>
+{% endassets %}
+
 {%- endblock javascript %}
diff --git a/rero_ils/templates/rero_ils/professional.html b/rero_ils/templates/rero_ils/professional.html
@@ -30,7 +30,7 @@
 
 <body>
     <admin-root></admin-root>
-    {% assets "rero_ils_ui_js" %}
+    {% assets "rero_ils_admin_ui_js" %}
         <script src="{{ ASSET_URL }}"></script>
     {% endassets %}
 </body>

diff --git a/rero_ils/templates/rero_ils/search.html b/rero_ils/templates/rero_ils/search.html
@@ -18,9 +18,6 @@
 #}
 
 {% extends 'rero_ils/page.html' %}
-{%- block page_header %}
-  {% include 'rero_ils/search_header.html' %}
-{%- endblock page_header %}
 
 {%- block page_body %}
 <div class="container ">

diff --git a/rero_ils/templates/rero_ils/search_header.html b/rero_ils/templates/rero_ils/search_header.html
diff --git a/rero_ils/views.py b/rero_ils/views.py
@@ -263,7 +263,7 @@ def set_language():
 @check_organisation_viewcode
 def search(viewcode, recordType):
     """Search page ui."""
-    return render_template(current_app.config.get('SEARCH_UI_SEARCH_TEMPLATE'))
+    return render_template(current_app.config.get('SEARCH_UI_SEARCH_TEMPLATE'), viewcode=viewcode)
 
 
 @blueprint.app_template_filter()

diff --git a/setup.py b/setup.py
@@ -117,7 +117,8 @@ def run(self):
             'rero_ils_main_js = rero_ils.bundles:js',
             'rero_ils_documents_detailed_js = \
                 rero_ils.modules.documents.bundles:detailed_js',
-            'rero_ils_ui_js = rero_ils.bundles:admin_ui_js',
+            'rero_ils_admin_ui_js = rero_ils.bundles:admin_ui_js',
+            'rero_ils_search_bar_ui_js = rero_ils.bundles:search_bar_ui_js',
             'rero_ils_public_search_ui_js = rero_ils.bundles:public_search_ui_js',
         ],
         'dojson.cli': [