From 0ad9f71f2a897395ec5f45d6516e30778747e7d8 Mon Sep 17 00:00:00 2001
From: ayxan <ayxan.shahsuvarov1@gmail.com>
Date: Tue, 20 Dec 2022 17:15:43 +0400
Subject: [PATCH] Added filter with radio buttons

---
 src/series/templates/homepage.html | 34 +++++++++++++++++-------------
 src/series/views/homepage.py       | 17 ++++++++++++---
 src/static/css/homepage.css        |  6 ++----
 3 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/src/series/templates/homepage.html b/src/series/templates/homepage.html
index a03f454..f662c96 100644
--- a/src/series/templates/homepage.html
+++ b/src/series/templates/homepage.html
@@ -9,8 +9,17 @@
 <link rel="stylesheet" href="{% static 'css/homepage.css' %}">
 
 <form action="{% url 'homepage' %}" class="form-inline my-2 mb-3 search-form">
-    <input name="search" type="text" class="form-control" placeholder="Search">
-    <button class="btn btn-outline-success my-2 my-sm-0 ml-2" type="submit">Search</button>
+    <div style="display: flex;">
+        <input name="search" type="text" class="form-control search-input" placeholder="Search">
+        <button class="btn btn-outline-success my-2 my-sm-0 ml-2" type="submit">Search</button>
+    </div>
+    <br>
+    <input id="all" name="type" type="radio" checked>
+    <label for="all" style="margin-right: 1.5rem;">All</label>
+    <input id="watched" name="type" type="radio" value="watched">
+    <label for="watched" style="margin-right: 1.5rem;">Watched</label>
+    <input id="unwatched" name="type" type="radio" value="unwatched">
+    <label for="unwatched">Unwatched</label>
 </form>
 
 <table class="table">
@@ -62,29 +71,24 @@
         {% endfor %}
     </tbody>
 </table>
-
-<div style="margin-bottom: 8.5rem;">
+<div style="margin-bottom: 11rem;">
     <div class="btn-new-episode">
         <button type="button" class="btn btn-outline-primary">
-            <a href="/" style="text-decoration: none; color: inherit;">All</a>
-        </button>
-        <button type="button" class="btn btn-outline-primary" style="margin-left: 4px;">
-            <a href="?new=true" style="text-decoration: none; color: inherit;">Unwatched</a>
-        </button> <br>
-        <button type="button" class="btn btn-outline-primary" style="margin-top: 4.7%; margin-bottom: 77%;">
-            <a href="/series/new-episodes/" style="text-decoration: none; color: inherit;">Update</a>
+            <a href="/series/new-episodes/" style="text-decoration: none; color: inherit;">Update All</a>
         </button>
     </div>
 
+    {{view}}
+
     <div class="pages">
         <nav aria-label="Page navigation example">
             <ul class="pagination justify-content-end">
                 {% if series.has_previous %}
                     <li class="page-item">
-                        <a class="page-link" href="?page=1"><<</a>
+                        <a class="page-link" href="?page=1&{{kwargs}}"><<</a>
                     </li>
                     <li class="page-item">
-                        <a class="page-link" href="?page={{series.previous_page_number}}"><</a>
+                        <a class="page-link" href="?page={{series.previous_page_number}}&{{kwargs}}"><</a>
                     </li>
                 {% endif %}
 
@@ -94,10 +98,10 @@
 
                 {% if series.has_next %}
                     <li class="page-item">
-                        <a class="page-link" href="?page={{series.next_page_number}}">></a>
+                        <a class="page-link" href="?page={{series.next_page_number}}&{{kwargs}}">></a>
                     </li>
                     <li class="page-item">
-                        <a class="page-link" href="?page={{series.paginator.num_pages}}">>></a>
+                        <a class="page-link" href="?page={{series.paginator.num_pages}}&{{kwargs}}">>></a>
                     </li>
                 {% endif %}
             </ul>
diff --git a/src/series/views/homepage.py b/src/series/views/homepage.py
index e239bd0..b0669a5 100644
--- a/src/series/views/homepage.py
+++ b/src/series/views/homepage.py
@@ -9,17 +9,28 @@ from django.db.models import Q
 def homepage_view(request):
     user = User.objects.get(id=request.user.id)
 
-    if request.GET.get('new') == 'true':
+    type_ = request.GET.get('type')
+    if type_ == 'unwatched':
         series = user.series.filter(~Q(new_episodes_count=0)).order_by('-id')
 
+    elif type_ == 'watched':
+        series = user.series.filter(new_episodes_count=0).order_by('-id')
+
     else: series = user.series.filter().order_by('-id')
 
-    if search := request.GET.get('search'):
+    search = request.GET.get('search', 'None')
+    if search != 'None':
         series = series.filter(
             Q(title__icontains=search)
         )
 
+    def kwargs():
+        queries = request.GET.copy()
+        queries.pop('page', 0)
+        return queries.urlencode()
+
     page = request.GET.get('page')
     paginator = Paginator(series, 5)
 
-    return render(request, 'homepage.html', context={'series': paginator.get_page(page)})
\ No newline at end of file
+    return render(request, 'homepage.html', context={'series': paginator.get_page(page),
+                                                    'kwargs': kwargs()})
\ No newline at end of file
diff --git a/src/static/css/homepage.css b/src/static/css/homepage.css
index 83a0e1a..5472569 100644
--- a/src/static/css/homepage.css
+++ b/src/static/css/homepage.css
@@ -12,10 +12,9 @@
 
 .search-form {
     width: 370px;
-    display: flex;
 }
 
-.search-form input {
+.search-form .search-input {
     margin-right: 1rem;
 }
 
@@ -36,10 +35,9 @@
 
     .search-form {
         width: 330px;
-        display: flex;
     }
 
-    .search-form input {
+    .search-form .search-input {
         margin-top: 4px;
         height: 45px;
         margin-right: 1rem;