Add autocompletion for add storage modal for user

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

View File

@@ -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 %}

View File

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

View File

@@ -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 %}

View File

@@ -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 %}