Add autocompletion for add storage modal for user

This commit is contained in:
Mario Hüttel 2021-10-29 21:18:20 +02:00
parent 0d288e0d14
commit f4113d71d8
7 changed files with 96 additions and 10 deletions

View File

@ -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);
};
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

@ -1,3 +1,4 @@
{% load static %}
<div class="modal fade" id="add-sub-modal"> <div class="modal fade" id="add-sub-modal">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">
@ -18,8 +19,10 @@
</div> </div>
</div> </div>
<label for="{{form.responsible.id_for_label}}">Responsible</label> <label for="{{form.responsible.id_for_label}}">Responsible</label>
<div class="input-group has-validation"> <div class="input-group has-validation dropdown">
<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> <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"> <div id="validationServerUsernameFeedback" class="invalid-feedback">
{% for msg in form.responsible.errors %} {% for msg in form.responsible.errors %}
{{msg}} {{msg}}

View File

@ -1,5 +1,6 @@
{% extends 'base.html' %} {% extends 'base.html' %}
{% load qr_code %} {% load qr_code %}
{% load static %}
{% block content %} {% block content %}
<div class="container"> <div class="container">
<nav aria-label="breadcrumb" class="fs-4"> <nav aria-label="breadcrumb" class="fs-4">
@ -53,19 +54,32 @@
{% endblock content %} {% endblock content %}
{% block custom_scripts %} {% block custom_scripts %}
{% if add_storage_form.errors %}
<script type="text/javascript"> <script type="text/javascript">
{% if add_storage_form.errors %}
var addSubStorageModal = document.querySelector('#add-sub-modal'); var addSubStorageModal = document.querySelector('#add-sub-modal');
var c_modal = bootstrap.Modal.getOrCreateInstance(addSubStorageModal); var c_modal = bootstrap.Modal.getOrCreateInstance(addSubStorageModal);
c_modal.show(); c_modal.show();
</script>
{% endif %} {% endif %}
{% if delete_storage_errors %} {% if delete_storage_errors %}
<script type="text/javascript">
var deleteStorageModal = document.querySelector('#delete-storage-modal'); var deleteStorageModal = document.querySelector('#delete-storage-modal');
var d_modal = bootstrap.Modal.getOrCreateInstance(deleteStorageModal); var d_modal = bootstrap.Modal.getOrCreateInstance(deleteStorageModal);
d_modal.show(); d_modal.show();
</script
{% endif %} {% 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 %} {% endblock custom_scripts %}

View File

@ -61,12 +61,25 @@
{% endblock content %} {% endblock content %}
{% block custom_scripts %} {% block custom_scripts %}
{% if add_storage_form.errors %}
<script type="text/javascript"> <script type="text/javascript">
{% if add_storage_form.errors %}
var addSubStorageModal = document.querySelector('#add-sub-modal'); var addSubStorageModal = document.querySelector('#add-sub-modal');
var modal = bootstrap.Modal.getOrCreateInstance(addSubStorageModal); var modal = bootstrap.Modal.getOrCreateInstance(addSubStorageModal);
modal.show(); modal.show();
</script>
{% endif %} {% 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 %} {% endblock custom_scripts %}