Add REST api to website and add search functionality to users

shimatta_kenkyusho/api/views.py

@@ -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):
     """

shimatta_kenkyusho/static/js/csrf-token.js

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

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

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

shimatta_kenkyusho/templates/base.html

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