From 28b956cfaa5d2d787fa493c37bded0d1f7006cbb Mon Sep 17 00:00:00 2001
From: Christoph Ladurner <christoph.ladurner@tugraz.at>
Date: Tue, 19 Jul 2022 23:43:45 +0200
Subject: [PATCH] change searchbar layout and use invenio-app-rdm searchbar

the searchbar is now on the top of the header, left of the language switch. the
new searchbar introduced a new feature, it could handle different indices like
all repository or communities. But the problem is where to place the new search
bar. for the moment the compromise is to put it on the top right.

this position may not be compatible with tugraz layout.
---
 .../js/invenio_theme_tugraz/theme.js          | 15 +++++++++++++
 .../invenio_theme_tugraz/header.html          | 19 ----------------
 .../invenio_theme_tugraz/navbar.html          | 22 +++++--------------
 3 files changed, 20 insertions(+), 36 deletions(-)

diff --git a/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/theme.js b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/theme.js
index 0191d6b..1ff4b72 100644
--- a/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/theme.js
+++ b/invenio_theme_tugraz/assets/semantic-ui/js/invenio_theme_tugraz/theme.js
@@ -1,5 +1,9 @@
 import $ from "jquery";
 import "semantic-ui-css";
+import { MultipleOptionsSearchBar } from "@js/invenio_search_ui/components";
+import { i18next } from "@translations/invenio_app_rdm/i18next";
+import ReactDOM from "react-dom";
+import React from "react";
 
 // called on document ready
 $(function () {
@@ -37,3 +41,14 @@ export function toggleVisibility(id) {
 }
 
 window.toggleVisibility = toggleVisibility;
+
+const headerSearchbar = document.getElementById("header-search-bar");
+const searchBarOptions = JSON.parse(headerSearchbar.dataset.options);
+
+ReactDOM.render(
+  <MultipleOptionsSearchBar
+    options={searchBarOptions}
+    placeholder={i18next.t("Search records...")}
+  />,
+  headerSearchbar
+);
diff --git a/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html b/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html
index 36922e5..51bb619 100644
--- a/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html
+++ b/invenio_theme_tugraz/templates/invenio_theme_tugraz/header.html
@@ -79,23 +79,4 @@
     {%- include "invenio_theme/breadcrumbs.html" %}
   {%- endblock breadcrumbs %}
   #}
-
-  <div style="display: none;">
-    {% include "invenio_app_rdm/searchbar.html" %}
-  </div>
-
-  <div class="ui container">
-    <div class="ui center aligned grid">
-      <div class="sixteen wide column">
-        <form action="{{config.THEME_SEARCH_ENDPOINT}}" class="ui form" role="search">
-          <div class="ui fluid big action icon input">
-            <input type="text" name="q" autofocus="autofocus" placeholder="{{ _("Type and press enter to search") }}">
-            <button type="submit" class="ui icon search button">
-              <i class="icon search"></i>
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
 </div>
diff --git a/invenio_theme_tugraz/templates/invenio_theme_tugraz/navbar.html b/invenio_theme_tugraz/templates/invenio_theme_tugraz/navbar.html
index 4248fa2..e4247f1 100644
--- a/invenio_theme_tugraz/templates/invenio_theme_tugraz/navbar.html
+++ b/invenio_theme_tugraz/templates/invenio_theme_tugraz/navbar.html
@@ -11,8 +11,11 @@
     <div class="short-menu-left">
       <div id="all-menu-top-left-item">
         <div class="short-menu-left-search">
-          {%- if config.I18N_LANGUAGES %}
-          <div class="short-menu-left-lang" style="margin-right:10px; font-size:18px;">
+          <div style="display: inline-block;">
+            {% include "invenio_app_rdm/searchbar.html" %}
+          </div>
+
+          <div class="short-menu-left-lang">
             {%- for l in current_i18n.get_locales() %}
             {%- if current_i18n.language != l.language %}
             <a
@@ -20,21 +23,6 @@
             {%- endif %}
             {%- endfor %}
           </div>
-          {%- endif %}
-          <div class="search-icon-header">
-            <a href="{{url_for('invenio_search_ui.search')}}" class="no-decoration">
-              <svg class="short-menu-icon" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-                xmlns="http://www.w3.org/2000/svg" height="26.015" width="26.015" version="1.1"
-                xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
-                viewBox="0 0 26.01515 26.01515">
-                <g stroke-miterlimit="10" transform="translate(1,1)">
-                  <circle cy="8.5" cx="8.5" r="8" style="stroke-miterlimit:10;stroke-width:2"></circle>
-                  <path style="stroke-width:2;stroke-miterlimit:10;stroke-linecap:round" d="m14.156 14.156 9.344 9.344">
-                  </path>
-                </g>
-              </svg>
-            </a>
-          </div>
         </div>
       </div>
     </div>