X-Git-Url: https://gerrit.opnfv.org/gerrit/gitweb?a=blobdiff_plain;f=dashboard%2Fsrc%2Ftemplates%2Fdashboard%2Fsearchable_select_multiple.html;h=91ed09cc41955a02a5ad68a1658c19c1b9b82a4d;hb=6120aa3d50e645d536a27abd4da1f69c204d7e7a;hp=69394ab68c36284574a64bbf0b79df6440bd3762;hpb=f8c129df82adb3ffcbd51ebd42a3152196db38d6;p=pharos-tools.git

diff --git a/dashboard/src/templates/dashboard/searchable_select_multiple.html b/dashboard/src/templates/dashboard/searchable_select_multiple.html
index 69394ab..91ed09c 100644
--- a/dashboard/src/templates/dashboard/searchable_select_multiple.html
+++ b/dashboard/src/templates/dashboard/searchable_select_multiple.html
@@ -1,12 +1,21 @@
 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
 
-<div class="autocomplete" style="width:400px;">
+<div id="search_select_outer" class="autocomplete">
     <div id="warning_pane" style="background: #FFFFFF; color: #CC0000;">
         {% if incompatible == "true" %}
         <h3>Warning: Incompatible Configuration</h3>
         <p>Please make a different selection, as the current config conflicts with the selected pod</p>
         {% endif %}
     </div>
+    <div id="added_counter">
+        <p id="added_number">0</p>
+        <p id="addable_limit">/ {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} &infin; {% endif %}added</p>
+    </div>
+
+    <div id="added_list">
+
+    </div>
+
     <input id="user_field" name="ignore_this" class="form-control" autocomplete="off" type="text" placeholder="{{placeholder}}" value="" oninput="search(this.value)"
     {% if disabled %} disabled {% endif %}
     >
@@ -17,18 +26,32 @@
     >
     </input>
 
-    <ul id="drop_results"></ul>
-
-    <div id="added_list">
-
+    <div id="scroll_restrictor">
+        <ul id="drop_results"></ul>
     </div>
-    <div id="added_counter" style="text-align: center; margin: 10px;"><p id="added_number" style="display: inline;">0</p><p style="display: inline;">/
-        {% if selectable_limit > -1 %} {{ selectable_limit }} {% else %} &infin; {% endif %}added</p></div>
     <style>
+        #scroll_restrictor {
+            flex: 1;
+            position: relative;
+            overflow-y: auto;
+            padding-bottom: 10px;
+        }
+
+        #added_list {
+            margin-bottom: 5px;
+        }
+
+        .autocomplete {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+        }
         #user_field {
             font-size: 14pt;
-            width: 400px;
             padding: 5px;
+            height: 40px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
 
         }
 
@@ -36,54 +59,104 @@
             list-style-type: none;
             padding: 0;
             margin: 0;
-            max-height: 300px;
             min-height: 0;
-            overflow-y: scroll;
-            overflow-x: hidden;
             border: solid 1px #ddd;
-            display: none;
+            border-top: none;
+            border-bottom: none;
+            visibility: inherit;
+            flex: 1;
+
+            position: absolute;
+            width: 100%;
 
         }
 
         #drop_results li a{
             font-size: 14pt;
-            border: 1px solid #ddd;
             background-color: #f6f6f6;
-            padding: 12px;
+            padding: 7px;
             text-decoration: none;
             display: block;
-            width: 400px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
 
-        .btn-remove {
-            float: right;
-            height: 30px;
-            margin: 4px;
+        #drop_results li a {
+            border-bottom: 1px solid #ddd;
         }
 
         .list_entry {
-            width: 400px;
-            border: 1px solid #ddd;
-            border-radius: 3px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
             margin-top: 5px;
             vertical-align: middle;
             line-height: 40px;
             height: 40px;
             padding-left: 12px;
+            width: 100%;
+            display: flex;
         }
 
         #drop_results li a:hover{
             background-color: #ffffff;
         }
 
-        .small_name {
-            display: inline-block;
+        .added_entry_text {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline;
+            width: 100%;
         }
 
-        .full_name {
+        .btn-remove {
+            float: right;
+            height: 30px;
+            margin: 4px;
+            padding: 1px;
+            max-width: 20%;
+            width: 15%;
+            min-width: 70px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .entry_tooltip {
+            display: none;
+        }
+
+        #drop_results li a:hover .entry_tooltip {
+            position: absolute;
+            background: #444;
+            color: #ddd;
+            text-align: center;
+            font-size: 12pt;
+            border-radius: 3px;
+
+        }
+
+        #drop_results {
+            max-width: 100%;
             display: inline-block;
+            list-style-type: none;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        #drop_results li {
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
+        #added_counter {
+            text-align: center;
+        }
+
+        #added_number, #addable_limit {
+            display: inline;
+        }
     </style>
 </div>
 
@@ -197,7 +270,11 @@
             if( str.length == 1 )
             {
                 new_trie.isComplete = true;
-                new_trie.itemID = id;
+                if( !new_trie.ids )
+                {
+                    new_trie.ids = [];
+                }
+                new_trie.ids.push(id);
             }
             inner_trie = new_trie;
             str = str.substring(1);
@@ -271,7 +348,7 @@
         }
         if ( trie.isComplete )
         {
-            itemIDs.push( trie.itemID );
+            itemIDs.push(...trie.ids);
         }
 
         return itemIDs;
@@ -295,6 +372,14 @@
         return results;
     }
 
+    function generate_element_text(obj)
+    {
+        var content_strings = [obj['expanded_name'], obj['small_name'], obj['string']].filter(x => Boolean(x));
+        var result = content_strings.shift();
+        if( result == null || content_strings.length < 1) return result;
+        return result + " (" + content_strings.join(", ") + ")";
+    }
+
     function dropdown(ids)
     {
         /*
@@ -312,20 +397,27 @@
             var result_entry = document.createElement("li");
             var result_button = document.createElement("a");
             var obj = items[id];
-            var result_text = document.createTextNode(obj['small_name'] + " : " + obj['expanded_name']);
-            result_button.appendChild(result_text);
+            var result_text = generate_element_text(obj);
+            result_button.appendChild(document.createTextNode(result_text));
             result_button.setAttribute('onclick', 'select_item("' + obj['id'] + '")');
+            var tooltip = document.createElement("span");
+            var tooltiptext = document.createTextNode(result_text);
+            tooltip.appendChild(tooltiptext);
+            tooltip.setAttribute('class', 'entry_tooltip');
+            result_button.appendChild(tooltip);
             result_entry.appendChild(result_button);
             drop.appendChild(result_entry);
         }
 
+        var scroll_restrictor = document.getElementById("scroll_restrictor");
+
         if( !drop.firstChild )
         {
-            drop.style.display = 'none';
+            scroll_restrictor.style.visibility = 'hidden';
         }
         else
         {
-            drop.style.display = 'inherit';
+            scroll_restrictor.style.visibility = 'inherit';
         }
     }
 
@@ -341,7 +433,10 @@
             }
         }
         update_selected_list();
+        // clear search bar contents
+        document.getElementById("user_field").value = "";
         document.getElementById("user_field").focus();
+        search("");
     }
 
     function remove_item(item_ref)
@@ -377,11 +472,13 @@
             item_id = added_items[key];
             item = items[item_id];
 
-            list_html += '<div class="list_entry"><p class="full_name">'
-                + item["expanded_name"]
-                + '</p><p class="small_name">, '
-                + item["small_name"]
-                + '</p><button onclick="remove_item('
+            var element_entry_text = generate_element_text(item);
+
+            list_html += '<div class="list_entry">'
+                + '<p class="added_entry_text">'
+                + element_entry_text
+                + '</p>'
+                + '<button onclick="remove_item('
                 + Object.values(items).indexOf(item)
                 + ')" class="btn-remove btn">remove</button>';
                 list_html += '</div>';
@@ -389,13 +486,4 @@
 
         added_list.innerHTML = list_html;
     }
-
 </script>
-<style>
-    .full_name {
-        display: inline-block;
-    }
-    .small_name {
-        display: inline-block;
-    }
-</style>