From 2f82bb7e65e006a6f1c7e44a7637086d92cb3b44 Mon Sep 17 00:00:00 2001
From: Leo Depriester <leo.depriester@camptocamp.com>
Date: Tue, 1 Aug 2017 19:20:40 +0200
Subject: [PATCH 1/4] Fix design search form

---
 static/search.html    | 114 +++++++++++++++++++++++-------------------
 static/terraboard.css |   4 ++
 2 files changed, 66 insertions(+), 52 deletions(-)

diff --git a/static/search.html b/static/search.html
index 79e240ba..c6870841 100644
--- a/static/search.html
+++ b/static/search.html
@@ -1,63 +1,73 @@
-<form class="form-inline">
-    <div class="form-group">
+<div class="row">
+    <div class="col-sm-2">
         <label for="resource_type">Resource Type</label>
-        <ui-select id="resource_type"
-                   ng-model="$parent.resType"
-                   theme="bootstrap"
-                   ng-disabled="disabled"
-                   ng-change="doSearch()"
-                   style="min-width: 200px;"
-                   reset-search-input="false"
-                   title="Resource Type">
-            <ui-select-match placeholder="Resource Type">{{$parent.resType}}</ui-select-match>
-            <ui-select-choices repeat="k in resource_keys | filter: $select.search | orderBy">
-                {{k}}
-            </ui-select-choices>
-        </ui-select>
     </div>
-    <div class="form-group">
+    <div class="col-sm-2">
         <label for="resource_id">Resource ID</label>
-        <ui-select id="resource_id"
-                   ng-model="$parent.resID"
-                   theme="bootstrap"
-                   ng-disabled="disabled"
-                   ng-change="doSearch()"
-                   style="min-width: 200px;"
-                   reset-search-input="false"
-                   title="Resource ID">
-            <ui-select-match placeholder="Resource ID">{{$parent.resID}}</ui-select-match>
-            <ui-select-choices repeat="k in resource_names | filter: $parent.resType | filter: $select.search | orderBy">
-                {{k}}
-            </ui-select-choices>
-        </ui-select>
     </div>
-    <div class="form-group">
+    <div class="col-sm-2">
         <label for="attribute_key">Attribute Key</label>
-        <ui-select id="attribute_key"
-                   ng-model="$parent.attrKey"
-                   theme="bootstrap"
-                   ng-disabled="disabled"
-                   ng-change="doSearch()"
-                   style="min-width: 200px;"
-                   reset-search-input="false"
-                   title="Attribute Key">
-            <ui-select-match placeholder="Attribute Key">{{$parent.attrKey}}</ui-select-match>
-            <ui-select-choices
-                repeat="k in attribute_keys | filter: $select.search | orderBy"
-                refresh="refreshAttrKeys()"
-                refresh-delay="0">
-                {{k}}
-            </ui-select-choices>
-        </ui-select>
     </div>
-    <div class=form-group>
-        <label for="attribute_value">Attribute Value</label><br />
-        <input id="attribute_value" ng-model="$parent.attrVal" ng-change="doSearch()">
+    <div class="col-sm-2">
+        <label for="attribute_value">Attribute Value</label>
     </div>
-    <div class=form-group>
-        <button class="clear" ng-click="clearForm()">Reset</button>
+</div>
+<div class="row">
+    <div class="form-inline" role="form">
+        <div class="form-group col-sm-2">
+            <ui-select id="resource_type"
+                       ng-model="$parent.resType"
+                       theme="bootstrap"
+                       ng-disabled="disabled"
+                       ng-change="doSearch()"
+                       style="min-width: 200px;"
+                       reset-search-input="false"
+                       title="Resource Type">
+                <ui-select-match placeholder="Resource Type">{{$parent.resType}}</ui-select-match>
+                <ui-select-choices repeat="k in resource_keys | filter: $select.search | orderBy">
+                    {{k}}
+                </ui-select-choices>
+            </ui-select>
+        </div>
+        <div class="form-group col-sm-2">
+            <ui-select id="resource_id"
+                       ng-model="$parent.resID"
+                       theme="bootstrap"
+                       ng-disabled="disabled"
+                       ng-change="doSearch()"
+                       style="min-width: 200px;"
+                       reset-search-input="false"
+                       title="Resource ID">
+                <ui-select-match placeholder="Resource ID">{{$parent.resID}}</ui-select-match>
+                <ui-select-choices repeat="k in resource_names | filter: $parent.resType | filter: $select.search | orderBy">
+                    {{k}}
+                </ui-select-choices>
+            </ui-select>
+        </div>
+        <div class="form-group col-sm-2">
+            <ui-select id="attribute_key"
+                       ng-model="$parent.attrKey"
+                       theme="bootstrap"
+                       ng-disabled="disabled"
+                       ng-change="doSearch()"
+                       style="min-width: 200px;"
+                       reset-search-input="false"
+                       title="Attribute Key">
+                <ui-select-match placeholder="Attribute Key">{{$parent.attrKey}}</ui-select-match>
+                <ui-select-choices
+                    repeat="k in attribute_keys | filter: $select.search | orderBy"
+                    refresh="refreshAttrKeys()"
+                    refresh-delay="0">
+                    {{k}}
+                </ui-select-choices>
+            </ui-select>
+        </div>
+        <div class="form-group col-sm-2">
+            <input id="attribute_value" type="text" class="form-control" placeholder="Attribute Value" ng-model="$parent.attrVal" ng-change="doSearch()" />
+        </div>
+        <button class="clear btn btn-default" type="submit" ng-click="clearForm()">Reset</button>
     </div>
-</form>
+</div>
 <hr />
 
 <label id="navigate" ng-show="results">
diff --git a/static/terraboard.css b/static/terraboard.css
index f1f907cf..c08b7527 100644
--- a/static/terraboard.css
+++ b/static/terraboard.css
@@ -193,3 +193,7 @@ pre.sh_sourceCode .sh_oldfile {
   -moz-box-sizing: content-box;
   box-sizing: content-box;
 }
+.form-inline .ui-select-container .ui-select-toggle,
+.form-inline .ui-select-container .ui-select-search {
+  width: 100%;
+}

From 623d714349264e286f6f5a8ba869f2b9e25abe53 Mon Sep 17 00:00:00 2001
From: Leo Depriester <leo.depriester@camptocamp.com>
Date: Tue, 1 Aug 2017 19:55:13 +0200
Subject: [PATCH 2/4] Add permalink creation, use url params

---
 static/search.html    |  7 ++++---
 static/terraboard.css | 12 ++++++++++++
 static/terraboard.js  | 37 +++++++++++++++++++++++++++++++++++--
 3 files changed, 51 insertions(+), 5 deletions(-)

diff --git a/static/search.html b/static/search.html
index c6870841..480f6822 100644
--- a/static/search.html
+++ b/static/search.html
@@ -13,7 +13,7 @@
     </div>
 </div>
 <div class="row">
-    <div class="form-inline" role="form">
+    <form class="form-inline" role="form">
         <div class="form-group col-sm-2">
             <ui-select id="resource_type"
                        ng-model="$parent.resType"
@@ -65,8 +65,9 @@
         <div class="form-group col-sm-2">
             <input id="attribute_value" type="text" class="form-control" placeholder="Attribute Value" ng-model="$parent.attrVal" ng-change="doSearch()" />
         </div>
-        <button class="clear btn btn-default" type="submit" ng-click="clearForm()">Reset</button>
-    </div>
+        <button class="btn btn-primary" type="submit" ng-click="createPermalink()">Permalink</button>
+        <button class="clear btn btn-warning" ng-click="clearForm()">Reset</button>
+    </form>
 </div>
 <hr />
 
diff --git a/static/terraboard.css b/static/terraboard.css
index c08b7527..44b256e1 100644
--- a/static/terraboard.css
+++ b/static/terraboard.css
@@ -197,3 +197,15 @@ pre.sh_sourceCode .sh_oldfile {
 .form-inline .ui-select-container .ui-select-search {
   width: 100%;
 }
+.ui-select-match-text{
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 40px;
+}
+.ui-select-toggle > .btn.btn-link {
+  margin-right: 10px;
+  top: 6px;
+  position: absolute;
+  right: 10px;
+}
diff --git a/static/terraboard.js b/static/terraboard.js
index 35644657..50576eaf 100644
--- a/static/terraboard.js
+++ b/static/terraboard.js
@@ -255,7 +255,7 @@ app.controller("tbStateCtrl", ['$scope', '$http', '$location', function($scope,
     });
 }]);
 
-app.controller("tbSearchCtrl", ['$scope', '$http', '$location', '$routeParams', function($scope, $http) {
+app.controller("tbSearchCtrl", ['$scope', '$http', '$location', '$routeParams', function($scope, $http, $location) {
     $http.get('api/resource/types').then(function(response){
         $scope.resource_keys = response.data;
     });
@@ -304,6 +304,18 @@ app.controller("tbSearchCtrl", ['$scope', '$http', '$location', '$routeParams',
     }
 
     // On page load
+    if ($location.search().type != "") {
+        $scope.resType = $location.search().type;
+    }
+    if ($location.search().name != "") {
+        $scope.resID = $location.search().name;
+    }
+    if ($location.search().key != "") {
+        $scope.attrKey = $location.search().key;
+    }
+    if ($location.search().val != "") {
+        $scope.attrVal = $location.search().value;
+    }
     $scope.doSearch(1);
 
     $scope.clearForm = function() {
@@ -312,6 +324,27 @@ app.controller("tbSearchCtrl", ['$scope', '$http', '$location', '$routeParams',
         $scope.attrKey = undefined;
         $scope.attrVal = undefined;
         $scope.results = undefined;
-        $scope.doSearch(1);
+        $location.url('/search');
+    }
+
+    $scope.createPermalink = function(page) {
+        var params = {};
+        if ($scope.resType != "") {
+            params.type = $scope.resType;
+        }
+        if ($scope.resID != "") {
+            params.name = $scope.resID;
+        }
+        if ($scope.attrKey != "") {
+            params.key = $scope.attrKey;
+        }
+        if ($scope.attrVal != "") {
+            params.value = $scope.attrVal;
+        }
+        if (page != undefined) {
+            params.page = page;
+        }
+        var query = $.param(params);
+        $location.url('/search?'+query);
     }
 }]);

From 190045182ecd5ae0453f99e97250f592f90e4053 Mon Sep 17 00:00:00 2001
From: Leo Depriester <leo.depriester@camptocamp.com>
Date: Tue, 1 Aug 2017 21:22:43 +0200
Subject: [PATCH 3/4] Remove absolute urls, fix attrVal bug

---
 static/search.html   | 21 ++++++++++-----------
 static/terraboard.js | 44 +++++++++++++-------------------------------
 2 files changed, 23 insertions(+), 42 deletions(-)

diff --git a/static/search.html b/static/search.html
index 480f6822..7789d6d1 100644
--- a/static/search.html
+++ b/static/search.html
@@ -1,20 +1,20 @@
 <div class="row">
-    <div class="col-sm-2">
+    <div class="col-xs-2 col-sm-2 col-md-2">
         <label for="resource_type">Resource Type</label>
     </div>
-    <div class="col-sm-2">
+    <div class="col-xs-2 col-sm-2 col-md-2">
         <label for="resource_id">Resource ID</label>
     </div>
-    <div class="col-sm-2">
+    <div class="col-xs-2 col-sm-2 col-md-2">
         <label for="attribute_key">Attribute Key</label>
     </div>
-    <div class="col-sm-2">
+    <div class="col-xs-2 col-sm-2 col-md-2">
         <label for="attribute_value">Attribute Value</label>
     </div>
 </div>
 <div class="row">
-    <form class="form-inline" role="form">
-        <div class="form-group col-sm-2">
+    <form class="form-inline" ng-submit="doSearch()" role="form">
+        <div class="form-group col-xs-2 col-sm-2 col-md-2">
             <ui-select id="resource_type"
                        ng-model="$parent.resType"
                        theme="bootstrap"
@@ -29,7 +29,7 @@
                 </ui-select-choices>
             </ui-select>
         </div>
-        <div class="form-group col-sm-2">
+        <div class="form-group col-xs-2 col-sm-2 col-md-2">
             <ui-select id="resource_id"
                        ng-model="$parent.resID"
                        theme="bootstrap"
@@ -44,7 +44,7 @@
                 </ui-select-choices>
             </ui-select>
         </div>
-        <div class="form-group col-sm-2">
+        <div class="form-group col-xs-2 col-sm-2 col-md-2">
             <ui-select id="attribute_key"
                        ng-model="$parent.attrKey"
                        theme="bootstrap"
@@ -62,10 +62,9 @@
                 </ui-select-choices>
             </ui-select>
         </div>
-        <div class="form-group col-sm-2">
-            <input id="attribute_value" type="text" class="form-control" placeholder="Attribute Value" ng-model="$parent.attrVal" ng-change="doSearch()" />
+        <div class="form-group col-xs-2 col-sm-2 col-md-2">
+            <input id="attribute_value" type="text" class="form-control" ng-value="attrVal" placeholder="Attribute Value" ng-model="$parent.attrVal" ng-change="doSearch()" />
         </div>
-        <button class="btn btn-primary" type="submit" ng-click="createPermalink()">Permalink</button>
         <button class="clear btn btn-warning" ng-click="clearForm()">Reset</button>
     </form>
 </div>
diff --git a/static/terraboard.js b/static/terraboard.js
index 50576eaf..d2048fdf 100644
--- a/static/terraboard.js
+++ b/static/terraboard.js
@@ -9,7 +9,8 @@ var app = angular.module("terraboard", ['ngRoute', 'ngSanitize', 'ui.select', 'c
         controller: "tbStateCtrl"
     }).when("/search", {
         templateUrl: "static/search.html",
-        controller: "tbSearchCtrl"
+        controller: "tbSearchCtrl",
+        reloadOnSearch: false
     }).otherwise({
         redirectTo: "/"
     });
@@ -276,22 +277,24 @@ app.controller("tbSearchCtrl", ['$scope', '$http', '$location', '$routeParams',
 
     $scope.doSearch = function(page) {
         var params = {};
-        if ($scope.resType != "") {
+        if ($scope.resType != undefined) {
             params.type = $scope.resType;
         }
-        if ($scope.resID != "") {
+        if ($scope.resID != undefined) {
             params.name = $scope.resID;
         }
-        if ($scope.attrKey != "") {
+        if ($scope.attrKey != undefined) {
             params.key = $scope.attrKey;
         }
-        if ($scope.attrVal != "") {
+        if ($scope.attrVal != undefined) {
             params.value = $scope.attrVal;
         }
         if (page != undefined) {
             params.page = page;
         }
         var query = $.param(params);
+        console.log(params);
+        $location.path($location.path()).search(params);
         $http.get('api/search/attribute?'+query).then(function(response){
             $scope.results = response.data;
             $scope.pages = Math.ceil($scope.results.total / $scope.itemsPerPage);
@@ -304,16 +307,16 @@ app.controller("tbSearchCtrl", ['$scope', '$http', '$location', '$routeParams',
     }
 
     // On page load
-    if ($location.search().type != "") {
+    if ($location.search().type != undefined) {
         $scope.resType = $location.search().type;
     }
-    if ($location.search().name != "") {
+    if ($location.search().name != undefined) {
         $scope.resID = $location.search().name;
     }
-    if ($location.search().key != "") {
+    if ($location.search().key != undefined) {
         $scope.attrKey = $location.search().key;
     }
-    if ($location.search().val != "") {
+    if ($location.search().value != undefined) {
         $scope.attrVal = $location.search().value;
     }
     $scope.doSearch(1);
@@ -324,27 +327,6 @@ app.controller("tbSearchCtrl", ['$scope', '$http', '$location', '$routeParams',
         $scope.attrKey = undefined;
         $scope.attrVal = undefined;
         $scope.results = undefined;
-        $location.url('/search');
-    }
-
-    $scope.createPermalink = function(page) {
-        var params = {};
-        if ($scope.resType != "") {
-            params.type = $scope.resType;
-        }
-        if ($scope.resID != "") {
-            params.name = $scope.resID;
-        }
-        if ($scope.attrKey != "") {
-            params.key = $scope.attrKey;
-        }
-        if ($scope.attrVal != "") {
-            params.value = $scope.attrVal;
-        }
-        if (page != undefined) {
-            params.page = page;
-        }
-        var query = $.param(params);
-        $location.url('/search?'+query);
+        $location.url($location.path());
     }
 }]);

From 85f2e57a820aeb0aa0bcb0a9d9eaf2413568f10d Mon Sep 17 00:00:00 2001
From: Leo Depriester <leo.depriester@camptocamp.com>
Date: Wed, 2 Aug 2017 07:36:14 +0200
Subject: [PATCH 4/4] Fix attrVal bug

---
 static/search.html   | 4 ++--
 static/terraboard.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/static/search.html b/static/search.html
index 7789d6d1..6b8b8cf1 100644
--- a/static/search.html
+++ b/static/search.html
@@ -13,7 +13,7 @@
     </div>
 </div>
 <div class="row">
-    <form class="form-inline" ng-submit="doSearch()" role="form">
+    <form class="form-inline" role="form">
         <div class="form-group col-xs-2 col-sm-2 col-md-2">
             <ui-select id="resource_type"
                        ng-model="$parent.resType"
@@ -63,7 +63,7 @@
             </ui-select>
         </div>
         <div class="form-group col-xs-2 col-sm-2 col-md-2">
-            <input id="attribute_value" type="text" class="form-control" ng-value="attrVal" placeholder="Attribute Value" ng-model="$parent.attrVal" ng-change="doSearch()" />
+            <input id="attribute_value" type="text" class="form-control" placeholder="Attribute Value" ng-model="attrVal" ng-change="doSearch()" />
         </div>
         <button class="clear btn btn-warning" ng-click="clearForm()">Reset</button>
     </form>
diff --git a/static/terraboard.js b/static/terraboard.js
index d2048fdf..417e5a42 100644
--- a/static/terraboard.js
+++ b/static/terraboard.js
@@ -293,7 +293,6 @@ app.controller("tbSearchCtrl", ['$scope', '$http', '$location', '$routeParams',
             params.page = page;
         }
         var query = $.param(params);
-        console.log(params);
         $location.path($location.path()).search(params);
         $http.get('api/search/attribute?'+query).then(function(response){
             $scope.results = response.data;
@@ -319,6 +318,7 @@ app.controller("tbSearchCtrl", ['$scope', '$http', '$location', '$routeParams',
     if ($location.search().value != undefined) {
         $scope.attrVal = $location.search().value;
     }
+
     $scope.doSearch(1);
 
     $scope.clearForm = function() {