From 9dd80fddb0af17517993ed32eac453bf15e79c03 Mon Sep 17 00:00:00 2001
From: Olivier Lamy <olamy@apache.org>
Date: Mon, 27 Feb 2012 16:58:00 +0000
Subject: [PATCH] move search screen to a tab/pill model

git-svn-id: https://svn.apache.org/repos/asf/archiva/trunk@1294223 13f79535-47bb-0310-9956-ffa450edef68
---
 .../src/main/webapp/css/chosen.css            |  4 +-
 .../src/main/webapp/js/archiva/search.js      | 16 +++-
 .../webapp/js/archiva/templates/search.html   | 91 +++++++++++++------
 .../src/main/webapp/js/chosen.jquery.js       |  6 +-
 4 files changed, 80 insertions(+), 37 deletions(-)

diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/css/chosen.css b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/css/chosen.css
index a08d816ca..568e01836 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/css/chosen.css
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/css/chosen.css
@@ -256,9 +256,6 @@
   font-style: normal;
 }
 
-.chzn-results ul {
-  z-index: 1000;
-}
 
 .chzn-container .chzn-results .highlighted em {
   background: transparent;
@@ -277,6 +274,7 @@
 }
 .chzn-container-multi .chzn-drop .result-selected {
   display: none;
+  z-index: 999;
 }
 .chzn-container .chzn-results-scroll {
   background: white;
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/search.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/search.js
index 857bd8e9b..5a5dd3f54 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/search.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/search.js
@@ -548,9 +548,11 @@ $(function() {
   SearchViewModel=function(){
     this.searchParameters=ko.observable(new SearchParameters());
     this.observableRepoIds=ko.observableArray([]);
+    this.selectedRepoIds=[];
 
     basicSearch=function(){
-      $.log("query:"+this.searchParameters().basicQueryString())
+      $.log("query:"+this.searchParameters().basicQueryString());
+      $.log("repoIds:"+this.selectedRepoIds);
     }
 
     advancedSearch=function(){
@@ -559,6 +561,7 @@ $(function() {
   }
 
   displaySearch=function(){
+    clearUserMessages();
     var mainContent=$("#main-content");
     mainContent.html(mediumSpinnerImg());
     $.ajax("restServices/archivaServices/searchService/observableRepoIds", {
@@ -569,7 +572,16 @@ $(function() {
           var searchViewModel=new SearchViewModel();
           searchViewModel.observableRepoIds(mapStringList(data));
           ko.applyBindings(searchViewModel,mainContent.find("#search-artifacts-div").get(0));
-          mainContent.find("#search-basic-repostories-select" ).chosen();
+          mainContent.find("#search-basic-repostories-select" ).chosen()
+              .change(function(){
+                                  searchViewModel.selectedRepoIds=[];
+                                  mainContent.find("#search-basic-repositories" )
+                                      .find(".chzn-choices li span").each(function(i,span){
+                                                  searchViewModel.selectedRepoIds.push($(span).html());
+                                                  }
+                                                );
+
+                                });
         }
     });
 
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/templates/search.html b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/templates/search.html
index 780b0c739..079ff1e54 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/templates/search.html
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/archiva/templates/search.html
@@ -154,14 +154,21 @@
   <div class="page-header">
     <h3>${$.i18n.prop('search.artifact.header')}</h3>
   </div>
-  <div class="accordion" id="search-artifacts-accordion">
-    <div class="accordion-group">
-      <div class="accordion-heading">
-        <a class="accordion-toggle" href="#search-form-collapse" data-parent="#search-artifacts-accordion" data-toggle="collapse">${$.i18n.prop('search.artifact.form.header')}</a>
-      </div>
-      <div id="search-form-collapse" class="accordion-body collapse in">
+  <div id="search-artifacts-tabs">
+    <div class="tabbable tabs-below">
+      <ul class="nav nav-tabs">
+        <li class="active">
+          <a data-toggle="tab" href="#search-form-collapse">${$.i18n.prop('search.artifact.form.header')}</a>
+        </li>
+          <li class="">
+            <a data-toggle="tab" href="#search-results">${$.i18n.prop('search.artifact.results.header')}</a>
+          </li>
+      </ul>
+      <div class="tab-content">
+
+      <div id="search-form-collapse" class="tab-pane active">
         <div class="tabbable tabs-below">
-          <ul class="nav nav-tabs">
+          <ul class="nav nav-pills">
             <li class="active">
               <a href="#search-basic-form-pane" data-toggle="tab">${$.i18n.prop('search.artifact.search.form.basic')}</a>
             </li>
@@ -172,35 +179,31 @@
               <a href="#search-osgi-form-pane" data-toggle="tab">${$.i18n.prop('search.artifact.search.form.osgi')}</a>
             </li>
           </ul>
-          <div class="tab-content">
-            <div class="tab-pane active" id="search-basic-form-pane">
-              <form class="well form-horizontal" id="search-basic-form">
+          <div class="pill-content">
+            <div class="pill-pane active" id="search-basic-form-pane">
+              <form class="well form-inline" id="search-basic-form">
                 <fieldset>
-                  <div class="control-group">
-                    <label class="control-label" for="search-terms">${$.i18n.prop('search.artifact.search.form.query.terms')}</label>
-                    <div class="controls">
-                      <input type="text" class="input-medium search-query" id="search-terms" name="search-terms" size="50"
-                             data-bind="value: searchParameters().basicQueryString"/>
-                    </div>
-                  </div>
-                  <div class="control-group">
-
-
-                    <div>
-                      <select data-placeholder="Choose a Country" id="search-basic-repostories-select" class="chzn-select"
-                              multiple style="z-index: 1000" tabindex="10">
+                    <div class="control-group" id="search-basic-repositories">
+                      <select data-placeholder="${$.i18n.prop('search.artifact.search.form.query.repositories')}"
+                              id="search-basic-repostories-select" class="chzn-select"
+                              multiple style="width:350px;" tabindex="4">
                         <option value="">All</option>
                         {{each(i,repoId) observableRepoIds}}
                           <option value="${repoId}">${repoId}</option>
                         {{/each}}
                       </select>
+                  </div>
+                  <div class="control-group">
+                    <label class="control-label" for="search-terms"></label>
+                    <div class="controls">
+                      <input type="text" class="input-medium search-query" id="search-terms" name="search-terms" size="50"
+                             data-bind="value: searchParameters().basicQueryString" placeholder="${$.i18n.prop('search.artifact.search.form.query.terms')}"/>
                     </div>
                   </div>
-                </fieldset>
                 <button type="submit" class="btn" data-bind="click: basicSearch">Search</button>
               </form>
             </div>
-            <div class="tab-pane" id="search-advanced-form-pane">
+            <div class="pill-pane" id="search-advanced-form-pane">
                 <form class="well form-horizontal" id="search-advanced-form">
                   <fieldset>
                     <div class="control-group">
@@ -210,23 +213,51 @@
                                data-bind="value: searchParameters().searchRequest().groupId"/>
                       </div>
                     </div>
+                    <div class="control-group">
+                      <label class="control-label" for="artifactId">${$.i18n.prop('search.artifact.search.form.query.artifactId')}</label>
+                      <div class="controls">
+                        <input type="text" class="input-medium search-query" id="artifactId" name="artifactId" size="50"
+                               data-bind="value: searchParameters().searchRequest().artifactId"/>
+                      </div>
+                    </div>
+                    <div class="control-group">
+                      <label class="control-label" for="artifactId">${$.i18n.prop('search.artifact.search.form.query.version')}</label>
+                      <div class="controls">
+                        <input type="text" class="input-medium search-query" id="version" name="version" size="50"
+                               data-bind="value: searchParameters().searchRequest().version"/>
+                      </div>
+                    </div>
+                    <div class="control-group">
+                      <label class="control-label" for="artifactId">${$.i18n.prop('search.artifact.search.form.query.packaging')}</label>
+                      <div class="controls">
+                        <input type="text" class="input-medium search-query" id="packaging" name="packaging" size="50"
+                               data-bind="value: searchParameters().searchRequest().packaging"/>
+                      </div>
+                    </div>
+                    <div class="control-group">
+                      <label class="control-label" for="artifactId">${$.i18n.prop('search.artifact.search.form.query.className')}</label>
+                      <div class="controls">
+                        <input type="text" class="input-medium search-query" id="className" name="className" size="50"
+                               data-bind="value: searchParameters().searchRequest().className"/>
+                      </div>
+                    </div>
                   </fieldset>
                   <button type="submit" class="btn" data-bind="click: advancedSearch">Search</button>
                 </form>
             </div>
-            <div class="tab-pane" id="search-osgi-form-pane">
+            <div class="pill-pane" id="search-osgi-form-pane">
               <p>osgi search form.</p>
             </div>
           </div>
         </div>
       </div>
 
-      <div class="accordion-heading">
-        <a class="accordion-toggle" href="#search-results" data-parent="#search-artifacts-accordion" data-toggle="collapse">${$.i18n.prop('search.artifact.results.header')}</a>
-      </div>
-      <div id="search-results" class="accordion-body collapse">
+
+      <div id="search-results" class="tab-pane">
         results
       </div>
+
+      </div>
     </div>
   </div>
 
diff --git a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/chosen.jquery.js b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/chosen.jquery.js
index 9e5793884..67edfb04c 100644
--- a/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/chosen.jquery.js
+++ b/archiva-modules/archiva-web/archiva-webapp-js/src/main/webapp/js/chosen.jquery.js
@@ -305,7 +305,7 @@ Copyright (c) 2011 by Harvest
         style: 'width: ' + this.f_width + 'px;'
       });
       if (this.is_multiple) {
-        container_div.html('<ul class="chzn-choices"><li class="search-field"><input type="text" value="' + this.default_text + '" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;"><ul class="chzn-results"></ul></div>');
+        container_div.html('<ul class="chzn-choices"><li class="search-field"><input type="text" value="' + this.default_text + '" class="default" autocomplete="off" style="width:25px;" /></li></ul><div class="chzn-drop" style="left:-9000px;z-index: 999"><ul class="chzn-results"></ul></div>');
       } else {
         container_div.html('<a href="javascript:void(0)" class="chzn-single"><span>' + this.default_text + '</span><div><b></b></div></a><div class="chzn-drop" style="left:-9000px;"><div class="chzn-search"><input type="text" autocomplete="off" /></div><ul class="chzn-results"></ul></div>');
       }
@@ -317,7 +317,9 @@ Copyright (c) 2011 by Harvest
       dd_width = this.f_width - get_side_border_padding(this.dropdown);
       this.dropdown.css({
         "width": dd_width + "px",
-        "top": dd_top + "px"
+        "top": dd_top + "px",
+        "z-index": "999",
+        "display": "block"
       });
       this.search_field = this.container.find('input').first();
       this.search_results = this.container.find('ul.chzn-results').first();
-- 
2.39.5