Add code for component autocompletion in add-stock-modal

shimatta_kenkyusho/static/js/add-stock-modal.js

@@ -0,0 +1,44 @@
+new AutocompleteCustomUi('add-stock-search', 'add-stock-search-ac-dropdown', 
+function(search, autocomplete_obj) {
+    api_search_component(search, function(results) {
+        components = results.results;
+        var test = [];
+        for (var i = 0; i < components.length; i++) {
+            var c = components[i];
+            var node = document.createElement('div');
+            node.setAttribute('class', 'd-flex align-items-center');
+            var img_container = document.createElement('div');
+            img_container.setAttribute('class', 'flex-shrink-0');
+            var text_container = document.createElement('div');
+            text_container.setAttribute('class', 'flex-grow-1 ms-1');
+            var img = document.createElement('img');
+            var img_path = fallback_img_path;
+            var style = "width:64px;max-height:64px;";
+            if (c.ro_image != null) {
+                img_path = c.ro_image;
+                style = "max-width:64px;max-height:64px;";
+            }
+            img.setAttribute('src',  img_path);
+            img.setAttribute('style', style)
+            img_container.appendChild(img);
+
+            var name_text = document.createTextNode(c.name);
+            var heading = document.createElement('h6');
+            heading.appendChild(name_text);
+            text_container.appendChild(heading);
+            if (c.package_data != null) {
+                text_container.appendChild(document.createTextNode('in '+c.package_data.name));
+            }
+            if (c.ro_manufacturer_name) {
+                text_container.appendChild(document.createTextNode(' by '+c.ro_manufacturer_name));
+            }
+
+            node.appendChild(img_container);
+            node.appendChild(text_container);
+
+            test.push({'ui': node, 'data': c.url})
+        }
+        autocomplete_obj.show_results(test, 
+        function(data) {console.log(data);});
+    }, function(){});
+});

shimatta_kenkyusho/static/js/autocomplete.js

@@ -1,6 +1,6 @@
 const autocomplete_query_delay_ms = 60;
 
-class AutocompleteText {
+class AutocompleteCustomUi {
     constructor(text_id, dropdown_id, query_function)
     {
         this.text_id = text_id;
@@ -10,9 +10,56 @@ class AutocompleteText {
         document.getElementById(text_id).addEventListener("keyup", this.ac_delay(function(event) {
             this.query_callback(document.getElementById(this.text_id).value, this);
         }, autocomplete_query_delay_ms).bind(this));
-    
+
     }
 
+    /**
+     * 
+     * @param {*} nodes_to_add A liust of dictionaries containing the shown objects and the data called when clicked.
+     * 
+     * The list: {{'ui': <nodes>, 'data': 'my_data'}, {}, ...}
+     * 
+     */
+    show_results(nodes_to_add, data_clicked_callback) {
+        var ul = document.getElementById(this.dropdown_id);
+        ul.innerHTML = '';
+        this.select_data = {};
+
+        for (var i = 0; i < nodes_to_add.length; i++) {
+            var ui = nodes_to_add[i]['ui'];
+            var data = nodes_to_add[i]['data']
+            var dropdown_node = document.createElement('li');
+            dropdown_node.dataset.ac_clicked = data;
+            dropdown_node.addEventListener('click',
+            (e) => {
+                data_clicked_callback(e.currentTarget.dataset.ac_clicked);
+                var text_box = document.getElementById(this.text_id);
+                var dropdown = bootstrap.Dropdown.getOrCreateInstance(text_box);
+                dropdown.hide();
+            });
+            
+            dropdown_node.setAttribute('class', 'dropdown-item');
+            dropdown_node.appendChild(ui);
+            ul.appendChild(dropdown_node);
+        }
+
+        var dropdown = bootstrap.Dropdown.getOrCreateInstance(document.getElementById(this.text_id));
+        dropdown.show();
+    }
+
+    ac_delay(callback, ms) {
+        var timer = 0;
+        return function() {
+            var context = this, args = arguments;
+            clearTimeout(timer);
+            timer = setTimeout(function() {
+                callback.apply(context, args);
+            }, ms || 0);
+        };
+    }
+}
+
+class AutocompleteText extends AutocompleteCustomUi {
     show_results(results) {
         var ul = document.getElementById(this.dropdown_id);
         ul.innerHTML = '';
@@ -41,17 +88,4 @@ class AutocompleteText {
         var dropdown = bootstrap.Dropdown.getOrCreateInstance(document.getElementById(this.text_id));
         dropdown.show();
     }
-
-    ac_delay(callback, ms) {
-        var timer = 0;
-        return function() {
-            var context = this, args = arguments;
-            clearTimeout(timer);
-            timer = setTimeout(function() {
-                callback.apply(context, args);
-            }, ms || 0);
-        };
-    }
-
-
 }

shimatta_kenkyusho/static/js/kenyusho-api-v1.js

@@ -27,4 +27,8 @@ function api_ajax_request_without_send(method, url, onSuccess, onFail) {
 
 function api_search_user(search, onSuccess, onFail) {
     return api_ajax_request_without_send('GET', api_urls_v1['user-list']+`?search=${encodeURIComponent(search)}`, function(method, url, json) {onSuccess(json);}, onFail);
+}
+
+function api_search_component(search, onSuccess, onFail) {
+    return api_ajax_request_without_send('GET', api_urls_v1['component-list']+`?search=${encodeURIComponent(search)}`, function(method, url, json) {onSuccess(json);}, onFail);
 }