added search functionality

Author: Koushikphy

api/views.py

@@ -18,7 +18,7 @@
 from datetime import datetime
 from django.utils.timezone import now
 from django.utils import timezone
-
+from rest_framework import filters
 
 
 class ToDoViewSets(viewsets.ModelViewSet):
@@ -27,7 +27,8 @@ class ToDoViewSets(viewsets.ModelViewSet):
     serializer_class = ToDoSerializer
     parser_classes = (MultiPartParser, FormParser, JSONParser)
     authentication_classes = [SessionAuthentication, BasicAuthentication]
-
+    search_fields= ['title','desc']
+    filter_backends = (filters.SearchFilter,)
 
     def get_queryset(self):
         return ToDos.objects.filter(user=self.request.user)

templates/index.html

@@ -120,6 +120,10 @@ <h3 class="bg-success text-capitalize"> Hi There, {{user}}</h3>
                 <button type="submit" class="btn btn-primary" onclick="submitToDo(event)">Add New</button>
             </div>
         </form>
+        <div class="text-center card py-2">
+            <label for="searchinput" class="mr-4">Search ToDo</label>
+            <input type="text" name="seach" id="searchinput" oninput="searchThis(event)">
+        </div>
         <div id="todoArea" class="list-group"></div>
     </div>
     </div>
@@ -134,6 +138,12 @@ <h3 class="bg-success text-capitalize"> Hi There, {{user}}</h3>
         var todoList;
 
 
+        function searchThis(event){
+            event.preventDefault()
+            createToDoList(event.target.value)
+        }
+
+
         // cokie validation
         function getCookie(name) { // copied from django doc
             if (!document.cookie) {
@@ -176,7 +186,7 @@ <h3 class="bg-success text-capitalize"> Hi There, {{user}}</h3>
         function submitToDo(e) {
             e.preventDefault()
             var dat = new FormData($('form')[0])
-            console.log('----------------------', Object.fromEntries(new FormData($('form')[0])))
+            // console.log('----------------------', Object.fromEntries(new FormData($('form')[0])))
 
 
             fetch(url, {
@@ -187,7 +197,7 @@ <h3 class="bg-success text-capitalize"> Hi There, {{user}}</h3>
                 body: dat
             }
             ).then(function (res) {
-                console.log(res)
+                // console.log(res)
                 if (res.status == 201) {
                     createToDoList()
                     $('form')[0].reset();
@@ -200,18 +210,19 @@ <h3 class="bg-success text-capitalize"> Hi There, {{user}}</h3>
 
 
         // GET request, list all todos
-        function createToDoList() {
-            fetch(url).then(res => res.json()).then(function (data) {
+        function createToDoList(searchparams) {
+            let slug = searchparams!=undefined ? `?search=${searchparams}` : ''
+            fetch(url+slug).then(res => res.json()).then(function (data) {
                 var txt = ''
                 todoList = []
-                console.log(data)
+                // console.log(data)
 
 
                 for (let item of data) {
                     let due = item.duedate ? `<label class="duedate">Due in ${dtParser(item.duedate)}</label>` : ''
                     let date = item.completed ? `<label class="completedate">${dtParser(item.datecompleted)}</label>` :due
 
-                    console.log(item.completed)
+                    // console.log(item.completed)
                     txt += `<div class='list-group-item todoitem ${item.completed ? "checked" : ""}'>
                             <div class="inforow">
                                 <div class="check-container">
@@ -279,7 +290,7 @@ <h3 class="bg-success text-capitalize"> Hi There, {{user}}</h3>
                 method: 'DELETE',
                 headers: headers,
             }).then(function (response) {
-                console.log(response)
+                // console.log(response)
                 if (response.status == 204) {
                     createToDoList()
                 }