Add REST api to website and add search functionality to users

This commit is contained in:
Mario Hüttel 2021-10-26 19:56:20 +02:00
parent 1d86851e79
commit 0d288e0d14
4 changed files with 63 additions and 1 deletions

View File

@ -16,6 +16,7 @@ from rest_framework.authtoken.views import ObtainAuthToken
from rest_framework.authtoken.models import Token
from rest_framework.throttling import AnonRateThrottle
from rest_framework.decorators import action
from rest_framework import filters
# Create your views here.
class UserViewSet(viewsets.ReadOnlyModelViewSet):
@ -25,6 +26,8 @@ class UserViewSet(viewsets.ReadOnlyModelViewSet):
queryset = User.objects.all()
serializer_class = UserSerializer
permission_classes = [permissions.IsAuthenticated]
filter_backends = [filters.SearchFilter]
search_fields = ['username', 'first_name', 'last_name', 'email']
class GroupViewSet(viewsets.ReadOnlyModelViewSet):
"""

View File

@ -0,0 +1,16 @@
function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
const csrftoken = getCookie('csrftoken');

View File

@ -0,0 +1,30 @@
function api_ajax_request(method, url, onSuccess, onFail, sendData) {
var xmlhttp = new XMLHttpRequest();
// csrftoken is set globally
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
//console.log("Success:"+xmlhttp.responseText);
onSuccess(method, url, JSON.parse(xmlhttp.responseText));
} else {
onFail(method, url, xmlhttp.status, xmlhttp.responseText);
}
}
}
xmlhttp.open(method, url);
xmlhttp.setRequestHeader('X-CSRFToken', csrftoken);
if (sendData === null || typeof sendData === 'undefined') {
xmlhttp.send();
} else {
xmlhttp.send(JSON.stringify(sendData));
}
}
function api_ajax_request_without_send(method, url, onSuccess, onFail) {
return api_ajax_request(method, url, onSuccess, onFail, null);
}
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);
}

View File

@ -54,7 +54,20 @@
{% endblock content %}
<script type="text/javascript" src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/autocomplete.min.js' %}"></script>
<!--<script type="text/javascript" src="{% static 'js/autocomplete.min.js' %}"></script>-->
<script type="text/javascript" src="{% static 'js/csrf-token.js' %}"></script>
<script type="text/javascript">
const api_urls_v1 = {
'user-list': '{% url 'user-list' %}',
'groups-list': '{% url 'user-list' %}',
'storage-list': '{% url 'storage-list' %}',
'component-list': '{% url 'component-list' %}',
'package-list': '{% url 'package-list' %}',
'stock-list': '{% url 'stock-list' %}',
'distributor-list': '{% url 'distributor-list' %}',
};
</script>
<script type="text/javascript" src="{% static 'js/kenyusho-api-v1.js' %}"></script>
{% block custom_scripts %}
{% endblock custom_scripts %}