Add autocompletion for add storage modal for user

shimatta_kenkyusho/static/js/autocomplete.js

@@ -0,0 +1,57 @@
+const autocomplete_query_delay_ms = 60;
+
+class AutocompleteText {
+    constructor(text_id, dropdown_id, query_function)
+    {
+        this.text_id = text_id;
+        this.dropdown_id = dropdown_id;
+        this.query_callback = query_function.bind(this);
+    
+        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));
+    
+    }
+
+    show_results(results) {
+        var ul = document.getElementById(this.dropdown_id);
+        ul.innerHTML = '';
+        for (var i = 0; i < results.length; i++) {
+            var node = document.createElement('li');
+            node.setAttribute('class', 'dropdown-item');
+            node.appendChild(document.createTextNode(results[i]));
+            ul.appendChild(node);
+            node.addEventListener('click', 
+            (e) => {
+                var element = e.target;
+                var text_box = document.getElementById(this.text_id);
+                text_box.value = element.innerHTML;
+                var dropdown = bootstrap.Dropdown.getOrCreateInstance(text_box);
+                dropdown.hide();
+            }
+            );
+        }
+        if (results.length == 0) {
+            var node = document.createElement('li');
+            node.setAttribute('class', 'dropdown-item text-danger');
+            node.appendChild(document.createTextNode('No results'));
+            ul.appendChild(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);
+        };
+    }
+
+
+}

shimatta_kenkyusho/templates/base.html

@@ -68,6 +68,7 @@
         };
         </script>
         <script type="text/javascript" src="{% static 'js/kenyusho-api-v1.js' %}"></script>
+        <script type="text/javascript" src="{% static 'js/autocomplete.js' %}"></script>
         {% block custom_scripts %}
         {% endblock custom_scripts %}
 

shimatta_kenkyusho/templates/parts/modals/new-substorage-modal.html

@@ -1,3 +1,4 @@
+{% load static %}
 <div class="modal fade" id="add-sub-modal">
     <div class="modal-dialog">
         <div class="modal-content">
@@ -18,8 +19,10 @@
                         </div>
                     </div>
                     <label for="{{form.responsible.id_for_label}}">Responsible</label>
-                    <div class="input-group has-validation">
-                        <span class="input-group-text" id="add_storage_username_prepend">@</span><input type="text" value="{{form.responsible.value}}" class="form-control{% if form.responsible.errors or form.non_field_errors %} is-invalid{% endif %}" id="{{form.responsible.id_for_label}}" name="{{form.responsible.name}}" aria-describedby="add_storage_username_prepend validationServerUsernameFeedback" required>
+                    <div class="input-group has-validation dropdown">
+                        <span class="input-group-text" id="add_storage_username_prepend">@</span><input autocomplete="off" data-bs-toggle="dropdown" type="text" value="{{form.responsible.value}}" class="form-control{% if form.responsible.errors or form.non_field_errors %} is-invalid{% endif %}" id="{{form.responsible.id_for_label}}" name="{{form.responsible.name}}" aria-describedby="add_storage_username_prepend validationServerUsernameFeedback" required>
+                        <ul class="dropdown-menu" aria-labelledby="{{form.responsible.id_for_label}}" id="{{form.responsible.id_for_label}}-ac-dropdown">
+                        </ul>
                         <div id="validationServerUsernameFeedback" class="invalid-feedback">
                             {% for msg in form.responsible.errors %}
                                 {{msg}}

shimatta_kenkyusho/templates/parts/stocks-detail.html

@@ -1,5 +1,6 @@
 {% extends 'base.html' %}
 {% load qr_code %}
+{% load static %}
 {% block content %}
 <div class="container">
     <nav aria-label="breadcrumb" class="fs-4">
@@ -53,19 +54,32 @@
 {% endblock content %}
 
 {% block custom_scripts %}
-{% if add_storage_form.errors %}
 <script type="text/javascript">
+{% if add_storage_form.errors %}
+
     var addSubStorageModal = document.querySelector('#add-sub-modal');
     var c_modal = bootstrap.Modal.getOrCreateInstance(addSubStorageModal);
     c_modal.show();
-</script>
 {% endif %}
 {% if delete_storage_errors %}
-<script type="text/javascript">
     var deleteStorageModal = document.querySelector('#delete-storage-modal');
     var d_modal = bootstrap.Modal.getOrCreateInstance(deleteStorageModal);
     d_modal.show();
-</script
 {% endif %}
+
+new AutocompleteText('{{add_storage_form.responsible.id_for_label}}', '{{add_storage_form.responsible.id_for_label}}-ac-dropdown', 
+function(search, autocomplete_obj) {
+    api_search_user(search, function(results) {
+        var usernames = new Array();
+        console.log(results);
+        for (var i = 0; i < results.results.length; i++) {
+            usernames.push(results.results[i].username);
+        }
+        console.log(usernames);
+        autocomplete_obj.show_results(usernames);
+    }, function(){});
+});
+</script>
+
 {% endblock custom_scripts %}
 

shimatta_kenkyusho/templates/parts/stocks.html

@@ -61,12 +61,25 @@
 {% endblock content %}
 
 {% block custom_scripts %}
-{% if add_storage_form.errors %}
 <script type="text/javascript">
+    {% if add_storage_form.errors %}
     var addSubStorageModal = document.querySelector('#add-sub-modal');
     var modal = bootstrap.Modal.getOrCreateInstance(addSubStorageModal);
     modal.show();
+    {% endif %}
+    new AutocompleteText('{{add_storage_form.responsible.id_for_label}}', '{{add_storage_form.responsible.id_for_label}}-ac-dropdown', 
+    function(search, autocomplete_obj) {
+        api_search_user(search, function(results) {
+            var usernames = new Array();
+            console.log(results);
+            for (var i = 0; i < results.results.length; i++) {
+                usernames.push(results.results[i].username);
+            }
+            console.log(usernames);
+            autocomplete_obj.show_results(usernames);
+        }, function(){});
+    });
+
 </script>
-{% endif %}
 {% endblock custom_scripts %}