feat: search and ordering books table

books/templates/book.html

 {% extends "layout.html" %} {% block dashboard %}
 <div style="max-width: 80vw" class="w-100 p-4">
-  <div class="d-flex flex-column gap-2 mb-4">
+  {% include "book_create_form.html" %}
+  <div class="d-flex gap-2 pb-4">
+    {% include "order_form.html" %}
     <button
       type="button"
       class="btn btn-primary"
@@ -9,7 +11,7 @@
     >
       <i class="bi bi-plus-circle"></i> Add Book
     </button>
-    {% include "book_create_form.html" %}
+    {% include "search_form.html" %}
   </div>
   {% include "book_table_data.html" %} {% include "book_delete_form.html" %}
 </div>

books/views.py

 from django.shortcuts import get_object_or_404, render
 from django.http import HttpResponseRedirect
 from datetime import datetime
+from django.db.models import Q
 
 from books.models import Book
 from books.forms import BookForm
 
 
 def index(request):
-    latest_book_list = Book.objects.order_by("created_at")[:10]
-    context = {"books": latest_book_list, "form": BookForm()}
+    context = {"form": BookForm()}
+    latest_book_list = Book.objects.order_by("-created_at")[:10]
+    context["books"] = latest_book_list
 
     if request.method == "POST":
         form = BookForm(request.POST)
@@ -19,6 +21,21 @@ def index(request):
 
             Book.objects.create(title=title, stock=stock, description=description)
 
+    if request.method == "GET":
+        query = request.GET.get("q")
+        order = request.GET.get("o")
+
+        if query is not None:
+            filtered_book_list = Book.objects.filter(
+                Q(title__icontains=query) | Q(description__icontains=query)
+            ).order_by("-created_at")[:10]
+            context["books"] = filtered_book_list
+
+        if order == "new":
+            context["books"] = Book.objects.all().order_by("-updated_at")[:10]
+        elif order == "old":
+            context["books"] = Book.objects.all().order_by("updated_at")[:10]
+
     return render(request, "book.html", context)
 
 

dashboards/templates/order_form.html

+<div class="dropdown">
+  <button
+    type="button"
+    class="btn btn-secondary dropdown-toggle"
+    data-bs-toggle="dropdown"
+    aria-expanded="false"
+  >
+    <i class="bi bi-arrow-down-up"></i> Order By
+  </button>
+  <ul class="dropdown-menu shadow">
+    <li>
+      <form action="" method="get" class="d-flex gap-2">
+        <input name="o" value="new" hidden />
+        <button type="submit" class="dropdown-item" href="#">Newest</button>
+      </form>
+    </li>
+    <li>
+      <form action="" method="get" class="d-flex gap-2">
+        <input name="o" value="old" hidden />
+        <button type="submit" class="dropdown-item" href="#">Oldest</button>
+      </form>
+    </li>
+  </ul>
+</div>

dashboards/templates/search_form.html

+<form action="" method="get" class="d-flex gap-2">
+  <input class="form-control" name="q" type="text" placeholder="Search..." />
+  <button type="submit" class="btn btn-primary">Enter</button>
+</form>