Refactor selector step logic

Change-Id: I61e361e63da7453b2eee0e0c162a6f4e48460128
Signed-off-by: Sawyer Bergeron <sbergeron@iol.unh.edu>

1 files changed, 29 insertions, 41 deletions

diff --git a/src/templates/dashboard/searchable_select_multiple.html b/src/templates/dashboard/searchable_select_multiple.html
index c08fbe5..69394ab 100644
--- a/src/templates/dashboard/searchable_select_multiple.html
+++ b/src/templates/dashboard/searchable_select_multiple.html
@@ -7,9 +7,10 @@
         <p>Please make a different selection, as the current config conflicts with the selected pod</p>
         {% endif %}
     </div>
-    <input id="user_field" name="ignore_this" class="form-control" autocomplete="off" type="text" placeholder="{{placeholder}}" value="{{initial.name}}" oninput="search(this.value)"
+    <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 %}
     >
+    </input>
 
     <input type="hidden" id="selector" name="{{ name }}" class="form-control" style="display: none;"
     {% if disabled %} disabled {% endif %}
@@ -18,14 +19,6 @@
 
     <ul id="drop_results"></ul>
 
-
-    <div id="default_entry_wrap" style="display: none;">
-        <div class="list_entry unremovable_list_entry">
-            <p id="default_text" class="full_name"></p>
-            <button class="btn-remove btn disabled">remove</button>
-        </div>
-    </div>
-
     <div id="added_list">
 
     </div>
@@ -96,16 +89,32 @@
 
 <script type="text/javascript">
     //flags
-    var show_from_noentry = {{show_from_noentry|default:"false"}};
-    var show_x_results = {{show_x_results|default:-1}};
-    var results_scrollable = {{results_scrollable|default:"false"}};
-    var selectable_limit = {{selectable_limit|default:-1}};
-    var field_name  = "{{name|default:"users"}}";
-    var placeholder = "{{placeholder|default:"begin typing"}}";
-    var default_entry = "{{default_entry}}";
+    var show_from_noentry = {{show_from_noentry|yesno:"true,false"}}; // whether to show any results before user starts typing
+    var show_x_results = {{show_x_results|default:-1}}; // how many results to show at a time, -1 shows all results
+    var results_scrollable = {{results_scrollable|yesno:"true,false"}}; // whether list should be scrollable
+    var selectable_limit = {{selectable_limit|default:-1}}; // how many selections can be made, -1 allows infinitely many
+    var placeholder = "{{placeholder|default:"begin typing"}}"; // placeholder that goes in text box
 
     //needed info
-    var items = {{items|safe}}
+    var items = {{items|safe}} // items to add to trie. Type is a dictionary of dictionaries with structure:
+        /*
+        {
+            id# : {
+                "id": any, identifiable on backend
+                "small_name": string, displayed first (before separator), searchable (use for e.g. username)
+                "expanded_name": string, displayed second (after separator), searchable (use for e.g. email address)
+                "string": string, not displayed, still searchable
+            }
+        }
+        */
+
+    /* used later:
+    {{ selectable_limit }}: changes what number displays for field
+    {{ name }}: form identifiable name, relevant for backend
+        // when submitted, form will contain field data in post with name as the key
+    {{ placeholder }}: "greyed out" contents put into search field initially to guide user as to what they're searching for
+    {{ initial }}: in search_field_init(), marked safe, an array of id's each referring to an id from items
+    */
 
     //tries
     var expanded_name_trie = {}
@@ -116,18 +125,6 @@
     string_trie.isComplete = false;
 
     var added_items = [];
-    var initial_log = {{ initial|safe }};
-
-    var added_template = {{ added_list|default:"{}" }};
-
-    if( default_entry )
-    {
-        var default_entry_div = document.getElementById("default_entry_wrap");
-        default_entry_div.style.display = "inherit";
-
-        var entry_p = document.getElementById("default_text");
-        entry_p.innerText = default_entry;
-    }
 
     search_field_init();
 
@@ -335,7 +332,7 @@
     function select_item(item_id)
     {
         //TODO make faster
-        var item = items[item_id];
+        var item = items[item_id]['id'];
         if( (selectable_limit > -1 && added_items.length < selectable_limit) || selectable_limit < 0 )
         {
             if( added_items.indexOf(item) == -1 )
@@ -357,11 +354,6 @@
         document.getElementById("user_field").focus();
     }
 
-    function edit_item(item_id){
-        var wf_type = "{{wf_type}}";
-        parent.add_edit_wf(wf_type, item_id);
-    }
-
     function update_selected_list()
     {
         document.getElementById("added_number").innerText = added_items.length;
@@ -382,7 +374,8 @@
 
         for( var key in added_items )
         {
-            item = added_items[key];
+            item_id = added_items[key];
+            item = items[item_id];
 
             list_html += '<div class="list_entry"><p class="full_name">'
                 + item["expanded_name"]
@@ -391,11 +384,6 @@
                 + '</p><button onclick="remove_item('
                 + Object.values(items).indexOf(item)
                 + ')" class="btn-remove btn">remove</button>';
-            {% if edit %}
-                list_html += '<button onclick="edit_item('
-                + item['id']
-                + ')" class="btn-remove btn">edit</button>';
-            {% endif %}
                 list_html += '</div>';
         }